How To Make Ecommerce Website Using HTML And CSS Step By Step | Create e-Commerce Website
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- LEARN HOW TO MAKE COMPLETE RESPONSIVE ECOMMERCE WEBSITE USING HTML AND CSS STEP BY STEP TUTORIAL, E-COMMERCE WEB DESIGN IN HTML AND CSS
❤️ Source Code: greatstack.dev/go/redstore
Part 2: • How To Make eCommerce ...
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: greatstack.dev/assets/e-comme...
#HTMLAndCSS
-------------------------------------
Recommended Videos:
HTML and CSS Full Course For Beginners
► • Complete HTML & CSS Co...
Brackets editor shortcut key for fast coding
► • Best Code Editor And K...
Top 5 Full Website Design Tutorial using HTML & CSS
► • Top 5 Complete Website...
---------------------------------
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
My recommended tools and tutorials
👉 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:
► / @greatstackdev
-------------------------------------
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
www.freepik.com/
Products image is used from Myntra.com
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
👉 Get All Pages Code: greatstack.dev/go/redstore
Bro thats cheating, on your site you asking money for the source code and here teaching for free?
Yes and cost is 199
Can we use use database in this website
bro thats really smart to put a price on the source code, if u r here to learn, u have to code it yourself for free, not just copy paste.
@@masoodali8517 ur paying him in both ways: by watching... u pay this person via youtube, and on the website....
This guy understands his craft and possibilities to max. .... He is literally showing what is possible with humble HTML and CSS. Keep leading.. Keep marching...many followers to come your way
I've never enjoyed 1 hour tutorials while learning something. With this tutorial I have learnt many things and it is "STRAIGH TO THE POINT". I'm currently a student software engineer and plan to use my programming skills and knowledge to work as a web developer part time after I have learnt the fundamentals solidly. Can't thank you enough !!
no one asked you who you are
@@adizurange5779 stfu why do you have to be rude for no reasons?
@@kelyanzzzz2616 shut up and sing begger i might give you 1 rupee
@@kelyanzzzz2616 why not read and pass? Why the animosity?
@@infohub3709 maybe he's a failure
You wrote all the codes while showing the building of the webpage. It was like we were watching a building being build. Awesome. I have no knowledge of coding but amazed to se the actual process
It was my first video that I watched while learning HTML and CSS for the first time and the way you taught was superb, Even though as a hindi and english speaker, We prefer to start consuming content in our native language but still you rocked it in english. thank you so much for creating amazing content.
I'm amazed, finally a teaching that is not dummied down, a master template building from scratch of endless-possibilities, very refreshing. Thank you.
Thank you sir I have learned so much from your tutorials I really do appreciate what you do for all of us who wants to learn coding... your instructions are very easy to follow.. the greatest signs of a great teacher... I would love to finish this complete website site ... I’ve subscribed to your channel... and would be looking forward to part 2 if you’re planning on making it available.... once again thank you very much.
Really this video is an awesome tutorial for beginners.....even if anyone is new to these concepts, this guy has explained so well that a novice can also understand quickly.....😃
This is actually more than just HTML and CSS, I love it! Great refresher
Ever since I started following this guy, I have learnt a lot in terms of UIs. Keep it up.
coding is fun if we get to know the basic things regarding html, css, bootstrap ,just to mention some. i like the tutorial in this video, cant wait for the second part!!!!
I came here to learn how to setup an e-commerce site and ended up learning so much more. Thank you for this video. You are Awesome!!!
Really fantastic tutorials - learning html and css through an online course and will most definitely keep watching your youtube channel. You make it look so simple and easy....lol..but we all know it takes a longtime to really understand how it all comes together. I especially struggle with flex and how to use it properly.
Watched the whole only because, its complete HTML and CSS, and not bootstrap. Got a lot to learn. Thank You.
I am also same
same here bro
Exact reason why am also going to watch till the end
Actually it's good..you did well...bootstrap is good when your main focus is not to learn CSS...but if you wanna learn CSS and HTML for web design, then definitely bootstrap is the not a good idea...
if your goal is to just focus in the designing part then i suggest you learn bootstrap, it would really lessen the complicated code you have to write in css to do certain things where in bootstrap you just have to write few classes and it would do the work itself.
I'm a web developer myself, and I really admired your tutorial.
Huge help to beginners, lots of important information, tips and tricks. Highly recommended!
Love and support from Egypt.
Hey please help me I am not able to resize image ( video part at 30:09)
@@raghavbhatia1357 Must be a spelling mistake, recheck your code
Hey help me i am not able to give featured products in straight line(right to left ) (video part-37.47)
@@rohinichavan3455 pls give me code
@Saif Code hey will u make a synopsis of this website?
Man, I must say you are an amazing tutor. These are very easy to understand, I learned a few things from it. Thanks man. Great job.
Sir, you are not a great teacher. You're a FANTASTIC teacher!!!
You make confusing become clear and difficult ...EASY!
This is a master piece man, thank you very much :D
This is going to be my template project to use to test my JS skills...
This was a great tutorial. He explains the things that needs to be explained and allows for independent research. I used this program architecture to submit as a bootcamp project. This dude is a goat
Cleanest code ever!
I struggled a lot to understand how I could learn CSS in terms of containers. I'm just grateful to have found this video. Just enjoyed watching and recreating the website. Got each and every concept cleared.
Glad it was helpful
Great project walkthrough, I appreciate the time spent on displaying/showing us every CSS declaration with the html, it really makes learning/remembering each parameter and the values a lot easier. I'm adding this project to my portfolio.
Glad you enjoyed it!
@@GreatStackDev Sir please make another tutorial that shows how to make actual transactions.
@@GreatStackDev Hello sir,
Kindly help. I will pay you 500/- for clearing my doubt I am unable to "Make the website Responsive".
Kindly help me🙏🙏🙏
MAY GOD BLESS YOU
13:10
Home,Product,About text right side pe nahi ja rha
@@GreatStackDev The flex-basis: 100%; in last is not working for me please help.
I’ve watched this video many times and learning a lot! I’m want to create a clothing website but it’s very expensive for someone to help create one and I’m not confident enough to do it myself. It’s crazy
You're really amazing and talented. You opened horizons for me in web dev. I learned a lot from you. Keep creating good videos. 👍
Loving the wisdom, keep them coming!
Awesome video so far. A great refresher and beginners could likely easily follow.
Thankfully I found this awesome tutorial for my final project of a database class, which our teacher didn't even teach that much for creating a website. I gotta say that I learned a lot from your video! Appreciate~
Have downloaded this video since last year but watching it now makes me understand clearly some codes have been battling with year back. I really appreciate your simple method of teaching. Have learnt a lot from your clip, i will be looking forward for the part 2 clip.thanks sir
i can.t just cry rn.. just what i needed atm!! whoever is the face and voice behind this channel, my heartfelt gratitude goes out to you! i'm grateful!
YOU TEACHING THE PERFECT, THANKS A LOT
No. He is teaching you to color.
@@whipstitchwebwork1383 well for people that don't know much about coding it is not him teaching us to color
@sportfrenzッ shut up😘
13:10
Home,Product,About text right side pe nahi ja rha
I want to say
Only
Thanku so much ,we require people like you on internet
Easy Tutorial you're among the best tutors on HTML & CSS. I really do appreciate your video. It has improved my codings.
os teus vídeos são os melhores🔥
Thanks for this, you're the best
Thanks a lot man, appreciate this work 🔥🔥
MAN!!!! you are hero
keep doing tutorials, you're doing incredible
Man you rock, thank you so much. If you were to teach an online class I would definitely take it. I took classes years ago and it was so hard to understand and you explaining with the visuals, sometimes that is all some people need to learn. Thanks again look forward to more tutorials.
Thanks tammy landis, Glad you like this eCommerce website design tutorial. Sure Will be making more tutorials like this.
@@GreatStackDev Hey help me i am not able to give featured products in straight line(right to left ) (video part-37.47)
@@GreatStackDev Hello sir,
Kindly help. I will pay you 500/- for clearing my doubt I am unable to "Make the website Responsive".
Kindly help me🙏🙏🙏
MAY GOD BLESS YOU
@@GreatStackDev pls how did u link ur JAVASCRIPT cause u didn't show
It
@@GreatStackDevwhere is the backend part
I watched your whole vedio nd implemented it . It was very easy to understand . Folks those who are giving negative comments are oversmart ass .. atlest he is taking some efforts to teach others. Thanks Man you are doing a great job keep posting new vedios
Hey are you the member of this channel.
Where i can find all these images
13:10
Home,Product,About text right side pe nahi ja rha
Thank you so much. I've been so confused with my project for our programming lesson but this really helped me a lot! You deserve the world!
hey bro can u plese help how to make the 2nd file im confused
WOW! I love this. This is just perfect.
I want to say thank you so much sir for such great video tutorials. I have learnt full website development from your tutorials only. I have started watching your video tutorials since Jan 2020 and today, I can develop full website easily. Thank you so much again.
Payment part
TEACHING THE PERFECT, THANKS A LOT
wao, I first saw your video "World Largest University" then I watched this video and I found that you have optimized your code a lot since this one. Thank you for not only walking us through step bt step but also showing us your progress.
Yes!
13:10
Home,Product,About text right side pe nahi ja rha
Me and 2 my friends Got top grades on an exam because of this Video. Thank you very much. Would recommend to everyone
seus vídeos são ótimos, parabéns!
Thank you so much! you're helping me a lot with my school. again, Thank you!
Great Tutorial, and very well explained!
This is literally the best video I have ever seen plus the accent makes it even better 🔥
Please brief on Bracket Software Use, Shortcut keys use and other ideas as well. Your teaching is perfect. I liked it very much.
Good idea! When it comes to writing code, the most important I've found are:
Ctrl+X Delete/Cut line/selection
Ctrl+D Duplicate line/selection
Ctrl+C Copy line/selection
Ctrl+V Paste line/selection
Ctrl+/ Single line comment
Ctrl+Shift+/ Block comment
Ctrl+Enter Add a new line after the current line
Ctrl+Shift+Enter Add a new line before the current line
And the Emmet plugin is a lifesaver! Look it up and it'll save you a boatload of time writing HTML and CSS.
This helped me a lot, Thank you so much.
This human being must be protected at any cost ❤️❤️❤️❤️
Such an amazing tutorial. Honestly no one can beat the indian genius yt tutorials. Love these guys so much
THIS IS CALLED REAL CONTENT🔥🔥🔥🔥
Thanks Deepak, This is called real TH-cam family who comments on video. Thank you so much!!!
@@GreatStackDev Hey help me i am not able to give featured products in straight line(right to left ) (video part-37.47)
13:10
Home,Product,About text right side pe nahi ja rha
Thank you very much! I realise how powerful display flex are, I don't even have to use more @media queries thanks for this tut man!
You're very welcome!
Hi bro!
13:10
Home,Product,About text right side pe nahi ja rha
Excelente trabajo, lo estoy usando para mis estudios de JavaScript en Coderhouse, era justo lo que necesitaba, muy buen diseño. Y gracias por compartir el armado, para ir viendo y entendiendo que se esta agregando
I was looking for something like this from so long. Thank you.
Glad I could help!
13:10
Home,Product,About text right side pe nahi ja rha
Thanks for giving us part 2 and 3 of the lectures. So how can we allow payments to be carried on our ecommerce website? using those electronic payment cards, bank accounts etc
Your teaching has really improved my skills of learning. Thanks a lot and keep it up
how do you remember all the stuff
13:10
Home,Product,About text right side pe nahi ja rha
Best tutorial I have ever watched on TH-cam. Kudos to you for your understanding and hardwork. I came here for the first time and subscribed your channel now.
Amazing work. Easy simple concise straightforward tutorials. I feel like i can design any website now wowww. Great work
Muito bom o vídeo, mesmo sendo em inglês deu pra entender bastante, aprendi muitos macetes que não sabia, terminei a parte 1 agora e partiu para parte 2
Opa cara blz, se tem o codigo todo, para me mandar??
Muy bien...
alguem tem o codigo inteiro pra mandar ?
13:10
Home,Product,About text right side pe nahi ja rha
Being a newbie, this was really helpful. Thanks for the video
I'm learning so much with you my friend, thank you very Much.. I just made my own website, I will be publishing it soon! Greetings from Nicaragua!
Thanks bro I will be spending sometime creating this and tweaking it
you are my savior for my webdesign project :"""
Thanks, Glad this ecommerce web design tutorial helped you
@@GreatStackDev Yaa! i also agreed with kiki A!! You really help me in creating website. Thank you admin
@@athirahwozzari4610 thank you to Athirah
wow and was made 1 year ago o.O
this is actually really amazing for practice after learning the basics, the only thing that i thought could be better is the use of the html semantics but that is not really a issue just personal preference
Thank you very much
i had watched each and every video of yours and got to know much more things than on curriculum
I had made a website by watching your videos and are much helpful because of audio❤️
We need more videos like these. Thank you.
This would be a great project to convert into react, Thanks Easy
did you convert into react ?
13:10
Home,Product,About text right side pe nahi ja rha
this would be a great project to convert into react
i thought the same
Yessss, maybe better with gatsby and shopify
With a payment gateway system integration, and a login system, it will surely become a resume worthy project!
I just can't thank you enough you my programming easy!
You know why I like your videos?
You display the outcome for every code you add
Great tutorial, helped me alot. I would love to see how you design the account page
Really enjoying this! 👍. This is providing me with so many good designs and layouts for my new website I am currently working on. I'm so excited about learning web application development! 👍😊, soon I'll be able to construct many new websites with HTML, CSS, and many other web programming languages.
Plz help
Is project me copy jo kiya h notepad se vo kese krna h
Time managing is just impressive with such an outstanding explanation. Thanks
You’re the greatest. Thank you so much!
this guy must be a mad genius. i understood everything he said. Thanks Bro
I don't have knowledge about HTML and CSS . So, this tutorial is helpful for me... Can i also make the same website as shown in the video??
Please give me html and css source code please
@@anithaani7300 you have to pay for the source code and I did not pay so im just sitting and typing the whole thing.
He is not explaining anything bro ! He just type his code ! Simple bro ..to understand you need to have understanding of html and css bro
@@sportfrenz6149 I think it's even better when u start to edit some stuff on your own on top of it.
can you do some back end and deployment for something like this. Maybe put in some version control with git.
I Love it. Thank you keep the good Work
Thanks bhai...
It is very useful for me...
Best part was media query , flex-basis , color combo, transitions and drop-down
Absolute incredible, if i'm going to pass my exam is only thanks to you!
Happy to help!
@@GreatStackDev sir there's a problem in the toggle menu thing pls help
@@parthagarwal813 Hi Parth, pleas share me your script part screenshot on my FB page inbox. Find social media link in the description. Thanks
@@parthagarwal813 did you manage to solve this problem? I have the same issue! thx!
@@GreatStackDev I've sent you a message on facebook regarding this issue, thanks
Awesome & Brilliant presentation!!👌
I cant thank you enough easy tutorials. you are such a great content creator and you tutorials are super grate, easy to flow with and educative. thanks so much.
I need 2nd part of this project
Please can you upload it as fast as possible...
Yeah
2nd part link is available in description.
I admire you. hats off for all the effort you have put to create this 100% valuable video.
Thanks a ton
13:10
Home,Product,About text right side pe nahi ja rha
This was really great!! Thank you
Thank you so much sir just wow ❤
Can You MakeA tutorial about how we can backend this and connect to cloud, that we can store username and password!!
That already with programming language
He's a Front end Web Developer. The Best I know(Undefeated)
Bhai quorabazaar.com se apna koi bhe ques. Puch le .
Anyone with this code fully done to share it ...I do a back end tut on the same using Django & Postgres
there is a feature called Local Storage and Session Storage where you can store Username and password.... you can search for it in google or in W3C schools...
You're always keeping me active in the way... Can you please led me through on how to build a web for a Logistic/courier business
@Stephanie Brookes can explain pls
thank you very much you just hlep me made my firts steps in online business
i builded my own website in 3 day with the help of your tutorial. I didnt know anything about html or css. But now i understand the basics and can make things on my own. See you in part 2!
hey bro plese you tell how to connect the two files i did not understand
@@dhairyasingh3828 you mean css with html?
When i listen to your voice it just makes me smile.
When I read your comment, it just make me smile
Ayeee hyee😂😂
Nice tutorial btw
Thanks Khabbas for your comment
Hey
First of all, thank you so much for making such an awesome tutorial,
I have a question, the rating stars don't show properly, and I have checked all the information I could find about them on stack overflow and many others, still cant find the solution, they appear as square spaces
ur the man! Ur lecture is perfect!
Man you are the best I swear !
Having some problems with the "Media Query" for (max-width) 600px Any bugs?
Hello, Sean.
Could you provide me with a timestamp?
It would be good to add another video, where it shows how to connect to database where others can log in and sign up
i Agree. Really want to know that
thanks for helping us in this struggling period
Your approach to giving clarification is awesome.❤
i couldn't do the ratings, but everything else worked well!
heya could you please copy and paste the code for me please? i created everything and i lost my documents lol