Social media links using semantic HTML and CSS

Community feedback

• 

  Mathieu-310•180

  @Mathieu-310Posted 25 days ago

  Hi!

  Great job!

  Here is some points you can improve:

  • In 320px wide there is no padding between your design and the border of the screen.

  • Also in small screen your footer's content overflow due to the set height.

  • Finally you should have a transition in your interactive component so that they are fluid.

  In general your design is good.

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  milicaaa175•130

  @milicaaa175Posted 25 days ago

  @Mathieu-310 Hi! Could you please give me a suggestion for the first point? I realized this after I posted the solution and I'm still trying to figure out how to fix that. Also, I'm not sure I understand the last point so could you elaborate a bit? Thank you for your help!

  0

  

  Mathieu-310•180

  @Mathieu-310Posted 25 days ago

  @milicaaa175

  For the first point you can reduce your section's max-width and add some paddind in your main element like this:

  section {
  max-with: 20rem;
  }
  
  main{
  padding: 1rem:
  }
  

  The last thing is when you add any visual feedback (e.g: :hover :focus, animation,..) on an element you have to apply the transition property so that your visal effect look smoothly and nice

  Like this:

  *transition property*
  
  .button{
   transition: 0.5s, ease;
  }
  .button:hover{
    background-color: #f1f3f4f5:
    color: red:
  }
  

  Marked as helpful

  0

  

  P

  milicaaa175•130

  @milicaaa175Posted 25 days ago

  @Mathieu-310 oh okay I get it. I didn't know about the transition property! Thanks again :)

  1
• 

  P

  KonradJam•430

  @KonradJamPosted 25 days ago

  Hi @milicaaa175!

  It's hard to find something that should be improved in your solution :)

  • You could add aria-labelledby to your section and id with the same name to your <h1> tag for better accessibility.
  • If you set the font-family, and line-height to your <section> then child elements will inherit from it, like <h1> and .text

  Marked as helpful

  0

  ---

  

  P

  milicaaa175•130

  @milicaaa175Posted 25 days ago

  @KonradJam Hi, Thanks for the feedback! I still haven't learned a lot about accessibility but I will for sure look into this :)

  0