От нуля до героя фронтенда (Часть 1)

Workafrolic (±∞)
May 23, 2016 · 10 min read

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

Этот гайд поможет вам сориентироваться в изучении фронтенд-разработки. В нем собраны учебные ресурсы, уже доказавшие свою эффективность, и подробные объяснения.

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

От кода до интерфейса

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.

Практика основ HTML и CSS

Эксперимент 1

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).

Эксперимент 2

Некоторые веб-сайты используют CSS фреймворки или обфускацию кода (рус.), затрудняя чтение. Поэтому я подобрал сайты с хорошим дизайном и легким для чтения кодом.

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

Еще раз повторю, что целью второго эксперимента является не воссоздание главной страницы. Даже не смотря на то, что это бы точно не помешало! Выберите пару ключевых компонентов, например навигационную панель или секцию с баннерами и сверстайте их. Я написал свои предложения рядом со ссылками на сайты, но вы можете выбрать другие части на свое усмотрение.

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

Сброс CSS

Кроссбраузерная поддержка

Препроцессоры и постпроцессоры CSS

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2016 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость (responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

Эксперимент 3

Умение проводить эффективный рефакторинг кода — очень важный навык для фронтенд-разработчика. Создание эффективного кода- постоянный процесс. Возьмите статью CSS архитектура: рефакторинг CSS (англ.) в качестве отправной точки для вашей работы над рефакторингом.

Не важно сделать правильно с первого раза. Важно сделать правильно в конечном результате.

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

ShiftBrain Studio

Для начала прочитайте статью от Adham Dannaway Мой (простой) процесс дизайна и разработки сайта-портфолио (англ.).

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

Мир фронтенда все время изменяется

Ниже приведен список сайтов, блогов и форумов, которые являются передовыми источниками информации.

Учитесь на примерах

Стайлгайды

Стайлгайд по типографике

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Сворачиваемся

Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод статьи From Zero to Front-end Hero (Part 1) by Jonathan Z. White

Official Russian

Истории и идеи каждого на русском.

Official Russian

Истории и идеи каждого на русском.

Workafrolic (±∞)

Written by

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Official Russian

Истории и идеи каждого на русском.