Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I don't know yet I'm just starting out
What challenges did you encounter, and how did you overcome them?I don't quite remember, it's been a while since I completed the challenge before submitting it
What specific areas of your project would you like help with?None for now
Community feedback
- @MukarramHaqPosted 6 months ago
Hey! good work on the project.
Here are a few recommendations that I feel like would help:
HTML:
- Every webpage should have
<main>
to wrap its main content around. Other tags include<header>
<footer>
but these are irrelevant for this current project. These are extremely important for accessibility. So wrap your card with<main>
tag. - For this current project, you would need only one
class
for the card. That should be sufficient for this project.
CSS:
- Include
1rem
ofpadding
on thebody
. That prevents the card from touching the edges on a small screen. - To try and center the
div
you can useFlexbox
property. Here is a link that will help you with this. - One of the people from the community pointed out that I shouldn't use widths and heights because in web design, we need our components to adjust to the size of different screens. Setting it to
px
will fix them to those properties and they will not be able to adjust. font-size
should never be inpx
. This prevents the font from scaling. A better approach would be to userem
instead.- Put the
font-family
in thebody
. Remember to also specify a fallback fontfont-family: 'Outfit', 'san-serif';
- You can use
display: block;
andmax-width: 100%
to prevent the content from overflowing. - Also, it would be a good idea to create a separate CSS file for all the styling. Makes it easier to debug and maintain.
These are all the tips I received when I submitted this challenge and I made almost the same mistakes. So I thought it would be helpful for you as well. :)
Marked as helpful2 - Every webpage should have
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