Skip to content
OverviewSolutions
32
Comments
93

Gwenaël Magnenat

@gmagnenatSwitzerland1,520 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

Latest comments

  • Gwenaël Magnenat•1,520
    @gmagnenatPosted about 1 month ago

    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
    0
  • P
    Austin L Layman•120
    @EnkiEnki77Submitted about 1 month ago
    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,520
    @gmagnenatPosted about 1 month ago

    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 !

    0
  • Gwenaël Magnenat•1,520
    @gmagnenatPosted about 1 month ago

    Hi, here are a few things I noticed in your project.

    • The main container lacks a max-width, causing it to stretch too wide on large screens. This can make content harder to read. Add a max-width to keep the layout balanced and visually appealing.

    • The page is missing a <form> element to wrap the relevant input fields and buttons. Forms provide better structure and improve usability, making it easier for assistive technologies to navigate and process user input.

    • The entire page has cursor: pointer, which is misleading. The pointer cursor should only be applied to interactive elements like buttons, links, and inputs.

    • Error messages are not announced to screen readers, making it difficult for visually impaired users to understand what went wrong.

      • Use aria-describedby on input fields to associate errors with their corresponding fields, ensuring users get proper feedback when something is incorrect.

    • The tip selection options are currently just buttons, but they should be radio inputs instead.

      • Using <input type="radio"> improves semantics and accessibility, allowing users to navigate with the keyboard and hear the selected option via screen readers.
      • These options can have cursor: pointer, as they are interactive elements.

    • Missing a modern CSS reset. Add a reset file to remove browser inconsistencies. Consider using Andy Bell’s or Josh Comeau’s.

    • Avoid styling HTML elements directly. Instead of applying styles to h1, p, or input globally, use class names for better maintainability and to prevent unwanted styling conflicts.

    • Font sizes should use rem instead of pixels. This allows text to scale properly when users adjust their browser font settings.

    • Use rem for media queries instead of pixels so the layout adapts correctly to user preferences.

    • Only one min-width media query is likely needed. Start with a mobile-first approach and add a min-width query for larger screens. This keeps the code simpler and more efficient.

    I hope you find something useful in this list to help you refactor your solution.

    Happy coding!

    Marked as helpful
    2
  • Dimma Joel•20
    @Dimma-JoelSubmitted about 2 months ago
    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,520
    @gmagnenatPosted about 1 month ago

    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! 🚀

    0
  • Gwenaël Magnenat•1,520
    @gmagnenatPosted about 2 months ago

    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
    0
  • Gwenaël Magnenat•1,520
    @gmagnenatPosted about 2 months ago

    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! 🚀

    0
View more comments