In this tutorial video, you will learn how to create ecommerce website built in HTML, CSS and Javascript step by step. This ecommerce website has multiple pages:
1. Home Page
2. Product Page
3. Trending Product Offer Page
4. Category Page
5. Cart Page
6. Checkout Page
This ecommerce video tutorial completely from scratch.
Images asset in this tutorial can be downloaded here:
➤
Watch full video, follow this links below:
Part#01:
Part#02:
Features for this ecommerce website tutorial:
– responsive menu
– mega menu
– all departments menu
– bottom menu bar
– slider
– trending products
– sold/available stock product percentage bar
– overlay and fixed cart
Timestamps:
00:00 – Intro
05:18 – Project Setup
05:39 – CSS Reset
06:39 – Header
20:57 – Mega Menu
31:07 – All Departments Menu
46:25 – Responsive / Mobile Menu
58:30 – Responsive Menu Javascript
01:03:45 – Slider
01:10:30 – Brands
01:12:10 – Trending Products
01:33:30 – Featured Products
01:41:09 – Banners
01:45:17 – Product Categories
01:48:47 – Footer – Newsletter
01:51:40 – Footer – Widgets
01:56:37 – Bottom Navigation Menu
⭐ Get in touch
You have a custom design project? Want to re-design or new website design?
contact us at: dotwebdesigner@gmail.com
⭐ If you would like to buy me a coffee, well thank you very much that is mega huge! :
❤️ Support us :
#ecommercewebsite
Slow Down by LiQWYD
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream:
Music promoted by Audio Library
Song: Erik Lund – Summertime (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link:
Song: MBB – Feel Good (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link:
Song: Ikson – Blue Sky (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link:
Song: MBB – Beach (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link:
Song: Pierse – Dreams
Music provided by Vlog No Copyright Music.
Creative Commons – Attribution-ShareAlike 3.0 Unported
Video Link:
Sorry for intercut clip:
CSS line 37 to 42 code should be:
*{
margin:0;
padding:0;
}
It seems that I have found what I am looking for. Can I communicate with you, brother, and on which platform do you prefer?
If I pay for 3 coffees, does that mean I will have access to the website codes and images? or I'll just pay for coffees without receiving anything in return
and what does it mean to 'buy a coffee?
please, this source code free or not ?
Hey DotWebdesign Dear I got stuck in 30 Line in javascript. Where submenu.forEach((item) => item != this ? item.closest('.has-child').classList.remove('expand'):null) and then you are showing half screen of code kindly tell me what should I write next.
Please I have tried connecting the swippers stysheet and js to my work and copied the neccessary js codes but still its not showing any effect, can you help me out??
Thank you very much once again, I hope to follow all of your Videos 🥰
Thank you very much, finaaly i completed the 1st part…
Hello can please tell me how i can get in touch with you
.dpt-menu .has-child:nth-child(1) > ul {
When I insert any of the pic in child() it's displays but later you deleted it and you wrote
. dpt-menu .mega {
So when I put my cursor on beauty or any of the other 2 the image does not change.
.dpt-menu .has-child:hover ul{
display block:
}
This doesn't work
I'm stucked there and I help .
do you guys have background repeat y < in you css?
Good joob but:
This is careless, you should have provided the source code
css line after container…then what?
Hello, you can share this code on git for me. Please! (Tks sir, for this video)
swiper slider not working on my system how to correct it, kindly reply
Amazing work sir. Please I tried the image slider but it doesn’t work for me, same with the blur..it doesn’t and I don’t know why…but all codes are correct.
Please any suggestion?
what happened at 45:40 there is a quick switch and now ,i am confused and couldn't see the linear gradient as well. price write the code from line 871 to 898 ..I am just So confused!!!
I hate to break it to you, but some parts of your code don't work man. I checked many times, but it still has the same faulty result!
thank you for help
Slider is not working….i have checked the code 10 times….
Nice video, but real application should have login and sign up… And also u should have added a payment method
Good website ( i need this source code can i get it….)
Nice Bro 2023:-)
gg
Hi sir, I want a css file I'll buy it from you
i can not under stand fast css code i think sone thing csn be display
no voice means waste of time
Pura bejar bataye ho
your CSS video went faster, can I get the code, please?
Plz Share the code of line 36-38 of style.css
Do you have source code for learn
my showmenu on mobile i have a problem, I follow you in everything But the result is different.
Do these filters work really that you showed us 5:16 ? Because you just click filters but there is no apply button and we don't see your clicks changes the content depend on those filters ? Secondly, you created login button but I cannot see login functionality in your project ? Do I miss something ?
When I am writing
Overflow: hidden; at 58:11 timestamp(line no 561) then everything goes off and getting blank screen.
If I remove that line then everything is showing but its get overlapped with each other. Please do reply @anyone.
You'll need a database to store and manage product data, user information, and order details. Popular choices for databases include MySQL, PostgreSQL, or MongoDB. You'll also need to write database queries to retrieve and update data as needed.
Source Code….?
Hey men, When you tipe .wrapper it seems like you give margin or padding in .wrapper class
I got a question, Do you give a margin for .wrapper ?