Design comparison
Solution retrospective
I am proud that I was able to complete this project without anyone's help. I hope to continue working on existing challenges consistently and be able to solve them.
What challenges did you encounter, and how did you overcome them?this is my first project. So far I haven't had any problems, maybe in the next project. Hopefully I can solve all the challenges here
What specific areas of your project would you like help with?I think ordinary people will be confused about how to make the image round because when I started learning CSS, I felt something like that. So what to do is add "overflow: hidden" to the image wrapper div
Community feedback
- @danielmrz-devPosted 7 months ago
Hello @jestaputra!
Your solution looks great!
📌 It's recommended to use semantic HTML elements like
<ul>
and<li>
for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.Here's and example on how you can refactor your code:
After Refactoring
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>
By using
<ul>
and<li>
, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.I hope you find this helpful!
Keep up the excellent work!
Marked as helpful0@jestaputraPosted 7 months agothank you very much for your solution @danielmrz-dev, maybe the next time i will fix my projects
0 - @R3ygoskiPosted 7 months ago
Hello @jestaputra, I would like to congratulate you on completing this challenge.
A tip regarding what you mentioned about making the image round, instead of using
overflow:hidden;
which depends solely on the parent element, you could do it like this:img { border-radius: 50%; }
This way it's simpler and helps with maintenance, because when you see that the image is round, you already know that it's the
border-radius
applied to it.Now, a tip about your HTML, the structure is good, but it lacks semantics, and having semantics is very important, not only for SEO but also for Accessibility. I'll show you some sections that could be made semantic:
<div class="container">
thisdiv
could be replaced with a<main>
, because the main content of your page is inside thisdiv
.<div class="profile">
and thisdiv
could be replaced with an<article>
, because all the profile content is self-explanatory.
And again, congratulations, your first project turned out very well, keep practicing and improving. If you have any doubts, please ask below and I'll try to help in the best way possible.
Marked as helpful0@jestaputraPosted 7 months agothank you very much for your solution@R3ygoski, i have a new style in css to reply my projects the next time
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