Design comparison
Solution retrospective
Successfully replicated the view!
What specific areas of your project would you like help with?Better ways to align items and how to write cleaner code.
Community feedback
- @DylandeBruijnPosted 5 months ago
Hiya @gina-wang-1021,
Congratulations on your solution, it looks very close to the design!
A bit of friendly constructive feedback:
I suggest a change to the styling of your
main
:Before
main { background-color: #F4D04E; width: 100vw; height: 100vh; display: flex; align-items: center; }
After
main { background-color: #F4D04E; min-height: 100vh; display: flex; align-items: center; }
I removed the
width: 100vw
.main
is already ablock
element which take up the full width by default. You don't have to set a width on it to make it full width. I changed theheight
tomin-height: 100vh
. This makes suremain
takes up100vh
as a minimum while still being able to grow. If you just setheight: 100vh
you'll run into overflow issues when the content gets larger than100vh
.I see you use a lot of ID's to style your elements. I recommend trying to style the bulk of your elements using classes as they are more reusable. Also try to give them more descriptive names like
.card
and.card-title
for example. You already made a good start with this, keep it up!Try giving your
a
tag (title) ahref
so you have the basic link functionality like the correct pointer showing up. You still have to style the link properly then to make it look like the design but this is good exercise.I hope you find my feedback helpful and I would appreciate it if you could mark it as helpful if it did!
Let me know if you have more questions and happy coding!
Marked as helpful1@gina-wang-1021Posted 5 months ago@DylandeBruijn Thank you so much for the reply! The suggestions were really helpful as I wanted to include more best practices in my code but precise and easy-to-understand advice from experienced developers is hard to find. Thank you so much!
1
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