Design comparison
Solution retrospective
Any feedback would be appreciated, ty & have a good day :)
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, awesome job on this one. Layout in desktop looks fine, though mobile state should be centered. Also you can use more of the screen size to show the desktop layout before going in mobile, so that it just doesn't jump to mobile state.
Some suggestions would be:
- Always have a
main
element, this will wrap the main content of you webpage. On this one, thegrid-container
could used themain
element instead ofdiv
. - Always have an
h1
on a webpage, if you can't useh1
on the visible content of the page, maybe you could use theh1
as a screen-reader only text for this one. - On the
why us
section, those text below should have been insideul
element, since those are "list" of things on "why" you should choose them. - Lastly, just center the mobile state and maybe adjust the width of it so that it scales with screen-size.
Still, really great job on this one.
Marked as helpful1@JoadevyPosted about 3 years ago@pikamart This suggestions are pretty good, I considered all of it, thanks you very much! I have an only question about your H1 tip and it refers to how I can use the h1 as a screen-reader if i can't use h1 on the visible content. Can you give me an example of this? Thanks a lot
0@pikapikamartPosted about 3 years ago@Joadevy Sure! Let me just create a simple snippet.
Here is the sample snippet link for some usage of screen-reader text, I added some comments for this one.
The stylings for the
sr-only
class, copy that because you will use that a lot on your career.If you have any question/queries just drop it here okay
Marked as helpful1@JoadevyPosted about 3 years ago@pikamart Oh bro, what an explanation! I understood, thanks a lot for your time <3
1 - Always have a
- Account deleted
Looks ok but after it switches it's not centered.
1
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