A bigger QR-code with a simple hover state footer

Solution retrospective
Updated solution trying to incorporate suggested fixes. I have still go no idea on the size of the project soooooo I mightve eyeballed it :D.
Cheers.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @snehamoybag
Great Job Cameron 🙌 Congratulations on completing your first challenge 🙌
And yes it is better to markup your html first then do the css, well atleast some of the basic structural html (i.e. divs, h1, paragraph etc). You can later change, add, remove or edit the html if you have to 😄 and it is completely normal for a web developer to switch between tabs again and again in order to make sure everything looks and works fine.. so don't worry about it 😁
Marked as helpful - @Samadeen
Hey!! Cheers 🥂 on completing this challenge.. .
Here are my suggestions..
- You should use <main class="container"> instead of <div class="container">.
- You can wrap your attribution section in a footer tag to avoid accessibility issues.
This should fix most of your accessibility issues
. Regardless you did amazing... hope you find this useful... Happy coding!!!
Marked as helpful - @Sdann26
Hello Cameron!
Your layout is pretty good but in style-guide.md when they say that the font-size is 15 px they mean the font-size of the paragraph so the text was 15 px and the title was bigger. That's why your design is quite small, otherwise it would be the same.
It is not very relevant but it is good to take it into account because a font size of 11px is very small even for cell phones.
By the way it is quite normal to have to change views when doing CSS and HTML layouts, some even have two screens to see how the project is changing while coding.
One last thing, whenever you finish uploading a challenge, always check the report generated by frontend mentor to see what the reasons were because they usually guide you to avoid HTML and accessibility problems. In your case you have 3 problems but they are easily solved. You only have to add a <main> tag inside the body that includes all your main content, in this case the card.
Then your HTML will look like this:
<body> <main> ... </ main> </ body>
I hope these comments help you
Good coding :D!
Marked as helpful
Join 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