Веб-разработчик

Программа курса соответствует запросам рынка

Мы развиваемся вместе с индустрией и постоянно обновляем материалы. Поэтому они актуальны всегда. Вам предстоит учиться в течение 10 месяцев, примерно по 20 часов в неделю.

Вводный курс20 часовОсновы HTML, CSS, JS: бесплатный вводный курс

Вводный курс поможет почувствовать себя в роли разработчика и понять, хотите ли вы развиваться в этом направлении. Вы узнаете о базовом синтаксисе HTML и CSS, научитесь управлять цветом и шрифтами и размещать блоки на странице. А ещё напишете программу на языке JavaScript и сделаете страницу интерактивной. Всё это — с помощью четырёх практических проектов.

Первый кодЧто такое HTML и CSSБазовые CSS-свойстваВведение в JavaScriptJavaScript. Приземление в реальность

Платное обучение3 часа Как устроено платное обучение

Вы узнаете, как устроены программа и обучение. Ознакомитесь с организационными деталями и подготовите компьютер к написанию кода. Кроме этого, вспомните ключевые моменты из вводного курса: так проще перейти к новому материалу.

1 модуль4 недели Расширенные возможности HTML и CSS

Вы узнаете, на что способны HTML и CSS. Пройдёте Flexbox, позиционирование элементов, работу с медиафайлами, виджетами и формами, создание анимаций. Познакомитесь с самым популярным в мире подходом к организации кода — методологией БЭМ, а ещё научитесь выстраивать модульные сетки и группировать элементы технологией Grid Layout. Кроме этого, подключите к проекту систему контроля версий Git и попробуете работать в командной строке — так вы создадите для сайта необходимое окружение из вспомогательного программного обеспечения.

FlexboxЗнакомство с GitДебаггинг в вёрсткеДумать как разработчикРазметка и вёрстка формАнимации и трансформацииПродолжение работы с GitПозиционирование элементовСтруктура файлов, пути к файламДекомпозиция проекта по вёрсткеHTML — video, iframe, embed, APIРасширенные возможности HTML и CSSПути к файлам и организация файлов по БЭМ

Проект 1

Типовой одностраничный сайт. В этой проектной работе вы соберёте его первую часть, затронув флексбокс-вёрстку, позиционирование и продвинутую семантику языка HTML. Когда всё будет готово, вы опубликуете результат работы в Github.

Проект 2

В этой работе вы завершите проект одностраничного сайта. Закрепите навыки работы с анимациями, шрифтами и фреймами.

2 модуль2 недели HTML и CSS. Работа с макетом, построение сложных сеток, адаптивная вёрстка

Много времени уделим макетам: разберёмся, какие виды используют в работе профессионалы и что нужно знать и уметь разработчику. Вы научитесь создавать интерфейсы для разных устройств (настольных компьютеров, ноутбуков, планшетов, смартфонов). А ещё узнаете некоторые свойства Grid Layout, которые требуются для построения адаптивных сеток. Вы продолжите развивать инфраструктуру проекта: освоите инструменты коллективной работы, разместите сайт в интернете и научитесь публиковать изменения в нём из командной строки.

Grid LayoutПродолжение работы с GitНеполный бриф, неточный макетРабота с дизайном и спецификациейДизайн в мире множества устройствРазработка интерфейса для разных устройств

Проект 3

Итогом этого спринта и всего второго курса станет проект о путешествиях по России. Это адаптивный сайт, который будет корректно отображаться и на компьютере, и на телефоне.

3 модуль6 недельБазовый JavaScript и работа с браузером

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

ФормыМассивыФункцииВалидация формУсловия и циклыОбъекты в JavaScriptВведение в JavaScriptПримитивные типы данныхОтладка JavaScript-кодаПродвинутая работа с GitКак работать с документациейРабота с браузерными событиямиОбъектная модель документа (DOM). ОсновыДобавление, изменение и удаление DOM-элементов

Проект 4

Начнёте делать веб-сервис Mesto. Это интерактивная страница с возможностью размещать фотографии. Вам предстоит сверстать сайт и написать часть логики на JavaScript.

Проект 5

Вы продолжите разрабатывать веб-сервис Mesto. Напишете ещё больше JavaScript: реализуете добавление, удаление фотографий и лайки к ним.

Проект 6

Вы продолжите расширять функциональность проекта Mesto: разработаете валидацию всех форм и улучшите UX при работе с попапами.

4 модуль6 недельJavaScript — непростые концепции

Глубокое погружение в JavaScript. Вы освоите сложные концепции языка: объектно ориентированное программирование, асинхронность и обмен данными с сервером. Познакомитесь с менеджером пакетов npm и научитесь добавлять зависимости в проектную работу. Эти инструменты помогут вам эволюционировать из верстальщика в веб-разработчика.

Работа с APIАсинхронностьМодули в JavaScriptСборка проекта с webpackООП в интерфейсах. Часть 1Синтаксис деструктуризацииООП в интерфейсах. Часть 2Привязка this и потеря контекстаОбъектно ориентированное программированиеПодготовка к техническому интервью: прототипы объектов

Проект 7

Вы перепишите код из прошлого проекта с использованием объектно ориентированного программирования.

Проект 8

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

Проект 9

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

5 модуль6 недельСоздание интерфейсов на React

Вы изучите библиотеку React и её экосистему. Начнёте делать сайты из компонентов, которые можно переиспользовать на разных страницах. Разработка сложных интерфейсов станет быстрее, а код будет проще поддерживать.

React HooksReact RouterВведение в ReactРабота с данными в ReactReact — непростые концепцииРешение алгоритмических задачПодготовка к техническому собеседованиюИнфраструктура и инструменты React-разработки

Проект 10

Вы начнёте переписывать нативное JavaScript-приложение на React и лучше поймёте, зачем нужны фреймворки.

Проект 11

Вы продолжите писать React-приложение и научитесь отправлять на сервер данные форм и другую информацию.

Проект 12

Начнёте делать свой первый сервер и научите его отдавать данные.

6 модуль6 недельОсновы бэкенд-разработки

Без взаимодействия с сервером невозможно создавать полноценное веб-приложение. Вы изучите, как работает JavaScript в среде Node.js, поднимете и настроите сервер. Познакомитесь с фреймворком Express.js и базой данных MongoDB. Создадите серверный API для сайта, над которым работали раньше.

Базы данныхСоздание REST APIВведение в Express.jsФункции и их внутренностиАнализ сложности алгоритмовБезопасность веб-приложенийПодготовка и деплой бэкендаСерверная разработка на Node.jsАвтоматизированное тестированиеФронтенд для аутентификации на ReactАутентификация и авторизация. Часть 1Аутентификация и авторизация. Часть 2

Проект 13

Подключите сервер к базе данных и создадите REST API, которое обеспечит связь сервера с фронтендом.

Проект 14

Добавите регистрацию и авторизацию пользователей.

Проект 15

Вы свяжете клиентскую и серверную части приложения. Реализуете обработку ошибок. А затем развернёте проект в облаке.

Финишная прямая5 недельДипломный проект

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