[Stepik] Профессия Frontend-разработчик (Михаил Непомнящий)

​

Пакет курсов "Профессия Frontend-разработчик" - это увлекательное введение в мир разработки пользовательских интерфейсов веб-приложений. В течение этого курса Вы получите необходимые знания и навыки для создания современных и отзывчивых веб-интерфейсов, которые будут привлекательными для пользователей и соответствующими современным требованиям.
Пакет из 6-ти курсов позволит пройти путь от знакомства с базовой вёрсткой сайтов на HTML и CSS до создания серьезных Frontend-приложений на JavaScript, TypeScript и React. Вы не только изучите необходимую техническую базу, но и создадите ряд проектов, которые пригодятся для портфолио.

В программу входят

• 6 курсов
• 605 уроков
• 92часа 31минута видео
• 44 теста
• 17 интерактивных задач

6 курсов:
1. Компетенция Верстальщик - HTML, CSS, JavaScript
2. Фундаментальный JavaScript
3. Инструменты разработчика
4. React для современных веб-приложений
5. Redux для управления состоянием React-приложений
6. TypeScript для современной разработки

Спойлер: Программа курса:

Введение

1. Компетенция Верстальщик - HTML, CSS, JavaScript
1. Введение

Основы HTML и CSS
1. Основы HTML
2. Основы CSS
3. Работа с текстом
4. Работа с блочными элементами
5. Стилизация блочных элементов
6. Работа со ссылками и кнопками
7. Работа с изображениями и иконками
8. Псевдоклассы и псевдоэлементы CSS
9. Структура сайта и типы макетов
10. Таблицы и табличная верстка
11. Блочная модель верстки old-style
12. Позиционирование, выпадающее меню
13. Введение во FlexBox
14. Блочная модель верстки на флексах
15. Проверка знаний

Работа с макетами
1. Нарезка макета в Photoshop
2. Zeplin и импорт из Photoshop или Figma
3. Мастер-класс по верстке макета

Продвинутые техники HTML, CSS
1. Основы БЭМ
2. Элементы форм
3. Добавление аудио и видео
4. Фильтры CSS
5. Семантические теги HTML5
6. Кроссбраузерность
7. Трансформации CSS3
8. Анимации CSS3
9. Работа с адаптивом
10. Базовое использование препроцессора SASS|SCSS
11. Продвинутое использование SASS|SCSS

Bootstrap 4
1. Общие возможности Bootstrap
2. Работа с сеткой Bootstrap
3. Использование компонентов Bootstrap

JavaScript для верстальщика
1. Введение в JavaScript
2. Ветвления и циклы
3. Объекты и массивы JS
4. Функции JS
5. Понятие DOM и узлов
6. Обработка события по клику
7. Создание слайдера на JS
8. Создание модального окна
9. Создание табов
10. Создание фильтра карточек
11. Проверка знаний

Библиотеки JavaScript
1. Основы jQuery
2. Галерея FancyBox
3. Анимации ParollerJS, ParallaxJS
4. Анимации ScrollMagic
5. Адаптивный слайдер SwiperJS

БЛНУС: Спецификация CSS Grid (видео с моего youtube-канала)
1. CSS Grid. Базовая терминология
2. Базовые возможности CSS Grid
3. Шаблоны и фракции
4. Grid области и работа с ними
5. Выравнивание
6. Методы адаптива
7. Нюансы использования
8. CSS-переменные

Проект Верстки макета от и до
1. Обзор шаблона для вёрстки
2. UI Kit - что и зачем
3. Настройка окружения
4. Переменные и типографика
5. Компонент "Особенность"
6. Компонент "Скриншот"
7. Компонент "Отзыв"
8. Компонент "Цена"
9. Компоненты формы и соц иконок
10. Вводный блок сайта
11. Блок "О продукте"
12. Блок "Особенности"
13. Блок "Скриншоты"
14. Блок "Отзывы"
15. Блок "Цены"
16. Блок "Подвал сайта"
17. Валидация верстки
18. Production-сборка

2. Фундаментальный JavaScript
Введение

1. Введение
2. Обзор модуля
3. Сфера применения JavaScript, его версии и документация
4. Подключение JavaScript к html-странице
5. Использование JavaScript вне браузера

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

1. Обзор модуля
2. Типы данных в JavaScript
3. Понятие переменных
4. Математические операции в JavaScript
5. Логические выражения
6. Условный оператор
7. Оператор switch
8. Тернарный оператор
9. Массивы как хранилища данных
10. Понятие цикла
11. Цикл for
12. Оператор break
13. Оператор continue
14. Понятие функции
15. Встроенный объект Math
16. Проект "Угадай число"
17. Итоги модуля

Объекты и встроенные методы

1. Обзор модуля
2. Простые объекты с данными
3. Хранение по ссылке
4. Оператор in
5. Цикл for..in
6. Цикл for..of
7. Методы объекта, контекст
8. Встроенные методы строк
9. Встроенные методы чисел
10. Встроенные методы массивов
11. Объект ошибки
12. Объект регулярного выражения
13. Проект "Загадки"
14. Итоги модуля

Про функции подробно

1. Обзор модуля
2. Функции vs процедуры
3. Функции и память
4. Варианты записи функций
5. Область видимости
6. Колбэки и функции высшего порядка
7. Рекурсия
8. Замыкание
9. Контекст вызова функции
10. Уточнение контекста вызова функции
11. Проект "Цензор"

Работа со структурными данными

1. Обзор модуля
2. Понятие стека и очереди
3. Понятие иммутабельности
4. Маппинг массивов и коллекций
5. Фильтрация
6. Метод reduce
7. Поиск в коллекции
8. Сортировка массива
9. Оператор остатка
10. Деструктуризация массивов
11. Деструктуризация объектов
12. Шаблонные строки
13. Глобальные методы
14. Формат JSON
15. Проект "Витрина"
16. Итоги модуля

DOM API

1. Обзор модуля
2. Понятие DOM
3. Получение ссылок на HTML-элементы
4. Свойства html-элементов
5. Обход html-коллекций
6. Объект classList
7. Навигация по html-элементам
8. Браузерные события
9. Снятие обработчиков событий
10. Примеры по обработке события click
11. Объект события
12. Работа с формой
13. Понятие всплытия
14. Динамическая работа с DOM
15. Полезные свойства html-элементов
16. Где искать примеры UI
17. Пример модального окна
18. Работа с браузерной памятью
19. Прочие браузерные объекты
20. Проект "Спойлер"

Работа с готовыми библиотеками

1. Обзор модуля
2. Библиотека lodash
3. Плавный скролл
4. Тултипы
5. Продвинутый скролл
6. Слайдеры
7. Ленивая загрузка
8. Работа с формами
9. Анимации

Асмнхронный JavaScript

1. Обзор модуля
2. Синхронный и асинхронный код
3. Варианты взаимодействия с сервером
4. Объект Promise
5. Асинхронное получение данных
6. CRUD-операции
7. Альтернативные способы получения данных с сервера
8. Асинхронные функции
9. Методы промисов resolve и reject
10. Методы промисов all и race
11. Итоги модуля

Проект "Список дел"

1. Постановка задачи
2. Декомпозиция на подзадачи
3. Получение данных с сервера
4. Отрисовка полученных задач
5. Отрисовка пользователей
6. Добавление новой задачи
7. Изменение статуса
8. Удаление задачи
9. Обработка ошибок

Модули и сборка приложения

1. Понятие js-модуля
2. npm менеджер
3. ES6 модули: импорт и экспорт
4. Сборка приложения
5. Использование Parcel для сборки
6. Нюансы экспорта и импорта
7. Кроссбраузерность приложений
8. CommonJS модули и файлы .mjs

Проект: определение геолокации по IP

1. Постановка задачи
2. Декомпозиция на подзадачи
3. Создание Frontend-проекта
4. Верстка шапки
5. Разбор API по работе с IP
6. Обработка ввода пользователя
7. Валидация формы
8. Динамическая работа с DOM
9. Разбор API карт
10. Разметка с картой
11. Обновление карт на базе IP
12. Добавление полифилла
13. Добавление адаптива
14. Публикация проекта

ООП в JavaScript

1. Обзор модуля
2. Актуальность фабрик
3. Создание классов es6
4. Прототипное наследование
5. Наследование классов es6
6. Статические свойства и методы
7. Приватные свойства, геттеры, сеттеры
8. Классы для создания UI компонентов
9. Шаблоны проектирования
10. Шаблон Singleton
11. Шаблон Фабрика
12. Шаблон Адаптер
13. Шаблон Фасад
14. Шаблон Наблюдатель
15. Концепция ООП
16. Подведение итогов

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

1. Введение

Основы веб

1. Составляющие сайта
2. Хостинг
3. Домен
4. FTP
5. SSH-соединение
6. Терминал
7. Варианты терминалов
8. Основные команды
9. Продвинутые техники
10. Терминал и редакторы кода
11. Поиск через терминал

VS Code

1. Интерфейс VS Code
2. Кастомизация
3. Ускорение работы
4. Файловая навигация
5. Навигация по документам
6. Удаленное редактирование
7. Синхронизация настроек

SSH

1. Что такое SSH
2. Создание ключей шифрования
3. Добавление ключа на GitHub
4. Добавление ключа на сервер

Git

1. Системы версионирования
2. Установка Git
3. Локальный репозиторий
4. Удаленный GitHub репозиторий
5. Выгрузка локального репозитория онлайн
6. Git: практический workflow
7. Теги и релизы
8. GitHub Pages
9. Добавление алиасов
10. Инструменты VS Code для Git
11. Работа с конфликтами
12. Работа с open source проектами

NodeJs+npm

1. Что такое NodeJS
2. Установка NodeJS
3. Утилиты и модули NodeJS
4. Пример создания модуля NodeJS
5. Пакетный менеджер npm
6. Стандарт версионирования Semver
7. Пакетный менеджер yarn
8. Создание скриптов
9. Утилита npx

Parcel JS

1. Обзор сборщика Parcel
2. Использование стилей и препроцессоров
3. Использование современного JavaScript
4. Работа с pug
5. Production сборка

Gulp JS

1. Что такое GulpJS. Установка
2. Варианты синтаксиса для Gulp
3. Обработка pug-шаблонов
4. Отслеживание изменений
5. Работа с локальными данными
6. Работа со стилями
7. Обработка изображений
8. Локальный dev-сервер
9. Сборка JavaScript-модулей

Webpack 4

1. Что такое Webpack. Установка
2. Способы задания конфигурации
3. Ключевые концепции Webpack
4. Создание dev-сервера
5. Транспиляция стилей
6. JavaScript и Babel
7. Конфигурация Webpack по условию

Webpack 5

1. Начало работы с Webpack 5
2. Обработка JavaScript-файлов
3. Настройка локального сервера
4. Точки входа и выхода
5. Генерация HTML-шаблона
6. Настройка режимов сборки
7. Обработка CSS-файлов
8. Препроцессинг и постобработка стилей
9. Обработка изображений
10. Дополнительные сведения

4. React для современных веб-приложений
Введение

1. Обзор курса
2. Что такое React
3. Пререквизит к курсу
4. Что необходимо установить
5. Варианты окружения

React и JSX

1. Библиотеки React и ReactDOM
2. Простое приложение на чистом React
3. Преобразование приложения в JSX
4. Особенности JSX
5. Разделение приложения на модули
6. Условная отрисовка
7. Пример с прелоадером

Классовые компоненты

1. Разбор составляющих базового React-шаблона
2. Понятие React-компонента
3. Состояние компонента и управление им
4. Нюансы создания методов в классовых компонентах
5. Жизненный цикл компонента
6. Задание по созданию таймера
7. Работа с коллекциями
8. Однонаправленный поток данных
9. Задание на обновление состояния через дочерние компоненты
10. Отличие классовых компонентов от функциональных

Работа с формами в React

1. Управляемые компоненты
2. Валидация значений формы
3. Checkbox, radio button, select
4. Задание на создание формы
5. Использование ref
6. Неуправляемые компоненты

Проект "Фильмы"

1. Обзор проекта
2. Подготовка проекта
3. Знакомство с API фильмов
4. Задание на создание общего списка
5. Добавление строки поиска
6. Реализация поиска фильмов
7. Добавление фильтрации
8. Обработка неудачного поиска
9. Безопасное хранение ключа API
10. Сборка и публикация проекта

Функциональные React-компоненты

1. Работа с состоянием
2. Кликер
3. Управление жизненным циклом
4. Использование ref
5. Рефакторинг таймера
6. Рефакторинг проекта Фильмы
7. Рефакторинг проекта Фильмы, часть 2

Хуки подробно

1. useState
2. useEffect
3. useContext
4. useLayoutEffect
5. useCallback, useMemo
6. useImperativeHandle
7. useReducer
8. Пользовательские хуки
9. Правила использования хуков
10. Рефакторинг таймера

Проект "Витрина"

1. Презентация проекта
2. Обзор API
3. Подготовка проекта
4. Вывод списка товаров
5. Состояние заказа
6. Добавление товара в корзину
7. Создание корзины
8. Удаление из корзины
9. Изменение количества товара в корзине
10. Добавление подсказки о добавлении товара
11. Публикация проекта

Продвинутое управление состоянием приложения

1. Context API и useReducer вместо пропсов
2. Создание контекста с провайдером
3. Создание редюсера
4. Доработка редьюсера
5. Переключение всех компонентов на контекст
6. Обзор сделанного

Роутинг и SPA-приложение

1. Роутинг и SPA, обзор проекта
2. Базовый роутинг
3. Компонент Link
4. Хуки useParams и useHistory
5. Хуки useLocation и useRouteMatch
6. Вложенный роутинг
7. Обзор API для проекта
8. Настройка методов
9. Главная страница
10. Страница категории
11. Страница рецепта
12. Поиск на главной
13. Нюансы публикации SPA
14. Итоги курса

5. Redux для управления состоянием React-приложений
Вводный модуль

1. Вводное видео
2. Что такое Redux
3. Варианты state management для React
4. Пререквизит к курсу
5. Окружение для работы

Redux

1. Обзор модуля
2. Три принципа Redux
3. Базовые сущности Redux
4. Базовое API Redux
5. Пример с кликером
6. Решение задачи с кликером
7. Action creators и их использование
8. Хранилище по умолчанию
9. Итоги модуля

React-redux на хуках

1. Обзор модуля
2. Сущности react-redux
3. Кликер на React+Redux
4. Todo List на React+Redux
5. Redux DevTools
6. Вариант организации кода #1
7. Вариант организации кода #2
8. Альтернативная точка входа
9. Вариант TodoList с фильтрами
10. Синхронизация с localStorage
11. Добавление роутинга
12. Итоги модуля

Проект 1

1. Обзор проекта
2. Настройка окружения
3. Базовые компоненты
4. Добавление провайдера и пустого стора
5. Редьюсер вакансий
6. Редьюсер фильтрации
7. Механизм добавления фильтров
8. Удаление фильтров и их очистка
9. Публикация проекта
10. Итоги модуля

React-redux legacy

1. Легаси для react-redux
2. Метод connect
3. Концепция mapStateToProps
4. Концепция mapDispatchToProps
5. Рефакторинг Todo App
6. Рефакторинг проекта 1
7. Итоги модуля

Redux Middleware и асинхронная работа

1. Введение в redux middleware
2. Базовое использование redux middleware
3. Подключение вместе с devTools
4. Библиотека redux-persist
5. Проблема асинхронности
6. Библиотека redux-thunk
7. Использование redux-thunk
8. Подготовка клиентского api
9. Статусы загрузки и обработка ошибок
10. Post-запросы
11. Thunk extraArgument
12. Итоги модуля

Проект 2

1. Обзор проекта
2. Структура проекта
3. Добавление redux бойлерплейта
4. Переключение светлой/темной темы
5. Редьюсер для стран
6. Отрисовка стран в UI
7. Фильтрация по поиску
8. Фильтрация по региону
9. Очистка фильтров
10. Детальная страница
11. Очистка детальной страницы
12. Получение информации о соседях
13. Обзор итогового приложения

Redux Toolkit

1. Актуальность Redux Toolkit
2. Сущности Redux Toolkit
3. Метод createAction
4. Метод createReducer
5. Метод createSlice
6. Метод configureStore
7. Практика создания слайсов
8. Extra редьюсеры
9. Структура проекта
10. Redux-persist вместе с RTK
11. Рефакторинг проекта, часть 1
12. Рефакторинг проекта, часть 2
13. Итоги модуля

RTK AsyncThunk

1. Обзор модуля
2. Базовое использование createAsyncThunk
3. ExtraReducers для работы с thunk экшнами
4. Практика создания thunk c createAsyncThunk
5. Использование в UI
6. Массовая обработка событий в extraReducers
7. Обработка ошибок
8. Отмена запроса к серверу
9. Extra параметр thunk
10. Базовое использование createEntityAdapter
11. Удаление и изменение данных через адаптер
12. Итоги модуля

Рефакторинг проекта 2

1. Постановка задачи
2. Организация структуры и слайс темы
3. Слайс блока фильтрации
4. Слайс стран
5. Слайс для деталки
6. Получение соседей
7. Итоги модуля

Итоги курса

1. Style Guide от создателей Redux
2. FAQ по тому, что хранить в Redux-сторе
3. Итоги курса

6. TypeScript для современной разработки
Введение

1. Приветствие
2. Что такое TypeScript и зачем нужен
3. Альтернативы TypeScript
4. Пререквизит к курсу
5. Настройка окружения
6. Как построен курсДемо-доступ

Базовая типизация

1. О модуле
2. Примитивные типы
3. Базовая типизация функций
4. Базовая типизация объектов
5. Объекты как параметры функции
6. Типизация массивов
7. Кортежи
8. Алиасы
9. Union типы
10. Enum
11. Итоги модуля

Продвинутая типизация

1. О модуле
2. Подробнее об интерфейсах
3. Подробнее об алиасах
4. Type vs Interface
5. Сужение типов
6. Type Guards
7. Asserts
8. Типизация this
9. Перегрузка функций
10. Рекурсивные типы
11. Оператор !
12. Итоги модуля

Дженерики

1. О модуле
2. Актуальность дженериков
3. Базовые примеры
4. Добавление требований
5. Оператор keyof
6. Сужение допустимых значений типа
7. Значения по умолчанию
8. Области видимости типов дженерика
9. Итоги модуля

Комбинирование типов

1. О модуле
2. Оператор typeof
3. Conditional type
4. Еще раз про extends
5. Оператор infer
6. Маппинг типов
7. Утилиты Extract, Exclude, NonNullable
8. Утилиты Record, Pick, Omit
9. Утилиты ReadOnly, Required, Partial
10. Утилиты Parameters, CounstructorParameters
11. Доступ по индексу
12. Шаблонные литералы
13. Итоги модуля

Проект 1. Vanilla JS -> TypeScript

1. Обзор проекта
2. Постановка задачи
3. Создание ts-проекта
4. Создание интерфейсов
5. Добавление type guards
6. Типы асинхронных функций
7. Итоги модуля

Классы

1. О модуле
2. Интерфейс для класса
3. Модификаторы доступа
4. Нюансы конструктора
5. Абстрактные классы
6. Геттеры и сеттеры
7. Статические свойства и методы
8. Итоги модуля

Настройки компилятора

1. О модуле
2. Составные части конфига
3. Базовые настройки
4. Опции компилятора
5. Дополнительные опции
6. Тюнинг строгости
7. Дополнительный линтинг
8. Рекомендованные конфиги
9. Итоги модуля

Типизация React-компонентов

1. О модуле
2. Настройка окружения
3. Типизация пропсов
4. Типизация стилей
5. Типизация стейта
6. Хэндлеры
7. Хранение типов
8. Нюансы useEffect
9. Типизация useRef
10. Приложение TodoList
11. Классовые компоненты
12. Итоги модуля

Проект на React+TS

1. Обзор проекта
2. Окружение для проекта
3. Создание типов сущностей
4. Шапка приложения
5. Компонент поиска
6. Альтернативный вариант формы
7. Компонент статистики
8. Шапка карточки
9. Инфо компонент
10. Получение данных
11. Итоги модуля

Типизация Redux

1. О модуле
2. Добавления Redux в приложение
3. Типизация слайсов
4. Типизация селекторов
5. Типизация asyncThunk
6. Типизация extraReducers
7. AsyncThunk как дженерик
8. Добработка асинхронного слайса
9. Итоги модуля

Проект React+Redux+TS

1. Обзор проекта
2. Окружение для проекта
3. Базовые типы приложения
4. UI компоненты
5. Типизация переключателя темы
6. Типизация списка стран
7. Типизация детальной страницы
8. Типизация контролей
9. Итоги проекта

Итоги курса

1. Что дальше