Submitted about 2 months ago

Responsive Four Card Feature using CSS Grid & Flexbox

Sunay Dagar•120

@suzzy-dszy

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Particularly proud of being able to apply BEM methodology effectively to make styling (in particular nesting) using SCSS a more straightforward process.
Using Semantic HTML tags to define web-page structure.

What challenges did you encounter, and how did you overcome them?

Coming up with the required desktop layout was a bit of a challenge, I couldn't figure out how to get the two center cards to be in the required position using only grid. I therefore used a mixture of both CSS Grid & flexbox to achieve the required look.
The width of the cards were too wide on larger screens, and reducing the size of the card itself would mess up the layout/look of the cards. I realized soon enough the width of the card container was wide due to the text inside being a single straight line. Thus I limited the width using ch unit instead, at different breakpoints, to achieve the required look while keeping the cards of similar size and positioning.

What specific areas of your project would you like help with?

I feel like I kind of hacked😎 my way through when it came to the desktop design. I used a combination of Flexbox and Grid in order to get the layout required. Is there truly no way to do it using purely CSS grid or perhaps some other way unbeknownst to me?🤔
If there is anything i could do to make my HTML code more semantic perhaps, or improve on accessibility, any help would be much appreciated. 🙏
This is my second time using SASS, so any advice on file structure, code structure, cool tips & tricks, etc. are highly appreciated 😄🙏.

-The final Layout closely resembles what's required, but falls just a bit short, any suggestions on what changes i should make would be much appreciated.

Community feedback

Steven Stroud•11,910
@StroudyPosted about 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

I think you could benefit from a plugin on VS code called Prettier, It will format your code make it more easily readable.

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" />

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

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.

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
1
Sunay Dagar•120
@suzzy-dszyPosted about 2 months ago
@Stroudy Thank you for the advice, I do use the Prettier extension and it does seem to be working just fine for me, and thank you for the tips one SEO and responsiveness. 😄🙏
1
Steven Stroud•11,910
@StroudyPosted about 2 months ago
Hey @suzzy-dszy, You use prettier for HTML? Are you sure it is working properly? You will be able to tell, On VS code bottom right there is a bar will say prettier, Does it have 3 ticks and say successfully formatted?
0
Sunay Dagar•120
@suzzy-dszyPosted about 2 months ago
@Stroudy Yes, i do use prettier for formatting my HTML as well as my CSS, my default formatter is also set to the Prettier Code formatter, and I also have the 'format on save' option ticked on. Also did you mean two ticks?(One tick on top of the other?)

Just to make sure I re-installed prettier and ran it using quick launch to force format my document, and everything seems to be the same. The ticks in the bottom bar are shown, and even the output tab tells me that "Formatting completed in (x) ms."
1
Steven Stroud•11,910
@StroudyPosted about 2 months ago
Hey @suzzy-dszy, Unsure your uploaded code seems to be very indented to mine, I'm not sure why, If its working its working, I have no idea. Sorry dude 😁
0

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