Я б в фронтендеры пошел, пусть меня научат…

«Сначала я просто любил порубиться в Мортал Комбат, а потом стал фронтендером». Часто ли вы встречали такой опыт, как у выпускника Geekbrains Артема Шашкова? Любовь к программированию у него выросла из гейминга. Он всегда интересовался кодом и мечтал стать разработчиком. Но между первыми пробами и высокооплачиваемой работой прошло 18 лет. Сейчас Артем работает в крутой компании и занимается разработкой интерфейса. Об этом он рассказывает в видео-интервью.

Иногда близкие считают увлечение играми и компьютером несерьезным. Иногда будущий разработчик и сам не верит в свои силы. Но тратить 18 лет на самостоятельное обучение точно не стоит. Хотите попробовать себя в качестве фронтенда? Начинайте сегодня!

Начало

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

Чтобы понять, есть ли склонность к разработке, нужно попробовать. На портале есть бесплатные курсы в форме видеоуроков или в виде курса с преподавателем.

Видеокурсы:

1. Курс «Веб-разработка. Быстрый старт».

Поможет понять отличия front-end и back-end. После прохождения уроков вы сможете устанавливать Apache и настраивать доступ к локальному сайту, создавать простые страницы, оформлять стилями CSS, размещать сайты в интернете. Курс состоит из 13 уроков.

2. Курс «Git. Быстрый старт».

Git —- система контроля версий, один из самых популярных инструментов во фронтенд-разработке. Позволяет хранить все изменения и предоставляет отдельный доступ каждому члену команды. Курс подходит для всех начинающих программистов и учит правилам командной работы. Состоит из 11 уроков.

Бесплатные курсы с преподавателем:

1. Интенсив «Обучение веб-разработке».

В рамках занятия вы создадите свой первый сайт на HTML+CSS, добавите на него слайдер фотографий и разместите его на хостинге. Длится два часа, стартует 2-3 раза в месяц.

2. Онлайн-курс «Основы программирования”.

Состоит из 4 занятий, на которых вы узнаете о переменных, типах данных и ветвлении; создадите первый сайт и разберетесь, какой язык больше подходит именно вам. Курс длится 2 недели, стартует 2-3 раза в месяц.

Вебинары

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

• Обзор инструментов для фронтенд-разработки —- видео;

• Настройка среды разработки frontend-разработчика —- видео;

• Позиционирование элементов css. Часть 1 и Часть 2;

• CSS для потерявшихся: наводим порядок и позиционирование;

• Первые шаги Bootstrap —- видео;

• HTML-5: новые элементы для разметки и навигации —- видео;

• Верстаем landing page на HTML-5: часть 1 и часть 2;

• Как быстро работать с GIT —- видео;

• GulpJS — быстрый сборщик проектов —- видео;

• Gulp: основы автоматизации веб-проекта на JavaScript —- видео.

Продвинутое обучение

Освоить профессию фронтендера можно тремя путями:

1. Поступить в GeekUniversity на программу «Веб-разработка».

2. Пройти профессию Frontend-разработчик.

3. Окончить отдельные курсы по специализациям.

GeekUniversity

В GeekUniversity нет отдельного направления для фронтенда. Профессии учат на факультете «Веб-разработка”. Она состоит из front-end и back-end. Обучение займет год, в течение которого вы создадите несколько проектов. Для поступления необходимо пройти тестирование.  Для обучения на факультете требуется уверенное знание HTML+CSS. Если знаний недостаточно, рекомендуем закончить подготовительные курсы.

Профессия Frontend-разработчик

Обучение профессии занимает 7 месяцев. В рамках курса вы пройдете пять блоков: HTML+CSS, HTML5+CSS3, Javascript 1+2, ReactJS. Также изучите базы данных и подтяните английский. Теория и практика занимают 5 месяцев, стажировка —- 2 месяца. На программу принимаются студенты с нулевой подготовкой. Старт занятий бывает 2-3 раза в месяц.

Отдельные курсы

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

• HTML+CSS. Основы создания сайтов;

• HTML5 +CSS3. Современные средства веб-разработки;

• Javascript-1. Интерактивные веб-приложения;

• Javascript-2. Продвинутый курс;

• ReactJS. Профессиональная frontend-разработка;

• Wordpress для профессионалов. Разработка темы оформления.

Дополнительные полезности

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

HTML+CSS

1. Справочник —- Справочник HTML+CSS;

2. Валидатор —- W3C validator  

3. Редакторы кода:

• Sublime Text
• Atom
• Brackets
• Visual Studio Code
• WebStorm

4. Учебные и видеоматериалы:

• Общий курс —- W3CSchool (англ.);

• Типографика в HTML/CSS —- видео;

• HTML/CSS-шаблоны для систем управления сайтами —- видео;

• Ускоренная верстка часть 1 и часть 2;

• Пять наиболее раздражающих аспектов CSS;

• Псевдоселекторы в CSS3 —- видео;

• CSS видео: фильтры, селекторы (англ.), Flexbox vs CSS-Grid, web-анимация, анимация, кроссбраузерная верстка, flexbox-верстка.

5. HTML-шаблонизаторы:

• PUG

• EJS

• mustache.js

• Handlebars

• json2html

• Markdown

6. Утилиты для проверки качества кода:

• Linters

• JSHint

• JSLint

• ESLint

• CSS Lint

Препроцессоры

1. Официальные сайты:

• LESS

• Stylus

• Sass

• PostCSS

2. Видеоматериалы:

• Препроцессор Less видео;

• Препроцессоры Less и Sass видео.

Javascript

1. Учебные материалы:

• Современный учебник;

• Как работает Javascript: часть 1, часть 2 и часть 3;

• Eloquent JavaScript (англ.);

• W3CSchool (англ.).

2. Видеоматериалы и статьи:

• HTML5 и Canvas на JavaScript: от простого к сложному —- видео;

• JavaScript и ООП —- видео;

• Обзор популярных библиотек и фреймворков для JavaScript —- видео;

• 8 трюков для ускорения Javascript;

• 5 самых популярных фреймворков для JavaScript;

• 5 редакторов кода для Javascript.

3. Спецификации:

• ECMAScript 6;

• EcmaScript 8.

4. Библиотеки:

• JQuery;

• Underscore;

• lodash.

5. Фреймворки:

• Angular;

• React + Redux/Flux;

• Ember;

• Backbone;

• Vue.js.

Bootstrap

1. Документация:

• Bootstrap3;

• Bootstrap 4 alpha;

2. Официальный сайт —- Twitter Bootstrap;

3. Создание макетов на основе Twitter Bootstrap —- видео.

Angular

1. Официальная документация:

Angular 1.x;

Angular 2.

2. Видеоматериалы:

AngularJS для новичка: вчера, сегодня, завтра —- видео.

React

1. Официальная документация —- React;

2. Учебные материалы:

• 8 бесплатных обучалок фреймворку React.js;

• Шпаргалка по React.

jQuery

1. Официальная документация:

• jQuery;

• jQuery UI.

2. Видеоматериалы:

• Введение, селекторы, работа с DOM-1, работа с DOM-2, Ajax.

Автоматизация задач

1. Официальные сайты:

• Grunt

• Gulp

2. Официальная документация —- Gulp;

3. Gulp: оптимизация содержимого видео.

Дополнительно

1. Платформа node.js;

2. Менеджеры пакетов:

• npm

• bower

• Официальная документация по npm.

3. Контроль версий —- Git.

4. Хостинг кода:

• GitHub;

• Bitbucket.

5. Тестирование:

• Karma

• Mocha

• Jasmine

• Qunit

• PhantomJS

6. Автоматическая перезагрузка страницы в браузере:

• LiveReload;

• Browsersync.

Проверка знаний

Уровень знаний можно проверить не только в реальной работе, но и с помощью тестов. По многим предметам доступны тесты начального, среднего и сложного уровня, а также быстрый спортивный тест. Тесты состоят из 10-20 вопросов. Время на прохождение ограничено. Тест считается пройденным, если на 75-85 % вопросов дан правильный ответ. Пересдать можно через 3 или 7 дней в зависимости от условий.

Тесты:

• Основы программирования (с вопросами по Javascript);

• HTML+CSS: начальный уровень, средний, сложный, спортивный;

• Javascript: начальный уровень, средний, сложный, спортивный;

• Photoshop;

• Английский язык: Pre-Intermediate, Intermediate, Upper-Intermediate.

Личные качества и навыки

Хороший frontend-разработчик пунктуален, стрессоустойчив и умеет работать в команде. Также он должен владеть специфическими навыками, которые помогут ему стать не просто хорошим, а лучшим:

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

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

3. Понимать причину проблемы. Часто разработчики в написании кода останавливаются, как только приложение заработает как надо. Однако во фронтенд-разработке одно и то же решение может быть реализовано разными способами. Если понять поведение кода, писать станет легче. Будет проще подбирать эффективные инструменты и методы. В итоге это сократит количество багов и обеспечит долговременную работу приложения.  

Проверенный метод прокачать свои навыки и повысить уровень профессионализма —- работа под началом опытных специалистов. Поэтому не стоит в начале карьеры становится фрилансером. Лучше попробовать попасть в продвинутую it-компанию с сильной командой и собственными наработками. Это будет кратчайший путь к вершине мастерства.

Цель и желание

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