Social links profile: mobile-first solution using flexbox
Design comparison
Solution retrospective
I'm proud of the way I organized folders, files and even my code haha
What challenges did you encounter, and how did you overcome them?I feel like it was pretty easy to build the project.
What specific areas of your project would you like help with?Let me know if you see anything I could improve :)
Community feedback
- @DudeldupsPosted 9 months ago
Hello! 👋🏻
Your solution looks good, well done! You could give the card a
max-width
because card components that get too wide look mostly weird 🤓Using a <figure> element is good, if you have written text that also describes the image, you can also use the <figcaption> as a child of the figure.
A <section> should always contain actual content that makes sense viewed separately from the rest of your site. You can replace the first section with a regular div.
For the second section, a
<ul>
with each link inside a<li>
would be semantically more appropriate. Almost always where there's a repeated element, you can think of a<ul>
or<ol>
if each item is actually numbered consecutively.In your CSS, you set the font-size to 62.5%. There's no need to do that. Just get used to think in
rem
and don't recalculate something that has been calculated. Users that change their default font size have potential issues with this and it's a red flag for potential employers, if you want to apply for jobs later.And one quick tip for your focus state, if you use
:focus-visible
instead of:focus
, the style will only be applied for keyboard interactions. This is almost always the desired behaviour, of course there are use cases for:focus
, too 😋Hope this helps, happy coding! 🤖
Marked as helpful0@ValeriaMontoyaPosted 9 months agoHi 👋🏼 I really appreciate that you took the time to review my code. Thank you for all your advices and detailed explanations, I'll keep them on mind for my next projects 🤓
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