Курс на Stepik
Обложка курса «Вёрстка на HTML & CSS для начинающих» на Stepik
490 ₽

Вёрстка на HTML & CSS для начинающих ★ 5.000

Открыть на
STEPIK.ORG

Изучи два основополагающих языка для создания сайтов. Язык HTML для разметки и язык CSS для оформления внешнего вида своего сайта. Сверстаем более 10-ти сайтов по макету из Figma и Pixso в ваше портфолио. И расскажу как взять свой первый заказ на фриланс бирже.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Вёрстка на HTML & CSS для начинающих»Учеников на курсе 681
Сертификаты, выданные на курсе «Вёрстка на HTML & CSS для начинающих»Сертификатов выдано 128
Отзывы о курсе «Вёрстка на HTML & CSS для начинающих»Отзывов получено 12
Рейтинг курса «Вёрстка на HTML & CSS для начинающих»Рейтинг курса 5.000
Уроки в курсе «Вёрстка на HTML & CSS для начинающих»Количество уроков 70
Тесты в курсе «Вёрстка на HTML & CSS для начинающих»Количество квизов 203
Время прохождения курса «Вёрстка на HTML & CSS для начинающих»Время прохождения курса —
Стоимость курса «Вёрстка на HTML & CSS для начинающих»Стоимость курса 490 ₽ —
Обновления курса «Вёрстка на HTML & CSS для начинающих»Обновления курса — —
Дата публикации курса «Вёрстка на HTML & CSS для начинающих»Дата публикации курса — ———
Последнее обновление курса «Вёрстка на HTML & CSS для начинающих»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «Вёрстка на HTML & CSS для начинающих» 8 разделов Уроки в курсе «Вёрстка на HTML & CSS для начинающих» 70 уроков Тесты в курсе «Вёрстка на HTML & CSS для начинающих» 203 теста Время прохождения курса «Вёрстка на HTML & CSS для начинающих» 28 ч. Последнее обновление курса «Вёрстка на HTML & CSS для начинающих» обн. 1 год назад

Уроки по 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. Адаптивная версия сайта, Создание своей сетки ↗

Практика

9 уроков
1. Практическое занятие 1 ↗
2. Практическое занятие 2 ↗
3. Практическое занятие 3 ↗
4. Урок по Photoshop ↗
5. Практическое занятие 4 ↗
6. Заключение ↗
7. Тест по HTML, Часть 2 ↗
8. Тест по CSS, Часть 2 ↗
9. Справочники и ссылки ↗

Верстка сайта из 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. Домашнее задание ↗