Skip to content
Submitted about 2 years ago

Product-preview-card

huzaifa•430
@HuzaifaMateen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Raja Junaid Farooq•390
    @Raja-JunaidPosted about 2 years ago

    Hello Huzaifa! Congratulation on completing this challenge. I have some tips for you:

    (1)- Keep the webpage neat and clean

    (2)- Keep your work as decent as possible when creating a webpage.

    (3)- Never forget to place comments in your code.

    (4)- First make the main container have full access to your code.

    (5)- Never Give Up (this tip very helpful)

    I hope this helps you

    Keep Coding and Keep Practicing.

    HAPPY CODING!

    Marked as helpful
    0
    huzaifa•430
    @HuzaifaMateenPosted about 2 years ago

    @Raja-Junaid thanks for the advice

    1
    Raja Junaid Farooq•390
    @Raja-JunaidPosted about 2 years ago

    @HuzaifaMateen Welcome and also Mark as Helpful at the end of this feedback. I

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @HuzaifaMateen, Congratulations on completing this challenge!

    Your solution its almost done and I’ve some tips to help you to improve it:

    1.A better way to work this solution image, the product image is by using <picture> to wrap it on the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.

    Here’s the documentation and the guide to use this tag: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    2.Add the correct font for the main heading of this component. First of all you need to choose the font using Google Fonts https://fonts.google.com/ and import the code to drop on your CSS/HTML:

    This is the font for the H1: font-family: 'Fraunces', serif;. There's two ways to import the font:

    • Using the html and inserting it to the <head>
    <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap" rel="stylesheet">
</head>
    • Using the CSS and adding to the first line of the CSS sheet:

    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap');

    👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

    ✌️ I hope this helps you and happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord