#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: +-Free-Web-UI-designs-(Community)?type=design&node-id=0:1&mode=design&t=CzUspvuV0m0Mn8KA-1
➖ Репозиторий с кодом проекта:
➖ Сервис для поиска шрифтов Google Fonts:
➖ Сервис для преобразования файлов шрифтов в нужный формат:
➖ Файл для нормализации стилей (css-normalize):
➖ NPM-пакет css-normalize: @a1rth/css-normalize
🗂️ Бесплатные курсы на канале:
🟠 Курс по HTML:
🔵 Курс по CSS:
👨💻 Мне действительно есть, что вам рассказать, ибо сам я прошел этот путь относительно недавно. На данный момент имею чуть более трех лет коммерческого опыта, самоучка. За все время деятельности прошел путь от trainee в безызвестной «галере» со штатом в 15 человек, где верстал простенькие лендинги и интернет-магазины, до фронтенд-инженера в крупнейшей РФ компании, где занимаюсь вопросами архитектуры фронтенд-структур внутренних проектов и их оптимизацией. Между этими занятостями также был опыт работы на фрилансе, в стартапе (3-10 чел.) и в средней компании (50-100 чел.). Имею опыт в проведении оффлайн-митапов, лекций, преподавании и наставничестве.
📌 Автор:
➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Solvery:
#frontend #фронтенд #верстка #версткасайтов
1 просмотр
227
57
4 недели назад 01:01:28 1
ЧТЕНИЕ НА АНГЛИЙСКОМ - Шерлок Холмс “Пёстрая лента“. Адаптированная книга на английском (часть 1)
4 недели назад 00:45:51 1
ОТ МЕЧТЫ К РЕАЛЬНОСТИ. Главные принципы предпринимателей. Кучмент, Дёмин, Хохлов, Кутергин, Гончаров
4 недели назад 02:01:29 1
Дикие тропы Дагестана: трекинг в горах и ущельях
4 недели назад 00:00:58 1
Роботов научили играть в ФУТБОЛ
4 недели назад 00:03:06 1
Физическая культура 8 класс (Урок№1 - Знания о физической культуре.)
4 недели назад 01:24:59 1
ЧТЕНИЕ НА АНГЛИЙСКОМ - Братья Гримм “Золушка“. Адаптированная книга на английском
4 недели назад 00:00:46 1
БОЛИТ ЖИВОТИК. Часть 1 Питание мамы
4 недели назад 06:21:30 1
Completo B2B Day #b2b #sales #performance #business #комплето
4 недели назад 00:24:27 1
ВИСЦЕРАЛЬНАЯ ПРАКТИКА | Огулов А.Т. | Часть 1.
4 недели назад 00:18:57 1
GNOME 45. Ubuntu . elementaryOS 7.1. Могут, когда захотят!
4 недели назад 00:26:29 1
PRAVDAO #423 - Купил PlayStation 5!!! Почему не Pro?
4 недели назад 00:40:11 1
Как наши травмы ПОМОГАЮТ нам и мешают в жизни? Как связаны тип личности и травма
4 недели назад 00:04:18 1
На всероссийском форуме в Югре обсуждают работу с детьми с особыми образовательными потребностями
4 недели назад 00:02:03 3
ЛУЧШЕ И ДЕШЕВЛЕ ZEEKR❗️НОВЫЙ КИТАЕЦ CHANGAN SHENLAN ( DEEPAL) S7
4 недели назад 01:45:24 1
Достаточно общая теория управления в кратком изложении (2 лекция М.В. Величко в Военмехе)
1 месяц назад 00:43:27 1
Web - 24 - Адаптивная CSS верстка. Адаптация HTML страницы под экран телефона, планшета, монитора ПК
1 месяц назад 02:32:53 1
ЧТЕНИЕ НА АНГЛИЙСКОМ - Шерлок Холмс “Скандал в Богемии“. Адаптированная книга на английском
1 месяц назад 00:17:38 1
Владимир Сурдин: “Влияние земной атмосферы на оптические наблюдения“ (Урок 10)
1 месяц назад 00:51:39 1
Эго-состояния. Транзактный анализ. Эрик Берн. Родитель. Взрослый. Ребенок. Дисфункциональная семья.
1 месяц назад 05:50:04 1
НОВЫЕ ПРИКЛЮЧЕНИЯ ЭЛОЙ! ПРОДОЛЖЕНИЕ ЛЕГЕНДАРНОЙ ХОРАЙЗЕН! | Horizon Forbidden West 🏹 | Часть #1
1 месяц назад 00:29:30 1
Skoda Kodiaq 2024: тест-драйв семиместной версии в комплектации Sportline с двигателем 1.5 TSI
1 месяц назад 00:13:58 1
Честный Обзор на Китайский автомобиль от владельца Jetour Dashing
1 месяц назад 00:18:36 1
О массаже при диабете Типы, признаки, роль инсулина и адреналина, норма сахара, особенности массажа