Верстка-Мастер. Полное руководство

47 участников

О чём курс

Вам нужен навык создания адаптивных сайтов любой сложности — от лендинга мобильного приложения до сайта креативного агентства — без лишней теории. Здесь фокус на инструментах, которые реально востребованы в современной вёрстке: от базы HTML5 и CSS3 до препроцессора Sass и сборщика проектов Gulp.

Внутри разбираются три ключевых аспекта:

  • Работа с современной вёрсткой через Flexbox и CSS Grid Layout для создания гибких сеток.
  • Настройка адаптивности: медиазапросы, адаптивная графика, вставка видео и правильная обработка контента под разные экраны.
  • Реальная практика: сборка трех готовых проектов с нуля, включая нарезку макетов и верстку блоков любой конфигурации.

Курс подойдет тем, кто хочет освоить вёрстку с нуля и получить готовые кейсы в портфолио. По итогам вы научитесь превращать дизайн-макеты в полноценные работающие сайты.

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

  • Основы HTML
    • Урок 1. Введение. Установки редактора
    • Урок 2. Обзор HTML-документа
    • Урок 3. Теги форматирования текста
    • Урок 4. Вставка изображений. Часть 1 - 2
    • Урок 5. Работа со ссылками
    • Урок 6. Списки
    • Урок 7. Таблицы
    • Урок 8. Формы. Часть 1 - 2
    • Урок 9. Вставка видео. Часть 1 - 2
    • Урок 10. Вставка аудио
    • Урок 11. Семантические теги
  • Основы CSS
    • Урок 1. Подключение CSS
    • Урок 2. Назначение классов
    • Урок 3. Свойства шрифта
    • Урок 4. Свойства текста
    • Урок 5. Назначение фона
    • Урок 6. Ширина, высота
    • Урок 7. Рамка
    • Урок 8. Отступы
    • Урок 9. Центрирование
    • Урок 10. Единицы измерения
    • Урок 11. Выравнивание
    • Урок 12. Видимость элементов
    • Урок 13. Блочные и строчные элементы
    • Урок 14. Позиционирование
  • Практика. Верстка сайта креативного агентства
    • Урок 1. Введение. Обзор макета
    • Урок 2. Подготовка. Нарезка изображений
    • Урок 3. HTML-разметка шапки сайта
    • Урок 4. CSS-стили для всей страницы
    • Урок 5. CSS-стили для шапки сайта
    • Урок 6. HTML-разметка блока текста
    • Урок 7. CSS-стили для блока текста
    • Урок 8. HTML-разметка формы контактов
    • Урок 9. CSS-стили формы контактов
    • Урок 10. HTML-разметка подвала страницы
    • Урок 11. CSS-стили подвала страницы
    • Урок 12. Заключение
  • Практика. Верстка лендинга мобильного приложения
    • Урок 1. Введение
    • Урок 2. Подготовка. Экспорт изображений
    • Урок 3. HTML-разметка шапки сайта
    • Урок 4. Подключение reset.css
    • Урок 5. CSS-стили для шапки сайта. Часть 1 - 2
    • Урок 6. HTML-разметка блока «О приложении»
    • Урок 7. CSS-стили блока «О приложении»
    • Урок 8. HTML-разметка блока «Возможности»
    • Урок 9. CSS-стили блока «Возможности»
    • Урок 10. HTML-разметка блока «Технологии»
    • Урок 11. CSS стили блока «Технологии»
    • Урок 12. HTML-разметка блока «Скачать»
    • Урок 13. CSS-стили блока «Скачать»
    • Урок 14. HTML-разметка блока контактов
    • Урок 15. CSS-стили блока контактов
    • Урок 16. HTML-разметка подвала страницы
    • Урок 17. CSS-стили подвала страницы
    • Урок 18. Адаптация макета. Часть 1 - 4
    • Урок 19. Адаптация макета. Часть 5. Заключение
Складчина создана 16 ноября 2021 г. · описание обновлено 23 марта 2026 г.

Другие материалы школы 11

W WebForMySelf Все материалы
198 ₽ 3 582 ₽