A simple E-commerce product page. I built this page with tailwindcss html and Javascript.

I wanted to see how the cart functionality works in ecommerce sites, that's why i decided to build.

I plan on building an ecommerce site soon, So i figured this would be good practice.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Open a lightbox gallery by clicking on the large product image
• Switch the large product image by clicking on the small thumbnail images
• Add items to the cart
• View the cart and remove items from it

• Live Site URL: Live Site

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• tailwind css - css framework

I learnt how the cart functionality works in modern ecommerce sites.

I learnt how to implement a light box using vanilla javascript

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  color: papayawhip;
}

const proudOfThisFunc = () => {
  console.log('🎉')
}

With what i have learnt i plan on creating an ecommerce site with next js

• Github - Nathan_Somto
• Twitter- Nathan_Somto