Design comparison
SolutionDesign
Solution retrospective
Tell me your thoughts! Thank you <3
Community feedback
- @tesla-ambassadorPosted about 3 years ago
This is a pretty awesome solution, I like it! All I can do is just to address your accessibility issues.
- It's not advisable to have more than one main landmark (it can only be one). You should consider using a section or article thereafter.
- You should always have a level one heading tag (h1) in your website, it's a good practice.. It will also help you avoid more accessibility problems when you submit other solutions in the future.
- You should also make sure that all your page content is contained within a landmark.. It makes it easy for people with screen readers to navigate your code. Otherwise this is a very good solution! Kudos! I believe you can become the best web dev😎Keep on coding!
Marked as helpful1 - @mickygingerPosted about 3 years ago
Hey Luisana!
This looks really good, and I agree with @civisky, centering the component would be a nice touch.
You can do that using flexbox, something like:
body { margin: 0; /* remove the annoying margin added by the browser */ height: 100vh; /* set the height to match the viewport height */ display: flex; flex-direction: column; /* make sure the footer sits below the content */ justify-content: center; /* center the contents vertically */ }
Hope that helps!
Marked as helpful0 - @ashiqfuryPosted about 3 years ago
Excellent work.
- you are using
margin-left
andmargin-right
properties. Instead of this, usemargin: 0 auto
to center anything. - try to use some shorthand properties, it brings your code clean.
Thank you.
Marked as helpful0 - you are using
- @civiskyPosted about 3 years ago
great work Ivisana! maybe you could try positioning the card at the centre of the display/screen. Nice work there!!!
Marked as helpful0
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