Сегодня на очереди макет интернет-магазина одежды. Для максимального набора опыта советую использовать SSR-подход. К примеру, может взять Nuxt или Next.js.

В качестве backend вы можете взять Firebase.

Скриншот 1 - страница входа. Можно зайти с помощью email, имени пользователя или же войти с помощью Google, Twitter или других сервисов. Firebase предоставляют возможность сделать подобные вещи. Кроме этого в макетах есть страницы регистрация, сброса пароля, ввода проверочного кода.

На главной странице есть много интересных блоков.

Скриншот 2 - слайдер. Текст и кнопка - это не картинка. Необходимо именно реализовать это HTML-элементами. Обратите внимание на переключалку слайдов внизу.

Скриншот 3 - довольно много подобных блоков на странице. При клике на сердечко в личном кабинете необходимо сохранять данный товар в wishlist (есть отдельно нарисовання страница в Figma файле). Также предусмотрите, чтобы блоки не ломались при вставке картинок других размеров и пропорций.

Скриншот 4 - каждый блок с компанией - это ссылки. Имейте это ввиду.

Скриншот 5 - слайдер отзывов. Так же необходимо предусмотреть, чтобы при разном количестве текста никакой слайд не ломается.

Скриншот 6 - каталог. Слева можно отфильтровать по:

- типу

- цене

- цветам

- размеру

- стилю

Помимо этого обратите внимание, что можно выбрать, какие товары показывать: новые или рекомендованные.

Далее у нас страница товара.

Скриншот 7. Слева. слайдер. Выводится по 3 фотографии и листаются вертикально. При клике на миниаютуру справа открывается большая картинка.

Далее юзер может выбрать цвет и размер одежды, после чего товар может быть добавлен в корзину. При клике на Size Guide можно открывать модальное окно с какой-то помощью по выбору одежды. Макета на это нет, можно сделать на свой вкус.

Ниже описание товара (скриншот 8). Справа видео (не YouTube). Слева табы (описание, комментарии и вопросы/ответы). Дизайн есть только для первого таба, остальные можно на свой вкус сделать.

Скриншот 9 - корзина. Обратите внимание, если добавляете в корзину товар несколько раз, то в корзине он не должен добавляться несколько раз, а должно суммироваться количество. При каждом изменении количества должна пересчитываться сумма заказа.

Скриншот 10 - информация об адресах доставки (страница My Info в личном кабинете). Можно изменить или добавить новый адрес на странице Add Adress. Так же можно выбрать адрес по умолчанию.

Помимо этих страниц есть 404, информация о заказах и т.п. Там все понятно по макетам и описывать особо нечего.

Уверен, у вас все получится! А если сделаете реально рабочий магазин - вы огромный молодец!

Удачной разработки!