How To Make A Responsive E-Commerce Website Design Using HTML CSS And JAVASCRIPT From Scratch



how to make a complete responsive ecommerce website design using html css and vanilla javascript from scratch.
create a complete responsive nike shoes ecommerce website design using html css and javascript step by step.
create an online store nike shoes website design for front end

the main feature of this website are:
✔ responsive header / navbar with toggle menu bar effect.
✔ responsive home section with animated slider effect using pure vanilla javascript.
✔ responsive service section using flexbox.
✔ responsive product card section with hover effect using flexbox.
✔ responsive featured products card section using flexbox and javascript.
✔ responsive review box section using flexbox.
✔ responsive newsletter section.
✔ responsive footer section using flexbox.

* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

font awesome cdn link:

google fonts:

New To My Channel Subscribe Now And See More Stuff Like This:

timestamps:
0:00 demo
5:22 file structure
6:21 header section
13:37 home section
24:37 service icons section
26:41 product section
33:52 featured products section
41:34 review section
44:18 newsletter section
46:53 footer section
50:18 final demo

#FrontEnd
#ECommerce
#WebsiteDesign

38 comments

  1. latest product section me – jo iamge icons hain wo product iamage ke peeche aa rahe hain jabki wo image ke ooper hone chahiye–

    .products .box-container .box .icons{

    display: flex;

    flex-flow: column;

    position: absolute;

    top: .5rem;

    left: 1rem;

    }

    I used this

  2. Peace be upon you, my brother Shaikh Anas, Allah bless you for all your efforts in this field. I wish you well. I want to ask you where the source of the photos you explained in this video. Thanks.

  3. Great tutorial. However, I am getting an uncaught TypeError: Cannot read properties of undefined (reading 'classList) for my slider click functions on the homepage. I cannot figure out what is going on there. Would appreciate any help. Thanks.

  4. thankx man really appreciate that you uploaded picx that really will help alot sersiouly your videos are alot more helpful than others but please which ever video you do make sure upload pics with them.

  5. Hi Mr thanks for your tutorials
    This morning I subscribered your channel it is good for front-end purpose
    But I have a suggestion for you would you mind put some tutorial about kid's website which is designed for education because I am close to finish my bachelor degree I am writing a Monograph by the title of GUI usability for kids in the field of website i am ok with technologies like {Html Css and Javascript}
    I visited many websites there are two websites which attracted my attention
    They are (National geographic kids,FunBrain) these two very good
    Pleasee if you can do this for me a i am appreciate you

    Thanks

  6. Assalamualikum! I'm watching your
    video first time ,you are such a fantastic web developer and this video is gonna be my favourite one which inspired me a lot.

Leave a comment

Your email address will not be published.