Frontend разработка
Responsive Landing — финальный проект курса «Компетенция Верстальщик — HTML, CSS, JavaScript» на Stepik. Проект представляет собой адаптивный лендинг, разработанный с использованием HTML5 и SCSS. В процессе работы я отрабатывал построение структуры страницы, адаптивную вёрстку и организацию стилей с использованием компонентного подхода.
Мой вклад в проект
Я самостоятельно разработал вёрстку проекта, используя SCSS, Parcel и Git. Разделил стили на отдельные компоненты и секции, создал UI Kit с базовыми элементами интерфейса и настроил адаптацию сайта под разные размеры экранов. Также настроил сборку проекта через Parcel и автоматический деплой на GitHub Pages с использованием GitHub Actions. Ведение проекта через Git позволило работать с историей изменений и последовательно развивать проект от базовой структуры до готового лендинга.
процесс
Проект построен на семантическом HTML5 и SCSS. Вёрстка организована по отдельным секциям и компонентам, чтобы структура страницы оставалась понятной и удобной для дальнейшей работы.
Особое внимание уделил адаптации интерфейса под разные размеры экранов. Сетка, типографика, отступы и элементы интерфейса изменяются в зависимости от ширины экрана, сохраняя целостность композиции.
В проекте использовал SCSS как препроцессор: создал переменные, миксины и переиспользуемые стили, применял вложенность и @extend. Стили разделены на отдельные компоненты и секции, что упрощает поддержку проекта и позволяет переиспользовать общие решения.
Для сборки проекта использовал Parcel, который обрабатывает исходные файлы и формирует production-версию проекта. В процессе сборки CSS минифицируется и оптимизируется, что уменьшает размер итоговых файлов и позволяет сократить объём данных при загрузке страницы.
Разработку вёл с использованием Git, фиксируя изменения по мере работы над проектом. Также настроил автоматический деплой проекта на GitHub Pages через GitHub Actions.
структура&
FRONTEND
Единая система
Проект разрабатывался с учётом разных размеров экранов. Для desktop, tablet и mobile адаптируются сетка, размеры элементов, типографика и отступы, при этом сохраняется общая структура и визуальная иерархия интерфейса. В результате один проект корректно работает на разных устройствах без потери исходной композиции.
