Design comparison
Solution retrospective
what do you think about this project
Community feedback
- @denieldenPosted about 2 years ago
Hello Stac4uo, You have done a good work! π
Some little tips to improve your code:
- remove
height
from thesection
tag - use
img
element for the qr image and not a astyleddiv
- use
h1
for the title of card and not a simplep
- use
min-height: 100vh
instead ofheight
, otherwise the content is cut off when the browser height is less than the content
Keep learning how to code with your amazing solutions to challenges.
Hope this help π and Happy coding!
Marked as helpful0 - remove
- @correlucasPosted about 2 years ago
πΎHi @stac4uo, congratulations on your solution!
Great solution and a great start! From what I saw youβre on the right track. Iβve few suggestions for you that you can consider adding to your code:
1.Add the website favicon inserting the svg image inside the
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
2.Add the title of the page inserting in the <head> the tag <title> β
<title>QR Code - Front End Mentor</title>
3.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.
4.The main heading has the tag
<p>
, in this case, you should replace it with<h1>
since this heading is the main title on this page. Remember that every page should have one<h1>
to declare which is the most important title and that you should follow the hierarchy using the heading sequence(h1, h2, h3, h4, h5)
and never jump a level.5.To maintain the card responsive use
max-width
instead ofwidth
this way you allow the content to be flexible. The difference betweenmax-width
andwidth
is thatwidth
is fixed andmax-width
has a maximum size but can shrink to fit the content.Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
βοΈ I hope this helps you and happy coding!
0
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