Skip to content
Submitted 3 months ago

First solution using HTML and CSS

P
Tomas Moucha•100
@Tomas-1979
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

First work...

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

First familiarization with the text and subsequent saving to github. Experience is needed, then it will be easy.

Community feedback

  • P
    Øystein Håberg•12,880
    @Islandstone89Posted 3 months ago

    Hi Tomas, well done.

    Here are some tips to improve your solution even more:

    HTML:

    • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    CSS:

    • It is best practice to write CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

    • Including a CSS Reset at the top is good practice.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Remove the html selector, you only need to write styles for the body.

    • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

    • Move the styles on main to .qr-code. Remove width, it's not common to set widths, as we want our components to grow and shrink in relation to the screen size. We do want a max-width, so it doesn't stretch too wide on larger screens. However, this should be in rem - I usually recommend around 20rem.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    Marked as helpful
    0
    P
    Tomas Moucha•100
    @Tomas-1979Posted 3 months ago

    @Islandstone89

    Hi Øystein,

    Thanks for the feedback. I went through the code again and tried to understand your advice. Such a simple task and so many mistakes... :D

    Tomas

    1
    P
    Øystein Håberg•12,880
    @Islandstone89Posted 3 months ago

    @Tomas-1979 It's the best way to learn! :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord