Design comparison
SolutionDesign
Solution retrospective
I am having a realy bad time trying to match the resolution of my version to the resolution of the design. any tips?
Community feedback
- @MatejBumberaPosted over 1 year ago
Hi, I don't have the answer to your question, but I have some tips regarding your solution. First of all, congratulations on your solution! You did a great job in matching it to the design. Now to the tips:
- I noticed some repetition in your code, mainly defining flexbox and its properties to both the container class and space id (+ assigning the same id to more elements is a bad practice).
- You could use semantic HTML in your code. That means using tags like <main>, <section>, <header>, <footer> etc. instead of <div> tags. They are more descriptive so your code is more clear and it helps assistive technologies and search engines. You can study it more here: https://www.w3schools.com/html/html5_semantic_elements.asp
- The website doesn't change in response to smaller web screen (for example on mobile phone). You could do this by using media queries, or in your case, you could use flex-wrap: wrap; declaration in a container rule and don't define the flexbox container width, define only flex items width. What happens is that when the items don't fit on the screen, they move on to the next line.
But overall, good job and keep coding! I hope you find my review helpful :D
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