Проект: united-hacatone портфолио

Это портфолио проект сделанный в команде для хакатона.

• Страница сайта расположена по адресу: https://sunlight-nadezhda.github.io/united-hacatone/index.html.
• Собранный через Webpack проект расположен по адресу: https://github.com/sunlight-nadezhda/united-hacatone.

---

Макет сайта

Расположен в онлайн-сервисе для разработки интерфесов - графическом редакторе Figma по адресу:

• https://www.figma.com/file/5D9pDuLtS042hzaoN69Kd7/Free--Landing--Page-Template?node-id=0%3A1

---

Как использовать

Чтобы установить необходимые для работы проекта зависимости

npm install

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

npm run dev

Чтобы собрать готовый проект

npm run build

Чтобы выложить готовый проект на хостинг GitHub

npm run deploy

---

Применяемые технологии

• Флекс-бокс верстка.
• Грид таблицы.
• Выразительные семантические теги (section, ul, footer).
• Позиционирование элементов.
• Относительные пути к файлам.
• Трансформация с плавностью перехода.
• Методология наименования классов CSS БЭМ Nested.
• Относительные размеры блоков.
• Вычисляемые значения (функция calc).
• Оптимизация шрифтов (сглаживание, подгонка размера текста, рендеринг).
• Метатег корректного масштабирования страницы (@media).
• Выбор элементов в Document Object Model (DOM) дереве (метод querySelector).
• Добавление в DOM-дерево карточек через шаблоны template.
• Отмена стандартной обработки событий браузера методом события preventDefault().
• Метод addEventListener для ослеживания событий.
• Основы объектно-ориентированого программирования - классы.

---

Итог

Сайт получился отзывчивым (резиновым и адаптивным), корректно отображается на устройствах с разрешением от 320px. Проект реализован на классах и собирается с помощью сборщика Webpack.