Design comparison
Solution retrospective
"The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px"
I didn't quite understand this part. Could someone inform me if I did it right? I put the said widths for the <main> that is inside the <body>
On the desktop version, the <main> has a blue background.
I appreciate any help you can provide. Thank you in advance!
Community feedback
- @0xabdulkhaliqPosted 9 months ago
Hello there ๐. Congratulations on successfully completing the challenge! ๐
- I have a suggestion regarding your code that I believe will be of great interest to you.
HEADINGS ARE NOT PROPERLY USED โ ๏ธ:
- This solution consists incorrect usage of
<h3>
so it can cause severe accessibility errors due to incorrect usage of level-three headings<h3>
- Every site must want only one
h1
element identifying and describing the main content of the page.
- An
h1
heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- In this solution there's
<h3>
element which is this<h3>Improve your...</h3>
, you can preferably use<h1>
instead of<h3>
. Remember<h1>
provides an important navigation point for users of assistive technologies so we want to use it wisely
- So we want to add a level-one heading to improve accessibility
- Example:
<h1>Improve your front-end skills by building projects</h1>
- If you have any questions or need further clarification, and feel free to reach out to me.
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful ๐ Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @Bishalsnghd07Posted 9 months ago
Hi, @Nyynca๐
Congrats for completing this challenge๐
I would recommend one suggestion to you:
Your background color should be always in parent container and your parent container is body. I would recommend to shift your background color from main landmark (which is child container) to parent body to display the full width of background color in your layout and it will look perfect.
And there is some misunderstanding with media queries, by correcting that. Your layout will be look responsive in mobile too
By doing this changes, you will be get much closer to your responsive layout.
Hope this, tips will help you ahead in your projects too!
Once, again welcome to frontend mentor, wishing you a very joyful journey ahead and happy codingโค๏ธ
Marked as helpful1 - @Ezekiel225Posted 9 months ago
Hello there ๐ @Nyynca.
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.
Consider changing the background-color of the body element to hsl(212, 45%, 89%).
body { background-color: hsl(212, 45%, 89%); }
I hope this suggestion is useful for future projects.
Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! ๐๐.
Other than that, great job!
Happy coding.
Marked as helpful1 - @rinoraj6Posted 9 months ago
hi, Mobile: 375px Desktop: 1440px" these are the widths of the given sample files. the solutions should look like these at the given width. if you open the images with any image editing software (I use mspaint) you can see that the width of the image is 375px for mobile and 1440px for desktop. try to match exactly as much as you can.
Marked as helpful1
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