Программирование Продуктивность

Подборка англоязычных ресурсов для начинающих верстальщиков

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

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

Программа обучения: «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 пригодится, если нужно извлечь содержание веб-страницы и конвертировать его в язык разметки маркдаун.

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

Подборка англоязычных ресурсов для начинающих верстальщиков