Design comparison
Solution retrospective
The biggest challenge for me was getting the Github and git working. I tried to follow the provided instructions but kept getting errors due to issues with trying to merge two independently created repos.
In the end I found the solution I needed here:
Github Solution
The other item I struggled with was getting the card centered vertically AND horizontally. I described my solution in the README.md file.
What specific areas of your project would you like help with?I don't think I need help with this, but if anyone has suggestions on best practices or optimization it would be appreciated!
Community feedback
- @gmagnenatPosted 5 months ago
Hi, congrats on completing the challenge ! I checked your repo and your url. there are a couple of essentials basics you should fix.
- I have an issue with the text color. it display as white on the live url. (firefox and chrome).
- Currently the solution isn't accessible in case of default font size change by the user. You can do a reflow test to see this. Update the default font size of your browser. Your layout should scale correctly and respect the user settings.
- The reason for this are the arbitrary values you added in pixels. You should never use pixel for everything related to fonts and sizes to keep your design responsive and accessible. Why font-size must NEVER be in pixels. By default tailwind uses rem so you can add the values as rem in your config file or use rem in arbitrary values.
- I don't think you need the
min-w-screen
on yourmain
. By default the full width of the screen is already set. - I don't think the <header> is correctly used here. it should be outside of the <main> and have a banner role (repeated navigation and header on multiple page)
I hope this review helps to improve the solution and refresh some important concepts on the basics.
Happy coding !
Marked as helpful1@chelsea-herePosted 5 months ago@gmagnenat
Thank you, this really helps me progress with best practices! By chance is your browser set to dark-mode? I believe Next.js has an invert color setup by default. I'll try to debug that. Cheers!
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