Social Links Profile

Community feedback

• 

  Eduardo-Pineda•20

  @Eduardo-PinedaPosted 7 months ago

  I was checking your files and found some weak-points I think it's crucial for your learning process to know. I going to classified them in three cathegories: CSS, HTML and Visual.

  CSS:

  • Use of Element Selector and ID's Selector instead of classes: It's good to remember that each type of selector we use has a importance level to our browsers (specificity) and depending of what type of selector you use, maybe the properties you are trying to set out doesn't fit in as you expected due to the importance the selector represents to the browser. To avoid frustrations in the future, I highly recommend you the use of classes when you naming things in HTML. Using classes allows you to keep all your proyects in the same level of importance and avoid that your properties being blocked by a higher-importance selector. Keep ID's for Javascript!
  • Unnecessary use of width in the Body: In most of the cases, set an width is not needed to fill all the space of the body horizontaly. Most of the browsers makes these job for us!
  • Use of Viewport units: Be carefull when using viewport units. If you don't know how those units works, elements gets bigger than you expect and could overflow its container. I recommend you search more info about how those units works to avoid unexpected behavior.

  HTML:

  • Level of semantic HTML: I don't have any deal with your semantic level you used in your HTML. But, to make and readable and understandable HTML for you and your colleauges, it's recomendable using semantic HTML from the start to the end.

  Visual:

  • Be more focused in the design model: your view (desk mode) is not bad, but the boxes looks bigger than expected. making things smaller would fix the problem. The same advise to mobile mode.

  Recommendations:

  • Use more semantic HTML.
  • Use classes.
  • Search a little bit about measure unit systems.
  • Practice your styling skills.

  I know it's frustrating designing web pages, specially making CSS code. But, as many practice as you make, you'll get better. Never give up!

  PD: sorry if my english sucks :-(

  Marked as helpful

  1

  ---

  

  RohanIV•160

  @RohanIVPosted 7 months ago

  Thank you this is helpful @Eduardo-Pineda

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  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 helpful

  1

  ---

  

  RohanIV•160

  @RohanIVPosted 7 months ago

  Thank you. I'll keep that in mind @danielmrz-dev

  1