Stepik Вёрстка на HTML & CSS для начинающих
О курсе
Подробнее
В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS. После обучения по программе этого курса вы сможете создавать современную верстку сайтов. Мы рассмотрим способы создания таких элементов как: меню, раздел команды, информационные разделы с карточками и многое другое. А так же посмотрим основные инструменты в редакторе Photoshop, которые могут вам пригодиться при верстке сайтов. Вы научитесь верстать сайт по макету из Figma и Pixso - это современные инструменты для дизайнеров и верстальщиков.
Вы получите знания, которые нужны в самом начале пути любого веб-разработчика и будите их использовать на протяжение всего своего пути. Вся теоретическая информация разложена по полочкам, доступно объясняется и подкрепляется практическими заданиями и домашними работами. Курс намерено не содержит лишней информации, тем самым позволяет лучше освоить материал, который действительно важен.
Все уроки и задания из этого курса полностью включены в курс "Frontend разработчик на HTML, CSS и JavaScript", который содержит в себе шесть разных курсов. Подробнее можно ознакомиться на странице курса.
Требования
Что нужно для старта
- Желание освоить создание сайтов и начать зарабатывать на этом
- Любой компьютер или ноутбук с доступом в интернет и базовые навыки работы с ним
- Немного целеустремленности, трудолюбия, терпения и щепотка веры в свои силы
- Никакой другой предварительной подготовки
Результат
Что вы получите
- Языку гипертекстовой разметки HTML
- Языку каскадных таблиц стилей CSS
- Вёрстке фрагментов современных сайтов
- Созданию адаптивной сетки на CSS
- Работать с Flexbox и Grid
- Быстро писать код с помощью плагина Emmet
- Вёрстке сайта по макету из Figma
- Вёрстке сайта по макету из Pixso
- Работать с SVG иконками
- Работать с плагином Inspect Styles в Figma
- Работать с плагином Perfect Pixel
- Делать адаптивную версию сайта для разных устройств (Телевизор, ПК, Ноутбук, Планшет, Смартфон)
- Составлять портфолио и резюме
- Работать на фриланс бирже
Аудитория
Для кого этот курс
- 1. Для тех, кто уже делал свои первые попытки в создании сайтов, но не очень успешно или давно.
- 2. Для тех, кто хочет освоить HTML и CSS, и начать применять эти навыки в работе.
- 3. Для тех, кто мало что понял из предыдущих пунктов, но очень хочет понять, так как чувствует, что эти навыки будут полезны.
- 4. Для тех, кто хочет стать крутым разработчиком, зарабатывать на этом деньги и быть востребованным на современном рынке труда.
Содержание
8 занятийПрограмма курса
№ТемаЧто внутри
01Уроки по HTML
- Введение
- Установка браузера и редактора кода
- Обзор функций редактора
- Первые HTML теги
- Как задавать путь к файлу
- Создание списка
- Создание таблиц
- Работа с текстом
- Создание формы
- Универсальные атрибуты
- Цвет RGB и спецсимволы
- Тест по HTML, Часть 1
- Подведение итогов изучения HTML
02Уроки по CSS
- CSS селекторы
- Работа с изображениями
- Границы
- Размеры элементов
- Работа с шрифтом
- Блочная модель документа
- Псевдоклассы и псевдоэлементы
- Основы CSS Flexbox
- Тест по CSS, Часть 1
- Адаптивная версия сайта, Создание своей сетки
03Практика
- Практическое занятие 1
- Практическое занятие 2
- Практическое занятие 3
- Урок по Photoshop
- Практическое занятие 4
- Заключение
- Тест по HTML, Часть 2
- Тест по CSS, Часть 2
- Справочники и ссылки
04Верстка сайта из Figma
- Работа с Figma и создание проекта
- Про Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- Пара слов о работе верстальщика
- Интерактивные элементы на сайте
- Домашнее задание по верстке сайта
- Фриланс: как взять заказ
05Полезные материалы
- Редакторы кода, иконки и Emmet
- CSS Grid и другие возможности
- Позиционирование, размеры и блочная модель
- БЭМ и как называть классы в HTML
- margin или padding что лучше использовать
- Выравнивание по центру и анимация
- Переменные root и функция calc
067 сайтов в портфолио
- Сайт 1 - Konstruct
- Сайт 2 - Alivio
- Сайт 3 - WD
- Сайт 4 - Britlex
- Сайт 5 - Archi Web
- Сайт 6 - Cloud Budget
- Сайт 7 - Dae
07Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
08Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
01Уроки по HTML
- Введение
- Установка браузера и редактора кода
- Обзор функций редактора
- Первые HTML теги
- Как задавать путь к файлу
- Создание списка
- Создание таблиц
- Работа с текстом
- Создание формы
- Универсальные атрибуты
- Цвет RGB и спецсимволы
- Тест по HTML, Часть 1
- Подведение итогов изучения HTML
02Уроки по CSS
- CSS селекторы
- Работа с изображениями
- Границы
- Размеры элементов
- Работа с шрифтом
- Блочная модель документа
- Псевдоклассы и псевдоэлементы
- Основы CSS Flexbox
- Тест по CSS, Часть 1
- Адаптивная версия сайта, Создание своей сетки
03Практика
- Практическое занятие 1
- Практическое занятие 2
- Практическое занятие 3
- Урок по Photoshop
- Практическое занятие 4
- Заключение
- Тест по HTML, Часть 2
- Тест по CSS, Часть 2
- Справочники и ссылки
04Верстка сайта из Figma
- Работа с Figma и создание проекта
- Про Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- Пара слов о работе верстальщика
- Интерактивные элементы на сайте
- Домашнее задание по верстке сайта
- Фриланс: как взять заказ
05Полезные материалы
- Редакторы кода, иконки и Emmet
- CSS Grid и другие возможности
- Позиционирование, размеры и блочная модель
- БЭМ и как называть классы в HTML
- margin или padding что лучше использовать
- Выравнивание по центру и анимация
- Переменные root и функция calc
067 сайтов в портфолио
- Сайт 1 - Konstruct
- Сайт 2 - Alivio
- Сайт 3 - WD
- Сайт 4 - Britlex
- Сайт 5 - Archi Web
- Сайт 6 - Cloud Budget
- Сайт 7 - Dae
07Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
08Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Вёрстка на HTML & CSS для начинающих» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
