Hello, Today in this article, we'll learn to create an e-commerce website using HTML, CSS and JS. This is a part of full stack e-commerce website. ...
For further actions, you may consider blocking this person and/or reporting abuse
Cool stuff but some of the practices shown are not the best ones. Example you are using '@import' inside a CSS file. Which is not that good for performance. In simple HTML, CSS and JS site, its better if you have multiple CSS being request using the traditional link href method, especially if your host is http2 ready.
Also, HTML being handled in JS. That also is not the best separation of concerns. I know, in frameworks/libraries like React for example you write HTML (in React's case. JSX) inside JS but those apps are built like that, that the state builds the UI and you need to tie up really close the UI and components with the state for the app to work as expected.
On this scenario we dont have this kind of requirement.
Not saying it does not work. It works and it works well. Is it a good thing to mix technologies though like this? Probably not.
Just some personal opinions. Hope on the next articles in the series you will improve these suggestions.
Thanks for your comment. I'll surely follow your advice for better performance โบ๏ธ
Regarding the separation between js and html, I'm wondering how you would handle dynamical loading of products from, e.g., a CMS, and creating respective product cards without using some combination of js and html... Do you have any idea regarding this? In react it is straightforward, due to the mixing of html and js world.
Thanks in advance for any tip :)
Thanks for sharing๐.
Thanksโบ๏ธ
Nice article. I have a suggestion when you style in css. You should restrict style use global tag like "a" tag, "img" tag because when the css read your file it will read from right to left. Example: That case " .collection p ". It will style all your "p" tag after that it have selected the "p" tag in .collection class. It is a option for practice performance. Again Nice article!
Thanks for tellingโบ๏ธ
i really appriciate you. i am learning website making for self interest.i impresed your style of communication. my cared are the declinned for patron payment any other way to donate ple tell me, i want more learn from here. i completed 50% commerce website
please support me to learn further thanks
I am glad you liked the tutorial and actually following it. Its really gives me confidence. I don't know why patreon is blocking you. But if want you can donate me on paypal
Why you're create some template using js?
It's not ok for seo, this saves a couple of lines of html code, but the browser needs to parse the js additionally, which does not have a very positive effect on performance and it doesn't make much sense
Oh! I really didn't knew about it. Thanks for telling โบ๏ธ
Thank you for your guide. A properly set up e-commerce website can bring you a lot of income. Let me recommend the article about e-commerce customization:
blog.codeharbor.dev/2022/11/16/the...
You need to learn about flexbox (and css grid). You'll thank me later.
I know about flex boxand css grid. What happen? Did I messed up somewhere๐
Haha yeah you should not be using top: 50%, translate(-50%)... use flexbox instead
Yeah of course there are multiple ways to centre a div.
there are but the hack you used isn't really great. Flexbox is simply the best and most standard way today.
The final UI looks nice. Could be nice to see a CSS pattern such as BEM, there're cool stuff like grid.
Willing for the integration of the mobile responsive version.
Also, I'd like to warn our dear newbie readers to reproduce this only in order to practice writing code -- for CSS basically. Rely on proven patterns, proven libraries and frameworks, follow good practices, start from building your state, question the CI/CD, SEO basics; to sum up: give attention to the main picture of your e-commerce project by relying on already proven practices.
Thank you so much for sharing.
Projeto muito bom, obrigado por compartilhar
Thanksโบ๏ธ
nice:)
Very thank you to youโ
Muito bom o seu conteรบdo, vou seguir aqui.
Very nice!
Thanks โบ๏ธ
thanks for the clarification....
Excited to follow this tutorial and create one for myself! Just asking, are you going to make it a completely functional e-commerce website?
Yes I will make it functional. But it is not going to be like amazon because amazon has lots of lots of features๐
Amazing work
Thanksโบ๏ธ
Nice work ๐
Please sir can you make the resposive part of this your ecomerce website, i will be very happy if you do that.
Great work. But like others have mention, I doubt if your page is responsive. But I did learn a great deak from your article. Kudos!
Much appreciation for sharing this ๐
is it okay to keep all the files inside pubic folder ? doesn't that affect any security protocol !
I don't think so because our each files inside public folder are static site. And we will manage the data with server.
Regarding the separation between js and html
Nice Share, and could you add purchase via whatsapp button?
How do I add background image
Please ๐ how do I add background-image (url)_
Please I have problem putting my header
It's not aligning