Быстрое погружение в frontend разработку для новичков

Автор: Swfuse

Сегодня существует много курсов и статей по изучению веб-разработки. В основном они о каком-то конкретном направлении.

Перечислю некоторые из них:

HTML
CSS
JavaScript
базы данных
фреймворки
сборщики проектов
алгоритмы
визуализация данных

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

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

Разработчики сайта обновили в этом году программу обучения. Добавили несколько больших разделов и переработали старые. Теперь там только актуальная информация.

А самое главное - это все бесплатно!

Регистрируемся и начинаем погружение

Чтобы зарегистрироваться на сайте, жмем на желтую кнопку Start coding (it's free).

Далее предложат создать аккаунт через привязку соцсети. Рекомендую выбрать GitHub, потому что в дальнейшем активность будет отмечаться именно там. Если у вас еще там нет аккаунта, стоит его завести. Это ваша площадка для будущего портфолио, которое можно показать работодателю.

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

После регистрации попадаем на домашнее окно сайта. Жмем кнопку Go to the coding curriculum.

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

Представлено здесь следующее:

Адаптивный веб дизайн
Алгоритмы JavaScript и структуры данных
Библиотеки Frontend разработки
Визуализация данных
Микросервисы и программные интерфейсы приложений (API)
Информационная безопасность и обеспечение качества(тестирование)
Подготовка к собеседованию.

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

Начинаем обучение

Главы

Открываем первую часть и начинаем работать.

Весь материал представлен в виде интерактивных блоков:

Описание текущей темы
Описание заданий которые нужно сделать
Кнопки проверки сделанного
Два поля кода: Для Html и CSS
Поле для вывода конечного результата

В этом задании нужно вставить в тег h1 фразу Hello World.

После чего жмем Run the Tests. Как только одно задание выполнено, оно сразу помечается галочкой. А когда выполняются все задачи на странице, получаем уведомление и можем идти в следующую главу.

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

Челленджи

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

Эти задачи хорошо прокачивают логическое мышление программиста. Более того, некоторые челленджи расширяют кругозор по решению задач. Если погуглить, можно даже узнать, где эта задача может применяться.

Почти наверняка на собеседовании вас попросят написать какой-нибудь FizzBuzz на бумажке.

Если совсем туго, то есть подсказки в кнопке Get a hint. Она ведет на форум с обсуждением этой задачи.

Проекты

В этих этапах дается описание проекта. Поэтапно расписаны задачи. Делаете все, и решение выкладываете на гитхаб. Вставляете ссылку в форму и нажимаете I’ve completed this challenge.

Здесь нет никаких проверок. Сделал, вставил ссылку на выполненный проект и двигаешься дальше.

Каждый проект дается в конце одного большого раздела. Изучили html, css, пробуем делать первую страницу портфолио.

Чем сложнее раздел, тем сложнее поставленная задача.

Например, в первом разделе предлагается написать первый сайт-портфолио.

Когда вы выполните весь блок, то получите сертификат о прохождении блока — приятное поощрение.

Заключение

Freecodecamp прекрасный ресурс, если вы хотите стать frontend-разработчиком с нуля.. Более того, там же можно изучить backend и тестирование.

Плюсы

Абсолютно весь сайт бесплатный
Большая программа обучения. От начинающего до среднего уровня
Хорошее интерактивное обучение
Большой форум с ответами на вопросы

Минусы

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