Skip to content
Submitted about 2 years ago

Designed product preview using html css bootstrap 4

Rakshith J•240
@rakshithjodukallu
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

Solution retrospective

Give me valuable comments to my work.

Community feedback

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

    👾Hello Rakshith J, Congratulations on completing this challenge!

    I like the work you’ve done here, your solution is almost complete. I’ve some suggestion for you to improve the code/design:

    1.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');

    2.To clean your code and use a shortcut to place the images mobile + desktop without need of any media query, use the tag <picture> instead of two <img> wrapped in a div or using background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Rakshith J•240
    @rakshithjodukalluPosted about 2 years ago

    @correlucas Thanks for your suggestion mate.

    1
  • Hamsalekha•90
    @LekhaKumarPosted about 2 years ago

    Good day, Rakshith. Well done with your design. As there are some HTML issues, as shown in the report, you can avoid them using Bootstrap card design.

    Since you are using Bootstrap, you can use the card-body class to design the preview card component. Using the component, you don't have to transform the property from CSS to avoid the HTML issue. It is my suggestion.

    You can change the card property into a row flex-direction for the desktop view. It is easier, and through this, we can avoid minor issues as well.

    Thank you, and all the best!

    Marked as helpful
    0
    Rakshith J•240
    @rakshithjodukalluPosted about 2 years ago

    @LekhaKumar Thanks for your suggestion.

    1

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