В этой статье я приведу список ресурсов и рекомендации для тех, кто решил изучить HTML и CSS. Хочу сразу оговориться, что я не являюсь автором ни одного из тех ресурсов, которые приведу ниже, а также не получаю никакой прибыли от их упоминания. Все ресурсы выбраны мной из личного опыта по изучению HTML и CSS. Я старался упорядочить приведенные ниже ресурсы по уровню сложности, но местами порядок условен и соблюдать его не обязательно.
Что же такое HTML и CSS и для чего они нужны?
HTML - это язык разметки web-страниц, средство, с помощью которого верстальщик описывает, какие элементы (картинки, блоки текста, гиперссылки) должны располагаться на странице. HTML не является языком программирования, поэтому человека, пишущего на HTML, называют верстальщиком, а не HTML программистом.
CSS - это язык, с помощью которого к web-страницам добавляют стили, то есть корректируют внешний вид элементов (цвета, размеры) и задают, каким образом элементы должны располагаться относительно друг друга на странице.
Итак, поговорив о том, что это такое, перейдем к ресурсам, по которым можно изучить данные языки.
Head First HTML and CSS
В данной книге рассказывается об основах HTML и CSS. И на мой взгляд, данное произведение - идеальный кандидат, с которого стоит начать изучение HTML и CSS. Новая информация подается очень подробно с примерами и пояснениями. Кроме того, авторам удалось сделать повествование живым и интересным. Мне особенно нравится, как они используют формат интервью, чтобы дополнительно пояснить нюансы к новой теме. В книге содержатся упражнения, которые авторы предлагают выполнить для закрепления материала, и я рекомендую не пренебрегать данным советом. Оставлю ссылку на английское издание книги, но в сети можно без проблем найти русский перевод.
CS50
CS50 - это курс видеолекций Гарвардского университета. На их канале на youtube выложено множество лекций, посвященных различным разделам computer science. Большая часть лекций предназначена для новичков и не требует специальной подготовки, кроме базовых знаний языка, так как все лекции на английском. Я оставлю ссылку на лекцию, посвященную HTML и CSS. Данную лекцию я просмотрел на одном дыхании, так как лектор рассказывает материал очень живо и слушать его одно удовольствие. Язык, используемый в лекциях, довольно простой и отлично подойдет для прокачки восприятия на слух английской речи.
Практика
На этапе, когда вы уже изучили основы HTML и CSS, вам необходимо начать практиковаться. Попробуйте создать собственную web страницу или поискать challenge в сети. В качестве справочника могу посоветовать сайт w3schools. На этом сайте вы найдете гайды по html и css, встроенный редактор, в котором можно попрактиковаться в написании кода, а также викторины с вопросами на знание html и css.
Дополнительно хочу посоветовать к ознакомлению сайт css-tricks. На нем вы найдете статьи, книги, видео, посвященные css. Особенно хочу выделить две статьи: гайд по flexbox и гайд по grid. Эти гайды стали моими любимыми, так как написаны очень емко и понятно.
Bootstrap
Bootstrap - это самая популярная CSS библиотека в мире. Ее использование позволяет сэкономить время на написании CSS стилей. На официальном сайте есть вполне приличная документация, также на w3schools вы можете найти гайд по bootstrap. Хочу оговориться, что использование данной библиотеки не всегда оправдано и вы можете стать замечательным верстальщиком ни разу не используя bootstrap. Поэтому не нужно заучивать наизусть все компоненты доступные в bootstrap. Достаточно просто разобраться, как использовать данную библиотеку и научиться пользоваться документацией.
CSS in Depth
Очень крутая книга, которая расскажет о нюансах работы с CSS. Рекомендую всем, кто уже изучил основы HTML и CSS, имеет опыт верстки и хочет стать профессионалом в этом деле.
Заключение
В данной статье я привел список ресурсов, которые оказались для меня наиболее полезными при изучении HTML и CSS. Также я оформил указанные выше ресурсы в виде дорожной карты и выложил здесь. Данная подборка не претендует на эталон, и я уверен, что существует множество других замечательных книг, статей и видео, поэтому я буду рад, если в комментариях вы поделитесь своими любимыми ресурсами. Далее у меня в планах написать статью с рекомендациями по изучению javascript, так что кому интересно подписывайтесь на канал. Если вам интересна подборка ресурсов по какому-то конкретному языку программирования или технологии, то напишите об этом.