Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Nerds

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

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

Особенности

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

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

About

Учебный макет от HTML Academy «Нердс» с микроанимацией, на личной расширенной сборке

Resources

Releases

No releases published

Packages

No packages published