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

Ocena strony

VPS Starter Arubacloud
0 głosów
329 wizyt
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 (90,690 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

+2 głosów
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

2
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

link niestety nie działa :|

https://jsfiddle.net/2uhg0kgr/

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

Moim zdaniem logo nie powinno być częścią nawigacji, aczkolwiek Comandeer wspomina o wzorcu umieszczania loga w menu w swoim artykule na temat nagłówków.

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

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

Po prostu cały ten tekst w footerze powinien być paragrafem ;)

0 głosów
odpowiedź 6 lipca 2017 przez Matiss Nowicjusz (160 p.)
Strona już działa!

Podobne pytania

0 głosów
3 odpowiedzi 256 wizyt
pytanie zadane 30 maja 2017 w Nasze projekty przez Radekol Bywalec (2,880 p.)
0 głosów
2 odpowiedzi 369 wizyt
pytanie zadane 7 maja 2017 w Nasze projekty przez czmyk Obywatel (1,100 p.)
+1 głos
3 odpowiedzi 236 wizyt
pytanie zadane 23 marca 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...