Design comparison
Solution retrospective
feedback is welcome hehe!
this is my first project after going over fcc's responsive web design course. i tend to forget about some lessons so i figured if it start practicing coding itself i can learn more.
im unsure of the width and height rules and just ended up guessing/trial and error method. i find it hard to centralize the div.main. so i think im going to need more lessons about displays and dimensions. i think ive also entered unnecessary lines of code, tho im not sure ahhaha
Community feedback
- @denieldenPosted over 2 years ago
Hi Tonsz, great work on this challenge!
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility img
element must have analt
attribute, it's very important!- remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - remove
margin and transform
properties from.main
class - use flexbox to the body for center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
try to use relative units of measurement -> read here
Overall you did well š
Hope this help and happy coding!
Marked as helpful1@tonszPosted over 2 years ago@denielden i am still learning to understand the difference between height and min-height, and surely i will get into practicing with flexbox so thank you for the guide! will try to do better thank u sm for the tips!
1 - add
- @shashreesamuelPosted over 2 years ago
Hey tonsz, good job completing this challenge. Keep up the good work
You solution looks great however I think your card needs some margin from the top using
margin-top
.In terms of your accessibility issues
-
Images must have alternate text, simply mention the alt attribute with a description of your image.
-
wrap all your content between main tags to get rid of the rest of accessibility issues
In terms of your validation errors it will be resolved when your accessibility issues are fixed
I hope this helps
Cheers Happy coding š
Marked as helpful0@tonszPosted over 2 years ago@TheCoderGuru thank you, will make a habit of adding alt attribute from now on along with the main landmark
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