R50 cc43e14fcc0f24ad430e8c1decf63d52
HTML / CSS вёрстка web-страниц

Aдаптивный веб-сайт для портфолио

Добавлено 01 мая 2019 в 14:57
Aдаптивный веб-сайт для портфолио Сайт можно просмотреть по адресу https://eugenegarmash.github.io/adaptive-website-for-portfolio/ . Проверить сайт на адаптивность модно с помощью Chrome Dev Tools.

HTML & CSS

  • полностью резиновый сайт (%, em/rem, @media), подстраивается под любую ширину экрана
  • вёрстка по методологии БЭМ
  • вёрстка на flexbox
  • блок .price-and-schedule свёрстан на grid CSS для демонстрации навыка (также отзывчивый)
  • используется позиционирование (absolute, relative)
  • работа с фоновыми изображениями (в .page-header)
  • уделил внимание доступности (скрывал с помощью вспомогательного класса visually-hidden, положение блоков в разметке не всегда соответствует виду страницы)
  • использую продвинутые селекторы типа nth-of-type(2n-1) и [class^="price-and-schedule__card"]
  • декоративные элементы: без добавления дополнительных тегов в html, на чистом CSS (с помощью всевдоэлементов)
  • использование дефолтных шрифтов для всех платформ
  • использую эмоджи для лучшей навигации по проэкту
  • использую собственный reset (сброс отступов и стилей списков) вместе с normalise.css
  • анимация для блока .sign-popup
JavaScript

  • два всплывающих окна (меню и окно записи) на чистом JS
  • слайдер на чистом JS
Проверено с помощью валидатора W3C!

Cdf12927fb