Design comparison
Solution retrospective
This is my first ever project. Any feedback on how to improve it would be greatly appreciated!
Community feedback
- @archdronPosted almost 5 years ago
Greetings! I'm a beginner in this, too, so take what I suggest with a grain of salt.
-
Either scale the layout proportionally or hardcode card dimensions and position. Otherwise, your layout will be butchered by slight differences in viewport size (e.g., see the automatic screenshot), which is not exactly what you want.
-
Mind the details like letter spacing, margins, shadows, etc., if you deviate from the mock-up in some respects, make sure the deviation is well-justified.
As a first try, it looks fine to me, although I have little to no understanding of what you did in the CSS :D
1 -
- @mattstuddertPosted almost 5 years ago
Congrats on submitting your first challenge, Andrew! Your HTML code is looking really good and it's nice to see you've used CSS Grid for the layout. Here are a couple of suggestions after taking a look at your code:
- You've set your media query to
max-width: 500px;
which means that the content gets very squashed at501px
up to mid tablet size. You might want to do a little review of your responsive styles to account for large mobile and tablet sizes. - Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.
You've done a really good job. Keep up the great work!
0 - You've set your media query to
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