Pulse

Учебный проект из курса WEB-разработчик

Автор курса: Иван Петриченко

Описание проекта

Pulse — это интерактивная страница, на которой пользователи могут выбрать пульсометр с учётом уровня подготовки и оставить данные для обратной связи.

Функционал:

• Переключение между табами;
• Всплывающие формы с обратной связью;
• User eXperience (UX);
• Адаптивный интерфейс для разных устройств.

Стек технологий:

• HTML5;
• CSS3:
  • Flexbox;
  • Positioning;
  • Adaptive UI;
  • Media Queries;
• Вендорные префиксы в CSS;
• Препроцессоры: SASS/SCSS/LESS;
• Методология БЭМ;
• Работа с медиафайлами (HTML-video, iframe);
• Вёрстка по макету в Figma;
• JavaScript:
  • Стиль CamelCase;
  • Установка и настройка плагинов;
• Gulp.

Установка и запуск проекта:

Клонировать репозиторий:

git clone https://github.com/ia-stepanov/pulse.git

Установить зависимости:

npm install

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

npx gulp

Языки:

• JavaScript

Библиотеки:

• jQuery — это JavaScript-фреймворк фокусирующийся на взаимодействии JavaScript и HTML;
• PHPMailer — это библиотека для безопасной и простой отправки электронных писем с помощью кода PHP с веб-сервера. Мануал с новыми настройками Gmail SMTP;
• Animate.css — это кроссбраузерная библиотека для добавления CSS-анимации.

Плагины:

• Slick Carousel — это плагин для создания адаптивного слайдера;
• jQuery Validation Plugin — это плагин, который помогает валидировать элементы формы;
• jQuery Masked Input — это плагин, который создаёт маску для ввода номера;
• Wow.js — это плагин, который показывает анимацию при скролле. Работает с библиотекой Animate.css.

Макет в Figma:

• Макет Pulse

Скриншот:

Развернуть

Ссылка на сайт:

https://ia-stepanov.github.io/pulse/