В этом обзоре разберём ТОП онлайн-курсов обучения Frontend-разработке. На курсах научат начинающих специалистов с нуля профессии «Frontend-разработчик» – включая трудоустройство, обучат создавать адаптивные веб-сайты с помощью CSS и Flexbox (верстка), разрабатывать интерактивные сайты и приложения на Javascript и HTML, использовать React и другие фреймворки.
Что смогут выпускники:
- создавать адаптивные веб-сайты с использованием CSS, Flexbox
- разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML
- писать сложные компоненты на React и интерфейсы с авторизацией и с подключением к бекенду
Программа обучения
- Веб-верстка
Вы научитесь:
• создавать страницы на чистом HTML
• позиционировать элементы на странице с помощью CSS
• применять семантическую верстку
• использовать средства разработчика в браузере
• верстать адаптивные веб-страницы на Flexbox
• загружать свой код на GitHub
- Javascript
Вы научитесь:
• писать простые программы на Javascript
• применять ООП в Javascript
• создавать сложные скрипты с обработкой событий
• работать с форматом JSON
• использовать препроцессоры CSS
• работать по методологии БЭМ
- React и другие фреймворки
Вы научитесь:
• разрабатывать приложения на React
• использовать продвинутый API
• писать свои компоненты на React
• создавать приложение на Angular
• создавать приложение на Vue.js
• использовать анимацию на CSS или на React
• применять библиотеку Redux на приложении React
- Архитектура приложений и бекенд
Вы научитесь:
• подключать приложение к базе данных
• разворачивать приложение на Node.js
• писать unit-тесты
- Карьерный трек
Вы научитесь:
• составлять резюме и сопроводительное письмо
• готовиться к собеседованию
• адаптироваться работе в команде
• оформлять свой профиль на фриланс-биржах
• искать заказы на биржах и общаться с заказчиками
Сертификат после успешного обучения. Отзывы студентов курса на сайте.
- Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript
- Соберите крутое портфолио из 9 жизнеспособных проектов для получения работы своей мечты
- Формат обучения — Онлайн-занятия 2-3 раза в неделю + домашние работы
- Уровень — С нуля
- Документ — Диплом о профессиональной переподготовке
Программа курса
Вёрстка сайта на HTML и CSS
- Теги для вёрстки контента страницы
- Теги для вёрстки структуры страницы
- Теги для вёрстки форм
- Селекторы CSS
- Определение контекста элементов
- Блочная модель
- Позиционирование элементов
- Оформление текста
- Оформление декоративных элементов
- Состояние интерактивных элементов
Мобильная и адаптивная вёрстка
- Вёрстка резинового макета
- Резиновые изображения
- Медиа-запросы и медиа-функции
- Вёрстка мобильных устройств
- Вёрстка адаптивного макета
- Адаптивная типографика, выбор breakpoints
- Адаптивные изображения
Английский язык для начинающих разработчиков
- Лексика, без которой не обойтись
- Как вести переписку на английском
- Чтение документации и анализ требований
- Программирование
- Тестирование ПО
- Стрессовые ситуации
- Устранение неполадок
- Работа и роли в команде
- Поддерживаем любую беседу на английском
- Собрания, презентации на высшем уровне
Основы программирования
- Алгоритмы
- Переменные, числа и строки
- Логика и математика
- Ветвление кода
- Алгоритм с множественным выбором
- Ошибки в коде
- Массивы
- Циклы
- Подпрограмма, функция
- Объекты
- Синхронное и асинхронное выполнение алгоритма
Git — система контроля версий
- Предназначение системы контроля версий
- Основные операции (фиксация и откат изменений, поиск, история)
- Работа с сервисом GitHub
- Ветки, слияние веток и разрешение конфликтов
Основы JavaScript
- Основы отладки
- Базовый синтаксис
- Расширенный синтаксис
- Типы данных
- Функции, объекты
- Прототип и конструктор объекта
- ООП в JS (ES6)
- Обработка исключений и замыкания
- Прототип массива, функции высшего порядка
- Асинхронность
Основы JavaScript в браузере
- Возможности JavaScript в браузере
- Способы поиска нужного HTML-элемента
- Объект события
- DOM
- Работа с HTML-формами
- Изменение структуры HTML-документа
- Асинхронные запросы
- Хранение состояния на клиенте
Продвинутый JavaScript
- Стандарты и рабочее окружение
- Модули и Webpack
- Платформы: браузер vs Node.js
- Unit-тестирование
- Прототипы, конструкторы, классы и наследование
- Object, Reflection и Proxy
- Регулярные выражения
- Контейнеры
- ArrayBuffer
- Promises, async/await, timers & event loop
- Символы, итераторы, генераторы
- TypeScript
Продвинутый JavaScript в браузере
- Рабочее окружение
- Работа с DOM (объектная модель документа)
- Обработка событий
- Организация тестирования (Unit, E2E)
- Работа с HTML-формами, LocalStorage
- Drag & Drop, работа с файлами
- Работа с HTTP
- Анимация и CSS
- Geolocation, Notification, Media
- RxJS
- EventSource, Websockets
- WebWorkers, ServiceWorkers
Библиотека React
- Компоненты, композиция компонентов
- События и состояние
- Props
- Формы
- Жизненный цикл и работа с HTTP
- HOC
- hooks, Context API
- React Router
- Redux и Redux Thunk, Redux Observable, Redux Saga
Карьера в Frontend-разработке
- Frontend-разработчик: задачи, работа в команде
- Поиск работы: компания vs фриланс
- Карьерная траектория: из студента в senior
- Первое собеседование
- Тренды Frontend-разработки: за какими ресурсами следить
- Резюме, сопроводительное письмо, портфолио
Ваше резюме после обучения:
Умею делать
- Интернет-магазин обуви
- Онлайн-игру «ходилку»
- «Крестики-нолики» на JavaScript
- Cайт-биржу по продаже криптовалюты
- Веб-менеджер личных финансов
- Бот для поиска и хранения информации
- Систему бронирования ж/д-билетов
Мои навыки
- Вёрстка под тач и мобильные устройства
- Работа с Flexbox и JavaScript
- Способность правильно использовать переменные, числа и строки
- Создание прототипа и конструктора объекта
- Использование выражений в JavaScript
- Применение символов, итераторов и генераторов
- Импорт и экспорт модулей
- Создание интерактивных веб-страниц
- Работа с файлами и медиаресурсами
- Применение принципов клиент-серверного взаимодействия
- Создание одностраничных веб-приложений (SPA)
- Навыки использования библиотеки React, JSX, React router, VirtualDom
Программа обучения
Неделя 1 — Workflow
— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.
- Вводное занятие
- Yarn
- PUG
- Webpack
- Figma для верстальщика
- Flexbox
- GIT
- Компонентный подход
Неделя 2 — Vue.js
— Делаем верстку адаптивной.
— Реализуем блок «Скиллы» на Vue.js.
— Реализуем блок «Мои проекты» на Vue.js.
— Реализуем блок «Слайдер для отзывов» с помощью Vue.js плагина.
- js
- Vue 3. Обзор изменений
- Адаптивная вёрстка
- js. Виджеты
Неделя 3 — Нативный JavaScript
— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.
- JavaScript — ES6
- Storybook
- js. Работа в среде приложения
- js. Сборка страницы
Неделя 4 — Vue.js, SPA
— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.
- js. Написание приложения
- js. Composition API
- Асинхронность в JavaScript
- Работа с api для проекта портфолио
- js. Работа с сервером
Неделя 5 — Практика
— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.
- Тестирование JS-кода
- js. Тестирование компонентов
- Анимации во Vue.js
- js. Завершение работы над проектом
Неделя 6 — Завершение работы над проектом
— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.
- Как получить работу в IT: фишки и советы
Ключевые навыки
- Уверенная работа с Vue.js.
- Уверенная работа с React.js.
- Опыт разработки SPA-приложений.
- Уверенная работа с SVG.
- Кроссбраузерная верстка.
- Уверенная работа с консолью и пакетными менеджерами.
- Работа с Gulp, Webpack, NPM.
- Работа с Git.
- Освоение новых технологий за короткие сроки.
Освойте современную профессию: вы научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами frontend-разработчика.
- 12 месяцев
- 5 проектов в портфолио
- Гарантия трудоустройства
- Диплом о переподготовке
- Хостинг-партнер курса REG.RU
Программа обучения
Подготовительный блок
- Как учиться эффективно. Видеокурс от методистов GeekUniversity
- Основы программирования
- Базовый курс
I четверть. Веб-верстка
— Научитесь верстать сайты, создадите страницу и подготовитесь к созданию планировщика задач
— Освоите библиотеку Bootstrap, препроцессоры LESS и SASS
— Освоите адаптивную вёрстку, принципы кроссбраузерности и валидности
— Создадите посадочную страницу
- HTML/CSS. Интерактивный курс
- Профессиональная вёрстка
II четверть. Frontend-разработка
— Освоите JavaScript и принципы ООП
— Научитесь работать с Parcel, Webpack, Vue.js и сторонними API
— Сможете работать в различном окружении и подключать сторонние библиотеки
Проект
— Приложение для учета расходов
- Базовый курс JavaScript
- Продвинутый курс JavaScript
- Инструменты сборки проектов
- js
III четверть. Библиотека ReactJS и основы backend-разработки
— Научитесь работать с ReactJS
— Сможете применять ECMAScript 6 и использовать концепцию Flux
— Освоите основы разработки бэкенда на Node.js и сможете создавать различные REST API
- Библиотека ReactJS. Базовый курс
- Платформа Node.js
IV четверть. Разработка от идеи до релиза
— Познакомитесь с методологиями Agile, Scrum, Kanban
— Получите навыки командной разработки и научитесь работать с GIT
— Изучите принципы Continuous Integration и Continuous Delivery
Проекты
— Командный выпускной проект. Пройдете этапы профессиональной разработки: от поиска идеи до тестирования и релиза продукта
- Профессиональная разработка веб-приложений
- Командная разработка дипломного проекта
Курсы вне четверти
Их тоже нужно пройти, чтобы получить диплом и помощь в трудоустройстве. Записаться на курсы с открытой датой можно в любой день, даже после окончания всех курсов в расписании.
- Подготовка к техническому собеседованию
- Основы баз данных. Видеокурс
- Базы данных
- Рабочая станция
- Фриланс-разработчик: курс подготовки
- Подготовка к поиску работы
Ключевые навыки
— Верстаю сайты и владею адаптивной версткой.
— Создаю одностраничные приложения
— Работаю с HTML и CSS, Node.js
— Владею инструментами для модульной сборки — Parcel и Webpack
— Использую Vue.js и основных библиотек его экосистемы, разрабатываю компоненты на Vue.js
— Работаю с библиотекой ReactJS
— Использую концепцию Flux с применением библиотек Redux
Благодаря frontend-разработчикам мы оставляем лайки и комментарии, добавляем товары в корзину и быстро разбираемся в онлайн-картах.
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины.
Чему вы научитесь:
- Верстать сайты на языках HTML и CSS
- Работать с фреймворками
- Программировать на JavaScript и TypeScript
- Разрабатывать серверные приложения на Node js
- Работать в команде как профессионал.
Содержание курса:
Освойте профессию и станьте Junior-специалистом. Вас ждёт практика на основе реальных кейсов. Обучение на платформе можно приравнять к году работы. Срок обучения — 8 месяцев.
609 видеоматериалов, 49 практических задания.
- Веб-вёрстка. Базовый уровень
- Javascript. Базовый уровень
- Фреймворк на выбор: React.js, Vue.js, Angular
- Node js
- Typescript. Базовый уровень
- Карьерный курс: трудоустройство и развитие
- Трудоустройство с помощью Центра Карьеры
- Дополнительные курсы.
Приобретаемые профессиональные навыки:
- Адаптивная вёрстка сайтов и писем
- Работа с TypeScript
- Уверенное знание JavaScript и ООП
- Разработка серверных приложений на Node js
- Работа в системе контроля версий Git
- Понимание алгоритмов и структур данных в проектах
- Знание React js/Angular/Vue js.
Программа курса
HTML и CSS. Профессиональная вёрстка сайтов
Вы научитесь создавать выразительную и доступную разметку, работать с графическим макетом, строить сетки страниц, оформлять декоративные элементы и текстовое содержание, оптимизировать код и готовить завершённый проект к публикации.
HTML и CSS. Адаптивная вёрстка и автоматизация
Вы научитесь создавать разметку по методологии БЭМ, использовать препроцессоры, строить адаптивные сетки, работать с адаптивной и ретиновой графикой, использовать инструменты автоматизации и настраивать сборку проекта для публикации.
JavaScript. Профессиональная разработка веб-интерфейсов
Вы изучите основы JavaScript, научитесь алгоритмическому мышлению, разберётесь, как оживлять статичные страницы, валидировать данные в формах, взаимодействовать с серверами и получите практику решения типовых задач.
Подготовка вёрстки для cистем управления контентом (CMS)
Вёрстка — это один из начальных этапов работы над продуктом. Чаще всего следующим этапом является интеграция вёрстки в систему управления контентом (CMS). Во время интеграции из вёрстки делают шаблоны, в которые CMS подставляет содержание. При этом содержание меняется самим клиентом, поэтому важно делать вёрстку таким образом, чтобы её было удобно интегрировать в CMS.
- Обзор популярных систем управления контентом, демонстрация админки и процесса работы с админкой со стороны конечного пользователя
- Подготовка вёрстки под разделение на шаблоны. Выделение повторяющихся частей, организация стилей и скриптов
- Работа с генерируемым контентом. Разметка основной контактной области, работа с генерируемыми изображениями и стилями
- Подготовка вёрстки под расширение и изменение объёма контента и информационных блоков
Вёрстка React-компонентов
Вёрстка с нуля в экосистеме React и создание интерактивных React компонентов.
- Принципы работы одностраничных приложений (SPA) и их основные отличия от статичных сайтов. Краткий обзор инструментов для создания SPA
- Экосистема React и структура проекта для вёрстки в этой экосистеме
- Синтаксис JSX, работа с компонентами, использование моков для имитации работы с данными
- Организация стилей в React, CSS-in-JS
- Работа со state и props для демонстрации состояний страниц
В отличие от верстальщика, фронтенд-разработчик владеет продвинутыми инструментами верстки, хорошо знает и умеет использовать JavaScript и JS-библиотеки и фреймворки. Поэтому его работа высоко оплачивается и ценится работодателями.
В комплексную программу входят следующие курсы:
- HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3
- HTML и CSS. Уровень 2. Углубленный CSS и вёрстка макета
- HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки
- Уровень 1. Основы JavaScript
- Уровень 2. Расширенные возможности
- Уровень 6. React и JSX
- Практика создания веб — приложения (фронтенд)
Программа обучения
В основе программы лежат реальные требования IT-рынка.Наши методисты и преподаватели постоянно работают над её улучшением и обновлением, чтобы выпускники Академии ШАГ могли достойно показать себя перед работодателем.
- Введение в Web-технологии. Структура HTML. Форматирование текста при помощи HTML
- Форматирование с помощью CSS. Списки. CSS отступы и поля
- Навигация и Bootstrap
- История создания Less. Цели и задачи Less. Подключение и компиляция Less;
- Введение в объектно-ориентированное программирование;
- Событие. Обработчик события. Обработка событий в сценариях
- Browser Object Model. Document Object Model;
- Взаимодействие с DOM
- Формы. Применение форм. Размещение элементов формы в HTML;
- Проверка достоверности форм. Использование Cookie;
- Рисование с помощью Canvas, поддержка медиа-возможностей;
- JSON, Ajax. Цели и задачи. Синтаксис JSON;
- ECMAScript 6
- Модульное тестирование;
- Паттерны проектирования. Использование UML при анализе паттернов проектирования;
- Паттерн MVC. Цели и задачи паттерна Model-View-Controller;
- Принципы проектирования классов SOLID;
- Введение в jQuery. Доступ к элементам страницы при помощи функции $;
- Создание обработчиков событий с использованием jQuery;
- Отображение и скрытие элементов с помощью методов show и hide. Создание эффектов;
- REST API. Использование метода GET. Использование метода POST;
- Использование jQuery плагинов;
- Работа в команде, управление программными проектами;
- Программная платформа Node.js;
- Использование фреймворков Angular, React;
По окончании курса вы сможете:
- Верстать веб-страницы с применением современных технологий HTML5 и CSS3;
- Тестировать веб-страницы, выполнять контроль качества;
- Управлять браузерами и элементами HTML-страниц с помощью JavaScript;
- Эффективно манипулировать элементами DOM;
- Использовать базовую анимацию и управлять эффектами;
- Создавать высокоэффективные сайты Web 2.0;
- Использовать объект XmlHttpRequest для выполнения синхронных и асинхронных запросов к серверу;
- Передавать и обрабатывать данные на сервер всеми доступными методами;
- Использовать JSON нотацию для передачи данных;
- Использовать XML-PRC протокол в AJAX приложениях;
- Использовать систему управления базами данных MongoDB;
- Владеть фреймворками React и Angular;
Программа курса
- Верстка сайтов (учимся верстать красивые и адаптивные интерфейсы с помощью HTML и СSS)
- js (изучаем основу всего Frontend — чистый JavaScript)
- Работа с хранилищами данных
- jQuery (Разбираемся как работать с самой распространенной библиотекой )
- AJAX (Ускоряем работу страниц, делаем первые шаги к SPA)
- ООП (понимаем как работает объектно ориентированное программирование чтобы создавать крутейшие интерфейсы)
- js (Изучаем перспективный фреймворк, резко набирающий популярность во всем мире )
- Работа с компонентами
- Работа с роутингом
- js (Изучаем применение JavaScript для написания серверной части приложения)
- NPM (учимся работать с менеджером пакетов)
- Работа с фреймворком Express
- js (изучаем самый востребованный фреймворк в России и Европе от компании Facebook)
- Работа с компонентами
- Redux — работа с хранилищами
- Роутинг
- Работа с реальными серверами (развертывание проекта на реальном сервере)
- Git (учимся использовать самую современную и популярную систему контроля версий которая используется практически в любой IT компании)
- Работа в команде (Набираемся опыта командной разработки перед выходом на работу)
ПРОГРАММА ОБУЧЕНИЯ
Только востребованный у бизнеса
стек технологий
WEB CORE — 2 месяца
Изучение основ создания интерфейсов в вебе
Тема 1: Структура HTML документа, блочная модель, основные теги. Выбор формата для изображения.
Тема 2: Семантическая разметка, доступность и SEO.
Тема 3: Работа с формами, взаимодействие с сервером.
Тема 4: CSS стилизация страниц: селекторы и приоритет применения, позиционирование, работа с сетками (flexbox, grid).
Тема 5: Адаптивная верстка: Media queries, подход mobile first.
Тема 6: Организация стилей на проекте, БЭМ методология.
Тема 7: Продвинутые техники CSS: Стилизация псевдоэлеметов, анимации, тени и градиенты.
Тема 8: Анимания, трансформации и фильтры на CSS.
Тема 9: Базовые взаимодействие JavaScript со страницей, обработка событий. Подключение внешних модулей.
Тема 10: Инструменты разработки: Использование препроцессора, минификация кода, npm, webpack.
JAVASCRIPT CORE — 2 месяца
Базовые концепции языка, работа в браузере, написание простых программ
Тема 11: Основной синтаксис языка, переменные и константы, типы данных и структуры, функции, циклы.
Тема 12: Продвинутая работа с функциями, функции высшего порядка, рекурсия.
Тема 13: Продвинутый синтаксис языка: rest/spread операторы, деструктуризация.
Тема 14: Стандартные классы в JS: Map, Set. Работа с датами.
Тема 15: Замыкания, область видимости, контекст вызова.
Тема 16: Прототипная модель JS и современный синтаксис классов.
Тема 17: Работа с асинхронным кодом (Promises, callback, async/await). Event loop.
Тема 18: Работа с DOM. Выборка и модификация элементов. Событийная модель. Хранение данных на клиенте.
Тема 19: Работа с сетевыми запросами: ajax, fetch.
Тема 20: Принципы работы веба, веб серверы и DNS, протокол HTTP. Архитектура REST. Аутентификация в вебе.
REACT.JS CORE — 2.5 месяца
Основы разработки Single Page Applications
Тема 21: Как работает react.js, синтаксис JSX и работа Virtual DOM
Тема 22: Компонентный подход, состояние компонентов, передача данных, обработка событий
Тема 23: Условия и циклы в шаблонах
Тема 24: Жизненный цикл компонента, оптимизация рендеринга
Тема 25: Работа со стилями в React.
Тема 26: Обработка данных форм, валидация
Тема 27: Построение клиент-серверных приложений.
Тема 28: Роутинг в приложении с react-router
Тема 29: State management: Redux, асинхронное взаимодействие
КОМАНДНЫЙ КОММЕРЧЕСКИЙ ПРОЕКТ — 1 месяц
Разработка frontend части для настоящего коммерческого проекта на стеке:
• HTML/CSS/JS
• React + Redux с применением Git
• npm
• webpack
ПОДГОТОВКА К СОБЕСЕДОВАНИЮ — 1 месяц
На этом этапе мы поможем тебе освежить и систематизировать все полученные теоретических знания для успешного прохождения собеседований, после чего ты пройдешь итоговую проверку по всем темам с наставником.
Это продвинутая программа обучения для разработчиков с опытом, которые уверенно чувствуют себя с HTML/CSS и JavaScript, имеют опыт работы с одним из фреймворков.
Программа:
Вступительное тестирование
Прохождение тестирования в тренажёре в своём темпе. 15 часов
Вы пройдёте входное тестирование на курс, по ходу которого проверите ваше знание JavaScript и умение решать базовые алгоритмические задачи.
- JavaScript: параллельный курс
Прохождение курса в своём темпе. 30 часов
При помощи тренажёра вы самостоятельно повторите важные концепции JavaScript.
Ближе познакомитесь с DOM-деревом и управлением содержимым DOM-узлов.
Глубже изучите асинхронность: начнёте с setTimeout и setInterval, продолжите с Event loop и нулевой задержкой, «приправите» знания чейнингом и callback.
- Модуль самостоятельного проекта
10 недель работы над проектом. Код-ревью от разработчика. 120 часов
По ходу реализации проекта «Веб-мессенджер» вы структурируете и углубите имеющиеся знания, а также освоите новые инструменты и потренируетесь в работе с ними. Кроме того, уже в первые два месяца погрузитесь в изучение всей «магии» современных технологий.
Этот модуль как испытательный период — вы погружаетесь в интенсивную разработку, изучаете внутренности, нюансы работы технологий. Займётесь не только чистым фронтом на JS с типизацией TS, но и узнаете больше о тестировании, DevOps, работе с API.
В этом модуле расскажем, как:
- выбрать среду разработки, хостить код и проект и даже немножко о выборе операционной системы
- использовать TypeScript (как основы, так и сложные концепции)
- отображать элементы в браузере
- работать с архитектурой CSS и препроцессорами
- написать свой шаблонизатор и что это такое
- реализовать компонентный и модульный подходы
- использовать знание паттернов программирования и ООП
- настроить роутинг, какие есть нюансы
- работать с API, что такое WebSockets и в целом о клиент-серверном взаимодействии
- применять в работе линтеры и code style
- тестировать приложение при помощи Chai и Mocha
- работать с безопасностью: CSRF, XSS, CSP, Clickjacking и не только
- настраивать сборку через Parcel, а потом Webpack, а также работать с Docker
- работает DevOps (узнаете о сертификатах, CI/CD и HTTP/2)
+ 1 проект в портфолио
- Модуль командного проекта
12 недель командной работы над проектом. С ментором и код-ревьюером. 160 часов
Вы объединитесь в команды из 2–3 человек и создадите свою веб-игру с нуля: от продумывания макетов и логики до деплоя в облако. Реализуете клиентскую часть игры и её бэкенд, развернёте результат в Яндекс.Облаке.
Вы сможете использовать любые библиотеки на клиенте, которые не касаются части с игрой. Игру вы напишете используя React, TypeScript, Canvas API.
В этом модуле расскажем, как:
- Алгоритмы и структуры данных. Включённый курс
Включённые темы в тренажёре. 40 часов
Вам предстоит изучать этот блок на протяжении всей программы. Вы познакомитесь с распространёнными алгоритмами и структурами данных, реализуете их на JavaScript и научитесь оценивать сложность алгоритмов.
Темы: анализ сложности алгоритмов, массив, хеш-таблица, связный список, очередь, стек, дерево, куча, граф, сортировка, рекурсия, алгоритм Хаффмана, поиск в ширину и в глубину, динамическое программирование, мемоизация.
- Карьерный трек (опционально)
50 часов
После основной программы вы сможете пройти подготовку к получению job offer.
Научитесь составлять резюме, писать сопроводительные письма, собирать портфолио и проходить собеседования. В финале — проделаете все шаги с нуля до трудоустройства (или повышения на текущем месте работы): откликнитесь на вакансию, выполните тестовое задание, пройдёте интервью и получите приглашение на работу.
Модуль включает в себя персональную работу со специалистами:
Чему Вы научитесь
После окончания курса вы получите все необходимые теоретические и практические навыки для реальной работы на позиции Front-End Developer.
- Писать качественный код на JavaScript, оперируя знаниями синтаксиса и принципами работы языка
- Изучите и проработаете знания по основам языка, функциям, массивам, объектам, ООП, замыканиям, исключениям, селекторам, событиям, WEB API, клиент-серверному взаимодействию и многое другое
- Во время курса сами напишете веб-проект и отработаете навыки применения составляющих проекта: приложения, библиотеки, фреймворки, сборка проекта и другие компоненты
- Будете готовы к собеседованию на вакансию JavaScript Junior Программист (Front End)
Программа:
Вёрстка 1. Основы HTML & CSS
- Введение в веб-разработку и интернет. Разбор основных терминов. Разбор всех этапов создания сайта. Ввод в язык разметки — HTML: структура документа, ключевые слова, заголовок, кодировка. Блочные и строчные элементы. Поток документа.
- Виды элементов. Спецсимволы. Атрибуты элементов. Гиперссылки и их виды. Абсолютные и относительные пути. Работа с изображениями и их разновидности.
- Основы CSS: базовый синтаксис, селекторы, классы, наследование и каскадирование.
- Сложные селекторы, псевдоклассы и псевдоэлементы. Работа со шрифтами. Семейства, начертания, способы подключения.
- Фоны. Все свойства background. Табличная верстка. Списки.
- Формы. Создание интерактивной формы обратной связи. Все виды поля input и его атрибуты. Отправка данных на сервер.
- Блочная верстка. Понятие Box Model. Отступы. Обтекание. Блочно-строчные элементы.
- Позиционирование. Рамки. Верстка карточек товаров.
Вёрстка 2. Адаптивная вёрстка.
- Photoshop для верстальщика. Настройка окружения. Разбор макета. Нарезка картинок. Начало верстки макета.
- Семантическая верстка. Новые элементы HTML 5. Практика. Верстка сайта по готовому макету в формате PSD.
- Стилизация чекбоксов, радио кнопок и переключателей с помощью псевдоэлементов.
- Адаптивная верстка. Медиа выражения. Верстка сайта с помощью Desktop похода.
- Адаптивная верстка. Верстка сайта с помощью Mobile first подхода.
- SVG и WEBP изображения. Разбор и верстка сложных блоков.
- Оживляем сайт. Выбор и подключение библиотеки на страницу. Работа с JavaScript. Популярные jQuery-плагины. Создание слайдера на основе плагина Slick.js
- Трансформации. Плавные переходы. Анимации. Обзор готовой анимации Animate.css.
Вёрстка 3. Bootstrap.
- Методологии верстки БЭМ, OOCSS, SMACSS, Atomic CSS.
- Подробный разбор БЭМ. Обзор графического редактора Figma.
- Гибкая верстка с помощью Flexbox layout.
- Подробный разбор Flexbox и его свойств.
- Препроцессоры LESS, SASS, PostCSS. Подробный разбор SASS.
- Настройка и компиляция SASS. Обзор UI фреймворков Bootstrap, Semantic UI, Ant Design.
- Система контроля версий Git. Сборщик проектов Gulp.
- Настройка и автоматизация задач с помощью Gulp.
JavaScript 1. Основы
- Знакомство с Javascript. Среда разработки WebStorm. Создание своего проекта и первой программы на Javascript. Обзор Git — системы управления версиями.
- Синтаксис JS. Переменные, выражения, операторы, их типы и взаимодействие. Идентификаторы, литералы. Типы данных в Javascript.
- Функции в Javascript. Стрелочные и анонимные функции. Функциональные выражения.
- Создание и инициализация массива. Команды Pop/Push, Shift/Unshift.
- DOM (Дерево). Определение и функции DOM в JS. Навигация по DOM-элементам (getElement* и querySelector*). Основы работы с событиями. Библиотека jQuery.
- Фоновая отправка формы. Загрузка данных в фоне.
- Прототипное программирование. ОПП в Javascript. Классы.
- Модули в JS. WebPacker. NodeJS.
JavaScript 2. Фреймфорки: VueJS
- Установка VueJS, знакомство со средой разработки. Написание первого приложения «Hello, world». Изучение директивов: v-if, v-for, v-on, v-model.
- Компоненты во VueJS и их структура. Входящие данные: props. События компонента: $emit. Значения по-умолчанию для props. Составные компоненты. Зоны ответственности. Mixins. Однофайловые компоненты. Работа с приложением «Список дел».
- Изучение принципа DRY. Повторное использование кода. Примеси Mixins.
- Навигация в приложениях. Работа с библиотекой VueRouter. Схема маршрутов приложения. Вложенные маршруты. Ссылки перехода router-link. Программная навигация. Передача параметров в машруте. Props и параметры маршрута.
- Управление состоянием приложения. Изучение библиотеки Vuex. Работа с хранилищем. Мутации. Геттеры. Работа с приложением “Складской учет”.
- Взаимодействие с сервером. Изучение библиотеки VueResource. Архитектура приложения, на API. Обработка ответа.
- Авторизация в приложении.
- Шаблон собственного проекта. Утилита vue-cli. Сборка и публикация финальной работы курса: “Интернет магазин спортивных товаров” на хостинге.
7-недельный онлайн-курс
Другие события:
- Front-end Intensive
- Видеозапись BEMup Киев
- BEM мастер-класс
Front end development — это создание той части веб-приложений и сайтов, которую видит пользователь. Для начала дизайн-макет переносится в веб с использованием HTML и CSS. Затем сайт «оживляют» при помощи интерактивных элементов и эффектов: галерей, поп-апов, форм, счетчиков, анимаций и многого другого.
Профессия Front End Developer
Создание интерфейсов и настройка работоспособности сайтов для удобства пользователя
HTML & CSS
Научись делать разметку, оформлять и верстать веб-страницы
JavaScript Basics
JS значительно расширяет функциональность сайта и позволяет «оживить» веб-страницы при помощи различных эффектов
JavaScript Advanced
Углублённое изучение JavaScript для реализации сложных проектов
JavaScript Professional
Ты научишься оптимизировать работу над проектами и овладеешь продвинутыми инструментами разработчика
Front End Advanced
Улучшение качества вёрстки и использование технологий для быстрого развертывания крупных проектов
Курс React
Обучение React.js прокачает твои навыки веб-разработки и работы с JavaScript
Angular 8 Basic
Знакомство с фреймворком Angular позволит тебе развиваться во фронтенд-разработке
Angular 8 Advanced
Научишься интегрировать CI/CD-процессы, создавать билды, взаимодействовать с другими модулями на базе Angular 8
Курс Vue.js
Научись быстрому и качественному созданию веб-приложений с помощью Vue.js
Курс Node.js
Обучение фреймворку JavaScript для легкого свитча в back end-разработку
Учим необходимому
По-простому:
JavaScript
Единственный язык программирования, работающий в браузере. Главный инструмент фронтенд-программиста
HTML и CSS
Языки создания веб-страниц. Описывают их структуру (расположение блоков) и внешний вид. Отвечают за форматирование текста
Фреймворки (React + Redux Toolkit)
Задает архитектуру проекта. Решает типовые задачи за программиста. Значительно сокращает количество кода и автоматизирует рутину
Алгоритмы и структуры данных
Любая программа — это последовательность шагов, выполняемых над данными. Способ организации данных сильно влияет на удобство работы
Фронтенд (DOM API)
Код фронтенд-разработчика выполняется в браузере, а значит ему нужно уметь взаимодействовать со страницей и изменять ее
Качество
Автоматизированные тесты — неотъемлемая часть профессиональной разработки
Архитектура
Создание простого для анализа и изменения кода требует хорошего понимания принципов его организации
Инфраструктура
Программирование — это не только код, но и сопутствующие инструменты: командная строка, NPM, Git, Webpack
Подробно:
1. Основы веб-программирования
Создайте первые страницы с помощью HTML и CSS. Изучите основы программирования: типы данных, условные конструкции, циклы и функции. Прокачайте алгоритмическое мышление и реализуйте самостоятельно функции сортировки. Правильно настройте операционную систему для разработки, научитесь пользоваться командной строкой. Установите git, редактор кода VS Code. Наполните свое портфолио на Github первыми программами.
Программа модуля
- Настройка окружения (менеджер версий asdf, ubuntu on windows)
- Эффективная отладка кода (дебагер, подходы)
- Поиск технической информации (https://guides.hexlet.io/how-to-search/)
- Организация задач с помощью Kanban-доски (Trello)
Курсы
Теория, квизы, практика в тренажере
Основы современной вёрстки
HTML5 CSS3 Developer Tools
Введение в программирование
основы javascript чистый код алгоритмы логика
JS: Массивы
синтаксис вложенные массивы алгоритмическая сложность сортировка
Основы командной строки
терминал shell команды linux
Введение в Git
github рабочая директория клонирование восстановление
JS: Настройка окружения
eslint prettier зависимости npx
- Профессиональный JavaScript
Научитесь писать production-ready код. Освойте принципы объектно-ориентированного и функционального программирования. Начните писать модульный код, который легко расширять и поддерживать. Ускорьтесь с помощью автоматизированного тестирования своего кода. Настройте непрерывную интеграцию и опубликуйте свой первый пакет в npm. Пишите код аки бог.
- Разработка браузерных приложений
Создавайте интерактивные приложения в браузере и собирайте их с помощью Webpack. Эффективно используйте DOM API, выполняйте HTTP-запросы к серверу с помощью AJAX. Используйте архитектурный подход MVC для создания устойчивых к изменениям приложений. Научитесь правильно работать с формами: проверять корректность данных и думать о безопасности. Познакомьтесь с асинхронной природой JavaScript и используйте ее во имя добра.
- Разработка React-приложений
Освойте React для создания сложных одностраничных сайтов (SPA). Подключите Веб-сокеты для работы с приложениями реального времени. Грамотно управляйте состоянием приложения через Redux Toolkit. Создавайте компоненты, которые легко поддерживать и использовать повторно даже на разных сайтах. Интегрируйте с React библиотеки изначально не предназначенные для работы с ним. Используйте на полную катушку знания, полученные в предыдущих модулях.
- HTML5
- CSS3
- JAVASCRIPT
- BOOTSTRAP
- JQUERY
- GIT
- SASS
- VUE JS
Навыки:
- Уверенные знания HTML5 и CSS3
- Знание JavaScript & jQuery
- Препроцессор SASS/SCSS
- Знание таск-менеджера Gulp и Git
- Фреймворк Bootstrap
- Разработка на основе Vue JS
- Знание формата SVG
- Адаптивная верстка
- Кроссбраузерная и кроссплатформенная верстка
Программа обучения
#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 — Выгрузка на хостинг. Фриланс и дипломный проект
Основные темы:
В курсе рассматриваются темы:
- Базовая настройка и как правильно проходить курс
- Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)
- HTML, язык, описывающий структуру и смысл контента
- CSS, язык, используемый для оформления страниц
- JavaScript, язык сценариев, используемый для создания динамических функций в веб содержимом
- Инструменты, используемые для облегчения современной веб-разработки на стороне клиента.
Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.
Основные модули
- Введение в HTML (15–20 часов чтения/упражнений)
- Мультимедиа и встраивание (15–20 часов чтения/упражнений)
- HTML таблицы (5–10 часов чтения/упражнений)
- Первые шаги в CSS (10–15 часов чтения/упражнений)
- Структурные элементы CSS (35–45 часов чтения/упражнений)
- Стилизирование текста (15–20 часов чтения/упражнений)
- CSS разметка (30–40 часов чтения/упражнений)
- Книга рецептов CSS
- Первые шаги в JavaScript (30–40 часов чтения/упражнений)
- Структурные элементы Javascript (25–35 часов чтения/упражнений)
- Клиентский веб API (30–40 часов чтения/упражнений)
- Введение в объекты Javascript (25–35 часов чтения/упражнений)
- Асинхронный Javascript (25–35 часов чтения/упражнений)
- Веб формы (40–50 часов)
- Кросс-браузерное тестирование (25–30 часов чтения/упражнений)
- Доступность (20–25 часов чтения/упражнений)
- Git и Github (5 часов чтения)
- Понимание инструментов на стороне клиента (20–25 часов чтения/упражнений)
- Понимание JavaScript-фреймворков для фронтенда (30-60 часов чтения/упражнений)
Чему ты научишься?
- Верстать современные адаптивные страницы
- Создавать сайты с нуля
- Разрабатывать интерактивные модули для сайтов на JavaScript
- Получишь фундамент для работы фронтенд-разработчиком
Программа курса
- Введение, обзор инструментария, основы Git, обзор HTML
- Практическое применение HTML; Подключение CSS и JavaScript на странице
- Подходы к верстке страниц. Возможности CSS3.
- JavaScript
- Web-сервер, AJAX, REST API
- Модули JavaScript. Препроцессоры CSS. Системы сборки проектов.
- Защита дипломного проекта
Навыки:
- Верстка HTML/CSS/SASS
- Опыт работы с GitHub
- Опыт разработки JS/jQuery
- Умение работать с npm, webpack
- Знание Bootstrap
- Опыт командной разработки с использованием систем контроля версий Git и управления проектами
Программа курса
Базовые знания о компьютерах и ЯП (языки программирования)
- история программирования
- развитие вычислительной техники
- кодирование информации
- двоичная система
- обработка информации процессором
- понятие потока, многозадачности
- оперативная память, регистры, прерывания
- программирование, уровень абстракции
- исполнение кода компиляция vs интерпретация
- классификация языков программирования
- понятия типизации JavaScript в контексте классификации ЯП
- классификация JS
- развитие языка, ECMAScript спецификации
- зачем нужна сборка среды выполнения JS
- движки JS
- базовый синтаксис
- подключение js в браузере
- способы отладки js
HTML CSS
- тэги
- атрибуты
- разметка
- таблицы
- bootstrap
- верстка
Основы JavaScript
- Переменные
- объявление
- именование переменных (разрешенные символы, camelCase, snake_case, и не kebab-case)
- область видимости
- Типы данных
- Числа
- Строки
- Логический тип (Булевый)
- Специальные примитивы null, undefined
- Массивы
- Объекты
- Операторы
- Ветки
- .else
- .. else if…else
- Конструкции
- ..case
- ..catch
- Циклы
- for
- ..in
- while
- ..while
- операторы continue break
- Функции
- зачем использовать
- Function Expression
- Function Declaration
- Доступ по ссылке
- оператор return
- Вызов функции
- IIFE самовызывающаяся функция
- Область видимости переменных
- Замыкание
- Псевдомассив arguments
- Hoisting поднятие
Мир оъектов в JS
- Создание объекта через {}, объект как ассоциативный массив
- Передача объекта по ссылке
- Ключевое слово this внутри объекта
- Функции-конструкторы объектов и оператор new
- Понятие ООП
- Функциональный стиль vs ООП
- Классическое понимание ООП
- Классы
- Экземпляры класса
- Абстрактные классы
- Приватные поля
- Статические методы
- Киты ООП
- Инкапсуляция
- Наследование
- Полиморфизм
- Реализация ООП в JS стандарта ES5
- инкапсуляция через замыкание
- наследование через __proto__, prototype
- Контекст вызова снова
- поговорим про это this
- глобальный контекст вызова
- объект window
- потеря контекста
- сохраниение контекста
- bind байндинг функции
- подмена контекста call, apply
- карринг функции
- наследование через вызов функции-конструктора родительского «класса»
- достоинства и недостатки разных способов наследования, лучшие практики
- Работа с объектом с помощью глобального объекта Object
- keys
- create
- defineProperties дескрипторы
- геттеры и сеттеры
- freeze
- assign
- копирование объекта
- HTML, CSS, and Javascript for Web Developers
- Full-Stack Web Development with React
- Web Design for Everybody: Basics of Web Development & Coding
- IBM Full Stack Cloud Developer
- Responsive Website Development and Design
- Full Stack Web Development with Angular
- Front-End Web Development with React
- UI / UX Design
- Introduction to Web Development
- Search Engine Optimization (SEO)
- How To Create a Website in a Weekend! (Project-Centered Course)
- Build a Full Website using WordPress
- Build a Machine Learning Web App with Streamlit and Python
- Build Your Portfolio Website with HTML and CSS
- Build a Data Science Web App with Streamlit and Python
- Introduction to Front-end Development with ReactJS
- Foundations of User Experience (UX) Design
- Build a Twitter Clone Front-End with ReactJS
- Web Development with Java Spring Framework
- Become a JavaScript Pro with these 7 Skills
Во время обучения ты познакомишься с адаптивной и кроссбраузерной версткой, препроцессорами и компонентной моделью верстки, JavaScript, серверной разработкой на JavaScript (Node.js).
Необходимы:
- базовые знания:
- HTML+CSS;
- JavaScript;
- представление о работе веб-серверов;
- иметь навык разработки на любом языке.
Программа курсов
- Javascript Basics
- HTML + CSS Basics
- HTML + CSS Advanced
- Javascript Advanced
- TypeScript
- React
- Redux
- Employment
- Algorithms and data structures
