Look how easily I created the online store [ Step by Step Tutorial ]

Look how easily I created the online store [ Step by Step Tutorial ] - 01

Рет қаралды 278,410

2 жыл бұрын

Fullstack e-commerce Series - • Make your first ecomme...
Fullstack Social Media website - • Social Media Website
Part 1 - How to make an e-commerce website with HTML, CSS and JS
In this video, you'll learn to create a fullstack e-commerce online store website. This is part 1 of e-commerce website. In this part, you'll make 4 pages - Home page, product page, search page and 404 page.
Source Code - / 56103891
Buy Me a coffee - www.buymeacoffee.com/Modernwe...
Support me in making these videos - paypal.me/modernwebchannel
Download Images -
drive.google.com/drive/folder...
If you like this tutorial make sure to hit like button and show your support by subscribing my channel.
👇Subscribe My Channel👇
kzfaq.info_web?...
👇Follow me on Instagram👇
/ modern_web_channel
❤❤ Have a nice day ❤❤
------------------------------
Over You - Atch / atch-music
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/_over-you
Music promoted by Audio Library • Over You - Atch (No Co...
------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
#ecommercewebsite #websitedevelopment #wesitedesign #html #css #js #webdev #web #html5 #css3 #htmlcss #javascript #nodejs #npm #fullstackdev #frontend #backend #onepagewebsite #onlinetutorial

Пікірлер: 341

@ModernWeb 2 жыл бұрын

Did you like it ? You can find more below - Fullstack ecom 1.0 website series - kzfaq.info/sun/PLqm86YkewF6S45smPYeNv01aFFKWZSgYD Ecom 2.0 with paypal payment - kzfaq.info/sun/PLqm86YkewF6THruxeooR92-8atX_oAPTg Fullstack Social Media Site - kzfaq.info/sun/PLqm86YkewF6QY31_HM3RJqmD38PqgsJT1

@its_gopaldubey 2 жыл бұрын

Please make video on Search engine with php

@ModernWeb 2 жыл бұрын

Sorry but search engine is not a simple topic to make video. But you can make a google search clone without using php. By using just html forms. You can check that out on KZfaq or tell me I'll make video on that but making a whole search engine is very hard 😅

@its_gopaldubey 2 жыл бұрын

Please make only theme clone not whole search engine

@ModernWeb 2 жыл бұрын

yeah sure☺️

@imlispeak8181 2 жыл бұрын

Can I do this as a mern stack project?

@Noland08 2 жыл бұрын

This is actually the best web tutorial channel out there! I love how you explain each step, it really helps me understand how each feature works!

@ModernWeb 2 жыл бұрын

Thanks☺️. It means a lot

@benjamindavies7113 2 жыл бұрын

I have watched several videos on programming but the way you explain each product creation process step-by-step is mind-blowing - even more than many so-called professionals. You have made me develop the confidence that I needed to become a PROGRAMMER. I am trying to complete all your development videos before I begin creating my own projects in order to build my portfolio to start my job search... Thank You!

@ModernWeb 2 жыл бұрын

Thanks. I am glad you understood my video. You’ll definetly get a job. Best wishes

@NoTimeWaste1 Жыл бұрын

Sucessfully completed part 1 ✅

@ZeuSonRed 2 жыл бұрын

Hello Sir I like to say that i have really bad financial status and I think this kindness is very good!!!! Thank you!!!

@nectarwave 2 жыл бұрын

отличный урок! спасибо большое☺

@laflaca7460 2 жыл бұрын

you're an absolute legend.

@4rc4good 2 жыл бұрын

I think I'm going to be the 2500th person to view Part 1 and I think it's great. Modern Web is my hero.

@ahmadhusain9075 2 жыл бұрын

Me too man 😂 Its super awesome 🤩🤩🤩👌👌👌

@XeeTechSolutions 2 жыл бұрын

Booyah. Excellent.

@ahmadhusain9075 2 жыл бұрын

Wow super work, thank you ❤️🤩🤩🤩👌👌

@carltristanaltamerano6840 2 жыл бұрын

You're a legend man ❤️🔥

@thananjayansuthakaran9859 2 жыл бұрын

100% WHAT I NEED. THANKS A TON!!

@alichannel1143 2 жыл бұрын

i want to make it responsive ? could you help me please!!

@treyngwenya258 Жыл бұрын

Planning to create my own ecommerce website this will definitely help thanks

@ibrahimsuleiman7753 2 жыл бұрын

Excellent job 👍

@marcelobc2230 Жыл бұрын

Great !

@FernandoOliveira1979 2 жыл бұрын

Excellent!!!

@midouwebdev2224 2 жыл бұрын

The best !

@yakligian 2 жыл бұрын

Great tutorial, this helped a lot!

@juneldelacuadra5973 2 жыл бұрын

The best... thank you!

@johanverm90 2 жыл бұрын

Awesome ! thanks

@sKryly1 2 жыл бұрын

16:35 if you get an error here is because you need to use the tidle ` (the key above the tab key) instead of single quotes.

@hustler212 2 жыл бұрын

This helped.

@bidishachakravartty7814 2 жыл бұрын

This really helped..thanks a lot

@iPahaTech Жыл бұрын

I couldn’t figure this out for 2 days until I saw this tip. thanks mate

@mervepolat1018 7 ай бұрын

Thanks a lot :))

@juandiegobedoyagutierrez2594 2 жыл бұрын

Great

@user-fr9xq3vu4t 2 жыл бұрын

I like it ❤

@Вольфрам 2 жыл бұрын

Я никогда не сомневался в том, что в иностранном комьюнити есть крутые туториалы.

@NGRnp 2 жыл бұрын

And also on style.css add this on top ----> body{ Display: inline-grid: } ----> This will make responsive on all size of screen

@alichannel1143 2 жыл бұрын

i want to make it responsive ? could you help me please!!

@wadiajaafar3907 11 ай бұрын

thank you bro

@krishnajadhav1297 2 жыл бұрын

Very Helpful for learning purpose. I got many new ideas and tricks from the project. It will be very helpful if you make video on how to make this website responsive.

@lucas-sq1js 2 жыл бұрын

Wow your freaking amazing. I've liked all ur videos and sub to ur chanel

@footballfever134 2 жыл бұрын

Voice over video - this is what I was expecting... Excellent job love ur work bro❤️❤️😊

@alichannel1143 2 жыл бұрын

i want to make it responsive ? could you help me please!!

@sandeeppillai2890 2 жыл бұрын

Wow... Great video... Please make video with bootstrap also...

@baolinhhuynh3683 2 жыл бұрын

Please post part 2. Thank you!

@ModernWeb 2 жыл бұрын

Sure☺️

@RohitSingh-wj6ps 2 жыл бұрын

No one can explain each part like this. Nice video brother. Can you also add a part for responsive css ?

@ModernWeb 2 жыл бұрын

I didn't planned to make it responsive but If this website series parts performs well, then i surely make a responsive part also. Let see

@RohitSingh-wj6ps 2 жыл бұрын

@@ModernWeb it'll take time but i'm dam sure your series will not perform well it'll perform outstanding. ❤️❤️❤️

@whatnot798 2 жыл бұрын

@@ModernWeb please do. Great content

@longgg6137 2 жыл бұрын

thank iu so much bro,

@ModernWeb 2 жыл бұрын

Always welcome

@siyabongashabangu4973 2 жыл бұрын

I've learnt a lot the past few days coding along side. Thanks! when can we expect the backend of the project?

@ModernWeb 2 жыл бұрын

It's on the way, 😅

@fionabruce2009 2 жыл бұрын

@@ModernWeb hey just came across ur tutorials and u are amazing pls when will you cover the backend 🙏

@dailywisdom12 2 жыл бұрын

Thank you so much! I spent literally 2 hours trying to figure out why I'm getting it wrong.

@alichannel1143 2 жыл бұрын

i want to make it responsive ? could you help me please!!

@alichannel1143 2 жыл бұрын

@@fionabruce2009 i want to make it responsive ? could you help me please!!

@faisirajput9839 2 жыл бұрын

Hey great work! I don't know how to run this in browser.will you please show json configuration?

@rinathemachina2821 2 жыл бұрын

This is an extremely helpful tutorial! Thank you! Are there any difference between the usage of : const doSomething = () => { ... } and function doSomething() { ... } Does it matter any thing ?

@ModernWeb 2 жыл бұрын

Actually there is differences but its not matter for this project you can use any of the syntax to create functions

@helvettefaensatan 2 жыл бұрын

Chapters would be nice.

@bornofmindghimire5888 2 жыл бұрын

Hello Modern Web ! Thankyou for uploading such great tutorials. I was looking this kind of stuff cause I am depressed of learning theory (HTML/CSS/JAVASCRIPT).But still i have some queries about how @import 'nav.css' ------ and the arrow function u used .... work . Can u make some practical real world pure javascript tutorials focusing just on front end web development with elaborating concepts. I'm just a beginner and not a computer science degree person. It is just my query or request, never mind if done something wrong. Thanks in Advance.

@decisionsdecisions7297 Жыл бұрын

Hi, if you are referring to him clicking the nav.css link and having it open in a different tab, I believe it depends on the editor you use. He is using Visual Studio

@nurmuhammetallanov9180 2 жыл бұрын

I hope the second part won't take long.

@abhishekcode Жыл бұрын

Please create mern crud full application 💐

@jayeshmasurkar2759 2 жыл бұрын

At 30:05 my images of best selling products are overlapping each other what to do for that ? please respond !

@Shin_the_panda Жыл бұрын

For aome reason when i put the same code in my product.css folder that is in 58:23 none of the text on the web page seems to space away from the image

@user-jl9zs6ng5r 2 жыл бұрын

Sir, Can you turtorial about login and register page?

@njodsaad5569 10 ай бұрын

Hello thank you so much for the tutorial. there is a problem with grid-gap its not working is there an alternative?

@Nick-ft1vs 2 жыл бұрын

how do we get your loadout for html? mine is the normal html loadout but dont like the colors

@idowuabdulquadri Жыл бұрын

can you plz make a tutorial for building an e-commerce website for building nmaterials

@zcoding8355 11 ай бұрын

Hi! Could you indicate which frontend and backend platforms the e-commerce website featured in this tutorial is based on?

@bobywood1969 2 жыл бұрын

Thank you for this tuto! But i can't download img files on my computer from google drive, anybody has the same problem?

@abanifrancis3493 Жыл бұрын

And how did u remove the background for your clothing logo

@pericaperisic7610 Жыл бұрын

On 14:29 your links are inside the div, mine are outside the div. Links are about 50% over the grey div, I am not sure where is my mistake. Is there any chance you can help me with that so I can continue ?

@HekmatKhyber 2 жыл бұрын

What a nice tutorial, can you describe me two properties (transform:translateX(-50%) and grid-template-columns: repeate(4, 1fr) here what is 1fr.

@ModernWeb 2 жыл бұрын

Transfor property is used to modify elements position dimension and other. Transform: translateX(-50%) this shift the element 50% of its width in negative left direction. Grid template columns is used to define columns of a grid here 1fr is a CSS unit this unut generally use with grid when defining columns and row. 1fr means 1fraction this mean divide the total width in this ration. In this case 4 columns of 1 ratio of total width. These are hard to understand topics. But still I tried my best to explain you it by simple text😊

@alichannel1143 2 жыл бұрын

i want to make it responsive ? could you help me please!!

@MosesAyebo 8 ай бұрын

How do I add the pictures to the vscode editor I’m a beginner I downloaded the pictures and created a folder

@ModernWeb 8 ай бұрын

just drag and drop the image files in your folder. If you taling about how to show image on web page then for that use tag with "src" attribute where you can give the path of the image relative to the html file. More about this you can find on internet.

@Luma0212 Жыл бұрын

Having trouble with my images going vertical instead of horizontal. 29:00 Can anyone help? I'm not sure why it won't change and I've been trying everything please

@user-pz8wp5yu5g 8 ай бұрын

I know I'm a couple of years late but do you know why my arrow keys wouldn't move my slider at 34:44. I believe its my javascript as the rest seems the same

@alanrush1381 2 жыл бұрын

Is this just using Vanilla JS and is it a complete series?

@SofianGH Жыл бұрын

it will be great if you avoid using music in your next videos

@ssiraj8832 2 жыл бұрын

I did this and I was able to select the images but the background never changed even though I tried multiple times. There's no mistake in the code as I've clearly copied the same..... pls help me out with

@ssiraj8832 2 жыл бұрын

The JS code: const productImages = document.querySelectorAll(".product-images img"); const productImageSlide = document.querySelector(".image-slider"); let activeImageSlide = 0; productImages.forEach((item, i) => { item.addEventListener('click', () => { productImages[activeImageSlide].classList.remove('active'); item.classList.add('active'); productImageSlide.style.backgroundImage = `url('${item,src}')`; activeImageSlide = i; }) })

@ModernWeb 2 жыл бұрын

You messed up here. The style.background line This should be equal to `url('${item.src'}` but you are doing item,src. Its . not ,

@ssiraj8832 2 жыл бұрын

@@ModernWeb Congratulations to me it's working.......thanks a lot and keep up the good work.....hope u reach 1 million subs soon and really appreciate the effort and for the reply too

@aakankshaarbole7271 2 жыл бұрын

@@ModernWeb I'm copy the same code n all bt when I type the dark .img logo it can't be give output

@andrewsokolovsky9127 2 жыл бұрын

Why you used display: block; and margin: auto; in 19:25? It works for me even without those styles

@zoebruwer3863 2 жыл бұрын

what do you do to line 19 at 1:18:06 to make line 19 two lines before line 20

@danielsan6758 2 жыл бұрын

Make a dashboard after!!

@ModernWeb 2 жыл бұрын

Yeah of course ☺️

@mandharamandhara196 Жыл бұрын

I'm not getting output of link container .what I need to do?

@FredyNaranjo19 2 жыл бұрын

How can we make the navbar be responsive?

@amir4ever148 2 жыл бұрын

when adding product card last card coming under the last right hand card

@haneenpyari6195 Жыл бұрын

Hello sir g ..my 2nd producr file not creat nave bar .because nav.js and footer.js is not working ..why? Plz help mee

@laughwhy2641 Жыл бұрын

Can u tell , how many years of experience of development bro?

@jerichojuan1926 2 жыл бұрын

can do this using brackets? thanks in advance man!

@momoduaaliyah1443 2 жыл бұрын

When I make my JavaScript a comment the navbar still shows after I reload and I don't know why

@Sarah-nk4tt 2 жыл бұрын

Was any database used in this tutorial?

@samuelola6432 2 жыл бұрын

You doing a great job am samuel form Nigeria pls how can l get your source code file bcos and following your video for tutorial bcos l love your style of design

@ModernWeb 2 жыл бұрын

I am glad you liked the tutorial. You can find the source code in the description

@_borissvfx 2 жыл бұрын

I have a problem when i try to run it types This site can’t be reachedlocalhost refused to connect. Try: Checking the connection Checking the proxy and the firewall ERR_CONNECTION_REFUSED.Somebody help please!

@divineandcutearts15 2 жыл бұрын

Can u specify which tomcat version is suitable for this code

@bilala1915 Жыл бұрын

help me at 43:12 my button is moving with div when iam clicking next

@mandaniel8667 Жыл бұрын

I have a problem, my product container slides up and down when i scroll on them, like 10px or so, averything else stays in place how can i fix it? EDIT: i just realised that i had to add to the css element overflow-y: hidden;

@Azim-sx3mm 5 ай бұрын

Sir, my slider button left and right arrow is not working with js , can u please make me understand how to fix it

@peterokolie9408 Жыл бұрын

can i use product videos instead of images am build a website

@rodgeratkin Жыл бұрын

When I posted my nabar html to the java script file I had to remove all carriage returns, otherwise it gave errors at the end of each line.

@diazislami635 2 жыл бұрын

Thanks for the tutorial video, it really helps me to learn how to create a website and for a college assignment. I've made a little bit of change to the logo with my version. But, I have a little bit problem with the javascript when I created the navbar, it didn't work when I connected the javascript with the HTML by using the script tag. Can anyone help me to fix it, please?

@ModernWeb 2 жыл бұрын

Do you see any errors?

@diazislami635 2 жыл бұрын

@@ModernWeb Thanks for you respond Mr, I've checked the code many times, but i didn't see problem with my code, I wrote the code as you did on the video, but I only see is just the blank space with the red color in my code

@petespete4118 2 жыл бұрын

@@ModernWeb same here, the code does not seem to run when in a js file. is there anything that needs to be done after you paste the html code in the footer.innerHTML single quotes? once I move it to the js file i get all kinds of errors like "JSX expressions must have one parent element." and "unterminated string literal"

@avyaykhaire7187 2 жыл бұрын

@@petespete4118 I bet you must have used single quote ' and paste the html code inside it.Insted you have to use this symbol ` and put the code in it to make sure it works.Check that symbol must be below your Esc button on the keyboard.

@sadafamin8543 Жыл бұрын

@@ModernWeb yes

@Old_SDC 2 жыл бұрын

Where can I find the back-end development tutorials if they’re out yet? If not out yet how long? :D

@ModernWeb 2 жыл бұрын

You can check my channel's playlist section. You'll find ecom playlist there. Or here it is for your - kzfaq.info/sun/PLqm86YkewF6S45smPYeNv01aFFKWZSgYD

@manishlapy4714 2 жыл бұрын

can you tell me how pre-btn and next-btn in home.js file work and why you select them as array.

@ModernWeb 2 жыл бұрын

I selected that as an array using "querySelectorAll" method because our page might have more than product sliders each of them will have pre-btn and nxt-btn, so selecting them in an array will give me access to all btn so I can easily add events to them. Now we also had our product sliders in array, so I am just using forEach to loop through that array. The "item" param is the slider and "i" param is the index number of that slider, since product slider, pre btn and nxt btn all are in array of same length, it means if we access pre btn of 2 index, it will be of 2nd index product slider. Exactly this idea I used inside the loop to add click event to the buttons by accessing them using "i" param of forEach. Its easy if you know how array works in JS. Inside the forEach, the first thing I am doing is access the product slider's visible width excluding off screen part using item.getBoundingClientRect(), here item is the param of forEach which is sliders and "getBoundingClientRect()" will return the dimensions, but we are only interested in width. That's why on the next line I am storing width. So, once I got the width, the main idea how our slider work its just subtract /add screen width from the slideLeft value to make it slide. So that's what I am doing inside both btns click event. I am just adding or subtracting the slider's width from the slideLeft value. SlideLeft value basically store the left scrolled amount of element, so you'll change it manually it will make the element scroll. So I hope you understood this, if not let me know

@andy_0198 7 ай бұрын

Can you explain to me why there is a import nav.css in the home.css file? 👉👈

@premautubechannel1273 2 жыл бұрын

Need help in doing payment don't have credit cart

@vidyathakkar1374 2 жыл бұрын

Is the video blur or the problem is just with my laptop

@muhammadrizwan591 2 жыл бұрын

Hi sir at 1:09:13 when you replace the image slider class with product images it doesn't work...would you help... what to do

@f2k273 2 жыл бұрын

did your issue got resolved??? because i have the same issue

@stupidthinker-rb2lp Жыл бұрын

Could you get any solution of it??

@stupidthinker-rb2lp Жыл бұрын

@@f2k273 did you slove the issue

@darrenjosiah9246 Жыл бұрын

I fixed mine because of syntax. Here you go! const productImages = document.querySelectorAll(".product-images img"); const productImageSlide = document.querySelector(".image-slider"); let activeImageSlide = 0; productImages.forEach((item, i) => { item.addEventListener('click', () => { productImages[activeImageSlide].classList.remove('active'); item.classList.add('active'); productImageSlide.style.backgroundImage = `url('${item.src}')`; activeImageSlide = i; }) })

@zoebruwer3863 2 жыл бұрын

and also my search bar keeps placing below my logo. please help

@alifzaki5446 Жыл бұрын

Im new at this, how do I presize the cart and user PNG? Please help me

@antoniobalderas9345 2 жыл бұрын

Hello, sorry I have a question at minute 1:04:17 I made a mistake instead of putting "btn cart-btn" I put "btn card-btn" and at the time of making the css I only appreciate the wishlist button, could you tell me why this happens or because it affects that typing error, thanks (by the way I tried with several words and only with card that happened)

@ModernWeb 2 жыл бұрын

Sorry, I didn't get that. Can you tell one more time.

@antoniobalderas9345 2 жыл бұрын

@@ModernWeb Can I send you a video?

@ModernWeb 2 жыл бұрын

Sure you can send me the issue along with the code files ( use github or drive ) on mail.

@valentinkrizan2754 2 жыл бұрын

At 30:08 images are overlaping instead of being separeted. I reviewed the code multiple times but cant seem to find the error. Where do you think the problem is in the code?

@ModernWeb 2 жыл бұрын

If the cards are overlapping make sure you set cards position to relative and product containers position to relative too. And also make sure that container have display flex

@valentinkrizan2754 2 жыл бұрын

@@ModernWeb thank you so much! After 20 min trying to double check product cards and product containers positions and display I have finnaliy find the BUG :D I wrote".product.card" instead of ".product-card". :D

@rezarahman1782 2 жыл бұрын

Bro, in 33:45 min you have used (i) in the parameter. How it works? I mean how it gets the index number? I really don't understand this parameter thing.😑

@ravijai6101 2 жыл бұрын

Will it work for Android and Ios?

@tejbkarki 2 жыл бұрын

Yo myan 404 bug didn't fix for me I'm banging my head i have check each word's of code on server.js it's all good what you guy's think where should i look it ?

@amandeepsinghbains907 2 жыл бұрын

does this website contain payment gateway?

@varun__jindal Жыл бұрын

is this website will going to be responsive?

@abanifrancis3493 Жыл бұрын

Pls am having problem with the innerHTML Part mine keeps showing errors

@benjaminkhonye5337 2 жыл бұрын

Any way I can create a payment getaway on a website??

@prasum1997 2 жыл бұрын

I dont know all of these properties could you tell me abt this properties

@okibeisaiah967 2 жыл бұрын

pls the website is no mobile responsive, what can I do

@rohitreddysama6365 2 жыл бұрын

Hi sir, I did exactly as shown In the video but in the product container, images are displayed in a vertical manner. I am not getting a horizontal scroll bar and I am not able to use arrows for the images. Images are not scrolling in the left-right direction. I also tried using display: inline-block. Please help me solve this problem.

@sairajgsd8559 2 жыл бұрын

Bro try adding .product-card{ display: inline-block; } for the css file And also i have one problem mine have a horizontal scroll with extra white space. do you also have the same??

@rohitreddysama6365 2 жыл бұрын

@@sairajgsd8559 Bro I did the same, I am getting horizontal line but no scroll bar, the images are jumping into next line. I am not getting horizontal scroll for the images.

@sairajgsd8559 2 жыл бұрын

@@rohitreddysama6365 Bro i was working on this project since yesterday but the only think is, i dono js so i am skipping js part and i m doing my own codes only using html and css. I came to know that product sliders aren't done in html and css only using js. I am sorry to say but i can't help out you because mine codes are slightly modified due to the skipping of js codes... but this codding is pretty much sucking my head.. it's literally a head ache.... but i love to do that....idk y?

@sairajgsd8559 2 жыл бұрын

Hope so modern web could help