Каталог курсов

Направления обучения

Все курсы Маркетинг Бизнес и управление Дизайн и UX Программирование Аналитика Управление командой Высшее образование Творческие профессии Профессии в образовании Корпоративное обучение Новые профессии Финансы и инвестиции Компьютерные игры Саморазвитие и хобби

Бесплатный курс

начало карьеры

IT-профессии

Как выбрать направление и реализовать себя

Включает программу трудоустройства

Блок по фрилансу разработан совместно с

Frontend-разработчик

Освоите востребованную IT-профессию — научитесь создавать сайты и проектировать интерфейсы с нуля

Соберёте портфолио из 14 проектов

Сможете претендовать на junior-позицию или уйти на фриланс через 6 месяцев обучения

Когда

28 сентября 2023 — 4 ноября 2024

Стартует через 3 дня

Не подходит дата старта? Запишитесь сейчас, а учитесь со следующим набором

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

13 месяцев

Формат

Вебинары, видеолекции, тренажёры и практические задания

Документ

Диплом о профессиональной переподготовке

40%

с 23.09 по 25.09

Пока за окном холодает

Скидка уже включена в стоимость. Оплатите до 25 сентября, чтобы скидка не сгорела.

Условия акции

Frontend-разработчик создаёт интерфейсы для пользователей

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

Frontend-разработчики востребованы на рынке: на hh.ru открыто более 4 000 вакансий — специалистов ищут Сбер, Яндекс, МТС, VK и другие крупные компании.

Зарплата frontend-разработчика

по данным hh.ru в среднем составляет

70 000–120 000 ₽
Junior-специалист
С опытом до года
120 000–170 000 ₽
Middle-специалист
С опытом 1–3 года
от 170 000 ₽
Senior-специалист
С опытом более 3 лет

Чему научитесь

Верстать сайты и приложения для всех типов устройств

Узнаете о тонкостях вёрстки под iOS и другие мобильные операционные системы

Оформлять решения,
как это делают опытные разработчики

Изучите подходы к решению задач и варианты практического использования инструментов

Решать задачи с использованием JavaScript

Познакомитесь с основами JS и научитесь применять его в создании сайтов

Использовать JavaScript для работы в браузере

Сможете выстраивать взаимодействие с веб-сервером и реагировать на действия пользователя

Вы создадите 14 проектов
для портфолио

Будете решать рабочие задачи с партнёром Нетологии — Only

Специалисты компании Only создают под ключ цифровые продукты и комплексные IT решения любой сложности, а также предоставляют услуги IT-консалтинга.

Only предложит студентам Нетологии задачи по реальным проектам. Такое сотрудничество поможет получить:

1. Практический опыт в решении рабочих задач

2. Уникальный кейс в портфолио

3. Рекомендации по развитию от специалистов компании

Программа обучения —
13 месяцев

73 часа теории, 324 часа практики

● Видеолекции в записи и вебинары с экспертами в прямом эфире 2 раза в неделю вечером по МСК

● Практические задания, тесты и записи вебинаров в личном кабинете

● Помощь кураторов и экспертов на протяжении всего обучения

HTML-вёрстка с нуля до первого макета

Итоговый проект — вёрстка сайта

Научитесь верстать сайты на HTML и CSS и вносить изменения в существующую вёрстку. По итогам модуля, который включает 8 занятий, вы самостоятельно сверстаете лендинг.

11 часов теории

48 часов практики

Введение в вёрстку

Контентные теги

Теги для вёрстки структуры контента

Позиционирование блочных элементов

Вёрстка форм

Нестандартные элементы форм

Всплывающие элементы

Позиционирование flex-элементов

Проект: вёрстка макета сайта

Пример готовой работы

Адаптивная и мобильная вёрстка

Итоговый проект — адаптивная вёрстка сайта

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

14 часов теории

51 час практики

Вёрстка резинового макета

Резиновые изображения

Введение в медиазапросы

Медиафункции

Особенности вёрстки на мобильных устройствах

Вёрстка адаптивного макета

Адаптивная типографика

Breakpoints

Адаптивные изображения

CSS Grid

Кроссбраузерность и доступность

Проект: адаптивная мобильная версия макета сайта

Пример готовой работы

Основы программирования

Итоговый проект — игра на JavaScript

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

11 часов теории

48 часов практики

Базовые понятия. Переменные и числа

Логический тип и ветвление

Строки. Алгоритмы. Как отлаживать код

Массивы и базовые методы работы с ними

Циклы

Ассоциативные массивы

Функция без параметров. Область видимости

Параметры и возвращаемое значение

Воркшоп: разработка логики игры «Виселица»

Проект: игра «Крестики-нолики» на JavaScript

Пример готовой работы

Git — система контроля версий

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

4 часа теории

3 часа практики

Знакомство с системой контроля версий Git

Работа с локальным репозиторием в Git

Работа с удалённым репозиторием через GitHub

Командная работа в Git и GitHub. Часть 1

Командная работа в Git и GitHub. Часть 2

Основы JavaScript

Итоговый проект — сайт-биржа по продаже криптовалюты

Глубже погрузитесь в JavaScript — один из самых популярных и гибких языков программирования. Начнёте с азов синтаксиса, узнаете, как работает сайт, и напишете своё веб-приложение — онлайн-сервис для торговли криптовалютой.

11 часов теории

48 часов практики

Основные понятия

Функции

Объекты

Классы

Обработка исключений и замыкания

Асинхронность

Функции декораторы, call, apply

Проект: сайт-биржа по продаже криптовалюты

Пример готовой работы

Основы JavaScript в браузере для Frontend-разработчика

Узнаете о дополнительных возможностях браузера — Web API. Подключите скрипт к HTML-документу и получите к нему доступ, чтобы сделать документ живым: изменять его и реагировать на действия пользователя.

11 часов теории

32 часа практики

Возможности JavaScript в браузере

Способы поиска нужного HTML-элемента

Объект события

DOM

Работа с HTML-формами

Изменение структуры HTML-документа

Асинхронные запросы

Хранение состояния на клиенте и отправка на сервер

Продвинутый JavaScript и основы фреймворка React

Итоговый проект — онлайн-игра «ходилка»

Научитесь использовать ESLint для автоматической проверки кода на наличие проблем. Добавите в ваши проекты Webpack для сборки модулей веб-приложения в единый JS-файл. Познакомитесь с React — библиотекой для создания пользовательского интерфейса приложения на JavaScript.

13 часов теории

40 часов практики

Блок 1. Организация работы в JavaScript

— Стандарты и рабочее окружение

— Модули и WebPack

— Unit-тестирование

— Работа с контейнерами

— TypeScript

Блок 2. Разработка веб-страниц в React

— Библиотека React, компоненты

— События и состояния

— Props

— Работа с формами

— React Router

— Разбор вопросов и домашних заданий

Проект: онлайн-игра «ходилка» в стиле фэнтези

Пример готовой работы

Продвинутый JavaScript в браузере

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

16 часов теории

72 часа практики

Рабочее окружение

DOM

Обработка событий

Организация тестирования

Работа с HTML-формами

Drag and drop. Files

Работа с HTTP

REST, Server-sent events, WebSockets

Анимация и CSS

Geolocation, notification, media

RxJS

WebWorkers, ServiceWorkers

Бонусные модули

Основы графического дизайна

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

6 часов теории

Колористика и цветоведение

Композиция

Типографика, шрифтовой дизайн

Английский язык для начинающих разработчиков

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

5 часов теории

13 часов практики

Чтение технической документации

Языки программирования. Составление отчётов об ошибках

QA-тестирование

Слова из технической сферы, которые часто произносят неправильно

Навык просмотра англоязычного видеоконтента

Самопрезентация. Elevator Pitch

Прохождение собеседований

Высококлассное резюме и сопроводительное письмо

Email-переписка

Общение в технических чатах

Звонки и встречи

Как учить лексику

Как учить грамматику

Алгоритмы и структуры данных

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

8 часов теории

Введение в алгоритмическую сложность. Бинпоиск

Динамическое программирование и «жадность»

Сортировки

Динамический массив. Списки. Деки

Пирамиды и деревья поиска

Хеширование

Графы

Орграфы

Построение карьеры и работа на фрилансе

Карьера в frontend-разработке

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

10,5 часа теории

Пошаговый план поиска работы

Анализ рынка труда

Карьерная траектория развития для специалиста по вёрстке

Резюме, портфолио Frontend-разработчика и сопроводительное письмо

Собеседование: как подготовиться и пройти

Статистика и измерение эффективности поиска работы

Индивидуальная карьерная консультация

Фриланс: первые шаги

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

6 часов теории

Как начать работать на фрилансе

Как фрилансеру правильно организовать рабочий процесс, пространство и файлы

Как понять, будете ли вы успешны на фрилансе

Биржа FL

Дипломный проект

Система предварительного бронирования билетов в кинотеатре

Вы создадите приложение, в котором можно будет выбирать фильм, время, место и бронировать билеты. Для этого вы сделаете вёрстку и адаптируете её под планшетные и мобильные устройства. Разработаете API для взаимодействия с backend и спрограммируете гостевую и администраторскую часть сервиса.

На протяжении работы над сервисом вас будет поддерживать дипломный руководитель: он разберёт работу и даст рекомендации

Как проходит обучение

Учитесь в комфортном для себя темпе

Мы подготовили гибкие форматы обучения: вебинары, видеолекции, статьи и тесты

Закрепляете знания на практике

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

Общаетесь в студенческих чатах

Эксперты, координаторы и наставники всегда на связи и готовы помочь с любыми вопросами

Получаете диплом и находите работу

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

Преподаватели — эксперты ведущих компаний

Ваше резюме после обучения

Frontend-разработчик

Ключевые навыки

Вёрстка под тач- и мобильные устройства

Работа с Flexbox и JavaScript

Правильное использовать переменных, чисел и строк

Создание прототипа и конструктора объекта

Использование выражений в JavaScript

Применение символов, итераторов и генераторов

Импорт и экспорт модулей

Создание интерактивных веб-страниц

Работа с файлами и медиаресурсами

Применение принципов клиент-серверного взаимодействия

Создание одностраничных веб-приложений (SPA)

Навыки использования библиотеки React, JSX, React router, VirtualDom

Инструменты

HTML5

Язык гипертекстовой разметки

CSS3

Язык для описания внешнего вида страниц сайта

Flexbox

Технология для создания сложных гибких макетов

GitHub

Крупнейший веб-сервис для совместной работы над кодом и хостинга проектов

JavaScript

Язык программирования для разработки веб-приложений

React

JavaScript-библиотека для создания пользовательских интерфейсов

VirtualDOM

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

XHR и AJAX

AJAX — технология обращения к серверу без перезагрузки страницы. Объект XHR даёт возможность делать подобные HTTP-запросы

JSX

Расширение синтаксиса стандартного JavaScript

Вашу квалификацию подтвердит официальный документ

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

Поможем найти
ту самую работу

Центр развития карьеры
помогает трудоустроиться студентам Нетологии

Научим составлять резюме и проходить интервью

Разберём ваш предыдущий опыт, определим сильные стороны и поможем составить успешное резюме. Научим презентовать себя и проведём тест-драйв интервью.

Поможем наработать практику и оформить портфолио

Приобретёте практический опыт и наполните портфолио ещё во время обучения. Разберёте тестовые задания от работодателей и сможете принять участие в их проектах.

Предложим стажировки и проекты от партнёров

Предоставим доступ к карьерной странице со стажировками и вакансиями от партнёров Нетологии. Будем делиться подборками с новыми интересными вакансиями.

Воркшопы и много практики

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

84%

студентов нашли работу с помощью Центра развития карьеры

4 075

компаний-партнёров в базе Нетологии для отработки практики

Проекты студентов курса

Перейдите по ссылкам и смотрите, что делают наши студенты — и вы так сможете

Адаптивная вёрстка сайта для разных устройств

Наталья Рыжова

Предложение для компаний

Вы можете обучить сотрудников на этом курсе. Адаптируем программу под ваш бизнес и предоставим отчёты об успеваемости. При обучении сразу нескольких сотрудников — более выгодная стоимость.

Оставьте заявку, и мы вышлем вам индивидуальное предложение.

Вернём деньги, если обучение не подойдёт

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

Подробные условия