Курс «Основы современной верстки»

HTML5

CSS3

Developer Tools

Попробовать →

Бесплатный курс

Включено в курс

12 уроков (видео и/или текст)

5 упражнений в тренажере

40 проверочных тестов

Самостоятельная работа

Дополнительные материалы

12 дополнительных материалов

Описание

На этом курсе вы изучите основы верстки сайтов HTML. Знание этого языка пригодится, когда вы начнете работать над версткой своих первых веб-страниц. Вы узнаете больше об HTML-разметке и возможностях современного стандарта HTML5. Также вы получите базовые знания по стилизации с помощью CSS: научитесь подключать стили, использовать селекторы, работать с каскадностью. В дополнение к HTML и CSS, вы научитесь работать со встроенными в браузер средствами отладки верстки, в частности с Google Chrome DevTools. В итоге вы научитесь использовать язык разметки HTML для верстки текста на сайте, а также познакомитесь с базовыми правилами использования CSS и стилизации текста.

Новые навыки вы сможете сразу же применить на практике — мы изучим редакторы для верстки и плагины к ним. В конце каждого урока вы будете встречать небольшие самостоятельные задания. Они направлены на более практическое понимание освещенной темы, поэтому очень рекомендуемы для выполнения.

Основы верстки пригодятся, если вы решите изучать веб-разработку вне зависимости от направления. Знания из этого курса помогают программистам размечать данные и выводить их на сайт.

Чему вы научитесь

Основам веб-верстки: как разрабатывать статические веб-страницы и задавать стили элементам.
Пошагово отлаживать код для быстрого обнаружения ошибок.
Использовать редакторы кода с расширениями, помогающими в разработке. Например, Emmet.
Публиковать свой сайт в интернете на хостинге GitHub Pages.

Программа

1	Введение Познакомимся с целями курса, что мы узнаем, и как применить знания на практике.
2	Введение в HTML Узнаем о роли атрибутов и изучим общую схему описания HTML тегов.
3	Блочная модель Познакомимся с блочными и строчными элементами HTML и изучаем влияние их стилей на итоговую ширину элементов.
4	Семантический HTML Узнаем про семантическую верстку и про доступность в веб.
5	Базовая структура HTML документа Разберемся подробнее с базовой структурой HTML, служебными тегами, и зачем они нужны.
6	Основы CSS научимся использовать CSS для визуального оформления страниц.
7	Каскадность в CSS Подробнее разберем, как работает каскадность стилей в CSS. приоритеты селекторов, научимся их применять.
8	Chrome DevTools Научимся работать с DevTools – панелью разработчика, для поиска ошибок, и исследования верстки.
9	Редакторы кода Познакомимся с редакторами кода для создания верстки и веб-приложений.
10	Emmet Изучаем один из самых полезных плагинов — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
11	Публикация в интернете Научимся выкаладывать свои труды на бесплатный хостинг GitHub.
12	Графические редакторы В этом разделе посмотрим на основные действия при работе с онлайн-редактором Figma.