Design comparison
SolutionDesign
Solution retrospective
Hi, It's my first upload I tried my best. Hope u guys like it and I'm waiting for the feedback :)
Community feedback
- @fraserwatPosted almost 3 years ago
Hey Lubie! This looks really nice. Few changes:
- To make things work better at all screen sizes, would tend to use max-width instead of width on the container. Likewise, in most cases the height should be determined by the contents of the div and padding/margins, so we wouldn't explicitly set a height.
- You can get rid of the writing at the top, its in the HTML file to build the structure around it.
- This is a good use of borders i hadn't considered before actually! It works for this project, but to bear in mind though, when you have many such components, sometimes next to each other, it might lead to uneven layouts so would use padding in your #boxW container.
- As best practice, usually would use classes instead of ids for this sort of thing.
Good first project though - keep it up!!
Fraser
Marked as helpful1 - @anoshaahmedPosted almost 3 years ago
Hey good job on this challenge! Your report above shows a few issues though:
- wrap everything in your body in
<main>... OR use semantic tags! .... you can also giverole=""to the direct children of your<body>but that's a little frowned upon... Click here to read more - have at least one
<h1>in your code
Here's a link to something I wrote about accessibility issues & best practices
Hope this helps :)
0 - wrap everything in your body in
Please log in to post a comment
Log in with GitHub
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