Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков!
Полезные ссылки:
Макет (открытый доступ): / 61368263
Результат верстки: / rezultatverstki61798286
Бесплатный курс по верстке: • БЕСПЛАТНЫЙ курс по верстке сайтов (Fr...
VS Code: • VS Code настройка установка плагины /...
Как правильно учиться: • Как правильно учиться в IT сфере. Т...
План развития фронтенд разработчика (+КАРТА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД РАЗРАБОТЧИКА. ...
Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/
Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
Instagram: / freelancer.lifestyle
Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
Facebook: / freelancerlifestyle
За тайм коды спасибо Сергей Кудаев!
00:00:00 Задорное вступление
00:02:54 А вот и наш макет! Знакомство с макетом
00:05:54 Файлы проекта
00:09:21 Плагины проекта
00:11:42 С чего начинается верстка? Цена работы
00:17:11 Анализ макета. Плагин для Figma Font Fascia
00:21:15 Поиск и подключение шрифтов. Плагин для Visual Studio Google Fonts
00:29:03 Построение сетки. Ограничивающий контейнер
00:36:48 Применение селектораатрибута
00:39:43 Анализ блока шапки
00:44:00 Разметка макета и начало верстки шапки
00:52:34 Верстка логотипа, меню, кнопки "Download"
01:11:52 Настройка адаптивности для шапки
01:23:52 Верстка бургера
01:30:30 Настройка адаптивности для логотипа
01:37:14 Открытиезакрытие меню средствами CSS3
01:38:30 Применение псевдокласса Target, доработка бургера
01:51:00 Верстка блока Main
02:10:54 Использование конструкции :not(:lastchild)
02:15:28 Работа с декором блока Main
02:26:46 Верстка блока Staysafe
02:32:37 Магия БЭМ в действии. Повторное использование кода
02:42:10 Работа с декором блока Staysafe
02:47:00 Настройка адаптивности для блока Staysafe
02:53:58 Верстка блока Expert
03:01:06 Альтернативный прием размещения декора в блоке
03:10:38 Верста нижней части блока Expert
03:11:20 И снова БЭМ в работе. Копирование текстового блока
03:14:45 Вставка видео. Тег Iframe. Адаптивное видео
03:18:45 Настройка адаптивности для блока Expert
03:24:16 Верстка блока Healthcare
03:40:32 Верстка декора с использованием псевдоэлементов :after и :before
03:48:00 Верстка футера
03:50:20 Текст в карточках футера
03:51:00 Настройка адаптивности для блока Footer
Меня зовут Женя Андриканич, я IT специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
Живи, а работай в свободное время! ©