Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE
HTML-код
- Опубликовано: 5 июн 2024
- LEARN HOW TO BUILD AND DEPLOY FULL RESPONSIVE ECOMMERCE WEBSITE USING HTML CSS & JAVASCRIPT. This is a free HTML CSS Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step. Will Create from responsive navbar using html CSS JavaScript to responsive footer in one video.
Why This Course?
- Responsive Ecommerce Website Tutorial Using HTML CSS & JavaScript.
- Completely For Beginners.
- Multipage Ecommerce Website Project.
- Best Beginner Friendly Free Course On RUclips.
- Learn How to build amazing professional and responsive websites.
- Learn the fundamentals of web design.
- Modern CSS, including flexbox and CSS Grid for layout.
- Modern CSS techniques to create stunning designs and effects.
- How to use common components and layout patterns for professional website design and development.
- Advanced responsive design using media queries.
- And Many More.
PART 2: • Build and Deploy Ecomm...
Images: github.com/tech2etc/Build-and...
Source Code 1: www.buymeacoffee.com/tech2etc...
Source Code 2: ko-fi.com/s/06e4db9e09
Certificate: tech2etc.com/web-design-html-...
Icons: fontawesome.com/
Fonts: fonts.google.com/
Recommended Course:
Multipage Responsive Ecommerce Website With Bootstrap HTML CSS & JAVASCRIPT:
cutt.ly/8Uqt5MQ
Multipage Responsive Online Course/LMS Website HTML CSS & JavaScript:
cutt.ly/7UqyeiR
Timestamps:
0:00 Course Intro
0:58 Final Project Preview
7:40 Final Responsive Website Preview
10:20 What You Will Achieve
10:54 Create Folder Directory/Project Setup
11:19 HTML CSS JavaScript File Overview
13:35 Header & Nav Menu
27:28 Hero Section
34:10 Sticky Navbar In CSS
35:45 Features Section
46:16 Featured Product Section
1:01:41 Big Shoutout To My Supporters
1:02:18 Call To Action Banner
1:10:33 New Arrival Products
1:12:32 Call To Action Banners
1:23:06 Text Banners
1:28:23 Newsletter Section
1:37:07 Footer Section
1:51:36 Responsive Breakpoint 1
1:52:50 Responsive Sidebar Menu
2:14:16 Responsive Breakpoint 2
2:22:29 Final Project
All Source Codes: www.buymeacoffee.com/tech2etc
GitHub: github.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
SUPPORT ME:
👕 Merchandise: tech2etc.com/merchandise
🎁 Buy Me A Coffee www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
How To Make MONEY Online - My 4 Favorite Tricks:
👨💻 Start Freelancing: tech2etc.com/fiverrcpa
🛒 Learn Digital Marketing: tech2etc.com/digital-marketing
📹 Make Video Editing As Profession: tech2etc.com/video-editing
🕔 Next trick will be revealed at the right time.
Free Course to Improve SKILLS & EARN:
1️⃣ WordPress Insider: tech2etc.com/wordpress-course
2️⃣ Bootstrap With Projects: tech2etc.com/bootstrap
3️⃣ Web Development For Beginners: tech2etc.com/webdev
4️⃣ JavaScript With Projects: tech2etc.com/javascript
5️⃣ Python With Projects: tech2etc.com/python
🎁 Get Certificate: courses.tech2etc.com/
Important Links:
📂 Best Hosting: tech2etc.com/best-hosting
📂 Best CV Resume: tech2etc.com/my-resume
📂 Freelancing Guide: tech2etc.com/learn-freelancing
📂 Interview Questions: tech2etc.com/?s=interview
DISCLAIMER: This description contains affiliate links. Which means I may receive a small commission on affiliate links used. This helps support the channel and allows us to continue to make videos like this. All content used within the parameters of fair use.
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
Twitter: / tech2etc
LinkedIn: / fahimulkabirchowdhury
Group: / 14295322
FB (Personal): / mdfahimulkabir
FB Page: / tech2etc
#ecommerce_tutorial #ecommerce_htmlcss #multipage
Hope you will enjoy this course. Any kind of suggestion/feedback/criticism will be appreciated.
Please SUPPORT me to reach 200K💥 SUBSCRIBERS Goal ✅
💥 Subscribe 💥 Like 💥 Share 💥
Timestamps:
0:00 Course Intro
0:58 Final Project Preview
7:40 Final Responsive Website Preview
10:20 What You Will Achieve
10:54 Create Folder Directory/Project Setup
11:19 HTML CSS JavaScript File Overview
13:35 Header & Nav Menu
27:28 Hero Section
34:10 Sticky Navbar In CSS
35:45 Features Section
46:16 Featured Product Section
1:01:41 Big Shoutout To My Supporters
1:02:18 Call To Action Banner
1:10:33 New Arrival Products
1:12:32 Call To Action Banners
1:23:06 Text Banners
1:28:23 Newsletter Section
1:37:07 Footer Section
1:51:36 Responsive Breakpoint 1
1:52:50 Responsive Sidebar Menu
2:14:16 Responsive Breakpoint 2
2:22:29 Final Project
Hi I'm interested to get source code
Face palm … Don’t use Id in css…
Y 888iik. L
Thank you so much for your efforts, this is the most clear and straight forward video I've seen. Only the font awesome section needs to be updated a little bit as the company has changed its policy.
Can you also make large websites for different customers to buy .
Thank You for making this 6 videos. You taught me HTML, CSS and JS in just 5hr, other than those long lecture videos. I'm not financially independent, otherwise I really; heartily want to pay you. You taught me a lot Sir. Thank You.
You made this ecommerce fully
We can consider that's the best tutorial I have ever found... Just amazing, pedagogic and so glad when it goes easy.. You make it posible! Thank you!!
just now completed this part...this is abolutely incredible,,thank you so much for guiding..such a beginner level content..i hope next parts will also did well..thank you
This is without a doubt my best HTML/CSS/JS tutorial 👏👏👏👏👏
Many of RUclipsr who are a programmer, they are not in doubt a master of what they do but I'm telling you that being a programmer is one thing and teaching others is another thing. It requires something else to be able to teach or to be a teacher. That's why there is Bachelor of Education.
Remember, when you teach others, you are nor teaching yourself, your goal is to teach others so when you teach, put yourself in a position of your students who completely have no ideas.
I have subscribed to your channel by the way
I have watched a lot of HTML,CSS and JavaScript tutorials on RUclips but this one is the best one so far and can easily comprehend the code you are writing with spaces in between and closing each section cleanly. Keep up the good work , you are a blessing for us newbie front-end developers and programming enthusiasts .
Bhai agar ap ya website Puri ho gay ho to mujha ap is ka code send kar do First video ka Mera wali responsive nhi ho Rahi ha please Bhai kar do
I think you are the best coder in the world because I am learning coding from 2020 to till. but your coding is so easy that I can understand smoothly.
This is best CSS tutorial, I've ever watched. Easy and simple to follow!
You deserved millions of likes for organizing the code in a systematic way....This is one of the best tutorial on web designing,I have ever seen on RUclips. Thank you so much for making this tutorial in the simplest way. I had so many doubts before after watching your video my all doubts got clear...
One of the best teacher for front end development. Doing a great job sir. May god bless you .
Thank you brother
@@Tech2etc
I want you for Mini project
Hi
guys, do you know what makes this tutorial the best? it's so cleanly written, very clean... Even simple things like minimizing the section make this wonderful
I created shopping website but was not able to understand how can I make it better , but I learnt lot of new style and techniques with this tutorial....
This is absolutely incredible, sir!! I've learned more coding along with you than 4 whole months of bootcamp! I only learned the fundamentals there, and you brought everything together. Well done! I'd be very interested in seeing you do the same thing with a different kind of product and very different layouts. It'd be great practice :)
I'm in the exact same boat brother xDDDD
@@camiloalonso3709 where to get such type of clothes images for free
@@goosebumps7352 Google, or steal them from online websites
That fundamental helped you to understand this video 😊
@@unknown_codec_404😂😂😂😂😂
Just what i needed! Thanks. Amazing work.
Thank you sooo much. This has been the most incredible, interactive learning in WEB.
So far its the first time someone is explaining things in a such simple way...so excited to jump into part 2 and so on...thx Sir
My friend needs pictures, help me, I can't find pictures in the description
Dude is an absolute legend. You are so good at explaining, thank you so much for teaching me the basics of web development this was actually really useful.
where to get such type of clothes images for free
1 hour completed, going very smooth , thanks thanks thanks a lot ❤
I don't usually comment but after watching 45min into it, I couldn't stop myself thank you!
Brother, your teaching style is really wonderful, you explain very fluently and calmly, and I learned a lot of codes again..Continue again thanks
Most welcome
@@Tech2etc
Can you give me your mail to contact you ??
Source code de do Bhai
@@Tech2etc Bonjour Monsieur, je suis un vrai débutant dans le milieu, j'ai 16 ans et je voudrais créer mon propre site e-commerce, cependant, je suis à la lettre votre vidéo mais rien ne s'affiche, pouvez-vous m'aider à me lancer personnellement s'il vous plaît ? C'est très urgent. (Je voudrais juste que vous m'aidiez à lier mes documents etc).
Cordialement.
Assalamu alaikum.
I want more of this website.
How to upload my products.
User dashboard.
Affiliate user dashboard.
And finally how to create
backend this site?
Please upload next parts.
@Tech2etc
I appreciate the time and effort you put into making this video, it shows in the final product.
Your energy and enthusiasm are infectious, I can't wait to see more of your videos!
amazing , I learnd about css from here more than I did in a full courrse
your style is wonderfull, just one sugest, try to use html correct tags, for example, Use tag instead div id ="header" or nav instead div>ul.navbar
This so beautiful oh my goodness I'm making an ecommerce website for a hardware shop and I'm 100% sure I'm modelling its design and functionality upon yours, brother this is beyond elegant. Great Work!!!.
Im glad you liked it.
Thanks a lot, i just made a dashboard with another tutorial you uploaded and am getting closer to employment.🤑🥰
Best of luck
@@Tech2etc thanks
You rocks bro, so high!!, I could understand much better the CSS after did this website
It is so soothing when you say "that's it" lol, you made it look like it's no big deal.
I really appreciated to you. Your explanation is very fluent and understandable. This is the best course i have ever seen in RUclips.
Thank you soo much
ruclips.net/video/jMNiO-bsibs/видео.html
website ecommerce complet with source code (statique & backend)
Source code de do Bhai
This is beautiful, I really enjoyed this first course, as a beginner, this is the most beginner friendly tutorial I have ever seen.. Can we please get a link to the pictures you used for his course?
You are life saviour! Mat doing a fantastic job for us
A true legend!!! thanks sir. love you and appreciate your work. thanks 1000000000 times.❤
Unfortunately, the entire layout breaks @ 3840px... But, this is fixable with containers.... So, I'm going to continue with the build because I'm really here for the shopping cart feature. I'm very thankful for the tutorial. Good job. I look forward to checking out the rest of your content.
hey can you please tell me how to fix that issue
@@oorjamahana4702
This was so long ago I almost forgot. Create inner divs as wrappers for each section, and set them to a a max-width of 2400px. Use flex-box to control the inner position of the elements. I hope that helps.
Thank you bro. The only way to learn in Africa is by the help of heroes like you. I wish I can support you with money but I don't have much so I will continue to like, comment and share your videos to support you bro.
Thank you so much dear
talk for your side of where you are living, i know peeps who also have paid courses and sites based in ghana who offer learning resources.
Source code de do Bhai
@@arunyadav7467 In the description
The way you started caught my attention, keep it up bro
I don't know how to thank to you. This is awesome. I hope you can teach us others projects on RUclips
Awesome project for beginner like me , hope we get more awesome project from your channel. I am very grateful to you. I could improve myself from your channel . Many many thanks brother.
Glad it was helpful.
Source code de do Bhai
Awesome lessons found so far on RUclips. Would really appreciate if you can post the video of functional pagination programming and full single product backend programming which display next product on the click of another product container.
Sure, Will try it
It is incredible.Keep the good work.Add more videos on Html,Css,Javascript,Php and MySql to make a complete backend developer.
One of the best video tutorials I found, thank you very much. really appreciate.
Great tutorial! A couple questions: 1. What color package are you using in sublime text? How can I get the images you are using? Thanks!!!
Hi again. Have you considered adding PHP and MySQL to this course?
Your teaching style is fantastic and I really like it. Keep the good work going.
he seems to be more of a front end type of coder, although i do think that he knows backend software and coding language, for his type of videos backend is not necessarily required. Thus, the max amount of "back-end" he will probably end up adding is like a stripe integration cause all payments and product management can be managed through there. This is my opinion on his response but to be honest i too want some backend on his videos.
@@ayandas5730 It is a very good work. Elegant, clean, and very useful to beginners. It will be nice to see someone collaborating with him to add the required BE in case he is busy or unable to. I like the design so much.
hey mate !! let me know if he used any JavaScript in his entire website or he just made a frontend without making any live cart features?
@@MuhammadIrfan-cj1cq He used some JS in the product details page.
Thank you very much for this great work. You can explain and show the topics very professional. I think, that I will spent much more time in your channel.
Man !!!!! You are amazing. Beautifully explained. Very clear voice. Maza aagya sahi mein. 😁😁
Thank you so much. Please share this project on your social media. Will appreciate that.
I just want to say thank you! You are the best so far. It is very clear for me as a beginner. Can you please make more and for javascript too?
Merci beaucoup et Bravo a toi!
Sure I will try that
Source code de do Bhai
Source code de do Bhai
God bless you brother.. the way you teach is just amazing 👏 please make a complete tutorial on React js bro please
Will do soon
ruclips.net/video/jMNiO-bsibs/видео.html
website ecommerce complet with source code (statique & backend)
One of the best tutor ever..thank you
Thank you bro 😃
Last year i followed Native entrepreneur's free series tutorial.. but they left it to hang mid,and their suggested tools prefered for Mac,which is not able for many people in world who learn via free tutorials
I hope,wish one day reach our dream life & thank you all
Hope wish all will be well 😃🌟✨🌙🌏🏠🙌
15.03.2023 10:10 pm ist
Good day, first I want to say THIS SERIES IS AWESOME!!... Thank you for this but I would like to ask if you would be adding a blog single page to the series or not and why ?... Although, I'm not new to HTML,CSS,JS(JS especially) but I'm not that good a designer hence I'm using your design and layout for a Fullstack project I'm working on and i would really appreciate if you can add a single blog page to the series.. Thank you very much once more for this great series
Nice! But, there should always be detailed n logical explanations. Like why did u use section why not div, why class n I'd are used, etc. You are making videos not for yourself, but for learners.
Using section can be more easily read especially for beginners whereas too many divs can make you confused. And ids ARE more professional, but I'd go with you for this one, classes are more easier and readable.
You should know the basic at least
This video isn't for beginners ....
I see I am not only one who thinks that it’s not for beginners 😅
If you see a video tutorial to BUILD a full website then you should have some common sense to understand that it’s clearly not for beginners. You are asking for explanations of basic things such as semantics and attributes, search for a course, not a tutorial
superb, fantastic & mind Blowing
very clearly explained and well organized designing of sections in HTML, CSS and JS, thanks..
Amazing but I have few suggestions:
Instead of using display fex again and again you can also add it once and use that class where needed.
Also I believe you should use mobile first design technique
Good suggestions bro. I will try to use them in my future videos.
Awesome videos! I have a question! I have a 13 inch macbook pro and when I use this screen to look at my banner images they dont sit well on the screen but for when I inspect on mobil devices they look great. Is there any reason as to why this is happening? Im almost done with your lesson but my main banner images are giving me a hard time. Also my products arent sitting well on my macbook screen either.
Soooooo great example for web developers.
Excellent teaching techniques.
Thanks 👍 a lot .
You're very welcome!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
I am at the beginning of this video and sounds promising. 👌
I have one doubt. The cart icon and nav bar slider icon which we made in our responsive page that is only getting displayed on my home page and not on other webpages(only in small screen and medium screen device). On the other pages just the cara logo is coming. What could be the reason ? By the way the tutorial is awesome 👍
can you also make a "turn psd file into html with flexbox and or grid" tutorial?
all such tutorials use floats and older techniques, so if you make a new one it will be amazing, it doesn't have to be a long video, just long enough to show the core techniques.
Sure. I will definitely do it.
@@Tech2etc thanks alot
ruclips.net/video/jMNiO-bsibs/видео.html
website ecommerce complet with source code (statique & backend)
This is the best tutorial I have seen so far👍
Yess!!!Video 1 done .Thank U
Hello I had a problem at 1:23:00 banner3 section my banners aren't aligned in the same direction even after I followed al your instructions
sir. First of all I would like to thank you for this video. I'm a beginner in JS. But I can study the code(easily catchable). i have completed the Ecommerce design section that you have done this video. But section starting from (1:51:36 Responsive Breakpoint 1), I'm not getting the output even after writing the same code as you wrote. I checked again and again. how can it be fixed? ☹Pease help me ..
Same problem here. Have you found the solution?
Me too I've been following him step by step but at some point you'll realise that his output works and yours doesn't work and I don't know if he doesn't want us to know that part. Especially with the responsiveness of the website and also the JavaScript he used in making the images change in the second part of the tutorial
me too
If you could check the few first code in CSS file that he did not show us to code follow by him.
dil ki gehraion se apka shukria apki is website se bhttt kuch seekhney ko mila....
allah mazeedc taraqqi de apko ameen...
once again thanks😇
Thank you soo much brother.
@@Tech2etc ❤️❤️
This Video is most helpful for making my new webpage.
18:27
cart icon show nahi ho raha
hello bhai, first of all I want to thank you for the awesome work you have done here he surely helped me a lot but I have a problem at 2:02:53, the hamburger menu is not working I have no idea why I have done exactly what you have shown in this video. can you help me in some way?
edit: I just figured it out.
My hamburger too is not working… please how did u fix your issue
mine didnt work too, how? :(((
Please help buddy
Check you class once more in the css folder I did a mistake of a space.
@@RA-ks5wt my hamburger menu is not working bro,please help
You are a Best Teacher, thank you so much.
Instead of setting the font size for the header, you can make responsive headers by applying clamps on them! Nice video :)
Awesome work this will diffently help me as I am new in this field.
Thank You, I can say that it is the best explained video by applying it with the project.
I watch your videos, and it feels very good. Thank you very much, brother
Amazing, I'm excited to start working on this and learning Front End Web development on the way 🔥
Hope you enjoy it!
thanx my brother you have helped me a lot to improve my coding
Thank you for this video, it is helping me very much with my project...it took me 3 days to finish this home page part....God bless...
Your most welcome.
Quite informative.....you had a broad helping mindset .....Thanks a lot 😇😇......crystal clear explaination 🤩😇
l learned a lot from this course.thank you so much almighty allah bless you.
loving this will support you once i am stable enough thanks for the good knowledge
Your welcome
Exceptionally Beautiful. You are a wonder to beginers like me. Stay blessed dear. Love From Pakistan.
Thank you soo much
Thannks mate ! May God Bless you !
you are the best man. Your hard work really appreciated.
mash allha excellent sir, so thank you so much from my heart
This is really dope. It has helped me alot,by creating a website myself. Thanks alot and I love your works
Your most welcome. Please share this project on your social media. Will appreciate that.
without waiting long, I have subscribed to your youtube channel, thank you for the tutorial, very helpful
Most welcome
This is very useful! Thank you and I hope you to make more videos to help other to learn!
I really enjoyed this. It was worth every time spent .. thanks so much.. going to part 2
Thank you so much. Please share this project on your social media. Will appreciate that.
Nice website running successfully 👍👍👍
Hello Big Brother!!
You are very good at teaching.
You just gained a subscriber from India.
Very beginner friendly.
Hi Devv, my code is not working. Did your code worked?
@@KiaraBlogs yes kiara It worked correctly
QUESTION 1 (20:30):
if we have ul navbar items and apply the following css code to them
display: flex
will that transform them from a column to a row? if yes why?
short and precise explanation please, not overcomplicated
ANSWER 1:
Yes, applying display: flex; to a list of navbar items ( with list items ) will change the layout from a column (vertical stack) to a row (horizontal alignment).
This is because display: flex; applies a flex container to the , making its children (the elements) flex items.
The default value for the flex-direction property, when not specified, is row, which arranges the flex items in a horizontal row.
Therefore, the navbar items will be displayed side by side in a row.
This is better explanation than other videos ive watch.
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
Great, I have enjoyed your tutorials from parts 1 to 6, but I would like you to add more code about javascript into your code.
Thank You!
Very cool, everything we need is here. Thanks a lot.
Most welcome
Amazing project, thanks for your time and dedication
I was struggling with the responsive sidebar (1:51:36 and on) and I saw some comments struggling with it as well. I figured that I forgot to create the path between html and js and I did that by writing into the html file and that solved the problem for me. Also always look for typos, I hope that helps
Thank you so much for your great and hard work keep it up god bless you 🌟🌟🌟🌟🌟
Hello Brother, in this video, in 41 minutes, you tell padding for (#feature .fe-box {padding: 9px for top 8px for left 6px for bottom 8px for right}). But this padding is a shorthand property for (top, right, bottom, and left).
However, This video is very impressive.
I have 3 youtube accounts going to subscribe from all three. thank you
Thank you so much.
It's one of the best video i have watched...
It was great
Both description and type of project
Please post tutorials with more complex and up-to-date projects from this model
And if possible, teach the project from coding to connecting to CMS such as WordPress
Teach 0 to 100
thank you
Very cool! Thanks for the course!
I would like to thank you for the video website learning ( The Best I really like )