Пакет курсов "Профессия Frontend-разработчик" - это увлекательное введение в мир разработки пользовательских интерфейсов веб-приложений. В течение этого курса Вы получите необходимые знания и навыки для создания современных и отзывчивых веб-интерфейсов, которые будут привлекательными для пользователей и соответствующими современным требованиям.
Пакет из 6-ти курсов позволит пройти путь от знакомства с базовой вёрсткой сайтов на HTML и CSS до создания серьезных Frontend-приложений на JavaScript, TypeScript и React. Вы не только изучите необходимую техническую базу, но и создадите ряд проектов, которые пригодятся для портфолио.
В программу входят
Пакет из 6-ти курсов позволит пройти путь от знакомства с базовой вёрсткой сайтов на HTML и CSS до создания серьезных Frontend-приложений на JavaScript, TypeScript и React. Вы не только изучите необходимую техническую базу, но и создадите ряд проектов, которые пригодятся для портфолио.
В программу входят
- 6 курсов
- 605 уроков
- 92часа 31минута видео
- 44 теста
- 17 интерактивных задач
- Компетенция Верстальщик - HTML, CSS, JavaScript
- Фундаментальный JavaScript
- Инструменты разработчика
- React для современных веб-приложений
- Redux для управления состоянием React-приложений
- TypeScript для современной разработки
Введение
Введение
Введение
Введение
Вводный модуль
Введение
- Компетенция Верстальщик - HTML, CSS, JavaScript
- Введение
- Основы HTML
- Основы CSS
- Работа с текстом
- Работа с блочными элементами
- Стилизация блочных элементов
- Работа со ссылками и кнопками
- Работа с изображениями и иконками
- Псевдоклассы и псевдоэлементы CSS
- Структура сайта и типы макетов
- Таблицы и табличная верстка
- Блочная модель верстки old-style
- Позиционирование, выпадающее меню
- Введение во FlexBox
- Блочная модель верстки на флексах
- Проверка знаний
- Нарезка макета в Photoshop
- Zeplin и импорт из Photoshop или Figma
- Мастер-класс по верстке макета
- Основы БЭМ
- Элементы форм
- Добавление аудио и видео
- Фильтры CSS
- Семантические теги HTML5
- Кроссбраузерность
- Трансформации CSS3
- Анимации CSS3
- Работа с адаптивом
- Базовое использование препроцессора SASS|SCSS
- Продвинутое использование SASS|SCSS
- Общие возможности Bootstrap
- Работа с сеткой Bootstrap
- Использование компонентов Bootstrap
- Введение в JavaScript
- Ветвления и циклы
- Объекты и массивы JS
- Функции JS
- Понятие DOM и узлов
- Обработка события по клику
- Создание слайдера на JS
- Создание модального окна
- Создание табов
- Создание фильтра карточек
- Проверка знаний
- Основы jQuery
- Галерея FancyBox
- Анимации ParollerJS, ParallaxJS
- Анимации ScrollMagic
- Адаптивный слайдер SwiperJS
- CSS Grid. Базовая терминология
- Базовые возможности CSS Grid
- Шаблоны и фракции
- Grid области и работа с ними
- Выравнивание
- Методы адаптива
- Нюансы использования
- CSS-переменные
- Обзор шаблона для вёрстки
- UI Kit - что и зачем
- Настройка окружения
- Переменные и типографика
- Компонент "Особенность"
- Компонент "Скриншот"
- Компонент "Отзыв"
- Компонент "Цена"
- Компоненты формы и соц иконок
- Вводный блок сайта
- Блок "О продукте"
- Блок "Особенности"
- Блок "Скриншоты"
- Блок "Отзывы"
- Блок "Цены"
- Блок "Подвал сайта"
- Валидация верстки
- Production-сборка
Введение
- Введение
- Обзор модуля
- Сфера применения JavaScript, его версии и документация
- Подключение JavaScript к html-странице
- Использование JavaScript вне браузера
- Обзор модуля
- Типы данных в JavaScript
- Понятие переменных
- Математические операции в JavaScript
- Логические выражения
- Условный оператор
- Оператор switch
- Тернарный оператор
- Массивы как хранилища данных
- Понятие цикла
- Цикл for
- Оператор break
- Оператор continue
- Понятие функции
- Встроенный объект Math
- Проект "Угадай число"
- Итоги модуля
- Обзор модуля
- Простые объекты с данными
- Хранение по ссылке
- Оператор in
- Цикл for..in
- Цикл for..of
- Методы объекта, контекст
- Встроенные методы строк
- Встроенные методы чисел
- Встроенные методы массивов
- Объект ошибки
- Объект регулярного выражения
- Проект "Загадки"
- Итоги модуля
- Обзор модуля
- Функции vs процедуры
- Функции и память
- Варианты записи функций
- Область видимости
- Колбэки и функции высшего порядка
- Рекурсия
- Замыкание
- Контекст вызова функции
- Уточнение контекста вызова функции
- Проект "Цензор"
- Обзор модуля
- Понятие стека и очереди
- Понятие иммутабельности
- Маппинг массивов и коллекций
- Фильтрация
- Метод reduce
- Поиск в коллекции
- Сортировка массива
- Оператор остатка
- Деструктуризация массивов
- Деструктуризация объектов
- Шаблонные строки
- Глобальные методы
- Формат JSON
- Проект "Витрина"
- Итоги модуля
- Обзор модуля
- Понятие DOM
- Получение ссылок на HTML-элементы
- Свойства html-элементов
- Обход html-коллекций
- Объект classList
- Навигация по html-элементам
- Браузерные события
- Снятие обработчиков событий
- Примеры по обработке события click
- Объект события
- Работа с формой
- Понятие всплытия
- Динамическая работа с DOM
- Полезные свойства html-элементов
- Где искать примеры UI
- Пример модального окна
- Работа с браузерной памятью
- Прочие браузерные объекты
- Проект "Спойлер"
- Обзор модуля
- Библиотека lodash
- Плавный скролл
- Тултипы
- Продвинутый скролл
- Слайдеры
- Ленивая загрузка
- Работа с формами
- Анимации
- Обзор модуля
- Синхронный и асинхронный код
- Варианты взаимодействия с сервером
- Объект Promise
- Асинхронное получение данных
- CRUD-операции
- Альтернативные способы получения данных с сервера
- Асинхронные функции
- Методы промисов resolve и reject
- Методы промисов all и race
- Итоги модуля
- Постановка задачи
- Декомпозиция на подзадачи
- Получение данных с сервера
- Отрисовка полученных задач
- Отрисовка пользователей
- Добавление новой задачи
- Изменение статуса
- Удаление задачи
- Обработка ошибок
- Понятие js-модуля
- npm менеджер
- ES6 модули: импорт и экспорт
- Сборка приложения
- Использование Parcel для сборки
- Нюансы экспорта и импорта
- Кроссбраузерность приложений
- CommonJS модули и файлы .mjs
- Постановка задачи
- Декомпозиция на подзадачи
- Создание Frontend-проекта
- Верстка шапки
- Разбор API по работе с IP
- Обработка ввода пользователя
- Валидация формы
- Динамическая работа с DOM
- Разбор API карт
- Разметка с картой
- Обновление карт на базе IP
- Добавление полифилла
- Добавление адаптива
- Публикация проекта
- Обзор модуля
- Актуальность фабрик
- Создание классов es6
- Прототипное наследование
- Наследование классов es6
- Статические свойства и методы
- Приватные свойства, геттеры, сеттеры
- Классы для создания UI компонентов
- Шаблоны проектирования
- Шаблон Singleton
- Шаблон Фабрика
- Шаблон Адаптер
- Шаблон Фасад
- Шаблон Наблюдатель
- Концепция ООП
- Подведение итогов
Введение
- Введение
- Составляющие сайта
- Хостинг
- Домен
- FTP
- SSH-соединение
- Терминал
- Варианты терминалов
- Основные команды
- Продвинутые техники
- Терминал и редакторы кода
- Поиск через терминал
- Интерфейс VS Code
- Кастомизация
- Ускорение работы
- Файловая навигация
- Навигация по документам
- Удаленное редактирование
- Синхронизация настроек
- Что такое SSH
- Создание ключей шифрования
- Добавление ключа на GitHub
- Добавление ключа на сервер
- Системы версионирования
- Установка Git
- Локальный репозиторий
- Удаленный GitHub репозиторий
- Выгрузка локального репозитория онлайн
- Git: практический workflow
- Теги и релизы
- GitHub Pages
- Добавление алиасов
- Инструменты VS Code для Git
- Работа с конфликтами
- Работа с open source проектами
- Что такое NodeJS
- Установка NodeJS
- Утилиты и модули NodeJS
- Пример создания модуля NodeJS
- Пакетный менеджер npm
- Стандарт версионирования Semver
- Пакетный менеджер yarn
- Создание скриптов
- Утилита npx
- Обзор сборщика Parcel
- Использование стилей и препроцессоров
- Использование современного JavaScript
- Работа с pug
- Production сборка
- Что такое GulpJS. Установка
- Варианты синтаксиса для Gulp
- Обработка pug-шаблонов
- Отслеживание изменений
- Работа с локальными данными
- Работа со стилями
- Обработка изображений
- Локальный dev-сервер
- Сборка JavaScript-модулей
- Что такое Webpack. Установка
- Способы задания конфигурации
- Ключевые концепции Webpack
- Создание dev-сервера
- Транспиляция стилей
- JavaScript и Babel
- Конфигурация Webpack по условию
- Начало работы с Webpack 5
- Обработка JavaScript-файлов
- Настройка локального сервера
- Точки входа и выхода
- Генерация HTML-шаблона
- Настройка режимов сборки
- Обработка CSS-файлов
- Препроцессинг и постобработка стилей
- Обработка изображений
- Дополнительные сведения
Введение
- Обзор курса
- Что такое React
- Пререквизит к курсу
- Что необходимо установить
- Варианты окружения
- Библиотеки React и ReactDOM
- Простое приложение на чистом React
- Преобразование приложения в JSX
- Особенности JSX
- Разделение приложения на модули
- Условная отрисовка
- Пример с прелоадером
- Разбор составляющих базового React-шаблона
- Понятие React-компонента
- Состояние компонента и управление им
- Нюансы создания методов в классовых компонентах
- Жизненный цикл компонента
- Задание по созданию таймера
- Работа с коллекциями
- Однонаправленный поток данных
- Задание на обновление состояния через дочерние компоненты
- Отличие классовых компонентов от функциональных
- Управляемые компоненты
- Валидация значений формы
- Checkbox, radio button, select
- Задание на создание формы
- Использование ref
- Неуправляемые компоненты
- Обзор проекта
- Подготовка проекта
- Знакомство с API фильмов
- Задание на создание общего списка
- Добавление строки поиска
- Реализация поиска фильмов
- Добавление фильтрации
- Обработка неудачного поиска
- Безопасное хранение ключа API
- Сборка и публикация проекта
- Работа с состоянием
- Кликер
- Управление жизненным циклом
- Использование ref
- Рефакторинг таймера
- Рефакторинг проекта Фильмы
- Рефакторинг проекта Фильмы, часть 2
- useState
- useEffect
- useContext
- useLayoutEffect
- useCallback, useMemo
- useImperativeHandle
- useReducer
- Пользовательские хуки
- Правила использования хуков
- Рефакторинг таймера
- Презентация проекта
- Обзор API
- Подготовка проекта
- Вывод списка товаров
- Состояние заказа
- Добавление товара в корзину
- Создание корзины
- Удаление из корзины
- Изменение количества товара в корзине
- Добавление подсказки о добавлении товара
- Публикация проекта
- Context API и useReducer вместо пропсов
- Создание контекста с провайдером
- Создание редюсера
- Доработка редьюсера
- Переключение всех компонентов на контекст
- Обзор сделанного
- Роутинг и SPA, обзор проекта
- Базовый роутинг
- Компонент Link
- Хуки useParams и useHistory
- Хуки useLocation и useRouteMatch
- Вложенный роутинг
- Обзор API для проекта
- Настройка методов
- Главная страница
- Страница категории
- Страница рецепта
- Поиск на главной
- Нюансы публикации SPA
- Итоги курса
Вводный модуль
- Вводное видео
- Что такое Redux
- Варианты state management для React
- Пререквизит к курсу
- Окружение для работы
- Обзор модуля
- Три принципа Redux
- Базовые сущности Redux
- Базовое API Redux
- Пример с кликером
- Решение задачи с кликером
- Action creators и их использование
- Хранилище по умолчанию
- Итоги модуля
- Обзор модуля
- Сущности react-redux
- Кликер на React+Redux
- Todo List на React+Redux
- Redux DevTools
- Вариант организации кода #1
- Вариант организации кода #2
- Альтернативная точка входа
- Вариант TodoList с фильтрами
- Синхронизация с localStorage
- Добавление роутинга
- Итоги модуля
- Обзор проекта
- Настройка окружения
- Базовые компоненты
- Добавление провайдера и пустого стора
- Редьюсер вакансий
- Редьюсер фильтрации
- Механизм добавления фильтров
- Удаление фильтров и их очистка
- Публикация проекта
- Итоги модуля
- Легаси для react-redux
- Метод connect
- Концепция mapStateToProps
- Концепция mapDispatchToProps
- Рефакторинг Todo App
- Рефакторинг проекта 1
- Итоги модуля
- Введение в redux middleware
- Базовое использование redux middleware
- Подключение вместе с devTools
- Библиотека redux-persist
- Проблема асинхронности
- Библиотека redux-thunk
- Использование redux-thunk
- Подготовка клиентского api
- Статусы загрузки и обработка ошибок
- Post-запросы
- Thunk extraArgument
- Итоги модуля
- Обзор проекта
- Структура проекта
- Добавление redux бойлерплейта
- Переключение светлой/темной темы
- Редьюсер для стран
- Отрисовка стран в UI
- Фильтрация по поиску
- Фильтрация по региону
- Очистка фильтров
- Детальная страница
- Очистка детальной страницы
- Получение информации о соседях
- Обзор итогового приложения
- Актуальность Redux Toolkit
- Сущности Redux Toolkit
- Метод createAction
- Метод createReducer
- Метод createSlice
- Метод configureStore
- Практика создания слайсов
- Extra редьюсеры
- Структура проекта
- Redux-persist вместе с RTK
- Рефакторинг проекта, часть 1
- Рефакторинг проекта, часть 2
- Итоги модуля
- Обзор модуля
- Базовое использование createAsyncThunk
- ExtraReducers для работы с thunk экшнами
- Практика создания thunk c createAsyncThunk
- Использование в UI
- Массовая обработка событий в extraReducers
- Обработка ошибок
- Отмена запроса к серверу
- Extra параметр thunk
- Базовое использование createEntityAdapter
- Удаление и изменение данных через адаптер
- Итоги модуля
- Постановка задачи
- Организация структуры и слайс темы
- Слайс блока фильтрации
- Слайс стран
- Слайс для деталки
- Получение соседей
- Итоги модуля
- Style Guide от создателей Redux
- FAQ по тому, что хранить в Redux-сторе
- Итоги курса
Введение
- Приветствие
- Что такое TypeScript и зачем нужен
- Альтернативы TypeScript
- Пререквизит к курсу
- Настройка окружения
- Как построен курсДемо-доступ
- О модуле
- Примитивные типы
- Базовая типизация функций
- Базовая типизация объектов
- Объекты как параметры функции
- Типизация массивов
- Кортежи
- Алиасы
- Union типы
- Enum
- Итоги модуля
- О модуле
- Подробнее об интерфейсах
- Подробнее об алиасах
- Type vs Interface
- Сужение типов
- Type Guards
- Asserts
- Типизация this
- Перегрузка функций
- Рекурсивные типы
- Оператор !
- Итоги модуля
- О модуле
- Актуальность дженериков
- Базовые примеры
- Добавление требований
- Оператор keyof
- Сужение допустимых значений типа
- Значения по умолчанию
- Области видимости типов дженерика
- Итоги модуля
- О модуле
- Оператор typeof
- Conditional type
- Еще раз про extends
- Оператор infer
- Маппинг типов
- Утилиты Extract, Exclude, NonNullable
- Утилиты Record, Pick, Omit
- Утилиты ReadOnly, Required, Partial
- Утилиты Parameters, CounstructorParameters
- Доступ по индексу
- Шаблонные литералы
- Итоги модуля
- Обзор проекта
- Постановка задачи
- Создание ts-проекта
- Создание интерфейсов
- Добавление type guards
- Типы асинхронных функций
- Итоги модуля
- О модуле
- Интерфейс для класса
- Модификаторы доступа
- Нюансы конструктора
- Абстрактные классы
- Геттеры и сеттеры
- Статические свойства и методы
- Итоги модуля
- О модуле
- Составные части конфига
- Базовые настройки
- Опции компилятора
- Дополнительные опции
- Тюнинг строгости
- Дополнительный линтинг
- Рекомендованные конфиги
- Итоги модуля
- О модуле
- Настройка окружения
- Типизация пропсов
- Типизация стилей
- Типизация стейта
- Хэндлеры
- Хранение типов
- Нюансы useEffect
- Типизация useRef
- Приложение TodoList
- Классовые компоненты
- Итоги модуля
- Обзор проекта
- Окружение для проекта
- Создание типов сущностей
- Шапка приложения
- Компонент поиска
- Альтернативный вариант формы
- Компонент статистики
- Шапка карточки
- Инфо компонент
- Получение данных
- Итоги модуля
- О модуле
- Добавления Redux в приложение
- Типизация слайсов
- Типизация селекторов
- Типизация asyncThunk
- Типизация extraReducers
- AsyncThunk как дженерик
- Добработка асинхронного слайса
- Итоги модуля
- Обзор проекта
- Окружение для проекта
- Базовые типы приложения
- UI компоненты
- Типизация переключателя темы
- Типизация списка стран
- Типизация детальной страницы
- Типизация контролей
- Итоги проекта
- Что дальше
https://privatelink.de/?https://stepik.org/course/180789/promo