Skip to content
OverviewSolutions
17
Comments
3
Kairung Vangmanaw
@VangmanawKairung

All comments

  • Kairung Vangmanaw•230
    @VangmanawKairungPosted 7 days ago

    I would suggest replacing non-semantic <div> elements with more meaningful tags, such as using <header> for the card's header section and <nav> for the social links to better convey the structure of the content.

    For accessibility improvements, adding aria-labels to the links in the card-links section would help screen readers understand their purpose, and providing more descriptive alt text for the avatar image would enhance usability for visually impaired users.

    Structurally, wrapping the entire card in a <section> element with a clear aria-labelledby referencing the name or title would improve the hierarchy and ensure better support for assistive technologies.

    Thank for sharing!

    0
  • Jye Harry•70
    @jyeharrySubmitted 10 days ago
    What are you most proud of, and what would you do differently next time?

    Using clamp() for responsive typography without media queries so that the text wasn't squished on mobile screens.

    I also gave more thought to accessibility.

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

    N/A

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

    To come up with the dynamic value for clamp() (the second value), I divided the mobile font size by the mobile screen width. So for example, the body text had to be 14px on mobile and the mobile screen size is 375px. So 14 / 375 = 0.0373. So the dynamic value I used in clamp() was 3.75vw. I'm not sure if this is the best way to come up with the value but it worked well enough for all the different text presets in this challenge. However I'd like to know if there are better practices for determining the dynamic clamp value.

    I'd also like my BEM class names to be reviewed.

    Responsive card and fluid typography with clamp

    1
    Kairung Vangmanaw•230
    @VangmanawKairungPosted 7 days ago

    This work is incredibly close to the design, and your code is well-structured, demonstrating a strong adherence to semantic principles and accessibility standards. The use of proper tags and attributes enhances both readability and usability, making it an excellent example of thoughtful coding. I’m particularly impressed with your reset CSS—it effectively ensures consistency across different browsers and creates a solid foundation for styling. Thank you for sharing such an excellent and inspiring piece of work!

    0
  • Kairung Vangmanaw•230
    @VangmanawKairungPosted 7 days ago

    The project turned out well, with the card layout closely matching the design specifications. The additional footer, while not part of the original design, complements the overall structure and adds a personal touch. Although the result may differ slightly due to this addition, the card itself is an accurate representation of the design and effectively showcases the intended visual and functional elements. Thank you for sharing this excellent work!

    Marked as helpful
    1