Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-col-card-preview with HTML and CSS by R3Aria

@R3Aria

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I have improved from the last time I did this on a different account, the only thing that I would do differently is to try harder to find a way to get the mobile layout to work.

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

Getting the mobile layout to apply to the website, I wasn't able to fix it.

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

If someone can review the code and help me to implement the mobile design, that would be great, I tried using a flexbox and that didn't work so I used a grid.

Community feedback

@TedJenkler

Posted

Hi @R3Aria,

Nice project! It looks great overall. I noticed that you’re having some difficulties with the mobile layout.

The reason you’re having trouble is that "it’s like trying to build a tower by starting on the 100th floor instead of the ground up." Always start with a mobile-first approach and watch how the site becomes responsive more naturally as you scale up.

Here are a few best practices that might help:

Use Chrome DevTools: It’s crucial for testing your design across various screen sizes. Design for mobile first, then scale up using rem or % values. Avoid setting fixed widths and heights; instead, use max-width or min-width to ensure your design is responsive.

Responsive Design: Typically, you don’t need to set fixed heights. Instead, use margin and padding to achieve a responsive layout.

I recommend checking out Kevin Powell on YouTube—he’s excellent for learning CSS and will help you become a master in no time.

I hope this feedback helps!

Best, Teodor

Marked as helpful

1

@R3Aria

Posted

@TedJenkler Thanks for the advice, I'll try to implement it in the next set of challenges I do.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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