Как бесплатно стать front-end-разработчиком при помощи freecodecamp.org (Часть 1)
Недавно я опубликовал заметку об обучении программированию на примере front-end-разработки. В этой статье я расскажу, как стать разработчиком, используя обучающую программу на freecodecamp.org.
Что такое Freecodecamp.org?
Это некоммерческая организация, которая бесплатно предоставляет интерактивные курсы на тему программирования. На ее сайте также есть форум, чаты и полезные материалы. Кстати, по завершении обучения выпускники могут стать партнерами других некоммерческих организаций, создающих веб-приложения, что даст практический опыт разработки.
Так вот, в этой статье я фокусируюсь на основных технологиях, необходимых для front-end-разработки. И рассказываю, на что стоит сделать особенный упор и сколько времени может уйти на изучение. Также стоит отметить, что обучающие материалы написаны на английском языке. Однако с этой сложностью можно справиться при помощи онлайн-переводчика.
Сейчас на freecodecamp.org доступны четыре раздела с курсами по front-end-разработке:
- Адаптивный веб-дизайн, по-простому - верстка (Responsive Web Design Certification)
- JavaScript алгоритмы и структуры данных (JavaScript Algorithms and Data Structures Certification)
- Библиотеки для front-end разработки (Front End Development Libraries Certification)
- Визуализация данных (Data Visualization Certification)
Все пункты требуют особого внимания, поэтому я решил разбить эту статью на две части. Каждый курс оценен создателями в 300 часов. Я считаю обязательными первые три из них: визуализация данных не настолько критична, и после прохождения «JavaScript алгоритмы и структуры данных» с ней будет несложно справиться.
Сколько по факту вы потратите времени на освоение материала, сказать сложно. Но я думаю, что не больше года, если заниматься по паре часов в день. Каждый раздел содержит курсы с уроками. После прохождения курса вам предложат создать несколько проектов, отправить их на проверку сообществу и получить сертификат, подтверждающий ваши знания. Итак, давайте подробнее остановимся на первых двух разделах и рассмотрим, зачем нужно изучить курсы, которые в них входят.
Адаптивный веб-дизайн
Данный раздел посвящен самой основе веб-верстки. И начинается он с курса по языку разметки HTML (Basic HTML and HTML5). Без него невозможно сделать ни один веб-проект. Все, что вы видите на сайте: кнопки, списки, квадратные или круглые блоки – написано с его помощью.
Следующий курс научит основам CSS (Basic CSS) – каскадным таблицам стилей. В них специалисты опишут визуальный стиль вашей разметки HTML. Это могут быть ширина, высота, позиционирование на экране, цвет и размер текста, межстрочные интервалы, правила изменения стилей при наведении курсора на элемент и многое другое. Если HTML – это каркас вашего сайта, то CSS – его визуальное оформление.
«Визуальный дизайн» (Applied Visual Design) – это курс, по сути расширяющий навыки работы с CSS. В нем больше практической информации. Например, как делать градиенты, простые анимации и трансформации.
Курс «Доступность» (Applied Accessibility) – о том, как сделать веб-сайт удобным для людей с ограничениями слуха, зрения, мобильности или с когнитивными нарушениями. Здесь вы научитесь делать проекты, удобные для аудитории.
Курс «Принципы адаптивного веб-дизайна» (Responsive Web Design Principles) обучит вас основам адаптивной верстки. Например, чтобы сайт сам перестраивал свой внешний вид исходя из размеров экрана или устройства.
Названия курсов CSS Flexbox и CSS Grid сложно перевести на русский, но это и не требуется. Они посвящены самым современным способам организации адаптивной верстки. Эти темы затрагиваются в рамках каждого собеседования на позицию front-end-разработчика, поэтому лучше разбираться в них.
Последние два раздела содержат проекты, которые необходимо выполнить для получения сертификата и заявку на него.
JavaScript алгоритмы и структуры данных
Данный раздел содержит курсы, посвященные уже не разметке, а полноценному программированию. В качестве языка выступает JavaScript. Он используется для того, чтобы сделать сайты интерактивными. Речь идет не только о сложных анимациях, но и о получении и обновлении данных по сети, модификации структуры сайта и многом другом. Первый курс в этом разделе, Basic JavaScript, рассказывает об основах синтаксиса. После него вы сможете писать простые программы.
Второй курс посвящен современной версии языка JavaScript, которая имеет обозначение ES6. Исторически сложилось, что именно в этой версии синтаксис и возможности языка были радикально улучшены, а последующие версии просто добавляли новый функционал. Данная тема необходима для освоения таких библиотек, как Reactjs. Ну и на собеседованиях о ES6 точно будут спрашивать.
«Регулярные выражения» (Regular Expressions) помогают в работе с текстом: находить соответствия, делать замены, искать вхождения в строки. Важный момент: они являются инструментом, а не частью JavaScript. Их поддержка реализована во многих языках программирования. Например, если вы захотите использовать Python или C#, то найдете там регулярные выражения. Однако я не думаю, что эта тема необходима для изучения на начальном уровне. Курс можно отложить на потом.
«Курс отладки» (Debugging) посвящен поиску и исправлению ошибок в коде. Он крайне важен для изучения. Без этого вы просто не сможете нормально разрабатывать.
«Курс основ структур данных» (Basic Data Structures) необходим, чтобы научиться оперировать данными в своей программе и писать эффективный код. Также эти знания откроют для вас больше путей выполнения задач. Ну и конечно, эту тему тоже могут затронуть на собеседовании.
Прохождение «Основ написания алгоритмов» (Basic Algorithm Scripting) поможет вам развить свое мышление. Вы сами не заметите, как начнете быстрее и эффективнее писать код. И еще он позволит освоить JavaScript.
«Объектно ориентированное программирование» (ООП), или Object Oriented Programming – это один из главных современных подходов для написания кода. Курс о нем поможет вам понять, как писать свой код и читать чужой. Ну и ООП – это просто удобно.
«Функциональное программирование», или Functional Programming – это парадигма программирования, вторая после ООП по популярности. Она пришла к нам из академического сообщества. Не буду подробно рассматривать, чем она отличается от первой. Но когда будет время, этот курс стоит пройти. Для новичков я считаю его необязательным.
Следующий курс посвящен среднему уровню написания алгоритмов (Intermediate Algorithm Scripting). По сути здесь предлагаются более продвинутые из них. Я бы сказал, что для новичков он опционален, но очень желателен.
Вывод
В этой части я коснулся первых двух разделов: «Адаптивный веб-дизайн» и «JavaScript-алгоритмы и структуры данных». Их уже достаточно, чтобы начать выполнять простые фриланс-заказы – делать верстку и писать простые программы. Некоторые из перечисленных выше курсов достаточно простые, другие заставят попотеть. Конечно, параллельно с ними стоит изучить и другие источники информации. Например, официальную документацию. Ее легко найти в поисковике. Ссылки на нее есть и в описании некоторых тем. Оттуда же вы можете перейти на разделы форума с дополнительными сведениями, объяснениями, как решать задачи и т. д.
В следующей части статьи я рассмотрю последние два раздела, необходимые для освоения специальности front-end-разработчика, – «Библиотека для front-end-разработки» и «Визуализация данных». Так что подписывайтесь, чтобы не пропустить обновления! Всем спасибо!