Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @Joaotbb π, good job for completing this challenge! π
Here are some suggestions to improve your code:
- The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.
You could use more the <p> tag, the <p> element is paragraph level content, usually text
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
- Add a
<h1>
tag in your solution, The<h1>
element is the main heading in a web page. There should only be one<h1>
tag per page, and always avoid skipping heading levels; always start from<h1>
, followed by<h2>
and so on up to<h6>
(<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1>Improve your front-end skills by building projects</h1>
- You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies
Your body's default margin causes the vertical scrollbar to appear
Popular reset style sheets:
.
- Try to use semantic tags in your code. More information here:
With semantic tags:
<body> <main class="maincontainer"> . . . </main> <body>
- Update your report to see what other suggestions there are in this solution
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful1 - @VCaramesPosted about 2 years ago
Hey @Joaotbb, I Update your code with modern css to make it fully responsive and remove any unnecessary code:
You will want to study it and see what changes I made:
body { background: rgb(227, 229, 232); min-height: 100vh; display: grid; place-content: center; } .maincontainer { background-color: white; max-width: 320px; box-sizing: content-box; padding: 15px; border-radius: 15px; text-align: center; } .qrimage { width: 100%; border-radius: 15px; } .twoboxes { font-family: 'Outfit', sans-serif; padding: 0 10px 0 10px; } .boxone { padding-top: 20px; font-weight: 700; font-size: 22px; color: rgb(62, 59, 85); } .boxtwo { padding-top: 20px; font-weight: 500; color: rgb(107, 103, 103); }
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