Курс Front-end
(Фронт-енд)

Настройка инструмента.
Основы HTML и CSS. Синтаксис.
Блочные и ленточные элементы.
Добавление текста и его стилизация. Гиперссылки.
Добавление графики. Списки.
Домашнее задание.
Тесты.

Создание таблиц. Работа с формами.
HTML 5 теги. Семантика.
Работа с ресурсами (иконки, шрифты, fontawesome).
Position. Flexbox. Grid.
Домашнее задание.
Тесты.

Grid.
Анимация CSS.
Адаптивность CSS (@media).
SASS (SCSS).
Bootstrap.
Домашнее задание (краткое видео).
Тесты.

Вступ в JS.
Переменные. Типы данных.
Тернарные и логические операторы.
Инструкция switch.
Циклы: for, while, do…while.
Function Declaration и Function Expression.
Анонимные функции.
Функция callback.
Функции alert, prompt, confirm.

Практика:

• создание функционала для открывания/закрывания модальных окон;
• практические примеры использования циклов;
• использование alert, prompt и confirm.

• Циклы: for, while, do..while.
  Объекты. Методы объектов.
  Копирование объектов и ссылки.

  Практика:

• создание mock данных для магазина;
• практические задачи с использованием методов объектов и массивов

• Учимся создавать массивы.
  Методы массивов.
  Использование циклов.

  Практика:

• практические задачи с использованием методов объектов и массивов

• Контекст вызова и this. Методы call, bind и apply.
  Функции конструкторов. Дескрипторы объектов.
  Local и Sesion storages. Дата и время.
  Глобальный объект window. Объект лексического окружения.

  Практика:

• хранение пользователя и купленных товаров в LocalStorage;
• использование глобального объекта window.

• Замыкание.
  Оператор try/catch/finally.
  Синтаксис setTimeout/setInterval
  Как устроен Event Loop в JavaScript.
  OOP и их принципы.

  Практика:

• написание функционала для логина пользователя;
• написание функционала для работы фильтров магазина;
• создание класса Person.

• Объект Promise.
  Функции Async/Await в JS.
  DOM/BOM. Выбор элементов на странице.

  Практика:

• примеры использования объекта Promise;
• выбор элементов на странице, краткий обзор библиотеки jQuery.

• NPM и Yarn. Обзор свойств Webpack. Работа с import/export.
  Обзор структуры React приложения.
  JSX и props: Рендеринг списков и Conditional рендеринг.
  Виртуальный DOM.
  Обработка событий. Контролируемые и не контролируемые компоненты.

  Практика:

• обзор дефолтного React проекта;
• примеры простейших компонентов;
• перенос верстки с сайта магазина в JSX код.

• Жизненный цикл компонента.
  Создание ErrorBoundary.
  React-router-dom.
  Порталы.

  Практика:

• жизненный цикл компонентов;
  написание ErrorBoundary;

   

• использование порталов для модальных окон;
• создание роутов для сайта магазина.

• Хук useState.
  Хук useRef.
  Хук useEffect.
  Хук useMemo.
  Хук useCallback.
  React.memo().

  Практика:

• написание основной логики сайта магазина с использованием хуков, описанных выше.

• Способы стилизации React приложения:
  CSS modules.
  Styled Components.
  Redux и redux-thunk.
  Material UI.
  Formik.

  Практика:

• пример Css modules;
• пример Styled Components;
• пример из Redux;
• пример с Material UI;
• пример из Formik.

  Защита дипломного проекта

  Проэкты:
  1. Сайт блога с использованием HTML и CSS.
  2. Сайт интернет магазина на чистом HTML/CSS/Js и React.js