Responsive Equalizer landing page challenge

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted about 3 years ago

  It looks nice, Some notes to improve your code

  HTML markup

  • Instead of putting the logo inside the <div/> use either <img /> or svg .
  • It's better to divide your page this way, instead of using only divs

  <header >

  <h1>

  <p/>

  <header/>

  <main /><footer/>

  use <ul> for social media links.

  it's better to make those links accessible here is how to make it

  (hiding the icon from screen reader because it's only for the decoration purpose, adding text then hiding it visually using .visually-hiden class)-I am using fontawesome icon to demonstrate-

  <a href="facebook/...">
  <i class="fab fa-facebook-f" aria-hidden="true"></i>
  <span class="visually-hidden">facebook<span>
  </a>
  

  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  

  CSS

  • Avoiding setting an explicit height to elements (h1), it won't grow to wrap the content inside of it, let the height get adjusted automatically.
  • Instead of using px for font size use rem (or em if you want to inherent from parent element ) to make your text accessible, the user will be able to adjust their font preference, px won't all the user to do that.
  • You can use either flex or grid here (avoid absolute position next time, because it removes the element from the global flow), personally how I chose between flex and grid, I don't have a specific method, it dependence on the layout

  Marked as helpful

  1

  ---

  

  Anubliss•460

  @Anubliss-0Posted about 3 years ago

  @zineb-Bou

  Thanks for taking the time to read my code! Just a couple of things I was wondering about....

  The logo was in the div so that it wouldn't get picked up by a screen reader, in hindsight maybe the visitor would like to know what page they are on haha. I agree though, semantics are important in HTML.

  I have seen <ul> used for navigation links in the past, i hadn't considered using an unordered list for the social media links too. I will keep that in mind in the future. I will also add in some text with the visually-hidden property to give the social media links some context.

  One thing I wouldn't mind more info on though is the use of absolute positioning. This is actually my first time using it on a webpage and it seemed rather useful! When is/isn't a good time to use it?

  Thanks again!

  0