Продвинутый курс по верстке сайтов

1

День 1 | Знакомимся с дизайном сайта

Понять структуру макета и подготовиться к верстке. Анализ макета в Figma/Photoshop, понимание типографики и цветовой схемы.

75 мин

2

День 2 | Основы CSS

Изучить основы CSS. Селекторы, свойства, подключение CSS к HTML, каскадность, базовые стили.

60 мин

3

День 3 | Работа с DevTools браузера

Изучить инструменты разработчика. Открытие DevTools, инспектор элементов, консоль, отладка, эмуляция устройств.

40 мин

4

День 4 | Знакомимся с системой контроля версий

Научиться работать с Git и GitHub. Установка Git, основные команды, создание репозитория.

70 мин

5

День 5 | Устанавливаем Node и npm

Настроить рабочее окружение для современной разработки. Установка Node.js, понимание npm и package.json.

55 мин

6

День 6 | Настраиваем сборку для проекта

Настроить Vite для автоматизации сборки. Простая конфигурация, режимы разработки и продакшена, быстрый dev server.

60 мин

7

День 7 | SCSS и современный CSS

Работа со стилями: SCSS препроцессор и CSS Custom Properties. Гибридный подход для современной разработки.

70 мин

8

День 8 | Запускаем режим разработки в Vite

Настроить удобную среду разработки. Vite Dev Server, Hot Module Replacement, автоматическая перезагрузка.

30 мин

9

День 9 | Flexbox подробно

Изучить Flexbox для создания макетов. display: flex, выравнивание, направление, wrap, gap.

60 мин

10

День 10 | Позиционирование элементов

Изучить позиционирование элементов. position: static, relative, absolute, fixed, sticky. z-index.

50 мин

11

День 11 | Добавляем переменные и шрифты

Создать систему дизайна с переменными. SCSS переменные и CSS Custom Properties для цветов и типографики, подключение веб-шрифтов.

45 мин

12

День 12 | Работа с иконками

Подключать и использовать иконки. Font Awesome, SVG иконки, SVG sprite, иконки-шрифты.

35 мин

13

День 13 | BEM — методология именования классов

Изучаем BEM — стандарт индустрии для именования CSS-классов. Блоки, элементы, модификаторы.

20 мин

14

День 14 | Верстаем шапку сайта

Создать адаптивную навигацию. Структура header, Flexbox для выравнивания, стилизация меню.

55 мин

15

День 15 | Медиа-запросы и адаптивность

Создать адаптивный дизайн. @media правила, breakpoints, mobile-first подход, адаптация блоков.

55 мин

16

День 16 | Верстаем баннер

Создать главный баннер с текстом и кнопками. Работа с фоновыми изображениями, градиентами, позиционированием.

70 мин

17

День 17 | Добавляем анимацию

Изучить CSS анимации. @keyframes, animation свойства, анимация появления элементов, производительность.

55 мин

18

День 18 | Верстаем теги и создаем фильтр на JS

Создать систему фильтрации контента. Верстка тегов, основы JavaScript, работа с DOM, фильтрация элементов.

70 мин

19

День 19 | Создаем слайдер на чистом JS

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

85 мин

20

День 20 | Верстаем табы (Tabs) на чистом JS

Создать систему вкладок. Верстка структуры, JavaScript логика переключения, плавные переходы.

45 мин

21

День 21 | Верстаем аккордеон (Accordion) на чистом JS

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

45 мин

22

День 22 | Современный JavaScript ES6+

Изучить современные возможности JavaScript. Деструктуризация, spread/rest операторы, async/await, ES modules, optional chaining.

60 мин

23

День 23 | HTML формы

Изучить HTML формы. Тег form, input разных типов, textarea, select, label, атрибуты.

45 мин

24

День 24 | Верстаем модальное окно на чистом JS

Создать всплывающие окна. Верстка модального окна, overlay, открытие/закрытие, блокировка скролла.

55 мин

25

День 25 | Верстаем форму с валидацией на чистом JS

Создать форму с проверкой данных. Верстка формы, валидация на JavaScript, регулярные выражения, показ ошибок.

70 мин

26

День 26 | Верстаем программу обучения (с табами)

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

35 мин

27

День 27 | Верстаем информационный блок

Создать информационную секцию. Верстка карточек, Grid Layout для сетки, иконки, hover эффекты.

45 мин

28

День 28 | Верстаем блок с использованием CSS Grid

Освоить продвинутый Grid Layout. grid-template-columns, grid-area, адаптивные grid-сетки, Subgrid.

45 мин

29

День 29 | Работа с изображениями

Оптимизировать изображения для веба. Форматы, responsive images, object-fit, lazy loading.

45 мин

30

День 30 | Верстаем блок с направлениями обучения

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

45 мин

31

День 31 | Верстаем подвал сайта

Создать footer с навигацией. Структура footer, множественные колонки, ссылки, социальные иконки.

45 мин

32

День 32 | Добавляем плавный скролл и навигацию

Улучшить UX навигации. Плавный скролл, якорные ссылки, фиксированная навигация, кнопка 'Наверх'.

45 мин

33

День 33 | Доступность (Accessibility)

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

50 мин

34

День 34 | Убираем hover для планшетов и смартфонов

Оптимизировать интерактивность для touch-устройств. Media queries, @media (hover: none), адаптация hover эффектов.

40 мин

35

День 35 | Оптимизация производительности

Оптимизировать сайт для скорости. Lighthouse, метрики производительности, минификация, кэширование, критический CSS.

55 мин

36

День 36 | Адаптируем экраны под планшеты

Создать планшетную версию сайта. Breakpoints для планшетов, адаптация Grid и Flexbox, бургер-меню.

60 мин

37

День 37 | Адаптируем экраны под мобильные и финализация

Создать мобильную версию сайта. Mobile-first подход, адаптация всех блоков, оптимизация производительности.

60 мин

38

День 38 | Дипломный проект

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

120 мин