Four Card Feature w/Grid, Flex

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 19 days ago

  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

  0