Содержание курса
9
разделов
89
уроков
227
тестов
31 ч.
обн. 9 января 2026
Язык HTML
13 уроков
1.
Введение
↗
2.
Установка браузера и редактора кода
↗
3.
Обзор функций редактора
↗
4.
Первые HTML теги
↗
5.
Как задавать путь к файлу
↗
6.
Создание списка
↗
7.
Создание таблиц
↗
8.
Работа с текстом
↗
9.
Создание формы
↗
10.
Универсальные атрибуты
↗
11.
Цвет RGB и спецсимволы
↗
12.
Тест по HTML, Часть 1
↗
13.
Подведение итогов изучения HTML
↗
Язык CSS
10 уроков
1.
CSS селекторы
↗
2.
Работа с изображениями
↗
3.
Границы
↗
4.
Размеры элементов
↗
5.
Работа с шрифтом
↗
6.
Блочная модель документа
↗
7.
Псевдоклассы и псевдоэлементы
↗
8.
Основы CSS Flexbox
↗
9.
Тест по CSS, Часть 1
↗
10.
Адаптивная версия сайта, Создание своей сетки
↗
Практика по HTML и CSS
9 уроков
1.
Практическое занятие 1
↗
2.
Практическое занятие 2
↗
3.
Практическое занятие 3
↗
4.
Урок по Photoshop
↗
5.
Практическое занятие 4
↗
6.
Заключение
↗
7.
Тест по HTML, Часть 2
↗
8.
Тест по CSS, Часть 2
↗
9.
Справочники и ссылки
↗
Работа с Git и GitHub
19 уроков
1.
Что такое Git
↗
2.
Установка Git
↗
3.
Регистрация на GitHub
↗
4.
Первые команды Git
↗
5.
Работа с Git в VS Code
↗
6.
Удаление репозитория
↗
7.
Клонирование
↗
8.
Расширение Git Graph
↗
9.
Алиасы для Git
↗
10.
Отмена изменений
↗
11.
Работа с ветками
↗
12.
Слияние веток Git
↗
13.
Синтаксис Markdown
↗
14.
Фрагменты кода Gist
↗
15.
Хостинг GitHub Pages
↗
16.
Портфолио на GitHub
↗
17.
Fork и Pull Request
↗
18.
Файл .gitignore
↗
19.
Итоги модуля
↗
Верстка сайта из Figma
7 уроков
1.
Работа с Figma и создание проекта
↗
2.
Про Pixel Perfect и верстка Grid + Flexbox
↗
3.
Верстаем несколько разделов сайта
↗
4.
Пара слов о работе верстальщика
↗
5.
Интерактивные элементы на сайте
↗
6.
Домашнее задание по верстке сайта
↗
7.
Фриланс: как взять заказ
↗
Полезные материалы
7 уроков
1.
Редакторы кода, иконки и Emmet
↗
2.
CSS Grid и другие возможности
↗
3.
Позиционирование, размеры и блочная модель
↗
4.
БЭМ и как называть классы в HTML
↗
5.
margin или padding что лучше использовать
↗
6.
Выравнивание по центру и анимация
↗
7.
Переменные root и функция calc
↗
7 сайтов в портфолио
7 уроков
1.
Сайт 1 - Konstruct
↗
2.
Сайт 2 - Alivio
↗
3.
Сайт 3 - WD
↗
4.
Сайт 4 - Britlex
↗
5.
Сайт 5 - Archi Web
↗
6.
Сайт 6 - Cloud Budget
↗
7.
Сайт 7 - Dae
↗
Верстка сайта из Figma
9 уроков
1.
Структура проекта
↗
2.
Обзор макета
↗
3.
Работа с Perfect Pixel
↗
4.
Адаптивная версия
↗
5.
Экспорт SVG
↗
6.
Верстаем раздел
↗
7.
Тень блока вручную
↗
8.
Публикуем код
↗
9.
Плагин Inspect Styles
↗
Верстка сайта из Pixso
8 уроков
1.
Знакомство с Pixso
↗
2.
Работа с SVG
↗
3.
Шрифты Google Fonts
↗
4.
Perfect Pixel в браузере
↗
5.
Раздел сайта Features
↗
6.
Раздел сайта Stats
↗
7.
Раздел сайта Blog
↗
8.
Домашнее задание
↗