Responsive page experience using flex

Community feedback

• 

  P

  Erics•40

  @EricS02Posted about 2 months ago

  Hello Mega S Patil!

  Great job completing the challenge!

  Consider using more semantic HTML tags to improve structure and accessibility. For example, use <header> for the title section and <article> for each card:

  <header class="title"> ... </header> <article class="card Supervisor"> ... </article>

  The alt text for images should be more descriptive. Rather than just repeating the card title (e.g., “Supervisor”), provide meaningful descriptions for better accessibility.

  The class names (e.g., Supervisor, Builder, Karma) should follow a consistent naming convention such as BEM (Block Element Modifier). This could prevent future conflicts and make the code more scalable.

  You could improve the layout by making better use of Flexbox. The current structure of .flex1 and .flex2 could be simplified. For example, wrap the cards in one container and use flex-wrap: wrap to handle responsiveness, instead of nesting multiple flex containers:

  <div class="cards-container"> <div class="card card--supervisor"></div> <div class="card card--team-builder"></div> <div class="card card--karma"></div> <div class="card card--calculator"></div> </div>

  It might be helpful to explicitly include media queries to ensure the design remains responsive on smaller screens. For example, stack cards vertically on smaller screens.

  @media (max-width: 600px) { .cards-container { grid-template-columns: 1fr; /* One column on mobile */ } }

  Well done and good luck in the next challenge!

  0