Привет всем, в этом блоге я расскажу о своем первом совместном проекте, который я вместе с членами моей команды построил во время недели конструирования в школе Масаи.
Мы команда из четырех человек, и вместе мы клонировали веб-сайт под названием Dermstore. Это сайт, на котором можно приобрести средства по уходу за кожей.
Поскольку это была наша первая строительная неделя и наш первый проект, мы все очень старались и выложились на сто процентов.
В этом проекте мы использовали все, чему научились до блока 2.
Позвольте мне теперь дать вам немного больше информации о веб-сайте, который мы создали:- Dermstore — это сайт электронной коммерции по уходу за кожей и косметикой в США. С декабря 2020 года это дочерняя компания The Hut Group, британской компании электронной коммерции. В ней есть средства по уходу за кожей как для мужчин, так и для женщин.
Мы изо всех сил старались воспроизвести этот веб-сайт и создали как можно больше функций.
Используемые технологические стеки:-
- HTML
2. CSS
3. Джаваскрипт
Небольшой обзор и скриншоты нашего веб-сайта :-
- Главная страница:
- Это главная страница нашего сайта. Всякий раз, когда пользователь нажимает любую из опций в навигационной части, он будет перенаправлен на соответствующую страницу.
- Он также имеет функцию добавления в корзину, а также для горизонтальной прокрутки продуктов, левая и правая кнопки полностью функциональны.
- Это полностью адаптивная страница.
- Вот несколько скриншотов некоторых разделов главной страницы.
2.Страница аккаунта:
- После нажатия на опцию учетной записи на панели навигации откроется эта страница.
- Теперь, если вы являетесь существующим клиентом, вы можете напрямую войти в систему из своей существующей учетной записи.
- Если вы новый клиент, вам нужно нажать «Продолжить», а затем зарегистрироваться.
3. Страница регистрации:
- Здесь вам нужно заполнить свои данные, чтобы зарегистрироваться, или вы также можете использовать свою учетную запись Google или Facebook.
4. Страница продуктов:
- На панели навигации много страниц, но из-за нехватки времени мы создали только три страницы: страницу «Бестселлеры», страницу «BeautyFIX» и страницу «Распродажа».
- Вот скриншоты всех страниц.
- Страница бестселлеров: –
- Страница BeautyFIX :-
- Страница продажи: –
- Как на странице бестселлеров, так и на странице распродажи у вас есть возможность сортировать товары, а также добавлять товары в корзину.
5. Страница сведений о продукте:
- Всякий раз, когда вы щелкаете любое изображение на странице продажи или странице бестселлеров, появляется эта страница, на которой вы найдете все подробности о продукте.
6. Страница корзины:
- После добавления любого товара в корзину, вы можете увидеть его здесь, на странице корзины.
- Возможность посетить эту страницу корзины присутствует на панели навигации.
- Здесь будут видны все ваши товары, их количество, цена и итоговая сумма.
7. Страница оформления заказа:
- После того, как вы нажмете кнопку безопасного оформления заказа, которая присутствует на странице корзины, вы будете перенаправлены на эту страницу.
- Здесь вам нужно распечатать все платежные реквизиты.
8. Заказ успешно размещен:
- После добавления всех ваших платежных реквизитов и нажатия кнопки «Отправить мой заказ» вы получите уведомление «Заказ успешно размещен».
Это было все о веб-сайте, который мы создали. Позвольте мне сейчас назвать вам имена членов моей группы.
Члены команды:-
- Анкит Сах
- Кратика Сонгара
- Маниш Сингх Чоухан
- Уткарш Кешари
Мы все хотим сказать, что этот проект научил нас многому: как работать в команде, как делегировать работу между членами команды, как поддерживать друг друга, если у кого-то возникают какие-то проблемы, тайм-менеджмент и многому другому. что делает групповой проект успешным.
