FrontendFRONTEND-РАЗРАБОТЧИК
Frontend Development (ReactJS)
План курса на 6 месяцев: HTML, CSS, JavaScript, GitHub и ReactJS.
6 месяцевС нуляОфлайн / онлайн
от 90 000 ₸ /мес
Программа курса
01Модуль 1. HTML+
- Введение в HTML, Структуры HTML документа. Установка VS Code, Создание базовой HTML-страницы.
- Текстовые элементы. Работа с текстовыми элементами, форматирование текста
- Ссылки и изображения. Создание различных ссылок, добавление изображений, создании странички биографии
- Таблицы. Создание таблиц по примеру, объединение ячеек таблицы
- Формы. Элементы форм, создание простой формы регистрации
- Iframe и Контейнеры. Создание макета с контейнерами, встраивание HTML документов, YouTube-видео, Яндекс карт
- Семантическая верстка, accessibility. Создание семантической структуры. Использование инструментов для проверки доступности веб-страниц
02Модуль 2. CSS+
- Введение в CSS, Селекторы. Подключение стилей к HTML, использование простых, составных селекторов и атрибутных селекторов, применение CSS свойств.
- Псевдоклассы и псевдоэлементы, приоритет селекторов. Стилизация с помощью псевдоклассов и псевдоэлементов, применение разных уровней специфичности
- Цвета в CSS и размеры, средства разработчика, типы шрифтов и подключение. Применение разных способов задания цвета, подключение Google Fonts, использование средств разработчика для исследования стр...
- Блочная модель документа, cвойство display. Базовая верстка с блочной моделью, скрытие элементов, работа с блочными и строчными элементами
- Слои, позиционирование. Создание элементов HTML, требующих относительного, абсолютного, фиксированного позиционирования.
- Flexbox. Начало работы с макетом в Figma. Использование flex элементов для верстки макета
- Grid. Работа с макетом в Figma. Использование grid элементов для верстки макета
- Адаптивный дизайн и отзывчивый дизайн, медиа-запросы. Верстка макета с использованием адаптивности с помощью медиа-запросов.
- Работа с макетом из Figma. Финальный этап вёрстки макета.
- Проверка и оценка проекта, работа над ошибками.Финальная оценка проекта и обратная связь для усовершенствования навыков.
03Модуль 3. JavaScript (управления элементами на сайте)+
- Знакомство с JS и переменные: Изучение основ JavaScript и создание первых переменных.
- Условные операторы: Изучение условных конструкций для управления логикой программы.
- Массивы и его методы: Знакомство с массивами и основными методами для работы с ними.
- Строки и их свойства: Изучение работы со строками и их встроенными методами.
- Циклы (for, while, do while): Практика написания циклов для выполнения повторяющихся задач.
- Практика и усвоение пройденного материала: Закрепление изученных тем на практике.
- Функции (Declaration, Expression): Изучение объявлений функций и их использования.
- Продолжение функций (IIFE Function): Работа с немедленно вызываемыми функциями для изоляции кода.
- Объекты и работа с ними: Создание и работа с объектами в JavaScript.
- DOM-элементы и практика: Управление элементами страницы с помощью JavaScript.
- BOM-элементы (window, history и другие): Знакомство с объектами браузера для взаимодействия с окружением.
- Практика создания слайдера: Реализация простого слайдера для практики работы с DOM.
- Проект для завершения JavaScript: Итоговый проект для проверки освоенных знаний.
- Работа над ошибками: Исправление ошибок и улучшение кода итогового проекта.
- Проверка и оценка проекта: Финальная оценка проекта и обратная связь для усовершенствования навыков.
04Модуль 4. GitHub (система контроля версий)+
- Git команды, структура. Регистрация в GitHub, установка git
- Практика и загрузка проектов в GitHub. Создание репозитория, загрузка проектов, создание веток
05Модуль 5. ReactJS+
- NodeJS и основные команды(npm, npx, yarn). Установка NodeJS, изучение структуры, создание React проекта.
- Компоненты. Деление проекта на компоненты, создание классовых и функциональных компонентов
- Структура и props. Организация передачи данных между компонентами.
- React-Router-Dom (Роутинг). Организация динамической навигации
- Типы роутинга и работа с ними. Различные подходы к роутингу: статический, динамический, вложенный, приватный.
- Business Logical Layer (BLL). Построение бизнес-логики приложения.
- Работа с состоянием. Создание состояние приложении, работа с состоянием на чистом реакте без других библиотек(легаси)
- Flux – круговорот. Изучение Flux архитектуры
- Bind, dispatch, action. Работа и реализация Flux архитектуры
- Action-Creator. Работа и реализация Flux архитектуры.
- Reducers, Container. Работа и реализация Flux архитектуры.
- Redux – знакомство. Подключение и настройка Redux.
- ContextAPI, React-Redux, Connect. Управления глобальным состоянием.
- Deep copy и Shallow copy. Различия между поверхностным и глубоким копированием. Создавание поверхностных и глубоких копий объектов и массивов.
- RestAPI и API. Основные методы HTTP-запросов. Построение логики взаимодействия клиента и сервера
- Create (Создание POST). Использование API для создания данных в интерфейсе.
- Read (Чтение GET). Использование HTTP запросов для отображения данных в интерфейсе
- Update (Обновление PUT). Использование HTTP запросов для обновления данных в интерфейсе
- Delete (Удаление DELETE). Использование HTTP запросов для удаления данных в интерфейсе
- SideEffect. Взаимодействие с внешними ситсемами, запросы данных или обновление браузера. Правильное управление ресурсами
- UseEffect. Управление побочными эффектами в функциональных компонентах.
- UseState. Создание и управления состоянием компонента.
- HOC (Higher-Order Component). Использование компонентов высшего порядка для добавления логики к другим компонентам.
- LifeCycle. Применение методов жизненного цикла классовых компонентов для управления их состоянием.
- PreLoader, mapDispatchToProps (лайфхаки). Индикатор загрузки, упрощение работы с Redux.
- Login и регистрация. Реализация авторизации и создания учетных записей для пользователей.
- Storage types. Использование разных вариантов хранения данных на клиенте: LocalStorage, SessionStorage, Cookies.
- Практика. Работа с проектом
- Проект: работа над ошибками. Проверка всего проекта, в том числе бизнес-логики.
- Индив. проект. Подбор и обсуждение индив. проектов для каждого студента
Результаты обучения
- Верстать адаптивные страницы
- Писать интерфейсы на JavaScript и React
- Работать с API и состоянием
Кому подходит
- Новички
- Те, кто хочет во frontend
Готовы начать «Frontend Development (ReactJS)»?
Первый урок — бесплатно. Расскажем о программе и ответим на все вопросы.