Responsive product-preview card challange(frontendmentor).

Table of Contents:

• Responsive product-preview card challange(frontendmentor).
  • Table of Contents:
  • About this Project:
    • Screenshots of my solution:
    • Live site link:
  • Languages used:
  • How I did this:
  • For whom this project is for:
  • Things that can be Practiced through this project:
  • Some tips from my side:
  • Note:

About this Project:

This is a solution to the Product-preview card challenge on Frontend Mentor.

Screenshots of my solution:

• Desktop-version:

• Mobile-Version:

Live site link:

product-previw-card

Languages used:

1. HTML
2. CSS

How I did this:

• I did this challage along with a video of kevin powell , who is a great web developer, "madly in love with css" as he says.If you want to do yourself, it's completely ok. but, I would suggest you to go and check the video after you're done with the project. because, He gives a lot of tips in the video.

For whom this project is for:

-people who know basic html tags and css properties like grid,flex,box-model,etc and practice them in real-life scenario. (of course, this project can be done without flex/grid, but it would be difficult to do it just using margins and paddings imo.)

Things that can be Practiced through this project:

• Responsive design
• A use case of <picture> tag.
• How to center things using grid/flex, also you will get a chance revise confusing properties like align-items and align-content.(refer to "css-tricks.com" for better understanding of grid-properties). -and many more skills.....

Some tips from my side:

• Try to do mobile-design first as it helps to add complexity later.
• if not necessary, please don't set fixed heights and widths in the beginning, as it makes things harder to make responsive and it might cause overflow issues also.
• if you need to set heights and widths (eg.when centering content inside container using flex or grid), try to set them using percentages(%) or vw/vh units.
• for spacing text-content of product card, instead of using margin/padding ,use flex / grid with "gap" property.
• to limit width of product-card, use "max-width" property.
• <picture> tag can be useful to change product-image at specified breakpoint using media attribute, which is simillar to @media queries.

Note:

• please don't make any changes in my source code. if you want, you can clone this repositary and then make changes.
• If you have any suggestions regarding this project, let me know at "[email protected]".

Go to top

🙏Thank you🙏