Skip to content
OverviewSolutions
32
Comments
96

Gwenaël Magnenat

@gmagnenatSwitzerland1,540 points

As a web developer and project manager, I combine my technical skills and leadership abilities to deliver quality web solutions for clients projects. With 5+ years of experience in web development and digital project management, I'm looking for new work oportunities.

I’m currently learning...

Accessibility best practices, CSS maintainability, Mentoring

Latest solutions

View more solutions

Latest comments

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi congrats for giving this challenge a try. I'm afraid it needs a bit of work to make an accessible and production ready solution. This component uses a common pattern called the "tabs pattern" you can read more about it here. https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

    There are quite some semantic roles and properties to add to make this right.

    Also, you shouldn't hide the outline and focus indicator on interactive elements such as links or button. You can style these if you want but they are essential to show where the focus is for users who are not clicking around with a mouse.

    Try to use your solution with your keyboard only, you will see what I mean. Try to access the different stats card without using your mouse.

    Can you spot the problem?

    Marked as helpful
  • Nathan Ray•320
    @NathanRayM
    What are you most proud of, and what would you do differently next time?

    I was happy that I could finish this one fairly quickly without many issues.

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

    My area of opportunity with this as well as others are media queries. I'm still learning them and will improve as I go.

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

    Any feedback is helpful.

    Social links profile using HTML and CSS

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Good job on the solution! Here are some important things to improve:

    Does the solution include semantic HTML?

    • This is a list of links, so it would be better to use a <ul> (unordered list) for proper semantic structure. This makes it easier for screen readers to understand the number of items and improves navigation.

    Is it accessible, and what improvements could be made?

    • Avoid setting font-size in pixels on the <html> tag. Let the browser apply its default size (usually 16px) so users who need larger text can adjust it easily. Read this article to understand that issue. Why you shouldn't use pixels for font-size
    • Remove min-width: 100vw on the <body>. This causes overflow when zooming in because it includes the width of the scrollbar. The body naturally takes 100% width, so no need for extra styling.
    • Social links currently use a fixed height. Using padding instead would make them more flexible and avoid overflow if the text size changes.

    Does the layout look good on a range of screen sizes?

    • The height on your container is fixed. It should be flexible so it grows with the content. If you add more links, the height should adapt automatically.
    • The width and height on your image container are not necessary. Let the image size be determined naturally to prevent layout issues.

    Is the code well-structured, readable, and reusable?

    • Use a modern CSS reset to start your styles from a clean slate. This reduces inconsistencies between browsers.
    • There is strange formatting in your CSS. Consider using a tool like Prettier to clean it up and make it more readable.
    • The negative margin on your .intro-container is not needed. This is a workaround to move it closer to the image. If you remove the forced height on the image container, you can remove this margin, and it will look cleaner.

    Does the solution differ considerably from the design?

    • The design looks mostly fine, but there are structural and CSS issues that make it less maintainable and harder to scale.

    Let me know if you have any questions on these points.

    Happy coding !

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Good job on the solution! Here are some important things to improve:

    Does the solution include semantic HTML?

    • Navigation links are not inside a list. Wrapping them in a <ul> (unordered list) would be better for screen readers. This way, users know exactly how many links are there, and it helps with navigation. Lists also provide a clear structure that makes the HTML easier to understand.

    Is it accessible, and what improvements could be made?

    • The alt text for the author's name is confusing. It should describe the image or be left empty (alt="") if it's only decorative.
    • Use min-height: 100vh instead of height: 100vh. Right now, content gets cut off if the text size is increased.
    • Links open with target="_blank", but there is no indication for screen readers. It is a good practice to add visually hidden text like " (opens in a new tab)" so users are aware of it.

    Does the layout look good on a range of screen sizes?

    • Media queries use pixels. Change to em or rem so the layout adapts better if the user increases their font size.
    • In this specific case, a media query is not actually required since the layout is simple and scales well without it. Removing it can reduce unnecessary code.

    Is the code well-structured, readable, and reusable?

    • The code is mostly clean, but navigation links should be wrapped in a list to be more organized.

    Does the solution differ considerably from the design?

    • The design looks good, but the HTML structure and responsive units need some improvements.

    I hope you find something useful in this list and it helps you for your future challenges. Let me know if you have any questions.

    Happy coding !

  • Alexander Romero•260
    @AlexanderTejedor
    What challenges did you encounter, and how did you overcome them?

    I liked it, it's a very interesting challenge because I had to use react states to get the expected results, such as modifying the css values ​​with TailwindCSS just when the onClick event was handled.

    Article preview component Solution

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on taking the challenge !

    I noticed something that could greatly improve the accessibility of your solution.

    You need to test all your solutions with your keyboard. Currently the share button which is the only element here that need to take focus isn't accessible because it's just and image.

    Button will naturally take focus, you can style it like you want and add your image in it.

    You'll also need to give indication to screen readers about what is going on when that button is clicked. You'll need to move the focus on the share icons.

    You can maybe check the html dialog element for this as it takes the focus when it's opened and has already built in function such as pressing "escape key" to close.

    Your social icons should also have an appropriate HTML element as they are ment to be interactive, not just decorative images.

    Can you think of something better?

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    here are a few things I noticed.

    • Alt Text: The alt text should be more descriptive. Instead of something vague, use "QR Code to frontendmentor.io." This tells users what the image is and where it leads.
    • Simplifying HTML: The image doesn’t need to be wrapped in a <div>. Removing unnecessary containers makes the code cleaner and easier to style.
    • Viewport Height Issues: Instead of height: 100vh, use min-height: 100vh. When zooming in at 200%, content expands, and a fixed height can cause it to be cut off at the top and bottom. Using min-height allows the content to grow without being constrained.
    • Image Width: There’s no need to set a specific width on the image since it is inside the card. Instead, allow it to take up 100% of the card’s width and control spacing by adding padding to the card itself.

    I hope you find something useful here to refactor your code.

    Have fun !

    Marked as helpful
  • Austin L Layman•120
    @EnkiEnki77
    What are you most proud of, and what would you do differently next time?

    Figured out I could style text more efficiently by turning the "text presets" in the style guide provided in the figma design into individual classes and then just putting the class onto each text element that needs it.

    Not much I would change, I think my way of going about things was pretty clean.

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

    Made things more DRY by setting up text preset classes instead of declaring text styles for each individual text element

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

    None

    Blog card component with vanilla html/css

    2
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    Great job on your work so far! It looks pretty good.

    Here are a few things I noticed.

    1. Use rem for min-width instead of pixels. Pixels are fixed units and don’t respect user preferences when they increase their browser’s default font size. Using rem ensures better accessibility. More on this here: Why you shouldn't use pixels for font-size.

    2. Heading structure: You correctly placed the <h1> first, which is great. However, since this is a blog preview card component that will appear in a grid with others, the title should likely be a lower heading level (e.g., <h2> or <h3>). If you still want an <h1>, consider making it visually hidden for screen reader users.

    3. The blog title needs to be a link. Since this is a preview, the heading should be wrapped in an <a> tag leading to the full blog post:

      <h3><a href="full-post-url">Blog Title</a></h3>

      This improves navigation and usability.

    4. Alt text improvement: Avoid using words like "image" or "picture" in alt attributes, as screen readers already announce them as images. If the image is purely decorative, leave alt="" so it is skipped. Learn more here: How to write good alt text.

    5. Missing a modern CSS reset. Adding a reset at the start of your stylesheet improves consistency across browsers. Check out:

    6. An active/hover state is missing. Adding styles for :hover, :focus, and :active states improves interactivity. To go further, you can make the whole card focusable and clickable by expanding the clickable area of the link using a pseudo-element. Here’s an example:

      .card a::after {
  content: "";
  position: absolute;
  inset: 0;
}

      This is a great trick to learn for improving usability.

    I can see that you already got some experience but I hope you find something useful in here to help you refactor your solution.

    Have fun !

View more comments