Design comparison
Solution retrospective
Any idea of improvements and comments are acceptable
Community feedback
- @MelvinAguilarPosted 11 months ago
Hello there ๐. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.
You can use max-width for that porpuse
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
1 - @rayaattaPosted 11 months ago
Hi๐ nice solution!
I have some suggestions for you to improve your code.
1 In order to make your HTML code more semantic, wrap the main title with
<h1>
instead of just<h3>
The<h1>
to|<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on.2 It is much more recommended to link up to your fonts inside the html instead of importing them in css .
3 Since the qr image is not decorative fill it's alt attribute with text describing where it leads i.e
alt="qr code leading to frontendmentor.io"
I hope this helps.
Your solution is awesome ๐
Happy coding โ๏ธ
1
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