Design comparison
Solution retrospective
Please find any mistakes, I want to improve my skills.
Community feedback
- @GhraviteePosted over 1 year ago
Hello Aziz!!, congrats on completing this challenge. Here are some tips to make your code better.
-
To center your container, you can simply make use of flexbox on it's direct parent which in your case will be the <main>. Your code will look like so:
main { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 5rem 2rem; // Add padding on it's direct parent to avoid your container from touching the top, bottom and sides of the screen for mobile view. }
-
Try to add classes as much as possible. The specificity will make your life easier as a frontend developer.
-
If you're making use of a main tag for the purpose of semantics, you should close off your attribution with a landmark like a footer.
-
Always apply this reset for images:
img { display: block; max-width: 100%; }
This will keep your image inside its container at full width. Look up other css resets and apply them. Here's one: css resets -
Please pay attention to the accessibility and validation reports on frontend mentor.
I hope you find this helpful. Happy coding.
Marked as helpful1@AzizJatoiPosted over 1 year ago@Ghravitee Thank you so much, I will make sure to not make mistakes like these again. I really appreciate your time looking at my code and for your guidance.
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