Basic exercise in accessible, responsive HTML and CSS

Solution retrospective
My second attempt at this, hoping to mitigate some of the accessibility and responsiveness concerns that came up after my first attempt.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @DavidMorgade
Hello Luke, great job finishing the challenge, you almost got it perfect pixel, and with no validation issues!
I would like to give you a little advice, don't get stuck in one challenge! try to move on and go for the next one instead of trying several times the same one, each challenge has his own special things that you will learn about them, I recommend you the product preview card component as a next challenge!
Hope my feedback helps you!
Marked as helpful - @PhoenixDev22
Hello Luke Knipe,
- Add
min-height: 100vh
instead ofheight: 100vh
to the body that let the body grows taller if the content outgrows the visible page instead.
width: 320px;
an explicit width is not a good way to have responsive layout . Consider usingmax-width
to the card inrem
instead .
- Consider including a git ignore. Less important in this challenge but will become extremely important as you move onto larger projects with build steps
- Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices
- Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
Overall, Excellent work! Hopefully this feedback helps on future projects..
- Add
Join 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