Ocena strony

pytanie zadane 22 sierpnia 2016 w Nasze projekty przez thedaw Obywatel (1,810 p.)

Chciałbym Was prosić o ocenę mojej strony. Jestem otwarty na wszelkie rady i sugestie co mógłbym poprawić/ulepszyć/zmienić.

link: http://kostrzi.pl/myPortfolio/

4 odpowiedzi

odpowiedź 22 sierpnia 2016 przez Comandeer Guru (601,590 p.)
wybrane 23 sierpnia 2016 przez thedaw

Najlepsza

Focus na projektach jest ledwo widoczny. Można by z powodzeniem przypisać do niego style z :hover.
JS ma inne logo.
Etykiety w formularzu nie fokusują pól.
Linki w menu powinny zmieniać hash.
Brak określenia języka strony przez html[lang].
Swoje style należy dawać po stylach frameworka. Inaczej mogą zostać nadpisane lub będą miały niepotrzebnie wysoką specyficzność.
Deklaracja kodowania powinna być pierwsza w head.
nav nie potrzebuje [role=navigation].
```
<span class="sr-only">Toggle navigation</span>
```
Chyba na żadnej polskiej stronie nie widziałem tego po polsku… ;)
.navbar IMO powinno być głównym nagłówkiem.
Czemu .intro-img nie jest po prostu tłem albo pseudoelementem?
Czemu hr.divider nie jest po prostu border-bottom?
Późniejsze sekcje można otoczyć main.

<span class="glyphicon glyphicon-user icon"></span>

Polecam poczytać o dostępnych ikonkach.

Tekst powinien być podzielony na akapity.
[alt] w portfolio nic nie mówią o poszczególnych projektach.

<figure>
                        <img src="img/logo_html.png" class="img-responsive img-centered center" alt="html logo" />
                        <figcaption>HTML</figcaption>
                    </figure>

Bezsens. Umiejętności to raczej lista. I tutaj po prostu zrobiłbym:

<li>
    <img src="img/logo_html.png" class="img-responsive img-centered center" alt="">
    <p>HTML</p>
</li>

Czemu pusty [alt]? Bo to samo info jest w akapicie po obrazku, więc nie dublujemy informacji.

<div class="oferta-icon">
                            <img src="img/programming.png" class="img-centered" alt="programming" />
                        </div>
                        <div class="oferta-caption">
                            Kodowanie szablonów PSD do HTML/CSS
                        </div>

Oferta to też lista. A obrazki w tym wypadku pełnią rolę ozdobników, więc powinny mieć pusty [alt]:

<li>
    <div class="oferta-icon">
        <img src="img/programming.png" class="img-centered" alt="">
    </div>
    <p class="oferta-caption">Kodowanie szablonów PSD do HTML/CSS</p>
</li>

W formularzach etykiety do pól należy przypiąć przy pomocy atrybutu [for].

komentarz 23 sierpnia 2016 przez thedaw Obywatel (1,810 p.)

Dzięki wielkie za tak szczegółowe wskazanie błędów ;)

odpowiedź 22 sierpnia 2016 przez jpacanowski VIP (101,940 p.)
edycja 22 sierpnia 2016 przez jpacanowski

Pierwsze co się rzuca w oczy to ładowanie tła. 2.7MB to dużo. Użyj https://tinypng.com/

To zdjęcie w O MNIE też nie potrzebnie takie duże umieszczasz, skoro wyświetlasz pomniejszone.

<h2>Front-end<br/><small>web developer</small></h2>

Takie coś powoduje, że nagłówek to Front-endweb developer (bez spacji).

Zrobiłbym to np. tak:

<div class="intro-message">
    <h2>Front-end</h2>
    <p>web developer</p>
    <hr class="divider">
</div>

Albo użył spacji po "Front-end".

A ten <hr> usuń i użyj ::after

Popraw Outline dokumentu
https://validator.w3.org/nu/?showoutline=yes&doc=http%3A%2F%2Fkostrzi.pl%2FmyPortfolio%2F

Daję +

odpowiedź 23 sierpnia 2016 przez Lid$ Mądrala (6,300 p.)

odpowiedź 23 sierpnia 2016 przez Mistrz0000000 Bywalec (2,780 p.)

Na kod nie patrzę, bo przeciętny janusz, który wchodzi na twoją stronę nie interesuje się czego użyłeś do jej stworzenia. Przeciętnego janusza obchodzi wygląd, a z tym jak dla mnie to u ciebie jest 8/10

Pokaż 6 poprzednich komentarzy

komentarz 23 sierpnia 2016 przez IBB Gaduła (3,020 p.)

te znaczniki dla niepełnosprawnych

No comments...

Wiesz, Ty masz naprawdę ciekawe poglądy: semantyka Cię "denerwuje", a poprawnie napisany kod jest "bezsensowny i utrudnia" (co utrudnia??)

komentarz 23 sierpnia 2016 przez Comandeer Guru (601,590 p.)

Nie ma czegoś takiego jak "znaczniki dla niepełnosprawnych". Albo kod jest semantycznie poprawny (i przyjazny niepełnosprawnym), albo nie. Kropka.

komentarz 23 sierpnia 2016 przez IBB Gaduła (3,020 p.)

Poza tym jeśli chodzi o target audience to w tym przypadku się bardzo mylisz. Główną grupą odbiorców tego typu strony (portfolio) są potencjalni pracodawcy. I tak, część z nich to przeciętni Kowalscy, właściciele firm, którzy szukają kogoś, kto zrobi im stronkę, i sami kompletnie się na tym nie znają. Ale druga część to osoby znające się na tym bardzo dobrze, np. dyrektorzy techniczni agencji robiących strony internetowe, którzy szukają freelancerów do pracy przy konkretnym projekcie, albo osoby na stałe. Uwierz mi, zanim umówią się na rozmowę kwalifikacyjna zajrzą w kod strony, żeby zobaczyć jak ta znajomość HTML, CSS i JavaScript wygląda w praktyce.

komentarz 23 sierpnia 2016 przez Mistrz0000000 Bywalec (2,780 p.)

No i to jest dla mnie prawdziwy i niepodważalny argument. Jednak mimo to ja bardziej siedzę w back-endzie a wygląd swoich stron uznaję jako ułatwienie dla mnie w poruszaniu się po systemie. Narazie moją stronę piszę dla nauki php, a więc nie jest ona przeznaczona jakoś do użytku publicznego.

komentarz 23 sierpnia 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

No też się do końca nie zgodzę. Przeciętnego Janusza obchodzi to, żeby jego strona lądowała wysoko w wyszukiwarce. Gdy strona jest źle napisana mimo to dobrze wygląda, to i tak google obniża jej ranking przez co ląduje niżej.