Skip to content
OverviewSolutions
20
Comments
24
P

Dave Quah

@MilleusSingapore650 points

My name is Dave and I'm a software Dave-loper (pun intended) from Singapore 🇸🇬. I enjoy front-end development. I love coding with CSS, experimenting with CSS animations and exploring upcoming web technologies such as new CSS properties and browser APIs.

I’m currently learning...

CUBE CSS, Svelte and web accessibility.

Latest solutions

View more solutions

Latest comments

  • JarodT77•10
    @JarodT77
    What are you most proud of, and what would you do differently next time?

    I am proud to have been able to carry out the project with the knowledge that I was able to acquire thanks to the internet but also to the community. what I would like next time and on other projects is to be faster

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

    The difficulties I encountered were the box sizing problem and the responsive side. As you can see my project is not exactly the same as the solution but I did everything possible to get as close as possible.

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

    I look for help in everything related to frontend I'm just starting out so I want to assimilate as much knowledge as possible and carry out as many projects as possible to improve myself

    QR Code Component

    #accessibility#cube-css
    1
    P
    Dave Quah•650
    @Milleus

    Hi there,

    Good first attempt at the challenge. To improve your solution, I would recommend learning and applying CSS Flexbox or CSS Grid techniques. These are extremely useful for aligning content.

    Here are a couple of games that you could play to test out what you've learnt as well:

    Happy coding :)

  • P
    Dave Quah•650
    @Milleus

    Greetings! 👋 Congratulations on completing the challenge.

    I have some suggestions for improvements:

    IMAGE ALT TEXT

    • Consider having a more meaningful alt text for the QR code image. For example, <img src=“…” alt=“QR code to frontendmentor.io” />.

    HEADING STRUCTURE

    • Consider having a unique h1 per page that describes what the page is about. Having the right heading levels would help screen reader users and also search engines. More details about heading structure here.

    LANDMARKS

    • The <main> landmark is missing, consider renaming the <div> to <main>. Landmarks help to define major sections of your page and can help screen reader users a great deal. More details about landmarks here.

    I hope this helps and happy coding! 😊

  • P
    Dave Quah•650
    @Milleus

    Greetings! 👋 Congratulations on completing the challenge.

    I have some suggestions for improvements:

    IMAGE ALT TEXT

    • Consider having a more meaningful alt text that explains the purpose of the QR code image. For example, <img src=“…” alt=“QR code to frontendmentor.io” />.

    HEADING STRUCTURE

    • Consider having a unique h1 per page that describes what the page is about. More details about heading structure here.

    I hope this helps and happy coding! 😊

  • P
    Dave Quah•650
    @Milleus

    👋 Hello!

    Congratulations on completing the challenge. 🥳

    There are a few things that I think would make this even better:

    • Use only one <h1> per page, for accessibility and SEO. In this case I'd see "Sedans", "SUVs" and "Luxury" of the same logical level, so I'd approach this by adding a <h1> with a screen reader only class (visually hidden but still picked up by screen readers), and have "Sedans", "SUVs" and "Luxury" as <h2>. Here's a good video by Kevin Powell sharing more about headings.
    • In the footer, to be more semantically correct, use <p> instead of <div> for texts.
    • For the rounded borders, an alternative approach is to set border-radius: 8px and overflow: hidden on the parent. This could make things a little easier as the border-radius would not need to be updated in the media query.
    • For the anchor elements CSS, because the font-size isn't explicitly set and there's a fixed pixel height and width set, there will be text overflowing out of the element when the base font-size increases (i.e. someone who increased font size on their device). Most cases of fixed widths or heights could be replaced with min-width or max-width etc, so that it scales better. Another approach would be to use padding instead. I'd also recommend using em or rem units instead of px for better accessibility.

    Nice work and keep up the good job! I hope this helps and happy coding! 😊

    Marked as helpful
  • P
    Dave Quah•650
    @Milleus

    👋 Hello!

    I think using :is is fine, but I would probably move the cursor: pointer to the base element (non-hover) instead.

    More importantly though, it would be a lot better if the proper interactive HTML elements, i.e. <button> or <a>, were used instead of <div>, <u> and <b>. Using the proper elements would help with accessibility greatly - able to navigate on with keyboard, pressing "Space" or "Enter" triggers the element, screen reader would announce that it is a clickable button or link, etc.

    As for how to anchor the footer note, my approach was to use CSS grid. I'd declare 3 rows (1fr, auto, 1fr) and have the <main> in row 2 and <footer> in row 3. Row 1 is an empty row to help keep <main> centered perfectly (thus why it is 1fr, similar to row 3).

    I hope this helps and happy coding!

    Marked as helpful
  • P
    Dave Quah•650
    @Milleus

    👋 Hello!

    This is a nice solution - I like the use of HTML elements and CSS custom properties.

    I think a few things that would make this even better:

    • The "attribution" as a <p> instead of a <div>, and if it could fit in the same viewport without scrolling.
    • Addressing the accessibility concerns with Safari browser for list-style: none
    • Perhaps consider utility classes for font size, weight and color instead of declaring them with headings (h1, h2). This gives more flexibility as most times headings aren't always styled the same.

    Really nice! I look forward to seeing more solutions from you. Happy coding!

    Marked as helpful
View more comments