Webstudio

Односторінковий сайт, реалізований відповідно до макета в #Figma з використанням семантичної HTML-розмітки та сучасних підходів до адаптивної #верстки.

Основна увага приділена чистій структурі коду, кросбраузерності, оптимізації зображень та доступності інтерфейсу.

Особливості:
Семантична HTML-розмітка відповідно до рекомендацій та макета
Адаптивний дизайн, реалізований за підходом #Mobile-First
Використання Flexbox для побудови гнучкого макета
Оптимізовані растрові зображення за допомогою Squoosh, формати .jpg та .svg
Підключений #modern-normalize для узгодженого відображення в різних браузерах
Підключені необхідні веб-шрифти
SVG-іконки зібрані в спрайт для ефективного використання
Реалізовані модальні вікна та мобільне меню з коректним перемиканням видимості
Форми та інтерактивні елементи мають базові атрибути доступності
Код проходить перевірку валідаторами
Форматування коду виконано за допомогою #Prettier

Технічний стек:
#HTML5
#CSS3
#Flexbox

Цей проект демонструє:
Семантичну та валідну HTML-розмітку
Реалізацію адаптивного інтерфейсу без дублювання стилів
Використання підходу Mobile-First
Оптимізацію зображень для швидкого завантаження
Організацію чистого та структурованого CSS-коду
Дотримання сучасних стандартів верстки