Skip to content
Submitted about 3 years ago

A bigger QR-code with a simple hover state footer

Cameron Dick•20
@CTDck
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Updated solution trying to incorporate suggested fixes. I have still go no idea on the size of the project soooooo I mightve eyeballed it :D.

Cheers.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Snehamoy Bag•600
    @snehamoybag

    Great Job Cameron 🙌 Congratulations on completing your first challenge 🙌

    And yes it is better to markup your html first then do the css, well atleast some of the basic structural html (i.e. divs, h1, paragraph etc). You can later change, add, remove or edit the html if you have to 😄 and it is completely normal for a web developer to switch between tabs again and again in order to make sure everything looks and works fine.. so don't worry about it 😁

    Marked as helpful
  • Abdul•8,560
    @Samadeen

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.
    • You can wrap your attribution section in a footer tag to avoid accessibility issues.

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
  • Danilo Blas•6,300
    @Sdann26

    Hello Cameron!

    Your layout is pretty good but in style-guide.md when they say that the font-size is 15 px they mean the font-size of the paragraph so the text was 15 px and the title was bigger. That's why your design is quite small, otherwise it would be the same.

    It is not very relevant but it is good to take it into account because a font size of 11px is very small even for cell phones.

    By the way it is quite normal to have to change views when doing CSS and HTML layouts, some even have two screens to see how the project is changing while coding.

    One last thing, whenever you finish uploading a challenge, always check the report generated by frontend mentor to see what the reasons were because they usually guide you to avoid HTML and accessibility problems. In your case you have 3 problems but they are easily solved. You only have to add a <main> tag inside the body that includes all your main content, in this case the card.

    Then your HTML will look like this:

    <body>
   <main>
      ...
   </ main>
</ body>

    I hope these comments help you

    Good coding :D!

    Marked as helpful

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