Мастер-класс по верстке сайта с нуля. Astro.js, SCSS, JS, БЭМ

Цель курса — показать практический процесс верстки многостраничного сайта с использованием компонентного подхода на Astro.js. Основной акцент сделан на архитектуру проекта, грамотное разделение интерфейса на компоненты и их повторное использование при разработке.

В результате вы создадите полноценный многостраничный сайт «ИгроПолис» по авторскому макету, получите практический опыт работы с Astro.js, БЭМ, SCSS и JavaScript, а также понимание того, как организовывать код в реальных проектах.

Курс полностью практический и состоит из видеоуроков. В нём нет проверки заданий и теоретических лекций — весь материал построен на разборе реального проекта и демонстрации рабочих приёмов верстки с компонентной архитектурой.

Вам предстоит повторять процесс верстки за автором, разбирать структуру проекта, собирать страницы из компонентов и анализировать, как переиспользуемые элементы упрощают разработку многостраничного сайта.

Чему вы научитесь:

• Понимать архитектуру многостраничных сайтов на Astro.js
• Применять Astro.js для верстки страниц и компонентов
• Использовать методологию БЭМ при организации HTML-структуры
• Работать с SCSS для создания масштабируемых и поддерживаемых стилей
• Интегрировать JavaScript в процесс верстки интерфейсов
• Анализировать структуру проекта и логику разделения на компоненты
• Формировать аккуратную и понятную кодовую базу для дальнейшего развития проекта

Курс состоит из 6 модулей, в которых последовательно разбираются:

1. структура проекта на Astro.js
2. организация компонентов
3. верстка страниц по методологии БЭМ
4. стилизация с использованием SCSS
5. подключение и использование JavaScript
6. сборка многостраничного проекта в единое целое

Для кого этот курс:

• Этот курс подойдёт разработчикам, которые уже имеют базовый опыт в верстке и хотят научиться выстраивать архитектуру многостраничных сайтов с использованием компонентного подхода.

Начальные требования:

• Курс подходит для тех, кто уже имеет опыт в верстке и уверенно работает с HTML и CSS. Для прохождения курса также потребуется базовое понимание JavaScript.

Программа курса

Введение, подготовка проекта и анализ

1. Введение. Чему научитесь, и что нужно знать
2. Обзор шаблона на Astro.js
3. Подключение шрифтов и базовые переменные

Разработка шапки и футера сайта

1. Базовый шаблон шапки
2. Навигация
3. Поиск. Часть 1
4. Поиск. Часть 2
5. Результаты поиска. Часть 1
6. Результаты поиска. Часть 2
7. Выбор темы сайта. Часть 1
8. Выбор темы сайта. Часть 2
9. Модальное окно входа
10. Футер и соцсети
11. Компонент кнопки

Главная страница и каталог

1. Слайдер на главной странице
2. Подборки на главной странице
3. Отзывы на главной странице
4. Статьи на главной странице
5. Cookie-предупреждение и кнопка «наверх»
6. Hero-блок каталога и хлебные крошки
7. Переключение сетки каталога
8. Фильтры. Кастомный чекбокс
9. Range-слайдер рейтинга
10. Скрипты обработки фильтров
11. Кастомный селект
12. Карточка игры и тултип

Страница игры

1. Hero-блок страницы игры. Видео на фоне
2. Компонент информации об игре. Рейтинг
3. Меню страницы игры. Табы
4. Табы «Отзывы», «Статьи», «Подборки»
5. Таб «Об игре». Карточка отзыва
6. Таб «Об игре». Блок характеристик
7. Остальные табы на странице
8. Модальные окна «Статус» и «Отправить отзыв»
9. Страницы «Подборки», «Статьи» и «Прохождения»

Остальные страницы

1. Личный кабинет. Hero. Левое меню
2. Табы кабинета. Карточка комментария
3. Табы кабинета. Карточка подписчика. Настройки личного кабинета
4. Страница статьи
5. Страница отзыва
6. Toast-уведомления и страница 404

Адаптивная верстка

1. Адаптив главной страницы
2. Адаптив каталога и страницы игры
3. Адаптив личного кабинета
4. Адаптив последних страниц