Design comparison
Solution retrospective
Next time I might take that extra time to make it more responsive. But I like what I did.
What challenges did you encounter, and how did you overcome them?As always, I never know the best way to center things. I know how to do it in CSS. but I always feel like I'm doing it incorrectly.
What specific areas of your project would you like help with?I wish there was a rulebook on how to center, (use flex, or grid, or margin.)
Community feedback
- @jacky-uiPosted 1 day ago
Looks great! I really like that you used an external stylesheet—it's a good practice for keeping things organized (separation of concerns). I also like how you used the <main> tag to highlight the primary content of the page. Although there are more than one way of coding, the way to centered the profile card is what I would have done as well.
For responsiveness, I'd recommend looking into media queries. They allow you to apply different styles based on the screen size, making your design more responsive across devices.
About a rulebook on centering, unfortunately there isn't any :/, although there are several best practices and methods. Short answer: flexbox for 1D and grid for 2D. Flexbox layout is quick with a few lines of code, and is more single axis layout such as navigation bar, row of cards. Grid gives you more control over columns and rows, but requires more lines of code. Might be more useful for complex dashboard layouts. Some prefer flexbox and some grid.
One suggestion: although the links for this challenge are dead links, have you considered using <a> tags instead of <span> elements for the links? When linking to external sites or other pages, the <a> tag is semantically more appropriate and will improve accessibility.
0 - @jariwarlordPosted 1 day ago
This looks great, little changes about the size of the card will make everything better.
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