КАК МЫ СОЗДАЕМ ЛОГИЧЕСКИЕ ЧАСТИ СТРАНИЦЫ КЛОНИРОВАНИЯ?

Всем привет, возможно, вы посещали, читали или слышали о SkinStore, веб-сайте, где мы можем купить все виды средств по уходу за кожей и макияжу. Это веб-сайт, на котором вы можете купить множество средств по уходу за кожей, косметических средств, которые улучшат вашу кожу. Товар, доступный на этом сайте, предназначен не только для девушек, но и для мужчин.

Это оригинальный веб-сайт: https://www.skinstore.com/

Двигаясь дальше, мы являемся учениками школы масаи, которые разработали веб-сайт-клон SkinStore.com. Этот блог посвящен тому, что мы использовали? , как мы это сделали? , с какими проблемами мы столкнулись? и как мы преодолеваем эти трудности?

ТЕХНОЛОГИИ, ИСПОЛЬЗУЕМЫЕ МЫ:

  • HTML
  • CSS
  • JAVASCRIPT
  • ЗАГРУЗКА
  • База данных — без SQL (MongoDB)
  • Экспресс-платформа
  • JS-узел

Когда мы начали изучать полнофункциональную веб-разработку в школе масаи, все, что мы узнали об этих языках до сих пор, мы использовали. Но я надеюсь, что вы действительно оцените точность и совершенство, которых мы достигли. Чтобы узнать, как мы это сделали, пожалуйста, продолжайте читать.

КАК МЫ ЭТО СДЕЛАЛИ?

Прежде чем ответить на большой вопрос «как мы это сделали? », позвольте мне показать вам несколько фрагментов нашего веб-сайта.

Домашняя страница

Страница регистрации

Страница продукта

Страница корзины

Страница оплаты

Back-end Платежная страница платежной системы Paytm

Страница успеха

Фрагменты, прикрепленные выше, являются частью того, что мы сделали, чтобы вы могли сравнить их с реальным веб-сайтом.

Теперь, отвечая на большой вопрос о том, как мы это сделали, я хотел бы сказать, что это благодаря усилиям, которые приложил каждый. Я и мои замечательные товарищи по команде смогли достичь нашей цели. Как часть школы масаи, мы всегда считали, что общение и навыки важнее, чем знания, поэтому именно благодаря эффективному общению и явному желанию понять сложные вещи и сделать их простыми для понимания мы смогли создать страницу со сравнительно меньшими затратами. Ресурсы.

В качестве помощи мы использовали следующие ресурсы:

https://developer.mozilla.org/en-US/

https://getcssscan.com/css-box-shadow-exampleshttps://www.flaticon.com/

https://getbootstrap.com/

https://extract.pics/



https://stackoverflow.com/

ПРОБЛЕМЫ, С КОТОРЫМИ МЫ СТОЛКНУЛИСЬ, И КАК МЫ ИХ РЕШИЛИ

При разработке клона мы столкнулись с рядом проблем. Проблемы, которые мы можем вспомнить, следующие:

Внутренний код и экспресс-пакеты были для нас довольно новыми, поэтому получение данных внутреннего кода и устранение ошибок стало проблемой. Иногда мы работали до 2 часов ночи только для того, чтобы отладить ошибку и потом доработать окончательный вариант.

Нам пришлось научиться делать анимацию и карусели, так как несколько разделов некоторых страниц требовали от нас создания карточек изображений, движущейся панели навигации и страницы корзины.

мы научились использовать аутентификацию и валидацию при входе в систему и т. д. Здесь чтение документации и просмотр фрагментов пригодятся для решения таких проблем.

Мы столкнулись с множеством проблем, пытаясь получить одинаковую компоновку на экранах разного размера. Кроме того, мы столкнулись с множеством проблем при развертывании внутреннего кода и подключении к внешнему коду.

ЗАКЛЮЧИТЕЛЬНОЕ ПРИМЕЧАНИЕ И ВЫВОДЫ

Как упоминалось ранее, мы смогли достичь требуемого макета благодаря тому, что поддерживали связь. Цепочка команд, которой мы следуем, и уровень понимания темы, который у нас был. Я горжусь тем, что работаю с такими замечательными людьми и представляю команду в оценке. Этот проект был бы невозможен без вклада всех членов группы с их идентификатором среды: -

Баджадж вайшнави: - вайшнави баджадж

Риши Ананд:- Риши Ананд

Кишан Праджапати: - Кишан Праджапати

Абхинандан Кумар: - Абхинандан Шаан

Маной Кумар:- Маной Кумар

Шоаиб Ахмед: -https://shoaibg2019.blogspot.com/

Ссылка проекта на GitHub:-

Внутренняя ссылка:- https://github.com/shoaib-ahmed16/ProjectSkinStore.git

Внешняя ссылка: -https://github.com/shoaib-ahmed16/SkinStore-front_end

Ссылки на развертывание проекта:-

Внешняя ссылка: -https://guileless-custard-2b667a.netlify.app/

Внутренняя ссылка: 1.https://projectskinstore.herokuapp.com/

2. Ссылка на Aws: ec2–54–187–239–168.us-west-2.compute.amazonaws.com

СПАСИБО