Программа курса
В одном уроке может быть несколько тем или по одной теме может быть несколько уроков.
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.