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

👉 Следующий большой мастер-класс уже готов: https://stepik.org/a/228315 🔥 Вас ждёт Vite / Minista, шаблонизатор JSX, Sass, БЭМ и очень много JavaScript! ✏️ Пошагово профессионально верстаем многостраничный сайт по макету 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: https://www.figma.com/design/YzTDRV7OaSoeCUBNYaoCZV ➖ Репозиторий с кодом проекта: https://github.com/aleksanderlamkov/future-tech ➖ NodeJS (скачать): https://nodejs.org/en/ ➖ Файл для нормализации стилей (css-normalize): https://raw.githubusercontent.com/aleksanderlamkov/css-normalize/main/index.css ➖ NPM-пакет css-normalize: https://www.npmjs.com/package/@a1rth/css-normalize ➖ Сервис для поиска шрифтов Google Fonts: https://fonts.google.com/ ➖ Сервис для преобразования файлов шрифтов в нужный формат: https://transfonter.org/ ➖ Код из урока "Пиксели против Rem" (Адаптивный размер шрифта): https://github.com/aleksanderlamkov/pixels-vs-rem ➖ Код из предыдущего МК "Positivus" (берём несколько миксинов): https://github.com/aleksanderlamkov/positivus 💬 Чат в телеграмме (помощь новичкам): https://t.me/friendlyFrontendChat ℹ Основной телеграм-канал: https://t.me/friendlyFrontend 🔸 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 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #верстка #версткасайтов #javascript #js