Design comparison
Solution retrospective
first one. feedback needed please. thank you.
Community feedback
- @NehalSahu8055Posted over 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
-
To properly center the container.
-
USING FLEXBOX
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
- USING GRID
body{ min-height: 100vh; display: grid; place-items: center; }
➨ Use
Semantics
for the proper design of your code.<body> <header> <nav>...</nav> </header> <main>...</main> <footer>...</footer> </body>
➨ Use
background:transparent;
on hovering.button:hover{ background:transparent; }
➨ Use
responsive units(rem, em, %)
from next project. Explore respective use cases on google.link.
I hope you find this helpful.
Happy coding😄
0 -
- @OluwalolopePosted over 1 year ago
Hey 👋,
Great work with your challenge it looks really good. I have a few suggestions for you.
-
Don't leave the <alt> text-empty: It is highly recommended not to leave the alt text blank because it isn't considered best practice. If a person with visual impairments is going through your site, such person will need assistance like a screen reader. The screen reader reads out the alt text of the image. It is basically a description of your image and It is very important.
-
Use Media Queries to make your website responsive: Your site looks amazing on desktop or screens with larger displays. But it doesn't really look great on phones. That is where media queries come in🦸♂️🦸♂️🦸♂️. It is used as a tool to make sites responsive. Right now your site has a fixed dimensioning irrespective of the screen size but with a media query it will be more interested in the screen size. Kindly check here for further clarification Media Queries.
Once again Congratulations 🎊 on completing your first frontend mentor challenge. I really look forward to see your next challenge submission 🔥. I hope you found this helpful😄. Goodluck👍
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