#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

О видео «#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета»:

✏️ Начинаем с нуля верстать несложный одностраничный сайт по фитнес тематике. Этот мастер-класс предназначен для новичков, однако для комфортной разработки вам необходимо знать теорию по HTML и CSS. Плейлисты с курсами по этим технологиям вы можете найти на канале, советую с ними ознакомиться, если ещё этого не сделали. 🔴 Timeline: ▶ 00:00​ | Вступление ▶ 00:26 | Разбор макета Figma ▶ 01:21 | Анализ шрифтов макета, ч. 1 ▶ 01:53 | Dev-режим в Figma ▶ 02:25 | Анализ шрифтов макета, ч. 2 ▶ 03:21 | Поиск файлов шрифтов на Google Fonts ▶ 04:19 | Преобразование файлов шрифтов в woff2 через transfonter ▶ 04:49 | Подготовка файловой структуры ▶ 05:53 | Подключение стилей ▶ 06:06 | Подключение шрифтов ▶ 07:28 | Нормализация стилей ▶ 08:08 | Подготовка глобальных CSS-переменных ▶ 11:22 | Глобальные стили ▶ 12:02 | Стили утилитарного класса container ▶ 12:36 | Стили заголовков ▶ 13:07 | Разметка шапки ▶ 13:22 | Разметка логотипа ▶ 14:36 | Разметка меню ▶ 15:36 | Разметка блока с кнопками ▶ 17:49 | Стили шапки ▶ 18:10 | Стили меню ▶ 20:10 | Эффект наведения на ссылки ▶ 21:13 | Стили текущей ссылки меню ▶ 22:29 | Стили основной кнопки ▶ 24:46 | Стили блока с кнопками ▶ 25:05 | Исправление бага со сжатием логотипа по ширине ▶ 25:27 | Исправление баг с переносом строк в кнопках ▶ 26:02 | Стили бургер-кнопки ▶ 30:44 | Адаптив шапки 📚 Ссылки: ➖ Макет Kropp Fitness в Figma: https://www.figma.com/file/m3lT3GF4mUgEBaU3qysyeu/10%2B-Free-Web-UI-designs-(Community)?type=design&node-id=0%3A1&mode=design&t=CzUspvuV0m0Mn8KA-1 ➖ Репозиторий с кодом проекта: https://github.com/aleksanderlamkov/kropp-fitness/ ➖ Сервис для поиска шрифтов Google Fonts: https://fonts.google.com/ ➖ Сервис для преобразования файлов шрифтов в нужный формат: https://transfonter.org/ ➖ Файл для нормализации стилей (css-normalize): https://raw.githubusercontent.com/aleksanderlamkov/css-normalize/main/index.css ➖ NPM-пакет css-normalize: https://www.npmjs.com/package/@a1rth/css-normalize 💬 Чат в телеграмме (помощь новичкам): https://t.me/friendlyFrontendChat 🔸 Boosty (поддержать канал): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 🗺 Frontend Roadmap 2024 https://youtu.be/1WRJKgwlX9w?si=NjyzbyLMguVV4Frr 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/friendlyFrontend ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480 ➖ Solvery: https://solvery.io/mentor/aleksanderlamkov #frontend #фронтенд #верстка #версткасайтов

Комментарии к «#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета»

Дарья Иванова

#206832

Александр, спасибо, что загрузили видосики на дзен. Только начала учить верстку, прошла тесты по html и css, и тут заблокировали ютупред. От души благодарность 😃

Диляра Зубарева

#206833

откуда берется переменная для горизонтальных внутренних отступов (на видео по времени 10:54). Это цифра из воздуха или мы ее из макета взяли?