Design comparison
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
- @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 theREADME.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_concernsI strongly recommend improving it and keeping it as simple as possible.
I hope my suggestions help you. Have fun coding! 😄
Marked as helpful1 - @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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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