Ocena strony

pytanie zadane 5 lipca 2017 w Nasze projekty przez Matiss Nowicjusz (160 p.)
edycja 6 lipca 2017 przez Matiss

Cześć, jestem uczniem technikum informatycznego i od jakiegoś czasu zacząłem bawić się w robienie własnej strony internetowej przy tym ucząc się nowych rzeczy. Jest to moja pierwsza strona więc jestem świadomy ilości błędów na jakie traficie. Zwracam się do zainteresowanych z prośbą o wytknięcie mi tych błędów, lub samą ocenę strony.

Pozdrawiam i z góry dziękuje!

https://thematiss.github.io/

3	komentarz 5 lipca 2017 przez kubaapk Nałogowiec (44,270 p.) Usuń konto wykopku. ( ͡° ͜ʖ ͡°)

1	komentarz 6 lipca 2017 przez Benek Szeryf (93,850 p.) I kącik muzyczny, bo tylko zmniejsza to Twoją reputację u potencjalnego pracodawcy.

komentarz 6 lipca 2017 przez abe192 Nowicjusz (140 p.)

zgadzam się z wykopem. na otwarcie wrzuć jakieś insta albo coś innego "popularnego"

2 odpowiedzi

odpowiedź 5 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

<div class="lista"><img src="images/menu.png" class="list"></div>

To powinien być przycisk. Obrazek powinien mieć odpowiedni alt. Prawidłową implementację togglera znajdziesz tu: https://jsfiddle.net/2uhg0kgr/ (przykład Comandeera)

<div id="toggle">( ͡° ͜ʖ ͡°)</div>

Co robi ten div w liście? I czemu miał służyć?

<img src="images/logo.svg" class="logo" alt="Obrazek Korony"/>

Nieprawidłowy alt! Jeżeli to jest oficjalne logo witryny, to tekstem alternatywny powinna być nazwa witryny.

Posiadasz dwie identyczne listy(menu), wystarczy jedna i odpowiednie ostylowanie.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>

Te skrypty powinny być podpięte przed </body>

<img src="images/mail.png" class="mail" alt="Koperta"/>

Znowu nieprawidłowy alt. Tutaj obrazek jest dekoracją, więc alt powinien pozostać pusty.

<img src="images/fb-art.png" class="icon" alt="Logo Facebooka"/>

http://webaim.org/techniques/alttext/ Polecam!

</body>
<div id="border"></div>
<footer>
  Copyright &copy; 2017 <b>MateuszKrawczyk.pl</b> wszelkie prawa zastrzeżone.
</footer>

Czemu to jest poza ciałem dokumentu? Ten div#border powinieneś wyrzucić bo jest pusty i niczemu nie służy i odpowiednio ostylować znacznik footer.

<a href="#html" class="scrollup"></a>

Kolejny pusty element. Link powinien zostać uzupełniony treścią, która zostanie ukryta przez np. .visuallyhidden

<img src="images/mateusz.png" class="zdjecie" alt="młody mężczyzna w czerwonej koszulce"/>

Myślę, że Twoje imię i nazwisko byłoby odpowiednim altem.

Na stronie brakuje nagłówków(w szczególności H1), jak i akapitów.

To:

<div class="title">Wykorzystuję</div>

lub to

<div class="title">Sposób działania</div>

powinno być H2.

W nagłówku pierwszego stopnia powinno znaleźć się twoje logo - oczywiście poza tym elementem nawigacyjnym. Brakuje mi również znaczników article/section.

Warto czasami użyć walidatora

Przydatne linki:

http://tutorials.comandeer.pl/html5-blog.html

https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html

komentarz 5 lipca 2017 przez imklau Nałogowiec (42,090 p.)

to ja jeszcze do tego wyżej dodam:

<div id="main"> mógłby być po prostu znacznikiem HTML5 <main>

<footer> 
     Copyright &copy; 2017 <b>MateuszKrawczyk.pl</b> wszelkie prawa zastrzeżone. 
</footer>

tu zabrakło Ci znacznika <p> w środku

i popracuj nad nazwami klas, bo teraz to właściwie ciężko stwierdzić, za co niektóre odpowiadają

komentarz 5 lipca 2017 przez Matiss Nowicjusz (160 p.)

To powinien być przycisk. Obrazek powinien mieć odpowiedni alt. Prawidłową implementację togglera znajdziesz tu: https://jsfiddle.net/2uhg0kgr/ (przykład Comandeera
)

Alt obrazka ustawiony, link niestety nie działa :|

Posiadasz dwie identyczne listy(menu), wystarczy jedna i odpowiednie ostylowanie.

Wiem, niestety dodając diwy z efektem wyjeżdzającej lini z lewej strony nie byłem w stanie tego ogarnąć w wersji mobilnej i zdecydowałem się na stworzenie dwóch osobnych.

Nieprawidłowy alt! Jeżeli to jest oficjalne logo witryny, to tekstem alternatywny powinna być nazwa witryny.

Poprawione.

Te skrypty powinny być podpięte przed </body>

Poprawione.

Znowu nieprawidłowy alt. Tutaj obrazek jest dekoracją, więc alt powinien pozostać pusty.

Poprawione.

Czemu to jest poza ciałem dokumentu? Ten div#border powinieneś wyrzucić bo jest pusty i niczemu nie służy i odpowiednio ostylować znacznik footer.

W sumie sam nie wiem czemu było poza, już zmieniłem. A z tym divem border wiem że nie powinien być pusty, i próbowałem już wcześniej to ostylować w samym footerze ale mi to nie wychodziło i wygląda to wtedy tak:

Kolejny pusty element. Link powinien zostać uzupełniony treścią, która zostanie ukryta przez np. .visuallyhidden

Poprawione? Nie jestem pewien czy dobrze to zrobiłem.

Myślę, że Twoje imię i nazwisko byłoby odpowiednim altem.

Na stronie brakuje nagłówków(w szczególności H1), jak i akapitów.

Alt ustawiony, nie za bardzo wiem czemu nadać nagłówek h1 skoro logo jest elementem nawigacyjnym. Znaczniki h2 pododawałem w sekcji 'o mnie'.

Brakuje mi również znaczników article/section.

Znacznika section używam w wpisach z zakładki Blog, ale rozumiem że powinno ich być więcej :D

<div id="main"> mógłby być po prostu znacznikiem HTML5 <main>

Poprawione.

tu zabrakło Ci znacznika <p> w środku

Chodzi o cały tekst czy zamienić <b> na paragraf?

i popracuj nad nazwami klas, bo teraz to właściwie ciężko stwierdzić, za co niektóre odpowiadają

Popracuję! Nie ukrywam że momentami nawet się nie starałem zadbać o ich poprawność

Dziękuje za rady :)

komentarz 5 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

A z tym divem border wiem że nie powinien być pusty, i próbowałem już wcześniej to ostylować w samym footerze ale mi to nie wychodziło i wygląda to wtedy tak:

Możesz to wykonać na :before/:after