Школа по программированию.

Описание

Нужно было сделать простой сайт: форма для заявок, пара модальных окон и немного анимаций. Сайт должен быть удобным, работать на любых устройствах и быстро грузиться. Я сам сделал простой дизайн в Figma, а потом занялся вёрсткой и функционалом. Использовал HTML, SCSS, Pug, Gulp, нативный JavaScript и animate.js для анимаций.

Решение

Дизайн: Нарисовал в Figma чистый и понятный одностраничный дизайн, чтобы всё было удобно и выглядело современно.

Вёрстка: Сверстал всю страницу на Pug, чтобы код был компактным. Стили написал на SCSS, собрал всё через Gulp для компиляции и сжатия.

Форма для заявок: Сделал форму, где люди могут оставить заявку (имя, email, телефон). Проверку полей настроил через JavaScript, отправка идёт через AJAX на email с защитой от спама.

Модальные окна: Добавил пару модальных окон, которые открываются по кнопкам, например, для записи на курс или подробностей. Плавное появления, закрытие по кнопке или Esc, всё адаптивно.

Анимации: Через animate.js сделал пару простых анимаций: ничего сложного, чтобы не перегружать сайт.

Технические детали:
Вёрстка на Pug, стили на SCSS, сборка через Gulp (компиляция, сжатие). JavaScript нативный, плюс animate.js для анимаций.
Сайт адаптивный (от 320px до 4K), грузится быстро, с семантической разметкой и ARIA для доступности.

Результат

Сайт получился простой и удобный: форма для заявок, пара модальных окон и лёгкие анимации работают без проблем. Дизайн из Figma перенёс чётко, код чистый, скорость высокая, валидатор не ругается.

Презентация проекта