Wednesday, January 13, 2021

Responsive Product Cards | With Quick Popup View - Using HTML, CSS & Javascript



Description


Hello everyone! In this video, you are going to learn how to design Responsive e-commerce product cards with quick popup views using HTML, CSS, and Vanilla Javascript. The product card includes the product name, product price, and quick popup view button. The product popup view card includes product name, description, product price, add cart button, add to wishlist button, and popup card close button. So this video will be helpful for you to get an idea about how to design a quick popup view for an e-commerce website. Let's see how to design this e-commerce product card with a quick popup view.


First, create the index.html file and the style.css file. After you created these two files, Then link the style.css file and link the font awesome libraries in between <head></head> tags to the index.html file. Then start the HTML part of the product card in the index.html file as you can see in the video. After the HTML part of the product card is complete, then go to the style.css file and do the styling part of the product card as you can see in the video. After the styling part of the product card is complete, then go to the index.html file for the HTML part of the product card quick popup view. After complete the HTML part of the quick popup view, then go to the style.css file to the styling part of the quick popup view. Complete it as you can see in the video. After styling of the popup view is complete, then go back to the index.html file to the javascript part of the product card and the quick popup view. In the index.html file before the body close tag open <script></script> tags. Then complete the javascript part of the product card and the quick popup view as you can see in the video. So that's all, Hope this video will be helpful to design a responsive quick popup view for an e-commerce product card using HTML, CSS, and Vanilla Javascript.



All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.


Source Codes


index.html



style.css



Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

  1. Thanks guruji! But will you teach java.

    ReplyDelete
  2. Good one. I want to make this into a slider with same features and more no of cards. How can I do that?

    ReplyDelete
  3. You are truly an amazing and Inspiration for my journey to coding. I love your work. Thank you for all you are doing.

    ReplyDelete
  4. Well hello there! well when i adjust everything, it makes padding-top to much if you know what I mean. Well, hope you fix it.

    ReplyDelete

Whatsapp Button works on Mobile Device only