Static QR code page: basic html and css
Design comparison
Solution retrospective
Hi all, this is my first solution for Frontend Mentor. I feel this is fairly close to the design preview (ππ» π€), however, I had some challenges replicating the second line of text. I used 16px font (style guide recommends 15px) plus none of the provided colors were quite right - you can see the text color is a bit darker than the design preview. So two questions: How did others style this text? And how important are the style guides for these projects? Are they to be treated like a company's style guide? Thanks!
Community feedback
- @ChamuMutezvaPosted almost 3 years ago
Greetings Meghan
You have done very well with your first project. Some of the things to look at includes:
- a site should have a heading element , with the first heading being an h1. Also take note that heading elements should follow a sequential order.
- semantic html elements like main , header, footer should be considered ahead of divs.
- the style-guide is important but you can adjust accordingly - the idea here is to give developers a working environment experience, but if there are areas that you think need adjustments, you can gladly do so . You can check how others approached the project by selecting the
visit challenge button
found on this page - somewhere close to the top - for font size , use rems instead of px values. Px values are fixed and are difficult to override for users who wants to change their font sizes . See the following article for a detailed better explanation. Why designers should move from px to rem
Marked as helpful1@meghanleiaPosted almost 3 years ago@ChamuMutezva thank you for the feedback! These are all helpful tips and good direction for improving this.
0 - @Kamasah-DicksonPosted almost 3 years ago
Your solution looks great good job Keep codingπ
1 - @GitHub-dev12345Posted over 2 years ago
If You want reduce accessibility, to change this code:
<div class="boxed"> to <main> ( Used Main Tag).AND
<div class="attribution"> to <footer> ( Used Footer Tag);I hope you find this helpful.π
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