Frontend

Этот курс подходит для базового освоения веб-разработки в учебной группе, индивидуально или в смешанном формате. Рекомендуемый темп: 1 модуль = 1 занятие (около 60 минут). При необходимости можно замедлять прохождение и добавлять время на повторение, практику и закрепление.

Какой результат даёт курс

После прохождения курса вы сможете:

• Верстать страницы: использовать HTML для структуры, CSS для оформления, JavaScript для поведения в браузере.
• Размечать контент: заголовки, списки, ссылки, изображения, таблицы и формы.
• Стилизовать интерфейс: селекторы, цвета и шрифты, блочную модель, Flexbox, адаптивную вёрстку.
• Писать скрипты: переменные, условия, циклы, массивы, объекты, функции.
• Работать с DOM: находить элементы, менять содержимое, создавать и удалять узлы.
• Реагировать на действия пользователя: события, формы, addEventListener, при необходимости preventDefault.
• Сохранять данные в браузере: localStorage и JSON.

В итоге вы создадите 6 мини-проектов (визитка, лендинг, веб-квиз, шифр Цезаря, генератор историй, текстовый квест) и сформируете устойчивую базу для дальнейшего изучения фронтенда.

Программа обучения

Один модуль ≈ один урок. Номер — порядок; вторая строка — сжатые темы.

---

Введение

Модули 1–3 · среда, первая страница, разметка

1. Введение во Frontend CodeSandbox, DevTools, alert, console.log

2. HTML: структура и теги DOCTYPE, head, body, семантика

3. HTML: списки, ссылки, медиа ul, ol, a, img, audio, video

---

HTML и CSS

Модули 4–8 · формы, стили, первая вёрстка

4. HTML: таблицы и формы table, form, input, label

5. CSS: селекторы, цвета, шрифты Подключение CSS, классы, id

6. CSS: блочная модель padding, margin, border, display

7. Практика: HTML + CSS Смешанные задачи

8. Мини-проект: визитка Одна страница о себе

---

Вёрстка

Модули 9–14 · Flex, позиционирование, адаптив

9. CSS: Flexbox flex, выравнивание, gap

10. CSS: позиционирование relative, absolute, fixed, z-index

11. Псевдоклассы и псевдоэлементы :hover, :nth-child, ::before

12. Адаптивная вёрстка viewport, @media

13. Практика: вёрстка Flex, позиционирование, адаптив

14. Мини-проект: лендинг Одностраничный сайт

---

JavaScript и DOM

Модули 15–21 · синтаксис, DOM, динамика на странице

15. JS: переменные и типы let, const, типы

16. JS: условия и циклы if, for, while

17. JS: массивы и объекты [], {}, перебор

18. JS: DOM — выбор элементов querySelector, textContent

19. JS: DOM — создание и изменение createElement, append, remove

20. Практика: DOM Динамика на странице

21. Мини-проект: веб-квиз Вопросы, счёт

---

Функции

Модули 22–26 · объявление, параметры, встроенные методы

22. JS: функции Объявление, вызов, scope

23. JS: параметры и return Аргументы, значения по умолчанию

24. Стрелочные функции () => {}, замыкания

25. Встроенные методы Строки, массивы, объекты

26. Практика: функции и DOM Рефакторинг

---

События и данные

Модули 27–29 · события, формы, localStorage

27. События: addEventListener click, input, preventDefault

28. Обработка форм и валидация Поля, проверка ввода

29. localStorage и JSON Данные в браузере

---

Проекты

Модули 30–32 · шифр, истории, квест в браузере

30. Мини-проект: шифр Цезаря UI шифрования

31. Мини-проект: генератор историй Форма, ветвления

32. Мини-проект: текстовый квест Локации, сохранение