Skip to content
Submitted 12 months ago

QR Code Component

Josh•140
@RandomGuy20
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

This is my solution to the challenge

Community feedback

  • Øystein Håberg•10,490
    @Islandstone89Posted 12 months ago

    Hi. I'm afraid there are a lot of issues with your code. Let's take a look.

    HTML:

    • You have way too many divs for such a simple challenge. In fact, you don't really need <div> here at all. Every page needs a <main>, that wraps the content (except for the footer and the header). In this example, that could also be your container for the card. Change the first <div> into a <main>, and delete the rest.

    • The image needs alt text. This is essential for accessibility, or else screen readers will not understand it. Alt text should be descriptive, and here it also needs to say where it leads (frontendmentor.io).

    • The text should not be in <span>, it is a <h1> follows by a <p>.

    • .attribution should be a <footer>.

    • Footer text needs to be wrapped in a <p>.

    CSS:

    • Link to the font in the <head> of the HTML, don't use @import.

    • Use a CSS Reset at the top.

    • Remove overflow: hidden and margin: 0 on body. You don't need the first one, and the margin is already set to 0 in your * selector.

    • height should be min-height.

    • Never set font-size in px. Use rem.

    • Put text-align: center on the body, since all text should be centered. Doing this takes advantage of inheritance.

    • Remove all fixed widths and heights.

    • On .dark-black-text and .light-grey-text, you can remove everything, except for color, font-weight and font-size. You can also keep margin, but don't use negative numbers.

    • You don't need any media queries in this challenge. Whenever you do, remember to set it in rem instead of px.

    Hope this is clear and helpful. You should implement this feedback, and increase your understanding of HTML & CSS before moving along.

    Good luck :)

    1
  • Burham B. Soliman•220
    @egstarPosted 12 months ago

    Not bad, but

    • you need to use the assigned colors into style-guide.md
    • you need to make sure of indents and spaces to get the right sizes and perfect shape

    Good work btw and good luck

    1

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