⭐ Подборка бесплатных онлайн-курсов по фронтенд-разработке для начинающих с нуля с сертификатом и без в этом году. ⭐
1. «Основы вёрстки сайта» от «Нетологии»

- Продолжительность курса: 2,5 недели
- Формат обучения: вебинары и практические задания
- Кому подойдёт: новичкам
Выдача сертификата: нет
Описание курса
Масштабный курс, на котором вы узнаете основы работы с HTML и CSS. Благодаря данному материалу вы сможете самостоятельно создавать внешний вид страниц, меняя элементы и добавляя стили.
Программа состоит из 5 занятий и 16 практических заданий, выполняя которые, вы закрепите полученные знания.
Вы узнаете:
- Как вносить правки в HTML-код страницы
- Как верстать текстовые блоки
- Как добавлять стили к отдельным элементам сайта
- Как готовить контент для публикации на сайте
Особенности курса:
- Масштабный курс с большим количеством преподавателей
- Есть практические задания
- Есть обратная связь
- Записи лекций остаются доступными навсегда
Авторы курса

Источник: http://topthinkblog.ru/kursy-po-frontend-razrabotke/
Skillbox
Профессия Frontend-разработчик PRO
Вы научитесь верстать, создавать макеты, работать с JavaScript, Vue.js, React.js и Node.js. Узнаете, как устроена разработка в современных командах, и начнёте карьеру в Frontend Development.
Вы расширите навыки вёрстки и работы с JavaScript, освоите Photoshop и Figma, прокачаете soft skills и дополните портфолио — сможете претендовать на middle-позицию.
Вы освоите frontend-разработку от макета до реализации, сделаете проекты для портфолио и подтянете английский — сможете брать удалённые заказы или работать в распределённой команде.
Источник: http://howtolearn.ru/online-kursy/frontend.html
В чем разница между фронтендом и бэкендом
Результаты фронтенд-разработки пользователь видит перед собой. А все то, что делают бэкенд-разработчики, тщательно скрыто от глаз.
Бэкенд-разработчики работают с серверами, хранением данных и всеми теми механизмами, которые спрятаны «внутри» веб-сайта, но обеспечивают качественную работу его «внешней» стороны.
Приведу аналогию с часами. Вот вы смотрите на них – что вы видите? Цифры и стрелки. Вам все нравится, все понятно, красиво, полезно. Можно взглянуть и сразу понять, сколько времени. Циферблат со стрелками – это фронтенд.
Но работают эти часы благодаря чему? Благодаря сложному механизму, который спрятан под циферблатом – всяким шестеренкам, винтикам и болтикам. Это как раз бэкенд.
Источник: http://vsvoemdome.ru/obrazovanie/frontend-razrabotchik-kto-eto
На правах рекламы. «Профессия Frontend-разработчик» от SkillFactory [гарантированная помощь в трудоустройстве]

Длительность: 7 месяцев = 10 часов в неделю.
Документ об окончании: сертификат.

Формат: интерактивные вебинары + пошаговые уроки + работа в тренажёрах + домашние задания с проверкой + общение с другими участниками курса в закрытом чате + работа с личным наставником.
Особенности:
- Гарантированная помощь в трудоустройстве
- Готовое портфолио из 5 проектов по окончании обучения
- Преподаватели-практики — сотрудники EPAM Systems и Radario
- Выпускники SkillFactory работают в Nvidia, Skyeng, Cisco, Yoomoney, «СберБанке», «Билайне», «Альфа-Банке»
- Можно оплачивать обучение в рассрочку на 6 или 12 месяцев
- Бесплатная консультация для желающих начать обучение
Источник: http://topthinkblog.ru/kursy-po-frontend-razrabotke/
Geekbrains
В первой четверти вы углубитесь в верстку на HTML/CSS и приступите к изучению JavaScript: познакомитесь с основами языка, операторами, циклами, массивами и объектами, научитесь работать с браузерными событиями: кликом мышки, прокруткой, отправкой формы. На продвинутом курсе продолжите погружение в язык, познакомитесь с объектно-ориентированным программированием, тестированием и фреймворком Vue.js.
Кому подойдет этот курс?
Тем, кто хочет сменить профессию
Даже если вы никогда не работали в IT, вы получите востребованную и высокооплачиваемую специальность.
Начинающим веб-разработчикам
У вас будет всё для ускоренного карьерного роста: комплексные знания и опыт работы с продвинутыми инструментами, методологиями и стандартами.
Практикующим IT-специалистам
Как перейти в востребованное направление и зарабатывать больше.
Источник: http://howtolearn.ru/online-kursy/frontend.html
Для кого разработана программа
Школьники и выпускники
(15-18 лет)
Школьники и выпускники
(15-18 лет)
Получат первую профессию, не откладывая на потом свою мечту стать программистом
Студенты ВУЗов
(18-23 года)
Студенты ВУЗов
(18-23 года)
Освоят вторую специальность параллельно с университетским образованием
Представители других профессий
(23-55 лет)
Представители других профессий
(23-55 лет)
Которых не устраивает текущая карьерная и финансовая перспектива, смогут переучиться на разработчика ПО и построить карьеру в IT-индустрии
Все желающие повысить IT-квалификацию
(18-55 лет)
Все желающие повысить IT-квалификацию
(18-55 лет)
Систематизируют свои знания и получат рабочие навыки, востребованные в современном IT
Программа
Источник: http://msk.itstep.org/front-end_course
Hedu
Онлайн-курс по frontend
Для кого будет полезно?
- Новичков
Хотите разобраться во фронтенд-разработке? Онлайн-курс по frontend будет для вас полезен. - Начинающих программистов
У вас уже есть опыт во фронтенде, но мешают пробелы в знаниях? Поделимся профессиональными лайфхаками, узнанными на собственном опыте. - Школьников и студентов
Заранее задумываетесь о прибыльной специальности? Пройдите онлайн-курс фронтенд-разработки и обеспечьте себе карьеру в IT! - Всех, кому интересна frontend-разработка
Вам нужны навыки фронтенд-разработчика? Этот онлайн-курс вам поможет!
После окончания курса вы сможете:
- Познакомиться с frontend-разработкой
- Размещать код на сайте и редактировать его в онлайн режиме
- Создавать различные визуальные эффекты и анимации
- Фрилансить фронтенд-вёрсткой и разработкой
- Получить хорошо оплачиваемую работу в сфере IT
Источник: http://howtolearn.ru/online-kursy/frontend.html
Получить презентацию программы и консультацию специалиста
Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.
Ваша заявка успешно отправлена
Источник: http://skillbox.ru/course/frontend-developer/
8. «Разработка интерфейсов: вёрстка и JavaScript» от Coursera

- Продолжительность курса: 6 месяцев
- Формат обучения: видеоуроки
- Кому подойдёт: продвинутым пользователям
Выдача сертификата: да
Описание курса
Специализация, предназначенная для овладения навыком вёрстки интернет-страниц на профессиональном уровне.
За 6 месяцев вы изучите все аспекты данной деятельности, после чего сможете рассчитывать на трудоустройство в качестве Junior-разработчика. Учтите, что JavaScript является достаточно сложным языком, из-за чего вам понадобится некоторый опыт перед началом обучения
Вы узнаете:
- Как верстать интернет-страницы
- Как работать с JavaScript, HTML и Node.js
Особенности курса:
- Материал создан в рамках партнёрства с МФТИ и «Яндексом»
- Огромное количество положительных отзывов
- Курс создан несколькими сотрудниками «Яндекса» во главе с Олегом Моховым
- Наличие дипломного проекта
Об авторе курса

Олег Мохов
Twitter: https://twitter.com/olmokhov
- Разработчик интерфейсов в компании «Яндекс»
- Работает по специальности более 10 лет
- Преподавал курсы по Frontend в УрФУ
Источник: http://topthinkblog.ru/kursy-po-frontend-razrabotke/
Ориентировочная зарплата выпускника
Сколько я буду получать
110 000 ₽
Значение зарплаты взято из исследования компании «Хабр Карьера».
Источник: http://htmlacademy.ru/profession/frontender
Skillbox открывает бесплатный доступ к 33 онлайн-курсам. Успей пройти!

Онлайн-университет Skillbox предоставляет возможность пройти 33 онлайн-курса по программированию, дизайну, маркетингу, менеджменту и созданию игр — абсолютно бесплатно.
До проведения акции стоимость каждого из предложенных курсов была не менее 10 000 ₽. Поэтому, записавшись хотя бы на 5 курсов, вы сэкономите свыше 50 000 ₽.
Успевайте! Бесплатный доступ вот-вот закончится.
Источник: http://topthinkblog.ru/kursy-po-frontend-razrabotke/
Html Academy
Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.
Это серьёзное обучение, которое длится шесть с половиной месяцев и построено на базе профессиональной триады «критерии-проекты-наставники».
Вы получите навыки решения типовых задач фронтенд-разработчика и научитесь делать настоящие проекты, такие же по сложности, как в индустрии. И будете делать их правильно, на высоком профессиональном уровне. Но одних только навыков недостаточно, чтобы составить конкуренцию действующим разработчикам. Поэтому все выпускники курса обязательно проходят второй этап. Три месяца в «Лиге А.» с реальными заказами и сроками — в команде с разработчиками, тестировщиками и вашим первым менеджером. Вы научитесь оценивать сроки и сможете верстать как ниндзя — быстро и без ошибок. А ещё вы будете делать сайты для настоящих компаний, а они потом ими пользоваться. Заодно прокачаете ответственность — потому что без неё в таком деле никуда.
Источник: http://howtolearn.ru/online-kursy/frontend.html
Статистика «Лиги А.»
Наши выпускники выполнили 768 проектов
на общую сумму39 638 225 ₽
Другие компании о Лиге
-
Лучший диджитал-продакшен России.
Нас радует качество выполняемых проектов, нет претензий с технической стороны. Ребята работают с разными технологиями, что позволяет им подстраиваться под наши процессы и легко интегрироваться в них.
-
Веб-разработка и дизайн порталов и сайтов.
Понравилось, что были выдержаны назначенные сроки и учтены все требования проектной документации. Высокий уровень коммуникации, поддерживаемый на протяжении всего цикла разработки, позволил завершить проект качественно и в срок.
-
Диджитал-агентство полного цикла.
Ребята быстро понимают суть задач и подбирают под каждую задачу отдельную команду. Рекомендуем Лигу как надёжного партнёра по вёрстке проектов любой сложности.
-
Разработка ИТ-решений для строительства.
Работаем с «Лигой А.» уже четвёртый месяц и очень довольны качеством работы. Ребята внимательны и используют современные технологии и подходы. Результат по итогу соответствует заявленному уровню.
-
Цифровые платформы и отраслевые ИТ-решения.
Нетрика выражает благодарность Лиге за помощь в поиске специалиста на позицию HTML-верстальщика.
-
Лучший диджитал-продакшен России.
-
Веб-разработка и дизайн порталов и сайтов.
-
Диджитал-агентство полного цикла.
-
Разработка ИТ-решений для строительства.
-
Цифровые платформы и отраслевые ИТ-решения.
Источник: http://htmlacademy.ru/profession/frontender
Компьютерная Академия «ШАГ»
Учебная программа “Курс Front-end” подходит как для начинающих программистов, так и для тех, кто хочет связать свою жизнь с работой в сфере web-программирования
Программа обучения:
- Введение в Web-технологии. Структура HTML. Форматирование текста при помощи HTML
- Форматирование с помощью CSS. Списки. CSS отступы и поля
- Materialize. Навигация и Bootstrap
- Less. История создания Less. Цели и задачи Less. Подключение и компиляция Less;
- Введение в объектно-ориентированное программирование;
- Событие. Обработчик события. Обработка событий в сценариях
- Browser Object Model. Document Object Model;
- Взаимодействие с DOM
- Формы. Применение форм. Размещение элементов формы в HTML;
- Проверка достоверности форм. Использование Cookie;
- Рисование с помощью Canvas, поддержка медиа-возможностей;
- JSON, Ajax. Цели и задачи. Синтаксис JSON;
- ECMAScript 6
Источник: http://howtolearn.ru/online-kursy/frontend.html
CSS-фреймворки, адаптивность
Теперь мы сменим тему на попроще и поговорим о вёрстке.
Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования float: right/left.
В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid — современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.
Чтение по теме: Flexbox и Grid — знакомство с CSS-вёрсткой
Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.
Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.
Кроссбраузерность
Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — -webkit, -moz. Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.
Методологии
Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.
Источник: http://tproger.ru/curriculum/intro-to-frontend-development/
Школа онлайн образования LOFT
Программа включает в себя:
- 5 больших семинаров с преподавателями
- 24 групповые практики с наставником
- Еженедельные личные консультации с наставником
- 96 видеокурсов
- 5 больших выпускных проектов
- Самые краткие сроки
- Через 6 месяцев студент, успешно окончивший обучение, готов к началу карьеры
Наставники Loft – практикующие эксперты в IT отрасли.
Дают знания, а не ответы. Любят объяснять и умеют доносить сложную информацию понятным языком. Требовательны к качеству вашего кода: вы не сдадите ДЗ, пока ваш код не станет идеальным. Хорошо понимают других людей и умеют находить подход к любым ученикам. Всегда готовы придти на помощь.
Источник: http://howtolearn.ru/online-kursy/frontend.html