Skip to content
Учебный макет от HTML Academy «Нердс» с микроанимацией, на личной расширенной сборке
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulpfile.js
source
.csscomb.json
.editorconfig
.eslintrc
.gitattributes
.gitignore
.htmlhintrc
.jsbeautifyrc
.nunjuckshintrc
.stylelintrc
README.md
package-lock.json
package.json

README.md

Nerds

Наставническая версия учебного проекта с интенсива «HTML и CSS, уровень 1» от HTML Academy.

Опубликованная версия

Особенности

Вёрстка выполнена максимально приближённо к требованиям интенсива для студентов, но с некоторыми отличиями, приближающими её к реальной веб-разработке:

  • Сборка gulp-cooker, основанная на компонентном подходе.
  • Следование методологии БЭМ, использование SCSS (модули, переменные, миксины).
  • Использование точечных инлайновых стилей для перечней (позиционирование, фоновые изображения) во избежание костылей с :nth-child.
  • Загрузка webp на контентные изображения и фоны (кроме IE 11) в поддерживающих этот формат браузерах.
  • Иконки в виде векторного символьного спрайта.
  • ES6 с транспиляцией до ES5 для поддержки IE 11. Без сторонних библиотек.
  • Корректные настройки для доступа с мобильных устройств: даже на 320px сайт выглядит довольно дружелюбно, масштабируясь под ширину экрана. Попап открывается в натуральную величину без искажений и полностью доступен за счет прокрутки.
  • Микроанимация интерактивных элементов.
  • Обработка ссылок-якорей: при наличии соответствующего id осуществляется плавная (с регулировкой скорости) прокрутка к началу блока. Пустые моковые якоря ничего не делают.
  • Анимация слайдера на главной странице через мерцание, с учётом доступности.
  • Полнофункциональные попапы, не позволяющие доступа к основному содержимому ни мышью, ни с клавиатуры. Устойчивость при переполнении контентом. Соблюдена поправка на полосу прокрутки, решена проблема фиксированного body в iOS.
  • Реализована отправка формы хоткеем Ctrl + Enter при фокусе в поле сообщения.
  • Через форму обратной связи реализована отправка сообщения об ошибке. При нажатии Ctrl + Enter происходит открытие попапа с формой, при выделении текста перед этим он попадает в поле сообщения с сопроводительной надписью.
  • Оживление ползунков range (перемещение мышью и на тачскрине) с учётом доступности, в том числе и навигация по ползункам любой парой стрелок клавиатуры.
  • Реализована пагинация (подгрузка данных через AJAX с прелоадером).
  • При отключении JS сайт сохраняет работоспособность.
You can’t perform that action at this time.