HTML и CSS — 2learn

Что охватывает

HTML и CSS — два языка, понятных любому браузеру, и вместе они образуют слой документа в вебе. HTML задаёт документу структуру и смысл; CSS решает, как эта структура выглядит и как она перестраивается, когда меняется доступное место. Называют их рядом потому, что вместе их и изучают и потому что порознь ни один не приносит пользы: разметка без таблицы стилей остаётся простым документом, а таблице стилей, которой нечего выбрать, нечего и оформлять.

Почему это важно

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

Входящие навыки

Язык гипертекстовой разметки (HTML) (02-frontend/03-html) — структура и смысл документа.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — каскад, блочная модель и системы раскладки, которые её оформляют.

С чего начать

Первым читайте HTML: выбранные элементы становятся сырьём для правил стилей, которые вы напишете дальше, а их семантику CSS уже не добавит. Затем пройдите трек CSS по порядку — вплоть до современных возможностей, заменивших значительную часть того, из чего строились старые таблицы стилей, — после чего адаптивный веб-дизайн применит и то и другое к настоящим экранам.