Skip to content
Submitted over 1 year ago

Qr-code (first solution using CSS )

Isaele Araújo•20
@IsaeleAraujo
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

Hi, guys. God I took like 2 weeks to build this, LOL. It's my first time doing a page with HTML and CSS complete alone without following a tutorial. So, please let me know how to put this little shapes 'cause I don't know how.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Isaele Araújo! 👋

    I think this becomes complicated because you were following the design-preview.jpg.

    You should follow the other design files are what to use as a reference when building the project. The design-preview.jpg is a preview image for the README.md file.

    Then, you can remove width: 100% from the <body> styling. It is already the default styling.

    Next, max-width: 900px from the <body> styling. <body> should always fill the entire page. Treat it as the main element of the web page.

    Remove all <br> elements. Screen readers may read out <br> elements as "break" and not read the content within <br>s. Let lines wrap where they need to. Learn more about accessibility issues that can happen when using <br> — <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns

    I strongly recommend improving it and keeping it as simple as possible.

    I hope my suggestions help you. Have fun coding! 😄

    Marked as helpful
    1
    Isaele Araújo•20
    @IsaeleAraujoPosted over 1 year ago

    @vanzasetia ok, thank you. I'll do it

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    @IsaeleAraujo

    You are welcome!

    0
  • Durban86•320
    @Durban86Posted over 1 year ago

    For starters in your HTML file and fix the accessibility errors.

    Line 11 - you need to change that to a <main class="container"> and make sure to change the closing tag in line 22 to </main>

    Line 15 - you need to add an alt attribute to your img tag that describes your image. so for this project you can add alt="QR code"

    Line 16 - you need an h1 tag, so change it from h4 to h1

    Line 17 - change from h5 to p

    Other than those easy fixes, it actually looks pretty good. You could probably do without so many divs so your content isn't so nested maybe something like this to make it more readable:

    <main class="container">
  <img src="./images/image-qr-code.png" alt="QR code">
  <h1>Heading</h1>
  <p>Paragraph</p>
</main>
    Marked as helpful
    1
    Isaele Araújo•20
    @IsaeleAraujoPosted over 1 year ago

    @Durban86 Thank you.

    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