Вёрстка сайта с нуля • HTML, SCSS, JS практика • Подробное объяснение по шагам • Проект в портфолио

Пошагово профессионально верстаем многостраничный сайт по макету Figma. Разметку пишем по БЭМ методологии. В разработке используем препроцессор стилей Sass (SCSS) и активно применяем адаптивные rem-единицы измерения. Пишем много JavaScript и реализуем такие компоненты как BurgerButton, Tabs, VideoPlayer, ExpandableContent, InputMask и даже непростой кастомный Select. Timeline: 00:00 | Введение 00:53 | Анализ макета 02:47 | Подготовка файловой структуры 08:31 | Установка NodeJS 09:25 | Инициализация пакетного менеджера NPM 10:07 | Установка препроцессора стилей Sass 15:06 | Нормализация стилей 16:55 | Подключение шрифтов 20:04 | Подготовка Sass-миксинов 24:37 | Подготовка Sass-функций 27:29 | Sass-миксины медиазапросов 34:02 | Испытание Sass-миксинов, функций и медиазапросов 37:00 | Заполнение глобальных CSS-переменных 43:40 | Подготовка утилитарных классов 46:06 | Глобальные стили 58:10 | Шапка страницы 01:53:51 | JavaScript модуль Header (бургер-кнопка и меню-оверлей) 02:02:45 | Липкая шапка 02:06:26 | Прибитие футера к низу страницы 02:07:19 | Футер страницы 02:34:08 | Доработка разметки шапки 02:34:31 | Секция Hero 03:37:32 | Секция Features 04:04:37 | Секция Blog 04:49:36 | JavaScript модуль Tabs 05:16:22 | Секция Resources 05:42:08 | Секция Reviews 06:10:10 | Секция About 06:30:31 | Новая страница News 06:32:18 | Секция HeroAlt 07:04:02 | Секция с табами на странице News 07:04:55 | Секция Videos 07:27:00 | JavaScript модуль VideoPlayer 07:32:45 | Новая страница Blog 07:33:13 | Секция blog-details 08:10:06 | JavaScript модуль ExpandableContent 08:16:29 | Новая страница Podcasts 08:17:02 | Секция HeroAlt 08:28:34 | Секция Videos на странице Podcasts 08:35:52 | Новая страница Resources 08:36:32 | Секция HeroAlt на странице Resources 08:44:39 | Секция Reports 09:13:19 | Новая страница Contacts 09:14:24 | Секция Contacts (Field. Checkbox, Accordion) 10:14:22 | JavaScript модуль InputMask 10:21:15 | Компонент Select — разметка 10:32:34 | Компонент Select — стилизация 10:48:44 | JavaScript модуль Select 11:49:07 | Исправление багов предыдущей верстки 11:57:29 | Заключение Ссылки: Макет Future Tech в Figma:
Репозиторий с кодом проекта:
NodeJS (скачать):
Файл для нормализации стилей (css-normalize):
NPM-пакет css-normalize:
Сервис для поиска шрифтов Google Fonts:
Сервис для преобразования файлов шрифтов в нужный формат:
Код из урока "Пиксели против Rem" (Адаптивный размер шрифта):
Код из предыдущего МК "Positivus" (берём несколько миксинов):
Чат в телеграмме (помощь новичкам):
i Основной телеграм-канал:
Boosty (поддержать канал):
Бесплатные курсы на канале: HTML: • HTML курс 2024 CSS: • CSS курс 2024 JS: • JavaScript курс 2024 A11y: • Accessibility курс 2024 Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для н... Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTM... Frontend Roadmap 2024 • Frontend Roadmap 2024 | Что должен уч... Автор: Личный сайт:
Telegram:
Boosty:
GetMentor:
Solvery:
#frontend #фронтенд #верстка #версткасайтов #javascript #js