Учебный проект «Кэт энерджи»

• Платформа: Html Academy
• Курс: Профессия "Фронтенд-разработчик"
  • Модуль 2: "HTML и CSS. Адаптивная вёрстка и автоматизация"
    • Разбираемся с git и GitHub
    • Методологии вёрстки (БЕМ)
    • Препроцессоры (SCSS, LESS)
    • Адаптивные сетки (Felx, Grid)
    • Адаптивные декоративные элементы
    • Адаптивная графика
    • Погружение в автоматизацию (Gulp)
    • Производительность вёрстки

Итоги

Сверстал три страницы в Pixel Perfect, в трех разрешениях экрана, применил подходы Mobile‌ ‌First‌, адаптивный и отзывчивый(резиновый) дизаин, учел преполнение контента, оптимизировал графику, шрифты. Написал сборку для Gulp.

Дополнительно: разобрался с оптимизацией и локализацией шрифтов, разделением на subseting и предзагрузкой для увеличения показателей LCP.

Как запустить проект

1. Установите node.js. Поддерживаемая версия 16
2. Установить в зависимости

  npm сi

3. Собрать проект в ./build

 npm build

3. Запустить проект

 npm start