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

👇 Разверни для полной информации

Верстаем калькулятора iphone с нуля на HTML + СSS. Структуру делаем на GRID.

00:00 Создаем файлы html и css
01:10 Создаем блок калькулятора
02:15 Оформляем CSS тела калькулятора
05:40 Добавляем кнопки в html
08:00 Оформляем кнопки калькулятора через CSS
12:15 Применяем Grid для выравнивания кнопок
15:20 Верстаем экран калькулятора

Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB

Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D

Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro

+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

[alexanderalexander]

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

[testsite]

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

[rustammusapirov]

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

[dqplmeo]

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

[meowmeowmeowmeow]

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

[independentarmenia]

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

[zimablue]

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

[jinke]

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

[zrehsup]

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

[Disorrder]

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

[MsMatveev]

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

[Larriva]

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

[Tui]

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

[pznwqvd]

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

[msklaimelaim]

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

[owophjt]

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

[Nunak]

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

[Daleever]

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