• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena strony

+3 głosów
271 wizyt
pytanie zadane 25 lipca 2017 w Nasze projekty przez niko404 Użytkownik (940 p.)

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. 

1 odpowiedź

+3 głosów
odpowiedź 25 lipca 2017 przez xmentor Nałogowiec (49,860 p.)
edycja 31 lipca 2017 przez xmentor
 
Najlepsza

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.

2
komentarz 3 sierpnia 2017 przez niko404 Użytkownik (940 p.)

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

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

Podobne pytania

+2 głosów
4 odpowiedzi 255 wizyt
0 głosów
4 odpowiedzi 469 wizyt
pytanie zadane 16 lipca 2017 w Nasze projekty przez Artek Stary wyjadacz (11,820 p.)
0 głosów
5 odpowiedzi 420 wizyt
pytanie zadane 6 grudnia 2017 w Nasze projekty przez Bakr Mądrala (6,880 p.)

88,721 zapytań

137,332 odpowiedzi

306,822 komentarzy

58,907 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...