Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков!
Полезные ссылки:
👉 Макет (открытый доступ): https://www.patreon.com/posts/61368263
👉 Результат верстки: https://www.patreon.com/posts/rezultat-verstki-61798286
👉 Бесплатный курс по верстке: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
👉 VS Code: https://www.youtube.com/watch?v=nxCLXMBl4e4
👉 Как правильно учиться: https://www.youtube.com/watch?v=eKZNKA-jAYY
👉 План развития фронтенд разработчика (+КАРТА): https://youtu.be/yJcCKuxfb2o
🔴 Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/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(:last-child)
02:15:28 - Работа с декором блока Main
02:26:46 - Верстка блока Stay-safe
02:32:37 - Магия БЭМ в действии. Повторное использование кода
02:42:10 - Работа с декором блока Stay-safe
02:47:00 - Настройка адаптивности для блока Stay-safe
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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
🤟 Живи, а работай в свободное время! ©