Skip to content
Submitted almost 3 years ago

Designed product preview using html css bootstrap 4

bootstrap
Rakshith J•240
@rakshithjodukallu
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Give me valuable comments to my work.

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾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,wght@9..144,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,wght@9..144,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
  • Hamsalekha•90
    @LekhaKumar

    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

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