Лендинг о велосипедах и типах дорожного покрытия.
- Слайдеры с велосипедами и дорожными покрытиями.
- Смена темы оформления
- Flexbox
- Grid Layout
- CSS3 (в т.ч. анимации)
- CSS veriables
- Препроцессор (SCSS)
- Методология BEM
- Файловая структура BEM Flex
- JavaScript (ES6): работа с DOM, массивы и функции
- Используется библиотека Swiper JS для реализации слайдеров.
- Отзывчивая верстка (desktop-first)
- Работа с Figma (pixel-perfect верстка)
- Webpack
- HTML
- CSS
- SCSS
- JavaScript
Для работы с проектом вам понадобятся git, NodeJS
- Как установить git.
- Как установить NodeJS.
- Инструкция по установке Webpack ниже:
В командной строке перейдите в папку, где будет развернут проект. После чего скопируйте его с GitHub:
`$ git clone git@github.com:RoChernikov/bicycles.git`Далее переходим в папку с проектом и устанавливаем компоненты:
`$ npm install`После этого нужно собрать проект:
`$ npm run build`Далее можно запускать проект на локальном сервере:
`$ npm run dev`$ npm run build - для компиляции. Проект собирается локально, продукты сборки сохряняются в указанной директории.
$ npm run dev - для отладки. Помимо сборки, запускает на локальном сервере с автоматической <<горячей>> перезагрузкой при детектировании изменений в исходных кодах.
$ npm run deploy - для релиза. Выкладывает релизную версию в ветку gh-pages указанного репозитория.
npm init - добаляет конфигурационный файл package.json по умолчанию
npm i webpack --save-dev - устанавливает пакет webpack в проект, записывает его в зависимости для разработки
npm i webpack-cli --save-dev - устанавливает пакет интерфейса командной строки для webpack'а
npm i webpack-dev-server --save-dev - устанавливает пакет локального сервера
npm i babel-loader --save-dev - устанавливает пакет транспилятора
Дополнительные пакеты для работы с транспилятором:
npm i @babel/cli --save-dev
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev
npm i core-js@3.4.1 --save
npm install --save babel-polyfill - устанавливает полифилы для транспилятора
npm i mini-css-extract-plugin --save-dev - устанавливает пакет минификатора
npm i css-loader --save-dev - устанавливает пакет CSS-загрузчика
npm i webpack-md5-hash --save-dev - устанавливает пакет подсчёта хеша
npm i postcss-loader --save-dev - устанавливает пакет подключения плагина PostCSS к Webpack'у
npm i autoprefixer --save-dev - установщик вендорных префиксов
npm i cssnano --save-dev - минификатор CSS
npm install gh-pages --save-dev - выкладывает проект на gh-pages
npm install html-webpack-plugin --save-dev - "учит" вебпак работать с HTML
npm install --save-dev cross-env - пакет для использования глобальных переменных