Верстаем калькулятор. HTML + CSS. Подробный урок

Поделиться
HTML-код
  • Опубликовано: 26 авг 2024

Комментарии • 133

  • @user-mf8jd5mc9d
    @user-mf8jd5mc9d 2 года назад +6

    Максимум информации без воды! 👍

  • @alexanderalexander7722
    @alexanderalexander7722 2 года назад +10

    Как всегда - супер! Просто и понятно. И с приколами.
    Было бы очень хорошо увидеть как оживляется все без использования eval()
    С нетерпением ждем новые видео!

  • @meowmeowmeowmeow000
    @meowmeowmeowmeow000 5 месяцев назад +1

    Очень крутое, интересное и понятное видео, даже не думал что так просто можно на гридах сверстать калькулятор, некоторые свойства вообще были для меня в новинку, крч говоря респект и уважуха автору

  • @testsite2371
    @testsite2371 2 года назад +5

    Вёрстку закончили спасибо вам большое будем ждать js

  • @ivanovserg8795
    @ivanovserg8795 2 года назад +1

    Олександр, дякую! Було цікаво...

  • @user-jz5cd5uu8w
    @user-jz5cd5uu8w 2 года назад +1

    Добрый день! Благодарю, Алекс!👍🤝

  • @Mljamljaful
    @Mljamljaful 2 года назад +2

    Як завжди супер!

  • @zimablue5627
    @zimablue5627 2 года назад +5

    Красавец, еще и с юмором, я насмеялся не мог))) "Это у нас вызывает боль и страдание" ахаха ты лучший😂

  • @jinke5935
    @jinke5935 2 года назад +3

    Я знаю чем сейчас займусь, пока не зовёт сон грядущий! Буду верстать калькулятор в стиле neomophism!

    • @NoName_02770
      @NoName_02770 Год назад

      Уменя не работает част кода то есть CSS как мне из этого избежать???

  • @rustammusapirov9844
    @rustammusapirov9844 Год назад +2

    это супер урок спасибо вам большое, вы молодец

  • @o_opedro4044
    @o_opedro4044 2 года назад +3

    Как всегда 👍🏻, на высоте...

  • @ITSPHERE-ww6mi
    @ITSPHERE-ww6mi 6 дней назад

    Спасибо хорошая практика

  • @user-dq9pl8me3o
    @user-dq9pl8me3o 2 года назад +8

    Очень интересно! Кстати, Вы не думали ввести новую рубрику с имитацией собеседования?

  • @user-zr4eh8su5p
    @user-zr4eh8su5p 2 года назад +1

    Не качай код- напиши его сам! Повторяя за Алексом конечно же )))
    ЗЫ: Крутой канал. Нашел недавно.

  • @Ireile
    @Ireile 2 года назад +3

    Как и всегда 👍🏻

  • @Disorrder
    @Disorrder 2 года назад +3

    как фронтенд разработчик с 9-летним стажем, скажу, что получилось отлично) Ты молодец
    Есть замечание небольшое. Стоит сразу приучать людей к семантике. Кнопка должна быть тегом button!

  • @gromovdenis7
    @gromovdenis7 2 года назад +2

    Отлично!!! 👍

  • @danilslivkin
    @danilslivkin 2 года назад

    Классно рассказываешь! Лайк

  • @d4n1sff21
    @d4n1sff21 Год назад +1

    Почему у меня кнопки не выровнялись. В коде у меня всё верно

  • @irinayurieva753
    @irinayurieva753 2 года назад

    Верстка готова! Идем дальше ---->>>>>>>>

  • @qwin5197
    @qwin5197 2 года назад

    Спасибо за урок,лайк

  • @user-wg6lw4uz8p
    @user-wg6lw4uz8p 2 года назад

    Спасибо, полезное видео

  • @Vlad-ke3ls
    @Vlad-ke3ls 2 года назад +5

    А *grid-gap* разве не был устаревшим? Вместо него юзают просто *gap* вроде

  • @andrewsmal5173
    @andrewsmal5173 2 года назад +1

    Круто!

  • @Albert_Hall
    @Albert_Hall 2 года назад

    Пушка 🚀🌌

  • @user-ow4op1hj7t
    @user-ow4op1hj7t Год назад

    Все бы ничего, но я чуть в штаны не наложила от внезапно начавшейся музыки в конце ролика 😂

  • @yohan145
    @yohan145 2 года назад +7

    а оживление будет с eval или без)?было бы круто увидеть от вас версию без

    • @itgid
      @itgid  2 года назад +1

      Без eval

    • @yohan145
      @yohan145 2 года назад

      @@itgid круто, спасибо!

  • @jamesdarrel4540
    @jamesdarrel4540 10 месяцев назад

    спасибо большое!!!)))

  • @avel8965
    @avel8965 2 года назад +1

    Очень неплохо

  • @GLUCKKKKKKKKKK
    @GLUCKKKKKKKKKK 2 года назад

    Бомба ракета)

  • @independentarmenia8203
    @independentarmenia8203 2 года назад

    Спасибо огромное,,,Все очень просто и разумно объясняете ,,,,,

  • @MsMatveev
    @MsMatveev 2 года назад +1

    Всем привет , подскажите все получается , но не могу изменить дисплей , задаю параметры ,но не меняется размер и ноль там же .

  • @user-zc9kd2ci4q
    @user-zc9kd2ci4q 2 года назад

    Супер)

  • @user-qn3hb4nk6g
    @user-qn3hb4nk6g 2 года назад

    Супер.

  • @0202maks_music
    @0202maks_music 8 месяцев назад +1

    бля тот самый я смотря прогноз по джарахаву в начале декабря и батя в соседней комнате смотрит новости про сочи и ВоДиЧкУ

  • @Lerogorn
    @Lerogorn 2 года назад

    Очень круто, спасибо!

  • @user-rg3bc4ys6d
    @user-rg3bc4ys6d 2 года назад

    Спасибо

  • @msklaimelaim
    @msklaimelaim 2 года назад +1

    Спасибо за урок, но у меня почему-то весь калькулятор плывет, в смысле расползается по всему экрану, что я делаю не так?

  • @user-pz9nw2qv7d
    @user-pz9nw2qv7d Год назад

    Почему на этапе добавления кнопок некоторые съехали вбок и остались без цвета. Хотя вроде всё также делал и ничего не помогает

  • @agraiskr
    @agraiskr 2 года назад

    просто класс!!!! но я кнопку "ноль" сделал шириной 95% - тогда не выпирает за пределы верхних кнопок ... и как бы логичнее было бы двойную ширину делать для кнопки "equal" ... но это на любителя . но всё равно - я в восторге!!

    • @user-tl8iu7hc2o
      @user-tl8iu7hc2o 2 года назад

      які бібліотеки варто скачатидля того щоб все працювало?

    • @agraiskr
      @agraiskr 2 года назад

      @@user-tl8iu7hc2o вроди всё на чистом html и css .просто в браузере откриваешь и всё.

  • @Tui3694
    @Tui3694 2 года назад

    почему не использовали :nth-child или :nth-of-type для задания серых и оранжевых кнопок?

  • @Neroz49rujka
    @Neroz49rujka 2 года назад

    nice!

  • @user-pu3tx5iy1l
    @user-pu3tx5iy1l Год назад

    почему у меня вместо черного калькулятора никаких изменений просто белый

  • @user-pz9nw2qv7d
    @user-pz9nw2qv7d Год назад

    А как сделать так, чтобы в начале строки также точки шли? И это как-то влияет на работу?

  • @Larriva666
    @Larriva666 Год назад

    Привет! А как ты делаешь, что div сам дописывается? Link и другие. По ходу увидел - попробую.

  • @user-nt1bi9wr4r
    @user-nt1bi9wr4r Год назад +1

    подскажите где можно скачать код?

  • @Daleever
    @Daleever 2 года назад

    У меня дивы с кнопками идут в ряд, есть решение какое то ? ( изза этого я так понимаю и грид не работает)

  • @handyfrontend
    @handyfrontend 2 года назад

    grid от бутстрапа кстати можно использовать

    • @Tui3694
      @Tui3694 2 года назад

      чем он лучше?

    • @handyfrontend
      @handyfrontend 2 года назад

      @@Tui3694 удобнее)

  • @ivanivanov6118
    @ivanivanov6118 2 года назад

    Круто. Подскажите пожалуйста, у меня старый ноут Asus aspire 5738zg. Можно ли с ним программировать?

    • @freedom6984
      @freedom6984 2 года назад

      Можно на любом ведре программировать

  • @user-pd7yr9kg2p
    @user-pd7yr9kg2p 2 года назад

    Здравствуйте,Александр! Помогите определиться с выбором языка,я новичок подскажите какой язык выбрать для изучения для удаленной работы и фриланса? Спасибо

    • @itgid
      @itgid  2 года назад +1

      Js. Для фриланса бек на node.js или php

  • @isaacjon
    @isaacjon 2 года назад

    super

  • @MshkaFredus
    @MshkaFredus 6 месяцев назад +1

    А как тоже просматривать калькулятор в реальном времени?

    • @EmRDGD
      @EmRDGD 6 месяцев назад

      плагин в VSCode Live Share

  • @N0unak
    @N0unak Год назад

    а как сделать по 5 кнопок по горизонтали и 6 по вертикали?

  • @xurshedashurmahmadov6680
    @xurshedashurmahmadov6680 2 года назад +1

    у меня не работал {
    grid-complate-areas : "классы" } ;
    помогите пожалуста....

    • @user-sd2fp5lq5z
      @user-sd2fp5lq5z 2 года назад

      Решил проблему?

    • @xurshedashurmahmadov6680
      @xurshedashurmahmadov6680 2 года назад

      @@user-sd2fp5lq5z да спасибо

    • @kseniiaefremova4696
      @kseniiaefremova4696 2 года назад +1

      @@user-sd2fp5lq5z ой, а можно узнать решение проблемы? а то у меня такая же проблема?)

    • @user-bu6bz2yt7d
      @user-bu6bz2yt7d 2 года назад

      @@xurshedashurmahmadov6680 Поделитесь пожалуйста как вы решили проблему? У меня аналогичная

    • @user-bu6bz2yt7d
      @user-bu6bz2yt7d 2 года назад +2

      @@kseniiaefremova4696 я нашла решение, не знаю на сколько оно верное, у меня сработало, задайте еще свойство для buttons: grid-template-columns: 1fr 1fr 1fr 1fr;

  • @washingmachine4614
    @washingmachine4614 2 года назад

    будет ли урок как сделать чтобы калькулятор работал на js?)

  • @Monster-rg7xg
    @Monster-rg7xg 10 месяцев назад

    В чем проблема если не меняются цвета кнопок

  • @user-sk6vb1vn5x
    @user-sk6vb1vn5x 2 года назад +1

    как скачать код

  • @user-eg6nn9zp1c
    @user-eg6nn9zp1c 10 месяцев назад

    Здравствуйте, подскажите пожалуйста, как сделать чтоб автоматически, без сохранения кода и обновления страницы видеть результат того что ты пишешь. Заранее спасибо

    • @user-tb2tj6ey8p
      @user-tb2tj6ey8p 9 месяцев назад +1

      установи Live Server если в VS Code пишешь

  • @user-so2be4rp7d
    @user-so2be4rp7d Год назад

    SUPER!!!! Thanks!!!

  • @takhirvalitov1492
    @takhirvalitov1492 2 года назад

    Привет! Я только учусь верстать. Такой вопрос, а как сгенерировали структуру index html? Это плагин?

  • @Tui3694
    @Tui3694 2 года назад

    Зачем на Windows 10 обои от Linux Mint стоят?

  • @olehb629
    @olehb629 2 года назад

    Почему вместо тега button вы используете div ?

    • @Tui3694
      @Tui3694 2 года назад

      ага, надо border и background сбросить

  • @yar0vayzz869
    @yar0vayzz869 Год назад

    можете скинуть файлы калькулятора html css и js

  • @fundayson4180
    @fundayson4180 2 года назад +1

    Не работает grid

  • @hawyPercs
    @hawyPercs Год назад

    что делать если когда делаешь позиционирование кнопок, оно не происходит

    • @hawyPercs
      @hawyPercs Год назад

      а все увидел ошибку

  • @user-tn5mc7hc8h
    @user-tn5mc7hc8h 2 года назад

    Здравствуйте! Не могу понять, почему не могу написать сетку. Например, как у вас в css:
    .buttons {
    display: grid;
    grid-template-areas:
    и после пишу названия в столбик, но после сохранения они преобразуются в строку. Что не так делаю? Помогите, пожалуйста

    • @olegpolupan7854
      @olegpolupan7854 2 года назад +1

      @Эдуард А где можно скачать код этого урока?

    • @Tui3694
      @Tui3694 2 года назад

      @Эдуард кстати да

    • @shushanmartirosyan9763
      @shushanmartirosyan9763 2 года назад +2

      < ! - - div - - > {
      grid-area: < ! - - name - - >
      }
      < ! - - container - - > {
      display : grid;
      grid-template-areas:
      " name name name "
      " name name name "
      " name name name "(и так далее);
      }

  • @johnsmiler9254
    @johnsmiler9254 2 года назад

    💣

  • @user-zk8nn3ss9r
    @user-zk8nn3ss9r 2 года назад

    grid не сработал, все кнопки как были в столбик, так и остались (

  • @kiritokun746
    @kiritokun746 2 года назад

    А я думал в видео будет Counter strike source. Хах ошибочка 😅

  • @johnsmiler9254
    @johnsmiler9254 2 года назад

    Ещё !!!

  • @music-hw9nx
    @music-hw9nx Год назад

    почему у меня или не только не работает grid

  • @h_temur
    @h_temur 2 года назад

    мммм почемуто у меня возникла проблема с грид системой она хочет становиться как на видео

  • @MiCbKO
    @MiCbKO 2 года назад +1

    почти 2 часа ушло пока сам сверстал это, а потом смотрел ролик, это нормально или не очень?

    • @Tui3694
      @Tui3694 2 года назад

      зачем сам делал?

    • @MiCbKO
      @MiCbKO 2 года назад +1

      @@Tui3694 интересно просто, практика

  • @h_temur
    @h_temur 2 года назад

    во чтом проюлема кто знает

  • @kortex_f-c_1817
    @kortex_f-c_1817 2 года назад

    3:25 где пробел после ":"?

    • @Tui3694
      @Tui3694 2 года назад

      необязательно

  • @itstoogezer8069
    @itstoogezer8069 2 года назад

    Хорошо объясняешь не думал снимать на ютубе?

    • @Tui3694
      @Tui3694 2 года назад

      а он где снимает?

  • @kirillartyushchenko7676
    @kirillartyushchenko7676 2 года назад

    Возникла проблема... Есть варианты как решить её?
    Суть:
    .Buttons {
    display: grid;
    grid-template-areas:
    После я пишу свои строки и столбцы, но, в результате получаю, что у меня 6 знаков в линии а не 4. Может поможет кто - нибудь? :D

    • @Tui3694
      @Tui3694 2 года назад

      код кинь на jsfiddle

    • @kirillartyushchenko7676
      @kirillartyushchenko7676 2 года назад

      @@Tui3694 спасибо за совет, попробовал, но, ошибок он не видит, хрен его знает что там за проблема на самом деле...

    • @Tui3694
      @Tui3694 2 года назад

      @@kirillartyushchenko7676 я про то, что сохрани на этом сайте код и кинь ссылку

  • @user-go8dd3pm9o
    @user-go8dd3pm9o 2 года назад

    все сделал шаг за шагом но немножко не получилось (((

  • @user-xl1im9vi5k
    @user-xl1im9vi5k 2 года назад

    Просто вопрос: Возможно же было сделать кнопки с помощью списка ?

  • @dimitrosik
    @dimitrosik 2 года назад

    А зачем это нужно?

  • @user-td3ob3jm6j
    @user-td3ob3jm6j 2 года назад

    что за программа?

  • @gmmips
    @gmmips 2 года назад

    Уменьшение цифр в табло будет, если цифр много?

  • @user-if4rx3bz2p
    @user-if4rx3bz2p 7 месяцев назад

    А не лучше вместо блоков батон задать

  • @user-uu9sv9vf9q
    @user-uu9sv9vf9q 2 года назад

    Я на php калькулятор написал.

  • @grufilm
    @grufilm 2 года назад

    тексту в кнопках лайн хай лучше делать ноль, что бы было по центру! С минусом отдельная история :)

  • @hasanboynakibov9759
    @hasanboynakibov9759 2 года назад

    Дай мне код пж

  • @yareyaredaze8611
    @yareyaredaze8611 Год назад

    sup

  • @NoName_02770
    @NoName_02770 Год назад +1

    Ты не говориш если у вас такая или вот такая ощибка можно исправить бла бла бла !!!!!

  • @jamesborn89
    @jamesborn89 2 года назад

    Кнопку ноль поправь!!! вызывает боль и страдание!!!!

    • @Tui3694
      @Tui3694 2 года назад

      он поправил же

  • @user-ur8ql4bi1f
    @user-ur8ql4bi1f 2 года назад +1

    Видос наверное на новичков рассчитан, в противном случае не ясно, почему автор не использует scss, не делает адаптив, не использует переменные в css, костылит выравнивание по высоте.

    • @Tui3694
      @Tui3694 2 года назад

      какой адаптив нужен?

  • @adiletasangalukov8556
    @adiletasangalukov8556 2 года назад

    Спасибо