Skip to content
OverviewSolutions
3
Comments
3
P
Erics
@EricS02

All comments

  • Erics•40
    @EricS02Posted about 2 months ago

    Great job with the project Lance!

    Your image styling repeats multiple times for different articles (.article-1, .article-2, etc.). You can simplify this by combining the shared properties.

    article .info > img { width: 1.8rem; height: 1.8rem; border-radius: 2rem; }

    .article-1 .info > img { border: 2px solid hsl(263, 63%, 64%); }

    .article-2 .info > img { border: 2px solid hsl(0, 0%, 81%); }

    DRY Principle (Don't Repeat Yourself) with Flexbox: You use display: flex; flex-direction: column; gap: 1rem; in almost every article. Move these common properties to a global article selector and only override unique styles as needed.

    article { display: flex; flex-direction: column; gap: 1rem; }

    0
  • Megha S Patil•100
    @meghaspatil1Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Use of flex

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

    arranging cards into mobile view, then got idea of combing to cards as flex

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

    in flex

    Responsive page experience using flex

    1
    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
  • Erics•40
    @EricS02Posted 2 months ago

    great responsiveness and design, only slight suggestion is padding for text could be better

    0