Основная задача заключалась в том, чтобы разработать функциональный и адаптивный сайт, который мог бы служить примером для портфолио, демонстрируя мои навыки работы с HTML, CSS и JavaScript. Я поставила себе цель создать сайт, который предоставляет информацию об услугах тренеров и позволяет пользователям оставлять заявки на регистрацию через форму. При этом я хотела отработать навыки создания адаптивных макетов, добавления новых страниц и оптимизации сайта, чтобы он соответствовал современным стандартам веб-разработки. В рамках проекта я решила добавить две страницы — Services и Contact — а также устранить возможные проблемы с отображением на мобильных устройствах, которые часто встречаются в подобных проектах.
Для решения поставленной задачи я начала с планирования структуры сайта. Я определила основные страницы — Home, Services и Contact — и создала их с использованием HTML, обеспечив семантическую разметку с тегами <header>, <nav>, <main> и <footer> для лучшей читаемости кода и SEO. Для стилизации я применила CSS, используя Bootstrap для быстрого создания адаптивного дизайна, и добавила кастомные стили через медиа-запросы, чтобы сайт корректно отображался на мобильных устройствах, планшетах и десктопах. Я протестировала отображение с помощью Chrome DevTools, устраняя проблемы, такие как перекрытие элементов и некорректное масштабирование текста.
На странице Services я добавила разделы с описанием услуг тренеров, используя Flexbox для гибкого расположения карточек. На странице Contact я внедрила форму регистрации с полями для имени, email и сообщения.Для улучшения SEO я добавила мета-теги (<title>, <meta name="description">), alt-атрибуты для всех изображений и использовала семантическую разметку. Я также провела тестирование кроссбраузерной совместимости, проверив сайт в Chrome, Firefox и Safari, и добавила префиксы (например, -webkit-) для корректного отображения стилей. В результате я развернула сайт на Netlify, обеспечив его доступность онлайн.
Этот тренировочный проект стал важной частью моего портфолио, демонстрируя потенциальным клиентам мои навыки работы с HTML, CSS, JavaScript и современными стандартами веб-разработки. Сайт может быть использован как шаблон для реальных проектов в сфере фитнеса или персональных услуг, где требуется удобный интерфейс для представления услуг и взаимодействия с клиентами. Например, тренеры могут адаптировать его под свои нужды, добавив конкретные услуги, расписание или систему бронирования. Форма регистрации позволяет собирать заявки от пользователей, что полезно для бизнеса, ориентированного на привлечение клиентов. В будущем я планирую расширить функциональность сайта, добавив динамические элементы (например, интеграцию с базой данных для управления заявками), чтобы сделать его ещё более практичным для реального применения.
Пожаловаться
