Designed product preview using html css bootstrap 4
Design comparison
Solution retrospective
Give me valuable comments to my work.
Community feedback
- @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 usingbackground-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 devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful0@rakshithjodukalluPosted about 2 years ago@correlucas Thanks for your suggestion mate.
1 - Using the html and inserting it to the
- @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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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