How To Make Ecommerce Website Using HTML And CSS Step By Step | Create e-Commerce Website

LEARN HOW TO MAKE COMPLETE RESPONSIVE ECOMMERCE WEBSITE USING HTML AND CSS STEP BY STEP TUTORIAL, E-COMMERCE WEB DESIGN IN HTML AND CSS

❤️ SUBSCRIBE: https://goo.gl/tTFmPb

Part 2: https://youtu.be/ZbnvP_hmxfE

Here in this video you will learn to build an eCommerce website step by step using HTML and CSS. In this e-commerce website design we will create Home page of eCommerce website with banner section, some featured categories images, then some featured products with product price, image and rating.

Then there will be more latest products, and one offer section with exclusive product. After that there will be testimonials and top brands section. At the bottom of website we will make footer with 4 columns.

After that we will make the drop down menu for mobile scree and we will make this complete website design responsive from mobile devices.

In next part we will make all products page, single product page, shopping cart page, login and registration page for this Ecommerce Website

Download All Images: https://drive.google.com/file/d/1GlfF1Gmd1o_pJgm-xKzyv3V4s3QnrVUC/view?usp=sharing


Recommended Videos:

HTML and CSS Full Course For Beginners
https://www.youtube.com/watch?v=GAZVvpjxYQY

Brackets editor shortcut key for fast coding
https://www.youtube.com/watch?v=88Xb1fhst2I

Top 5 Full Website Design Tutorial using HTML & CSS
https://www.youtube.com/watch?v=d5zBkC7peTY


❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 https://easytutorialspro.com/go/course/


My recommended tools and tutorials
👉 https://easytutorialspro.com/


◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join


Time Stamp:

00:00 Website overview
06:40 HTML and CSS File Setup
09:14 Create Header of Website
23:20 Add google fonts on website
27:42 Make Features categories section
31:37 Add Featured products on website
42:35 Design Recent products on site
44:07 Add offer section on web design
49:18 Design testimonial section for website
57:14 Create brands widget for online store
01:00:38 Create footer of eCommerce site
01:11:15 Make the website responsive


Image credit:
Banner image created by freepik
https://www.freepik.com/

Products image is used from Myntra.com

Like – Follow & Subscribe us:

◼️ YouTube: https://goo.gl/tTFmPb
◼️ Facebook: https://goo.gl/qv7tEQ
◼️ Twitter: https://twitter.com/ItsAvinashKr

source

This Post Has 43 Comments

  1. DhruvSharmaYT

    i am 8 years old and i have build a full website similar to this

  2. Husnain Syed

    what is the error in this script of toggle menu
    <script>

    var MenuItems = document.getElementbyid("MenuItems");

    MenuItems.style.maxHeight = "0px";

    function menutoggle(){

    if(MenuItems.style.maxHeight == "0px")

    {

    MenuItems.style.maxHeight = "200px";

    }

    else

    {

    MenuItems.style.maxHeight = "0px";

    }

    }

    </script>

  3. Hammed Rasheed

    Intah took the words right out of my mouth

    Easy Tutorials thanks alot man

  4. Husnain Syed

    That was great, i created website same as it in this part,
    but i have issue i am unable to setup the manu-icon

  5. Bijoy Bishwas

    Thank you. Yor are a genius. You are my best youtube web development teacher. I like you so much.

  6. Saibabu Pilli

    I wrote program for logo but don't show on webpage

  7. Saibabu Pilli

    How you get shortcuts in bracket i tried like but I can't did like you

  8. Ayrton Lagos

    quick question, after finalizing all of the tutorials about this topic. Will it be usable for actually selling and starting an eCommerce store?

  9. thanku so much for making such vedios and it really help me understanding things and will help freasher like me , itnaa achha to meri online tutor bhi nhi sikhati. thanku so much , keep maiking such more vedios

  10. Vector V

    Hi everyone I would like to ask for some advice from this community of web developers about the problem that I am facing right now as I am personally not an IT person. I hired a web developer to develop an e-commerce website for me. Yesterday I came to know that the PHP version that was used to creat the website was very old, it’s PHP 5.6. A friend of mine who a understand a thing or two about the web development, said that this web developer had you, in an ugly way thoroughly. What he meant is that the version is to old. And it’s practically useless. He said it’s impossible to upgrade it or do anything about it. He said the web developer sold me a useless website. If it’s not a problem for you guys, could you please enlighten me as how bad is my situation here, and if my friend is right. Because, though my friend understanding something about web developing but he is not a professional.

  11. Ariel B

    when i insert my images for the "add featured products" section and make my .col-4 img width 100% my image is massive and not small like yours. Any idea what to do differently ?

  12. Coder Kid

    My featured products come in a column at the bottom of the homepage instead of a row. How do I fix this?

  13. Ankit Kumar

    how whole line comes automatically, like you type .header and then it becomes <div class="header"></div>, what's that trick, pls tell me

  14. Peterjj

    Thank You So Much these video was helpful

  15. Attila

    Fantastic, thank you very much. I love work only with html css and javascript

  16. Riya Arora

    apne knsa software use kiya h website bnane ke liye visual basics or other please name it.

  17. Mixes from Heaven

    hi mate i copy and paasted the links but the stars are not apearing please help

  18. samir

    Really helpful thank you

  19. Aarav Mahto

    When I am adding the offer section, my background color does not extend all the way from edge to edge of my screen, does anybody know why? I have copied all of the code exactly like the video but it just doesn't work. Any help would be great

  20. ILIYAS

    How to connect with back end SQL database

  21. Ankit Kumar

    Sir that star rating you brought to run that command we should download any extension

  22. Ankit Kumar

    Sir i am having problem to brin rating star… Can you pls help me.. And pls tell me what extension should I download for my vs code

  23. Cyber Red Fox

    Great tutorial, little bit stuck on the response menu, looks that's not working fine. :(, the responsive menu button is not clickable. Did played the video like 10x now, can't find the problem.

  24. Team X Titan

    i dont who is this guy…but you can be a best teacher for every beggainer lavel student :)…and you know what anyone can be teacher but beggainer lavel teachers are KING 🙂

  25. iconic

    Any generous members wanna share the source code, m

  26. iconic

    Damn when he did the overview I was sure some javaacript was involved

  27. Shubham Choudhary

    Please make tutorial for how to working cart items add and payment gateway, host we want full tutorial sir

Leave a Reply