Submitted about 2 months ago

Responsive product page using Grid

LiamHilton•20

@LiamHilton

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

#I used this opportunity to work on my current HTML & CSS knowledge to start the project myself before searching for inspiration on techniques and good work practices which led me to a tutorial by Kevin Powell on YouTube. This enabled me to tune in to aspects i hadn't thought of and especially building on having a ::root in my CSS to define important factors like colours, fonts and repeated actions to increase workflow.

Furthermore improving on my approach when looking at a design and thinking clearly what i need to do to make everything flow efficiently. I found Josh Comeau’s CSS reset to be incredibly enlighting on what i can do to build my own templates in CSS to improve consistency in style.
With this specific task i found that a Display of grid was most efficient as i started on a responive mobile layout. This then allowed me to target my product page at min-width:600px and bring in grid-template-column which made the image and product content side by side with only minor changes made after for desktop.
In general a great task to build a efficient workflow.

Community feedback

Steven Stroud•11,910
@StroudyPosted about 2 months ago
Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

@media (min-width: 600px)

For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻
Marked as helpful
1

Please log in to post a comment

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