Задание

Figma дизайн

Описание задачи:

0. Главная цель - показать семантически правильную верстку.
1. Код должен быть валидный и поддерживаемый.
2. Грубые ошибки в разметке отсутствуют.
3. Документ проходит проверку на валидность.
4. Раскладка блоков на странице сделана не с помощью таблиц или позиционирования.
5. В CSS отсутствует !important. Допускается использование !important при обосновании его необходимости.
6. Подключены правильные шрифты.
7. При вёрстке использован препроцессор scss.
8. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, Edge.
9. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
10. Разметка должна быть написана с использованием методологии БЭМ(будет преимуществом).
11. Написание на нативном, без использования фреймворков.

Техническое задание:

1. Выполнена вёрстка трёх версий каждой страницы: мобильной, планшетной и десктопной. Адаптивность должна работать на планшетах и мобильных устройствах, а не только при изменении ширины окна браузера. То есть тег должен быть работоспособен.
2. Раздел карточки реализовать подгрузку новых карточек по нажатию на кнопку "ЗАГРУЗИТЬ ЕЩЕ" с https://jsonplaceholder.typicode.com (https://jsonplaceholder.typicode.com/) (https://jsonplaceholder.typicode.com (https://jsonplaceholder.typicode.com/)/) (/posts) по 5 шт. Максимальное кол-во карточек - 30. Изображения на усмотрение разработчика.

gulp-scss-starter

🔥 Особенности

• именование классов по БЭМ
• используется БЭМ-структура
• используется препроцессор SCSS
• используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
• используется Webpack для сборки JavaScript-модулей
• используется жёсткий кодгайд
• используется проверка кода на ошибки перед коммитом

🛠️ Установка

• установите NodeJS
• установите глобально:
  • Yarn: npm i -g yarn
  • Gulp: npm i -g gulp
  • Bem Tools: npm i -g bem-tools-core
• скачайте сборку с помощью Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• перейдите в скачанную папку со сборкой: cd gulp-scss-starter
• введите yarn set version berry
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn run dev (режим разработки)
• чтобы собрать проект, введите команду yarn run build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

📂 Файловая структура

gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

• Корень папки:
  • .babelrc.js — настройки Babel
  • .bemrc.js — настройки БЭМ
  • .eslintrc.json — настройки ESLint
  • .gitignore – запрет на отслеживание файлов Git'ом
  • .stylelintrc — настройки Stylelint
  • .stylelintignore – запрет на отслеживание файлов Stylelint'ом
  • .yarnrc.yml – настройка Yarn
  • gulpfile.babel.js — настройки Gulp
  • webpack.config.js — настройки Webpack
  • package.json — список зависимостей
• Папка src - используется во время разработки:
  • БЭМ-блоки: src/blocks
  • шрифты: src/fonts
  • изображения: src/img
  • JS-файлы: src/js
  • страницы сайта: src/views/pages
  • SCSS-файлы: src/styles
  • HTML-файлы: src/views
  • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
• Папка dist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
• Папка gulp-tasks - папка с Gulp-тасками

⌨️ Команды

• yarn run lint:styles - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint
• yarn run dev - запуск сервера для разработки проекта
• yarn run build - собрать проект с оптимизацией без запуска сервера
• yarn run build:views - собрать HTML-файлы
• yarn run build:styles - скомпилировать SCSS-файлы
• yarn run build:scripts - собрать JS-файлы
• yarn run build:images - собрать изображения
• yarn run build:webp - сконвертировать изображения в формат .webp
• yarn run build:sprites- собрать спрайты
• yarn run build:fonts - собрать шрифты
• yarn run build:favicons - собрать фавиконки
• yarn run build:gzip - собрать конфигурацию Apache
• yarn run bem-m - добавить БЭМ-блок
• yarn run lint:styles --fix - исправить ошибки в SCSS-файлах согласно настройкам Stylelint
• yarn run lint:scripts - проверить JS-файлы
• yarn run lint:scripts --fix - исправить ошибки в JS-файлах согласно настройкам ESLint

💡 Рекомендации по использованию

Компонентный подход к разработке сайтов

• каждый БЭМ-блок имеет свою папку внутри src/blocks/modules
• папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
  • HTML-файл блока импортируется в файл src/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)
  • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
  • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

blocks
├── modules
│   ├──header
│   │   ├── header.html
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующую команду: yarn run bem-m my-block - для создания БЭМ-блока в src/block/modules, где my-block - имя БЭМ-блока (после создания нужно удалить содержимое js-файла БЭМ-блока).

Страницы проекта

• страницы проекта находятся в папке src/views/pages
  • главная страница: src/views/index.html

Шрифты

• шрифты находятся в папке src/fonts
  • используйте форматы .woff и .woff2
  • шрифты подключаются в файл src/styles/base/_fonts.scss
  • сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

• изображения находятся в папке src/img
  • изображения автоматически конвертируются в формат .webp. Подробная информация по использованию тут
  • изображение для генерации фавиконок должно находиться в папке src/img/favicon