Workflow Верхняя навигация с меню гамбургером и адаптивная версия | Дневник веб разработчика

59-й день моего изучения HTML, CSS и JS. Пять последних дней изучал, как создавать верхнюю навигацию с адаптивной версией под телефоны и меню Гамбургер.

Временные точки:
00:00 Начало
00:39 Создаем папку JS и файл script.js
01:43 Связываем index.html с script.js
02:30 Сбрасывающие свойства и значения для CSS
03:16 Создаем родительский контейнер
04:20 Создаем детей
06:22 Как создать сразу 4 списка li
08:28 Создаем палочки для меню-гамбургер
09:21 Что нужно переименовать в скрипте Джава при изменении классов
11:10 Как действуют свойства в сбросе значений по умолчанию в CSS
11:53 Темный фон для сайта
12:47 Делаем элементы видимыми на черном фоне
17:06 Применяем display: flex для детей родителя
18:23 Разброс детей по разным углам родителя
19:49 Выравнивание списка меню
21:12 Центрируем детей внутри родителя
22:01 Внутренние отступы для родительского контейнера
23:03 Код элемента для работы с адаптивной версткой
25:32 Убираем гамбургер с десктопной версии
26:25 Медиа-запрос в 505 пикселей
28:52 Убираем пункты меню и возвращаем гамбургер
31:32 Анимация палочек гамбургера (активное состояние)
39:25 Появление меню в мобильной версии
42:29 Добавляем разделительные полоски под пункты меню
45:23 Превращаем ссылки в блочные элементы
47:22 Расширяем области пунктов меню и гамбургера

Блин, ссылки Ютуб не разрешает вставлять, тут писать тоже не дает, если нужны скрипт и reset css - пишите в Телегу : @yakovlee

📱🔗 Где меня еще найти
Мой сайт (скоро)
ВК - yakovlee

#дневниквебразработчика #вебразработка #htmlcss #адаптивнаяверстка #frontend #обучениеснуля #версткасайтов #htmlcssдляначинающих #responsive