Skip to content
Submitted 10 months ago

Four Card Feature w/Grid, Flex

P
Igor•290
@whiteriver-dev
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I made it look good in the end, but next time I'm going to start with the mobile layout first as it works better that way

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

Found it slightly challenging working with grid over flex. Realised I just had to make more rows to fit the cards properly

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

Using rem units for more flexibility. If figma files are in px, how do I interpret them into rem units. Also, code efficiency tips are always appreciated

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi, @whiteriver-dev

    I checked out your solution and I have some thoughts:

    • Try Mobile-First Design: Starting with the mobile layout first is a great approach, known as mobile-first design. It prioritizes smaller screens, ensuring that your design scales well to larger ones. I’d recommend doing a bit of research on it to understand the benefits better.
    • Improving Mobile Viewports: It seems the page layout doesn’t fully adapt to mobile viewports (a viewport is the visible area of a webpage on a screen). If you’re considering a code rewrite, try removing grid-template-column from .card-parent initially, as well as any grid-column and grid-row settings on the child elements. Then, apply these styles in a media query specifically for desktop viewports. This technique can help you implement mobile-first design more effectively.
    • Use Semantic HTML Tags: Try using semantic HTML tags instead of relying mainly on div elements. Semantic tags convey meaning to both the browser and developers, improving accessibility and readability. (For example, use <header>, <main>, <section>, etc., based on the content.)
    • Meaningful Class Names: Consider using more descriptive class names in your CSS, making it easier to understand and maintain. Although the challenge provides static data, it’s useful to plan for dynamic content. This practice becomes essential in professional environments. Researching CSS naming conventions, such as BEM (Block Element Modifier), can give you some inspiration for structuring your classes.

    Hope this helps!

    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