HEALTHY-SWITCHER это работа номер один в моем портфолио. Основа кода написана на HTML, CSS и Java Script. Для создания структуры HTML применена методология БЭМ. Для построения конструкций блоков были использованы Grid и Flex layout. Применены относительные единицы шрифтов, которые позволяют плохо видящему пользователю укрупнить шрифт. Каждый элемент имеет анимацию при клике и наведении, присутствует анимация при скролле. Резиновый адаптив сайта позволяет ему хорошо выглядеть на каждом пикселе, даже на складных смартфонах с очень узким экраном в 280px (Это на 15% меньше, чем ширина экрана у крохотного Iphone 5). Мобильный вид был создан самостоятельно на основе дизайна PC версии. Присутствует меню бургер на смартфонах. Сайт прошел проверку валидатора W3C. Каждый из параметров сайта в Google Lighthouse находится в зеленой зоне. Каждое изображение выгружено в оптимальном формате, растровые изображения обернуты в конструкцию Picture, которая при поддержке новейшего формата Webp, выводит изображения в нем, если поддержки нет, выведется обычный WEBP. Формат WEBP при меньшем весе позволяет показать изображения такого же качества, как и JPG весяший на 20% больше, это сильно ускоряет загрузку сайта.
На сайте есть слайдер, на базе библиотеки Swiper, которую используют крупнейшие компании вроде McDonalds, Xiaomi, Adobe. Создан блок пятизвездочного рейтинга блюд, который готов отправлять информацию об оценке товара пользователем на сервер. В мобильной версии линия хедера с логотипом и кнопкой меню меняет свою прозрачность в зависимости от скролла
- HTML
- CSS
- Java Script
- Flex Layout
- Grid Layout
- Сжатие кода
- БЭМ
- Rem и Em для шрифтов
- CSS animations
- Picture WEBP
- Woff2 Fonts
- Слайдер Swiper
- AOS
Ссылка на сайт https://fazdendev.github.io/healthy-switcher/