ManDan - Second Mile Stone Project

PROJECT PURPOSE

This website present a work done for Second milestone project , It's a webshop website which show my skills in HTML,CSS,JS,Bootstrap and knowknowledge in API.

Website Requirement

User Stories

• website should be able to convay it's usability in a way that it don't leave user confused

• User want to know about company
• User want to know about offerings
• User want to signup for Newsletter
• User want to know wether signup done or not.
• User want to order product.

UX

• Website shall contain 1 page which have 3 section Product, Signup, shoping cart

Header: Fix Navigation Bar shows different link for navigate in website.

• Logo: Logo or Home button anywhere on page click on logo and you are on page bigningbinging hoping cart: show shoping cart and product in basket

• Footer: Social media Links And version information. Wireframe

Current Features

• when user load website browser alert it that it is about to see underdevlopment website.
• user can subscribr for the newsletter and once it subscribe he/she will recive auto mail which say thanks for subscribing as well on website also it say thank you once it's subscribed.
• user can send a recomandation for furthere devlopment of the website and products.

Planning to implement following Features

• Add to cart function which will complete the cart function complete.
• payment & Checkout page using Stripe.

Technologies Used:

• Project Made Using following tech.

1. Bootstrap v 4.3.1

• Bootstrap is used for following component.

• Grid Layout
• Navbar
• Card Columns
• Form

2. Font Awesome v 5.11.2

• https://fontawesome.com/icons font awesome used for Social Media & basket Icons

• Facebook
• You tub
• Twitter
• cart Icon

3. mailchimp

• https://mailchimp.com/

4. Google Font

• https://fonts.google.com/specimen/McLaren font-family: 'Krona One', sans-serif

5. Project Developed in GIT POD Environment.

6. Logo Maker

• https://logomakr.com/

7. Favicon Generator

• https://www.favicon-generator.org/

Testing

Manual Testing

• Chrome DevTools

  1. iphone X
  2. Pixal-2
  3. IPad

• Published website.

  1. iphone-X
  2. Nokia 6.2
  3. Lenovo ideapad

• browser

  1. Chrome
  2. Firefox
  3. Edge
  4. Safari

• Function Testing

  1. alert: when website load it should show alert on the page when user click "ok" then it load furthere. every time page load this alert box will show up.
  2. Fix Navbar: user will scroll down or up nawbar should be on fix postition.
  3. Product link: by clicking on product link user should be reach product section.
  4. Cart: by clicking on cart cart box will appears which shows cart information.
  5. Add to cart button: when user hover on product image add to cart button will appears.( user should get alert when button is pressed)
  6. Newsletter: when user subscribe for the newsletter it will shous the success message and wellcome mail in inbox from mailchimp.

• all test produce good result and website work perfactly fine in all space.

Deployment

1. In terminal window use (git add.) command to add files to the directory
2. Use ( git commit -m “ text” ) and commit the changes and updates
3. Then to deployment (git Push) Command to push the files to the GitHub pages.

All version are in master branch.

Steps To GitHub Pages Deployment

1. Navigated to my Project-two repository
2. Selected " Settings"
3. go to gitub pages
4. seleced Mater branch

Steps to Clone.

1. Navigate to Project-Two repository
2. click on green click button.
3. copy the url under clone with HTTPs using clipbord icone.
4. open git bash
5. change current directory.
6. type git clone and paste the url you copied earlier and press enter

Credits

Media

• All Images are used from Adobe Stock free license version.

Content

• for web contant inspiration took from manscrat website

Acknowledgement

• Acknowledgment to following in this project

1. Rahul Patil
2. https://www.w3schools.com/
3. Slack Community
4. coding addict youtube channel (shoping cart function)
5. Telmo sampaio youtube channel