Skip to content
OverviewSolutions
32
Comments
92

Gwenaël Magnenat

@gmagnenatSwitzerland1,500 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,500
    @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,500
    @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 !

  • Dimma Joel•40
    @Dimma-Joel
    What are you most proud of, and what would you do differently next time?

    I'm most proud about working on the project without consulting external support.

    What I'd do differently next time is to improve my time management skill by finishing a project before it's deadline.

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

    The challenge I encountered was difficulty in deploying my projects to Vercel.

    I created a GitHub repo specifically for frontend mentor challenges and when I deployed my first project - which is this one - in the repo to vercel, it showed 'error'.

    I solved the problem by looking through other people's repo dedicated to frontend mentor challenges and saw how they deployed theirs, I then consulted ChatGPT for step by step process to deploy mine and walaa - problem was solved.

    It happened that I didn't specify the folder in the repo while deploying to vercel

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

    None, thanks.

    QR Code Component

    #accessibility#semantic-ui
    2
    Gwenaël Magnenat•1,500
    @gmagnenat

    Hi there, here are a few things I noticed in your code. All the comments above are valid some of mine will be repeating the same thing but maybe you can find some complementing tips in here.

    • Missing CSS Reset
      A modern CSS reset should be added at the top of the stylesheet. This helps avoid inconsistencies across different browsers. Consider using Andy Bell's or Josh Comeau's.

    • Card Component Sizing
      The card component currently uses a percentage for width (19%). When the screen width decreases, the content shrinks proportionally, which is not the right approach. Instead, use a max-width in rem so the card can shrink on smaller screens while stopping at a reasonable width on larger screens.

    • Margin Usage for Positioning
      Large margins should not be used to position elements. Flexbox is a better approach for centering the card on the screen. Example:

      body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    • Unitless Line-Height
      Line-height should be unitless to prevent unintended scaling issues. Instead of:

      line-height: 24px;

      Use:

      line-height: 1.5;

    More details can be found here.

    • Header Usage
      The <header> element is meant for repeated elements like navigation. Since it's not serving that role here, it is unnecessary. The image inside it can be placed directly within <main>.

    • Use of <section>
      <section> is used to define distinct parts of a larger component, usually with a heading. Since this is a single component, wrapping everything in a <section> is not needed. A simple <div> would be enough if a wrapper is necessary.

    Hope this helps! Let me know if you have any questions. Happy coding! 🚀

  • Gwenaël Magnenat•1,500
    @gmagnenat

    Hi, here is a review with some suggestions.

    • Use min-height: 100svh on the body to make sure the layout adapts properly when content grows.
    • There are no focusable elements on your solution. Since this is a blog preview card, the title should include a link to the full post.
    • The title has an interactive indication but is wrapped in a <p> tag. This should be a heading (<h2> or <h3>) with a link inside.
    • Avoid words like "picture" or "photo" in alt text. Screen readers already announce the element as an image. The main image here is decorative and should have an empty alt="".
    • A <main> landmark is missing. The card should be inside a <main> tag to help assistive technologies understand the page structure.
    • The profile image next to the author's name does not need alt text. Since this card is likely on a page with multiple blog previews, having alt text for each author's profile image would create too much redundancy.
    • A modern CSS reset is missing. Adding one will help with consistency across browsers. Look into resets from Andy Bell or Josh Comeau.
    • Do not change the root font size using percentages. This practice was historically used for easier rem calculations but causes accessibility issues. Users who increase their browser's default font size may experience unpredictable scaling.
    • Work mobile-first. The default layout should be for small screens, and a media query with min-width in rem should be used to adjust the layout for larger screens if needed.

    Let me know if you need further clarifications.

    Happy coding !

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

    Hi, congratulations on your work! I noticed a few areas that could be improved to enhance accessibility, maintainability, and usability.

    Accessibility Improvements

    • A <main> landmark is missing. This helps screen readers identify the primary content of the page. Make sure it wraps the main section of your document.
    • If there is no specific action required for the <form>, remove the action attribute to prevent unnecessary requests.
    • The autocomplete attribute should not be empty. Use meaningful values like "given-name", "family-name", and "email" to improve form usability and autofill functionality.
    • Inputs should be linked to their respective error messages using aria-describedby. This allows assistive technologies to associate input fields with error messages.
    • Errors should be populated dynamically and added to the DOM at validation time so that screen readers announce them properly.
    • <p> elements should not be placed inside <legend>. Instead, use plain text directly within <legend>.

    User Experience Enhancements

    • When a success message appears, users may still be at the bottom of the form and could miss it. Announce the message to screen readers using aria-live="polite" and scroll to the top programmatically to make it visible.

    CSS and Performance Considerations

    • Import fonts directly in your HTML file for better performance rather than relying on external stylesheets that load them later.
    • Avoid setting the default font size to 62.5%. This practice can cause accessibility issues. Read more about why this approach is not recommended here: Why you shouldn't use 62.5%.
    • Use rem for elements containing text rather than fixed pixel values. This allows layouts to scale properly if users modify their browser's default font size.
    • Avoid using px for width, height, and font sizes, as it prevents accessibility adjustments. Convert these values to rem.
    • Remove fixed pixel heights on inputs and instead use appropriate padding and font-size to keep them flexible.

    SCSS Organization and Maintainability

    • Be mindful of deeply nested selectors in your SCSS. Limit nesting to a maximum of two levels and prioritize low specificity. Increasing specificity unnecessarily can make stylesheets harder to debug, especially in larger projects.

    Testing and Final Checks

    • I highly recommend testing your solution with a screen reader. NVDA is a great option for Windows, and VoiceOver is available on Mac. You may notice elements being announced incorrectly, which will help improve your HTML for better accessibility.

    I hope this feedback helps improve your project! Let me know if you need any clarification.

    Happy coding! 🚀

  • Gwenaël Magnenat•1,500
    @gmagnenat

    Hi,

    Your project is well-structured and functional, but there are some improvements you can make to enhance its accessibility, maintainability, and best practices.

    HTML & Accessibility Improvements

    • Load stylesheet after Google Fonts Link your stylesheet after the Google Fonts link in your <head> to prevent a flash of unstyled text (FOUT).

    • Duplicate stylesheet link You have two links pointing to the same stylesheet in your <head>. Remove the duplicate to avoid unnecessary requests and potential conflicts.

    • Missing <main> landmark A <main> element should wrap the primary content of your page for better accessibility and screen reader navigation. This helps assistive technologies understand the structure of your page.

    • Use <button> vs <a> correctly Buttons should be used to trigger actions (e.g., submitting forms, opening modals), while links should be used for navigation to different pages. Use the correct element for each purpose.

    • Unnecessary <section> element A <section> should be used when it groups multiple related content blocks and includes a heading (e.g., <h2>). Since your content does not require this, a simple <div> is more appropriate.

    • Incorrect file path for stylesheet Your stylesheet is currently inside the /images folder. It’s better to place it in a /css folder or keep it at the root near your HTML file for better organization.

    CSS Best Practices

    • Missing modern CSS reset A CSS reset helps normalize styles across different browsers. Consider using Andy Bell’s or Josh Comeau’s modern reset for consistency in styling.

    • Avoid styling HTML elements directly Only apply global styles to HTML elements if they are part of a reset. Instead, use class-based styles to keep styles modular and reusable. This makes your styles more maintainable in larger projects.

    • Use rem in media queries Avoid using px in media queries since it does not respect users’ custom browser font sizes. Using rem improves accessibility and adaptability, especially for users who modify their browser’s default font size.

    These changes will improve your project’s accessibility, maintainability, and scalability. Following these best practices will also make your codebase more structured and easier to work with in the long run. Let me know if you need clarification or further guidance!

    Happy coding! 🚀

    Marked as helpful
View more comments