Implement Links profile component using Flexbox and pseudo-classes
Design comparison
Solution retrospective
- After 3 days of practicing, I implement the design faster!
- Actually, I did not encounter any problems because I addressed them in two previous challenges.
I do not know whether my CSS code is clean or not. Can you recommend some useful resources for writing CSS better?
Community feedback
- @0xabdulkhaliqPosted 6 months ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have a suggestion regarding your code that I believe will be of great interest to you.
MAKING ACCESSIBLE LINKS:
- The links like
Github
,Frontend Mentor
are needed to be actual<a>
elements which are wrapped up usingli
andul
elements. Because we need to use semantic elements to improve accessibility of our solution.
- This is the current markup,
<div class="main-buttons_container"> <p>GitHub</p> <p>Frontend Mentor</p> .... </div> ...
- In order to make this solution accessible, we need to use
<a>
elements withhref
attribute. Here's the example
<ul> <li> <a href="#">Github</a> </li> <li> <a href="#">Frontend Mentor</a> </li> ... </ul> ....
- If you have any questions or need further clarification feel free to reach out to me.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@hinn1411Posted 6 months ago@0xabdulkhalid thank you for your suggestion. It is very helpful!
0 - @R3ygoskiPosted 6 months ago
Hello again Hien, your project looks great, congratulations! It's very similar to the proposed design, my sincere congratulations.
Regarding your question, yes, your CSS is very clean. I would only recommend one thing: instead of leaving the colors you have to use in a comment, try putting them inside a
::root
. That way, you can use variables, which helps keep the code even cleaner.Now, here are some recommendations to make your CSS cleaner: CSS Custom Properties, CSS Nesting, adding comments to separate sections of your code (just like you did), and removing comments from properties that are not being used.
With the Sass preprocessor, you can use variables, partial files, nesting, and mixins.
Now, some tips for your semantic HTML:
<figure class="main-image_container">
: The correct tag for this section should be<section>
. This is because the content has thematic relevance among the items (user profile).<figure>
is usually used for a main figure or one that needs a caption (<figcaption>
).<div class="main-buttons_container">
: It would be more appropriate here to use a<ul>
and<li>
. This is because those buttons are identical items with similar purposes, so placing them as list items makes more sense.<p>GitHub</p>
and the others that simulate a button: Since they have the functionality of a link, it's more appropriate to use an<a>
tag, even if thehref
is empty.
Once again, congratulations! Your project looks great. Keep up the good work. If you have any questions about what I said, please comment below, and I'll try to help as best as I can.
Marked as helpful1@hinn1411Posted 6 months ago@R3ygoski Thank you very much, Bernardo! I changed my code based on your advice, It is really valuable for me.
0@R3ygoskiPosted 6 months agoHello @hinn1411 Hien, I'm happy my tips were valuable for you. I just wanted to kindly ask that if you found my comment helpful and it aided you, I would appreciate it if you could kindly mark it as "helpful" as it helps me a lot. Thank you in advance, and if you have any questions, just ask below.
Marked as helpful1
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