Наталия Шергина, редактор и коммерческий писатель, специально для блога Нетологии написала колонку об англоязычных ресурсах для начинающих верстальщиков.

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

Программа обучения: «HTML-верстка: с нуля до первого макета»

HTML&CSS

Interneting is hard

Пошаговый гид по HTML и CSS для начинающих. Перед тем как приступить к Interneting is hard, я изучала HTML и CSS везде и понемногу. Знания накопились, я их применяла, но четкой системы в голове не было. Interneting is hard помог лучше разобраться в собственных знаниях и показал, куда двигаться дальше. В описании курса сказано «для начинающих», но материалы пригодятся и тем, кто уже знает минимум по теме.

Плюсы курса:

подача материала — от простого к сложному;
подробное объяснение с графиками, сниппетами кода и гифками;
эстетическое удовольствие — красивый дизайн и distraction-free mode — ничего не мешает обучению.

Пример урока

WTF, HTML and CSS?

Список часто возникающих вопросов при работе с HTML и CSS. Если вы время от времени думаете «Какого чёрта, HTML и CSS?!», то в этом списке могут оказаться ответы на вопросы.

Design Seeds

Блог о цвете. Ресурс для тех, кто любит цвет и эксперименты с ним. Дизайнер Джессика Колалука обрабатывает фотографии природы (и не только), которые она находит в Инстаграм, и создает палитры в цветовой модели HEX.

Html color codes

Всё о цвете в HTML и CSS. Пригодится, если нужны палитры цветов в формате HEX, RGB, HSL. Также на сайте есть подробный гид по использованию цвета в HTML и CSS, который удобно использовать как шпаргалку.

Dirty Markup

Делает ваш HTML-, CSS- и JS-код читабельным. С помощью Dirty Markup удобно «чистить» код: задавать отступы, добавлять межстрочное расстояние, выбирать длину строки.

Flexbox

What The Flexbox?!

Курс по флексбокс. 20 видео, 13 из которых рассказывают о принципах флексбокс, а остальные 7 об их применении на конкретных примерах (форма регистрации, разворот мобильного приложения, блок «цена» на сайте).

Плюс курса, что все материалы и упражнения к нему доступны на странице GitHub. Можно скачать HTML- и CSS-файлы и экспериментировать вместе с инструктором.

DevTips

Канал на YouTube для дизайнеров и веб разработчиков. Среди тем: Adobe, CSS, GitHub, Bootstrap, jQuery. Рекомендую видео по Flexbox — за полчаса можно разобраться с основами и потренироваться в CodePen.

How Flexbox works — explained with big, colorful, animated gifs и Even more about how Flexbox works

Объяснение флексбокс с помощью гифок в двух статьях. Лучший, на мой взгляд, способ объяснить адаптивную вёрстку и флексбокс. В блоге Нетологии есть перевод статьи «Как работает Flexbox: объясняем на гифках».

Flexbox froggy

Обучающая игра. Помогаете лягушкам вернуться в кувшинки и параллельно закрепляете понимание флексбокса.

Git

Git Crash Course

Понятное объяснение работы гита и терминала. Видеокурс на YouTube, который закрыл большинство моих вопросов по работе с терминалом, созданию удаленных и локальных репозиториев и подключению к GitHub.

Learn Enough Git

Ресурс для тех, кто хочет владеть Git на продвинутом уровне.

Учебник по Git, где вы найдёте ответы на большинство вопросов по теме репозиториев и работы с ними.

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Читать ещё: «10 ошибок начинающего верстальщика и как их избежать»

Markdown

Markdown Syntax от Daring Fireball — Джон Грубер объясняет, как использовать синтаксис созданного им маркдауна.

Fuckyeahmarkdown пригодится, если нужно извлечь содержание веб-страницы и конвертировать его в язык разметки маркдаун.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.