Основы Frontend-разработки

1.

Основы Frontend-разработки
Студент:
Лупачев Михаил
Наставник: Прохоров Максим
Лектор:
Кундин Юрий

2.

Цель и задача проекта:
● Получить основные навыки необходимые для входа в
профессию Frontend-разработчика
● Применить на практике изученные технологии сверстав
страницы по макету

3.

4.

Изученные навыки условно можно разделить на три
основных модуля:
Первый модуль - HTML, CSS
Второй модуль - JavaScript
Третий модуль - React, Redux
4

5.

Первый модуль - HTML, CSS
▪ Понятие HTML
▪ Структура и содержание страницы
▪ Понятие тэга, анатомия тэга
▪ Разбиение страницы на блоки, разбиение блоков на
элементы
▪ CSS, способы подключения стилей
▪ Часто используемые CSS свойства
▪ Позиционирование элементов
▪ Методология БЭМ
▪ Медиазапросы
▪ Flex, Grid
5

6.

Основные технологии модуля:
▪ В проекте реализована файловая структура БЭМ Nested
▪ С помощью скриптового решения на bush создание файловой
структуры было автоматизировано, что позволило ускорить
разработку, упростить верстку и поддержать
масштабируемость
▪ Применение БЭМ позволило упростить отладку,
масштабируемость и переиспользование блоков
▪ Использован препроцессор SASS, CSCC. Это позволило
упростить написание стилей
▪ Применение медиазапросов в проекте позволило подстроить
проект для мобильного экрана, планшета и для
широкоформатного экрана
▪ Для позиционирования использовались технологии Flex и Grid,
которые позволили содержимому подстроиться под разные
экраны
6

7.

Второй модуль - JavaScript
▪ Подключение скрипта к странице
▪ Базовые операторы, типы данных, преобразование
типов
▪ Ветвление, циклы, функции
▪ Объекты, массивы, методы массивов
▪ События браузера
▪ LocalStorage, SessionStorage, cookies
Во втором модуле в проекте с помощью JS реализована
логика валидации формы обратной связи. Реализовано
сохранение введенных, но не отправленных данных
формы. Добавлена логика добавления товара в
избранное и в корзину.
7

8.

Третий модуль - React, Redux
▪ React, NPM, JSX
▪ Props, children
▪ События в React
▪ Hooks. useState, useEffect.
▪ Routing
▪ Управление состоянием приложения
▪ Redux, action
▪ Redux middleware
8

9.

Основные технологии модуля:
▪
▪
▪
▪
▪
Проект реализован в react посредством пакета
CreateReactApp.
Дополнительно был установлен пакет sass и craco
для работы с scss переменными и файлами
препроцессора.
Применение routing позволило отображать
необходимые компоненты в зависимости от urlадреса.
Применение redux toolkit позволило работать с
глобальными состояниями. Так данные о товарах в
корзине и избранном хранятся в глобальных
состояниях redux toolkit
middleware позволяет отслеживать добавление и
удаление товаров и работу с localStorage
9

10.

Спасибо за внимание