Быстрый старт изучения фронтенд разработки

Быстрый старт изучения фронтенд разработки

Не волнуйтесь, если что-то не работает. Если бы всё работало, вас бы уволили. (Mosher’s Law of Software Engineering)

В начале моего погружения в дебри IT я учился разработке на практике, самостоятельно натыкаясь на грабли в попытках сделать какие-то интересные штуки и начинал совсем не с фронтенда. Это и попытки написать Space Inviders на python и pygame или простой http-сервер на том же питоне. Потом был php и какая-то книжка в духе “PHP для чайников” с примерами кода простого интернет-магазина и верстки на таблицах. Потом C/С++ на уровне университетских задач. Потом и server-side js и разные проекты на около-фрилансе то на python+django, то на php…

Во фронтенд-разработку я попал почти случайно имея опыт разработки веб-приложений на разных языках, но совершенно не знал хорошие практики разработки и написания кода. Естественно я даже не знал на достаточном уровне js и не умел верстать, но нужно было работать, нужно было делать проект, писать код. И с js было более-менее понятно, как войти в этот мир. Пишешь код, смотришь на чужой код, перенимаешь лучшие практики и внимательно изучаешь “простыни” замечаний к твоему коду от старших коллег.

С версткой же и css было совершенно непонятно. Вроде кажется, что ты знаешь css, думаешь: “да и что там знать то”. Но в то же время понимаешь, что верстать, а тем более верстать хорошо получается безумно медленно. И вся верстка — это как будто какая-то непонятная магия. Поэтому я и решил сделать гайд, в котором будут хорошие зарекомендовавшие себя ресурсы, которые помогут сделать обучение разработке понятным, легким и структуризированным.

Три столпа фронтенда

Во фронтенде все держится на 3 столпах: HTML, CSS и JS. HTML^[1] - это про структуру страницы, из чего она состоит, в каком порядке расположена информация и какого она рода. Когда браузер загружает сайт, в первую очередь он получает страницу с расширением .html, а уже в нем содержится информация о том, что и откуда грузить дальше. Помимо информации о ресурсах в html-странице содержится и структура самого документа, какая часть текста заголовок, а какая абзац, какие заголовки и в каком порядке идут. Нужно понимать, что html - это просто язык разметки и он довольно универсален. Например, люди с нарушением зрения тоже используют интернет и веб, для них существуют специальные программы - скринридеры, которые зачитывают информацию со страницы и они тоже оперируют разметкой и структурой страницы из html-документа.

CSS^[2] - это про внешний вид элементов страницы, их расположение и раскладку. Ведь всем нам хочется, чтобы приложение или сайт не только были структурированы и читаемы, но еще и красиво выглядели. Вот и css как раз про цвета, шрифты, расположение элементов относительно друг друга на экране, да еще и не только на экране ноутбука, но и на экране телефона.

И наконец JS^[3]. Допустим, вот у нас есть хорошо сверстанная структурированная страница с правильными заголовками и неплохим интересным текстом. Да еще к этому всему с красивыми шрифтами и удобной css-раскладкой^[4], даже с красивыми анимациями. Но чего-то в ней не хватает, какой-то той самой “магии”, которая есть на куче сайтов в интернете. Автоматическая подрузка постов, интерактив, взаимодействие с интерфейсом. Кнопки, комментарии и еще миллионы идей, которые делают из веб-страницы веб-приложение, из простого блога соц. сеть, а сайта-визитки интернет-магазин, на котором хочется часами выбирать кучу ненужных вещей. (Да-да, я про алиэкспресс)

Javascript - это тот самый язык программирования, который выполняется в браузере пользователя и “оживляет интерфейс”. Он как раз и позволяет пользователю взаимодействовать с интерфейсом и решать те задачи, за решением которых люди и обращаются к помощи веб-приложений. От покупок ненужного барахла не вставая с дивана до бессмысленного спора с незнакомцем в комментариях до 2 часов ночи. В общем то, что делает веб вебом в современном понимании.

А что делать то с этим?

В этой статье я дам рекомендации только по изучению HTML и CSS и практике верстки. В качестве введения изучите статьи про HTML и CSS от Mozilla Developer Network (MDN). MDN - это сам по себе важный ресурс с огромным количеством информации по современным стандартам JS, HTML, CSS и API браузеров и будущем во время разработки этот ресурс поможет ответить на большинство вопросов, связанных с особенностями той или иной frontend-технологии.

После MDN загляните на HtmlAcademy. Достаточно пройти все бесплатные доступные курсы по HTML и CSS, чтобы начать понимать, как выглядят эти технологии и понимать базовые принципы написания разметки. Потребуется всего несколько часов для прохождения этих курсов и я не советую пытаться проходить какие-либо платные курсы, потому как вся эта информация уже есть в интернете в доступной и понятной форме.

Чтобы попрактиковаться в CSS-селекторах^[4] можно попробовать CSS Diner. Это интересная игрушка с задачками по CSS. Еще один важный аспект HTML и CSS — раскладка. Вот тут пособие от mdn про то, что это такое. Для понимания раскладок есть LearnLayout - интерактивный учебник, показывающий как создавать базовые раскладки на HTML и CSS. Все то, что вы изучите при прохождении LearnLayout - это полезная и нужная информация, но она не затрагивает современные инструменты создания раскладок, такие как CSS Grid и CSS Flexbox. Поэтому, вот еще пара интерактивных игрушек для обучения этим технологиям: CSS Grid Garden и Flexbox Froggy

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

Приступаем к практике

Основной способ обучения верстки — это практика. Не так важно, сколько книг или статей вы прочитали об этом, как сколько разных страниц вы сверстали. Я выделил 2 типа заданий по верстке:

• По готовому макету “с чистого листа”, то есть по изображению того, что в итоге должно получиться;
• Повторение верстки какого-то готового сайта или куска сайта.

Второй тип задач помогает учиться анализировать чужую верстку и перенимать хорошие практики. Ну или плохие, тут как повезет с исходником. :)

С чистого листа

В первой задаче мы будем использовать CodePen. *CodePen
* - это песочница для фронтенда, где вы можете писать HTML и CSS (и даже JS
) код без создания файлов на вашем компьютере и без поиска хостинга для того, чтобы поделиться своим решением. Удобный сервис. Кстати, советую покопаться в существующих сниппетах на этом сайте, иногда там попадаются интересные идеи.

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

Вот несколько макетов, которые я предлагаю вам сверстать. Примеры были взяты с просторов интернета. Можете покопаться на Figmafreebies, Siteinsire или десятках подобных сайтов и выбрать другие, которые больше понравятся.

• Простой лендинг
• Дэшборд
• Мобильная верстка

Обучение методом копирования

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

В этой задаче я хотел бы, чтобы вы не использовали CodePen, а разрабатывали локально в файлах на своем компьютере, чтобы научиться, в том числе связывать разные файлы CSS, HTML, шрифтов и картинок в единую страницу. А так же это позволит вам “пощупать” редакторы кода.

Я советую вам использовать редакторы Visual Studio Code или Sublime Text 3. Особой разницы какой именно редактор нет, это дело вкуса и со временем вы сами определитесь с тем, какой редактор вам больше по душе.

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

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

Большинство приложений используют обфускацию и минификацию кода^[4] для уменьшения размера страницы, что сильно затрудняет их анализ, так что не пугайтесь странным названиям css-классов, а сами старайтесь называть свои классы осмысленно(то есть вместо ap-gfn что-то в духе main-article-picture).

Medium

Попробуйте повторить их большой сниппет со статьей:

И маленький сниппет:

Youtube

Попробуйте повторить их сниппет видео:

А теперь сделайте сетку из сверстанных сниппетов как на главной:

Google

Попробуйте повторить их блок с поисковым полем ввода на главной

И поисковый сниппет на странице с результатами выдачи

Куда копать дальше?

Допустим, вы прочитали все упомянутое статьи и как-то выполнили все данные задачи, но возникает вопрос: “А дальше то что?” А дальше я дам несколько ссылок на следующие статьи, которые помогут вам и дальше понимать, в какую сторону “копать”, чтобы погружаться в профессию.

• Введение в JS
• Основы типографики
• Дорожная карта frontend-разработчика
• Сборник полезных ссылок
• Идеи для практики разработки проектов

Заключение

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

---

1. 1.HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. ↩
2. 2.CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. ↩
3. 3.JavaScript - основной язык разработки во фронтенде, именно код на js выполняется в браузере пользователя. ↩
4. 4.CSS-селекторы - способ выделения сущностей в документе для определения, к чему именно относить то или иное правило. ↩
5. 4.Обфускация (или запутывание) кода — приведение исходного текста или исполняемого кода программы к виду, сохраняющему её функциональность, но затрудняющему анализ, понимание алгоритмов работы и модификацию. ↩