Ocena strony

Question

Cześć wszystkim, mam do oceny moją pierwszą stronę napisaną w pełni z rwd. Layout jest ze grupy facebook'owej Weekly WebDev Challenge. 

GIT:

https://github.com/myniko/myniko.github.io/tree/master/Treehouse

LIVE:

https://myniko.github.io/Treehouse/

ps. Pierwszy raz korzystam z github i nie jestem pewien czy wszystko dobrze wrzuciłem. 

Answer 1

Czcionki można pobrać jednym requestem.

<img src="img/logo.png" alt="Treehouse">

To powinno być nad nav w nagłówku pierwszego stopnia + link.

aria-label="navigation menu"

<button type="button" title="Open menu" class="hamburger-icon" aria-label="navigation menu" role="button" aria-controls="navigation" aria-expanded="false">
  <!-- svg -->
</button>

Przycisk powinien być nad listą. W aria-label można dać 'Open/close menu'. aria-controls u Ciebie wskazuje na element o id=navigation, który nie istnieje. Dodanie tutaj role=button mija się z celem(bo to jest przycisk).

Główną treść strony wrzucić do można wrzucić do znacznika main.

<h1>Creative Digital<br> Solutions</h1>

H1 będzie na logu, więc tutaj h2(?). br ma inne zastosowanie, pokombinowałbym z np. min-width.

<span class="checkmark"><img src="img/checkmark.png">Initial Setup & Customizations</span>
<span class="checkmark"><img src="img/checkmark.png">Regular Updates</span>
<span class="checkmark"><img src="img/checkmark.png">Round The Clock Support</span>

To wygląda jak lista, img powinien mieć pusty alt(przy liście na befoerze dla li mógłbyś wstawić ten obrazek).

<img src="img/Icon-Heart.png">

itp. brak atrybutu alt. U Ciebie powinny być puste.

Hierarchia nagłówków trochę leży. Masz np.: h2 -> h5, poprawnie powinno być h2 -> h3.

<section class="partners">
  <a href="#"><img src="img/Envato.png" alt="Envato"></a>
  <a href="#"><img src="img/WordPress.png" alt="WordPress"></a>
  <a href="#"><img src="img/Tuts+.png" alt="Tuts+"></a>
  <a href="#"><img src="img/Microlancer.png" alt="Microlancer"></a>
</section>

Trzeba się zastanowić, czy sekcja, która nie ma nagłówka powinna być sekcją. Osobiście bym dodał nagłówek ukryty klasą visuallyhidden.

<div class="cell">
  <img src="img/location.png">
  <span>55 Main St. Toronto, ON MIH 3A5</span>
</div>
<div class="cell">
  <img src="img/iPhone.png">
  <span>(416) 555 5252</span>
</div>
<div class="cell">
  <img src="img/email.png">
  <span>hello@treehouse.com</span>
</div>

Zrobiłbym to na liście dl, obrazki powinny mieć odpowiedni alt(Address, Phone, E-mail).

<div class="fontello">
  <a href="#"><span class="fontello-icon icon-twitter-circled"></span></a>
  <a href="#"><span class="fontello-icon icon-facebook-circled"></span></a>
  <a href="#"><span class="fontello-icon icon-gplus-circled"></span></a>
  <a href="#"><span class="fontello-icon icon-pinterest-circled"></span></a>
</div>

Jest to lista social media, myślę, że lista definicji by się tu sprawdziła. Dodatkowo poczytaj o wstawianiu ikon.

Comments

Wielkie dzięki za poświęcenie czasu na sprawdzenie mojego kodu 

Już chyba wszystko poprawiłem, jak by ktoś coś jeszcze znalazł piszcie śmiało a poprawie