[methed] Фронтенд-разработчик. Тариф "Флекс"

Robot · 31 Июл 2022

Программа курса
В одном уроке может быть несколько тем или по одной теме может быть несколько уроков.
11 модулей
198 Видеоуроков
96 Практических заданий
1 Подготовительный модуль
В этом модуле вы подробно узнаете как будет проходить курс, где найти все необходимые материалы и как общаться с куратором и сокурсниками.

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

2 Знакомство с HTML

— Введение в HTML
— Списки и Таблицы
— Ссылки
— Работа с изображениями
— Создание форм
— Типы элементов
— Семантическая вёрстка
— Emmet

После этого модуля вы разберётесь где и какой тег использовать. Научитесь писать разметку правильно и профессионально.
15 Видеоуроков
6 Практических заданий
Курсовая работа
Тема: Создание HTML-структуры страницы с соблюдением современных требований.

3 Введение в CSS + Инструменты разработчика

— Структура CSS
— Псевдоэлементы / Псевдоклассы
— Photoshop для верстальщика
— Единицы измерений. Наследование
— Форматирование текста
— Шрифты и как их правильно подключать
— Figma — современный инструмент для работы с макетом
— Цвет, графика, фон
— Normalize и глобальные стили
— Методология БЭМ
— Блочная модель
— Отступы и граница border
— Позиционирование
— GIT — система контроля версий

После этого модуля стилизовать любой элемент не составит труда. Вы изучите структуру и все основные CSS-свойства. Каждый современный верстальщик должен уметь пользоваться инструментами для работы с макетами и GIT, а также знать методологию БЭМ и правильно её использовать.
26 Видеоуроков
14 Практических заданий
Курсовая работа
Тема: Создание и подключение стилей к проекту.

4 Современный CSS

— Flexbox
— Состояния — hover, focus, active
— CSS3-анимации
— CSS3-свойства
— Адаптивная вёрстка
— Pixel Perfect
— Grid Layout

По окончанию этого модуля вы освоите базу для полноценной вёрстки макета любой сложности. Но впереди самое интересное.
17 Видеоуроков
7 Практических заданий
Курсовая работа
Тема: Использование продвинутых инструментов в современных проектах.

5 Знакомство с JavaScript

— Основы программирования
— Знакомство с JavaScript
— Типы данных
— Условия
— Функции. Главный строительный блок
— Циклы
— Структурные типы данных - Массивы
— Структурные типы данных - Объекты
— Структурные типы данных - Коллекции
— Отладка кода, ESLint
— Функции. Стек вызовов, рекурсия, this
— Функции. Область видимости, замыкание, IIFE

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

6 DOM & BOM. Знакомство.

— DOM-document
— GIT. lvl 2
— Элемент DOM
— События
— Делегирование событий
— Формы
— Хранилища
— Паттерн Модуль

По итогу модуля вы познакомитесь с DOM & BOM и напишите CRM-приложение для управления базой данных.
18 Видеоуроков
10 Практических заданий
Курсовая работа
Тема: Работа с DOM. Манипуляции с элементами и вывод данных налету.

7 DOM & BOM — API браузера

— BOM
— Дата и таймеры
— Интерактив
— Модальное окно. Меню. Табы.
— Анимации, RAF
— Работа с сервером Fetch AJAX
— Знакомство Promise
— Формат Base64 и работа с файлами
— Методы объекта Promise
— Регулярные выражения
— Экосистема Frontend / NPM
— jQuery
— Cookies
— Используем готовые решения в работе (AXIOS, Swiper)
— Webpack
— Babel

Одна из частых задач для JavaScript — оживить статичную страничку. По итогу модуля вы без проблем научитесь правильно решать эти задачи.
23 Видеоуроков
14 Практических задания
Курсовая работа
Тема: Работа с DOM. Оживление статичной страницы.

8 Профессиональная вёрстка.

— Доступность (accessibility)
— Автоматизация GULP
— Препроцессор SCSS
— Оптимизация проекта
— Кроссбраузерная и Кроссплатформенная вёрстка

В этом модуле вы изучите дополнительные инструменты улучшения и автоматизации вёрстки. Сможете реализовывать проекты на новом, профессиональном уровне. Станете более конкурентны на рынке труда или фрилансе.
10 Видеоуроков
5 Практических заданий
Курсовая работа
Тема: Закрепление профессиональной вёрстки.

9 Программирование на JavaScript.

— Парадигмы программирования
— Прототипы
— ООП основы - Классы
— Инкапусляция / Полиморфизм / Наследование
— Асинхронных JavaScript
— Паттерны ООП
— Тестирование (Unit/E2E)
— Функции высшего порядка
— Паттерны Функционального программирования
— Websocket

В этом модуле мы изучим темы которые из вас сделают востребованного специалиста — frontend-разработчика. Данный модуль для вас открывает двери дальнейшего, с пониманием дела, изучения фреймворков: React, Vue, Angular и node.js.
20 Видеоуроков
8 Практических заданий
Курсовая работа
Тема: ООП.

10 ReactJS & Redux

— Основы React
— JSX / Props
— Hygen
— Классовые компоненты, state - состояние
— Жизненный цикл классового компонента
— Функциональные компоненты, Хуки
— VirtualDom, Prop drilling, Контекст
— Порталы, Рефы
— Основы Redux
— Devtools React и Redux
— Redux: CombineReducer, Middleware
— Redux-Thunk
— React Router v6
— Redux Toolkit
— Redux Saga
— React Deploy

В этом модуле вы познакомитесь с разработкой на React и напишите SPA-приложение.
28 Видеоуроков
14 Практических заданий
Курсовая работа

Тема: Разработка SPA-приложения.

11 TypeScript

— Типы
— Интерфейсы
— Функции
— Классы
— Generics
— Enums
— Область видимости (namespace)
— Декоратор (decorators)

В этом модуле вы познакомитесь с TypeScript. Научимся типизировать JavaScript с помощью TypeScript.

8 Видеоуроков
5 Практических заданий

Итоговый проект