Курсы по Frontend-разработке. Где обучиться профессии фронтенд-разработчика онлайн

Фронтенд - это все то, что происходит в браузере. А бэкэнд - то, что происходит на сервере. Фронтенд-специалист должен разбираться в верстке сайтов и в том, как обеспечить "интерактивность" (взаимодействие) пользователя и сайта.

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

Начнем с обзора бесплатных курсов.

Бесплатные курсы фронтенд-разработки от Нетологии

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

Курс "Как стать программистом"

Бесплатный курс "Как стать программистом" подходит тем, кто раньше вообще не программировал и не понимает, что это.

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

Курс "Профессии в программировании"

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

Программа бесплатного курса "Профессии в программировании":

1. Как стать веб-разработчиком: разбираемся в понятиях и направлениях.
2. Python в веб-разработке: преимущества языка и карьера.
3. Как стать Java-разработчиком с нуля.
4. Как стать frontend-разработчиком и с чего начать.
5. Разработка мобильных приложений на IOS и Android: с чего начать.
6. Как стать специалистом по информационной безопасности с нуля.
7. Тестировщик: кто это и как стать главным по качеству в IT.
8. Системный администратор: быстрый старт в IT.
9. 1C программирование с нуля: как попасть в востребованную профессию.

Курс "Основы верстки сайта"

Верстка - это как раз то, что непосредственно относится к фронтенду. Из курса "Основы верстки" вы узнаете, что значит "верстать", как это происходит, какие навыки для этого нужны и пр.

Этот курс уже достаточно продолжительный, он рассчитан на две недели. Программа включает как теорию, так и практику. Все совершенно бесплатно.

Бесплатные курсы и вебинары от Скиллбокс

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

1. Введение в программирование.
2. Веб-верстка для начинающих.
3. Веб-верстка. Продвинутый уровень.

Еще рекомендую вам вот эти бесплатные видео по верстке, Java-скриптам и HTML:

1. HTML и CSS с нуля. Урок 1.
2. Создаем веб-страницу с HTML и CSS.
3. Верстка и размещение сайта в интернете.
4. Обзор веб-технологий и верстка первой страницы.
5. Fullstack-разработчик: Погружение во frontend-разработку.
6. Сайт за час. Часть 2. JS.

Курс "Mate Academy. Frontend"

Программа обучения:

1. Изучаем основы HTML и CSS. Знакомимся с семантикой.
2. Разбираемся с CSS селекторами и специфичностью. Работаем с HTML формами.
3. Учимся управлять блочной моделью.
4. Используем позиционирование и продвинутое оформление элементов.
5. Вникаем в детали работы Flexbox и медиа-запросов.
6. Внедряем методологию БЭМ.
7. Применяем препроцессоры для упрощения вёрстки.
8. Создаём свой первый Landing page.
9. Овладеваем трансформациями и анимациями.
10. Познаём тонкости работы с CSS Grid.
11. Верстаем адаптивную страницу.
12. Знакомимся с CSS-фреймворками.
13. Знакомимся с синтаксисом и конструкциями языка.
14. Учимся манипулировать строками и числами.
15. Заглядываем в мир регулярных выражений.
16. Погружаемся в мир объектов Javascript.
17. Разбираемся с наследованием.
18. Вникаем в тонкости работы callback.
19. Доводим до автоматизма обработку массивов данных.
20. Повсеместно применяем новые структуры данных и возможности языка.
21. Досконально разбираемся с замыканиями.
22. Учимся решать задачи в условиях ограниченного времени.
23. Знакомимся с основами DOM.
24. Оживляем страницу используя обработчики событий.
25. Разбираем как работает браузер и Javascript.
26. Тренируемся проходить собеседования по JS.
27. Развёртываем React приложение.
28. Знакомимся с функциональными компонентами.
29. Учимся управлять внутренним состоянием компонента.
30. Обрабатываем пользовательский ввод.
31. Получаем данные с сервера.
32. Разбираемся что такое Promise и как их использовать.
33. Улучшаем производительность React-приложения.
34. Управляем адресной строкой браузера и маршрутизацией.
35. Осваиваем React Hooks.
36. Знакомимся с продвинутыми техниками React.
37. Применяем Redux для управления состоянием приложения.
38. Учимся обрабатывать асинхронность.
39. Создаём полноценное одностраничное приложение (SPA).
40. Тренируемся проходить собеседования по React/Redux.

Ссылка на курс от Mate Academy

Платные курсы по фронтенду

Переходим теперь к обзору платных углубленных программ.

Курс "Frontend-разработчик с нуля" от Нетологии

Программа курса:

Материалы курса собраны в два больших блока. В первом верстка сайта (HTML + CSS), во втором джава скрипт. Помимо вебинаров и видеолекций преподаватели дают ссылки на хорошую дополнительную литературу по теме.

Ссылка на курс от Нетологии

Курс "Frontend-разработчик" от Скиллбокс

Программа курса:

Ссылка на курс от Skillbox

Курс "Frontend-разработчик" от Geekbrains

Программа курса:

1. Веб-разработка. Быстрый старт.
2. Git. Базовый курс.
3. HTML/CSS. Интерактивный курс.
4. Основы программирования.
5. HTML5 и CSS3.
6. JavaScript.
7. Основы баз данных.
8. ReactJS.
9. Стажировка в GeekBrains (Web).
10. Фриланс разработчик: курс подготовки.

Ссылка на курс от GeekBrains

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

Программа обучения:

1. Веб-верстка.
2. Javascript.
3. React и другие фреймворки.
4. Архитектура приложений и бекенд.
5. Карьерный трек.

Ссылка на курс от SkillFactory

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

Программа обучения:

1. HTML и CSS. Профессиональная вёрстка сайтов.
2. HTML и CSS. Адаптивная вёрстка и автоматизация.
3. JavaScript. Профессиональная разработка веб-интерфейсов.
4. Подготовка вёрстки для cистем управления контентом (CMS).
5. Вёрстка React-компонентов.
6. Грейдирование.
7. Акселератор.
8. Стажировка в «Лиге А.».

Ссылка на курс от HTML Academy

"Профессия Фронтенд-разработчик" от Hexlet

Программа обучения:

1. Основы веб-программирования.
2. Профессиональный JavaScript.
3. Разработка браузерных приложений.
4. Разработка React-приложений.

Что получаете на выходе:

1. 340+ выполненных и проверенных упражнений.
2. 4 проекта в портфолио на GitHub.
3. 11 Open Source проектов Хекслета.
4. 150 пройденных тестовых заданий

Ссылка на курс от Хекслета

Онлайн-курс по frontend от HEDU

Программа обучения:

1. HTML (2 урока).
2. CSS (3 урока)
3. JavaScript (4 урока)

Ссылка на курс от HEDU

Курс "Профессия FRONTEND РАЗРАБОТЧИК" от LoftSchool

Что изучите:

1. Vue.js.
2. React.js.
3. Workflow.
4. SPA-приложения.
5. Тестирование программ и проверка кода.

Ссылка на курс от LoftSchool

Яндекс-Практикум. Как стать мидл фронтенд-разработчиком

Программа обучения:

1. JavaScript.
2. Модуль самостоятельного проекта.
3. Модуль командного проекта.
4. Алгоритмы и структуры данных.
5. Карьерный трек.

Ссылка на курс от Яндекс-Практикум

Профессия FRONT-END разработчик от ItProger

Программа обучения:

1. HTML-разметка.
2. CSS3 оформление.
3. CSS3 анимация, адаптивность и FlexBox.
4. Фреймворк Bootstrap.
5. Таск-менеджер Gulp.
6. Препроцессор SASS.
7. JavaScript.
8. JavaScript + HTML.
9. Библиотека jQuery.
10. Фреймворк Vue JS.
11. Контроль версий Git.
12. Формат SVG.
13. Создание сайта. Главная страница.
14. Создание сайта. Страница статей.
15. Создание сайта. Страница контактов.
16. Выгрузка на хостинг. Фриланс и дипломный проект.

Ссылка на курс от itProger

Теперь рассмотрим еще несколько курсов, которые посвящены не полностью фронтенду, а его отдельным элементам - джава скриптам, HTML, анимации.

"HTML и CSS, Адаптивная вёрстка и автоматизация" от HTML Academy

Программа обучения:

1. Методологии вёрстки.
2. Препроцессоры и автоматизация.
3. Адаптивные сетки.
4. Адаптивные декоративные элементы.
5. Адаптивная графика.
6. Векторная графика и оптимизация.
7. Погружение в автоматизацию.
8. Производительность вёрстки.
9. Дипломный проект.

Ссылка на курс по HTML и CSS

"JavaScript. Профессиональная разработка веб-интерфейсов" от HTML Academy

Программа обучения:

1. Знакомство c JavaScript.
2. Основные возможности JavaScript.
3. Объекты и массивы.
4. Встроенные объекты и функции.
5. Организация кода.
6. DOM и события.
7. Манипуляции с DOM.
8. Работа с событиями.
9. Внешние API и сторонние библиотеки.
10. Сеть.
11. Асинхронность. Работа с сетью.
12. Обратная связь и оптимизация.
13. Защита.

Ссылка на курс по JavaScript

"Анимация для фронтендеров" от HTML Academy

Программа обучения:

1. Основы анимации.
2. Анимация в CSS.
3. SVG Анимация.
4. Покадровая анимация. JavaScript и Canvas.
5. WebGL. Шейдеры.
6. Three.js часть 1: 3D в браузере.
7. Three.js часть 2: Работа с камерой.
8. Будущее анимации в браузере.
9. Внешние API и сторонние библиотеки.
10. Сеть.
11. Асинхронность. Работа с сетью.
12. Обратная связь и оптимизация.
13. Защита.

Ссылка на курс по анимации

Курс по HTML/CSS от FructCode

Что вы узнаете на курсе:

1. Основы верстки сайтов (html и css).
2. Как пользоваться html-тэгами div, span, p, ul, li и другими.
3. Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах.
4. Как использовать css-свойства margin, position, padding, color, background и другие.
5. Что такое адаптивная верстка.
6. Как сделать верстку сайта.
7. Как пользоваться инструментами разработчика в браузере Google Chrome.
8. Что такое viewport и как его использовать.
9. Как создать раздел с комментариями на сайте.
10. Как встроить видео в html-страницу.
11. Как изменить верстку сайта в браузере.
12. Как связать html-страницы между собой.
13. Как сверстать меню на сайте.

Ссылка на курс от FructCode

Заключение

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

Если хотите почитать бесплатные электронные книги, то из наиболее простых, понятных и качественных могу вам порекомендовать вот этот учебник по JavaScript. Там есть даже небольшие практические задачи после каждого урока. По HTML материалов в открытом доступе вообще куча.

Удачи!