Strona do oceny

pytanie zadane 24 stycznia 2017 w HTML i CSS przez Adecristo Początkujący (460 p.)

Witam, przygodę z tworzeniem stron zacząłem jakoś rok temu (głównie html, css, jquery).

Po roku postanowiłem już zrobić jakiś większy, responsywny projekt, a mianowicie zrobiłem stronę dla osk (nowego, ale już mocno chwalonego) w którym nie dawno zdawałem prawko. Kilka kursów z bootstrapa i oto powstała: www.oskpietrzaknowak.pl

Proszę o ocenę kodu, co poprawić itd.

Z góry dzięki i pozdrawiam ;>

4 odpowiedzi

odpowiedź 24 stycznia 2017 przez Olaf Siwiński Mądrala (7,060 p.)
wybrane 25 stycznia 2017 przez Adecristo

Najlepsza

<meta name="description" content="Strona główna ośrodka szkolenia kierowców Pietrzak&Nowak" />

Znaczniki meta można zapisywać bez slasha przy zakończeniu, tak jak to robiłeś 2 linijki wyżej.

Pliki css można zapisać jako jeden. Kiedy nie używasz HTTP/2 wpływa to negatywnie na szybkość ładowania strony.

<button type="button"></button>

W przypadku, kiedy przycisk nie znajduje się w formularzu type="button" nic nie zmienia. Jest to domyślny typ przycisku.

<img ... />

Tag img raz zapisany jest w ten sposób, a raz bez slasha.

<img src="images/slider-image1.jpg" alt="img1" />

Ten alt jest bezsensowny. Po pierwsze "img1" nic nie mówi o samym obrazku, po drugie w tym przypadku alt może być pusty. Obrazki które są zwykłymi dodatkami czy upiększeniami nie powinny mieć wypełnionego atrybutu alt.

<p>Jesteśmy nowi na rynku, ale cechuje nas wieloletnie doświadczenie instruktorskie. Instruktorzy prowadzący posiadają uprawnienia specjalistyczne:
                <br> - Instruktor Piotr Pietrzak uprawnienia kat. B oraz jako jedyny w Braniewie posiadający uprawnienia Instruktora Techniki Jazdy kat. B.
                <br> - Instruktor Krzysztof Nowak uprawnienia kat. B, B+E, C, C+E i T.
                <br>
                <br> Swoje doświadczenia chcemy przełożyć na grunt szkoły jazdy w teorii i praktyce. Kładziemy nacisk na szeroko rozumiane bezpieczeństwo ruchu drogowego. Umiejętna jazda w przyjaznych warunkach nie zdaje się na nic, gdy kierowca wpadnie w poślizg. Do takich sytuacji przygotuje kurs w naszej Szkole Jazdy. </p>

To można zapisać jako listę, a znacznik br powinien służyć do przełamania linii, a nie zastępować margines.

Znacznik h1 powinien się pojawić tylko raz w obrębie całego dokumentu HTML. Zamiast zapisywać go 5 razy powinieneś użyć nagłówków niższego stopnia.

<div class="separator"></div>

To można zastąpić pseudoelementami :after i :before. Element który jest pusty jest zbędny.

<section id="parralax-image"></section>

Sekcja która jest pusta też nie powinna się tu znajdować.

target="_blank"

target="_blank" używa się tylko w "skrajnych" przypadkach. Zazwyczaj lepiej go po prostu pominąć - link

id="formularzkontaktowy"

Nazwy klas, id, zmiennych lepiej zapisywać po angielsku, tym bardziej że robiłeś to w wcześniej. Dodatkowo mieszanie języków w obrębie nazwy jednej klasy jest jeszcze gorsze - .opinia-person-under

Ładujesz 7 skryptów js, z czego 5 z serwera strony. To można załadować jednym requestem, co znacznie poprawi szybkość ładowania.

Outline strony może wyglądać lepiej, ale nie jest źle.

Kilka wskazówek jak poprawić szybkość ładowania się strony.

Poza tym to strona wizualnie wygląda na prawdę dobrze. Można po niej nawigować tabem, elementy mają style dla :focus oraz pola formularza mają label.

komentarz 24 stycznia 2017 przez Adecristo Początkujący (460 p.)

Dzięki za opinię!

Hmm, można to już nazwać pół profesjonalną stroną? Czy jeszcze wieje amatorką?

komentarz 24 stycznia 2017 przez Olaf Siwiński Mądrala (7,060 p.)

To co ktoś uważa za profesjonalną stronę, jest względne. Ja jednak na pewno nie nazwał był twojej pracy "amatorką". Po długości mojej odpowiedzi może się wydawać, że popełniłeś jakoś nie wiadomo ile błędów, jednak w znacznej części dotyczą one do złych praktyk, semantyki i standardów, których przyswojenie sprawiało trudności. Teraz gdy opanowałeś HTML na tym poziomie wystarczy poczytać o tych zagadnieniach. Strony które mogę polecić to

tutorials.comandeer.pl

webkrytyk.pl

ferrante.pl

webkod.pl

Polecam też poszukać podobnych tematów na forum. Czytanie krytyki dotyczącej zarówno swojej, jak i czyjejś pracy jest niezastąpione w nauce programowania.

odpowiedź 24 stycznia 2017 przez Ivan Maniak (60,650 p.)

Brak [lang] dla html
Outline dokumentu niepoprawny
Slajdy, "kroki" mogą, a nawet powinny być listą.
Niedostępne ikonki :)

<p>Jesteśmy nowi na rynku, ale cechuje nas wieloletnie doświadczenie instruktorskie. Instruktorzy prowadzący posiadają uprawnienia specjalistyczne:
                <br> - Instruktor Piotr Pietrzak uprawnienia kat. B oraz jako jedyny w Braniewie posiadający uprawnienia Instruktora Techniki Jazdy kat. B.
                <br> - Instruktor Krzysztof Nowak uprawnienia kat. B, B+E, C, C+E i T.
                <br>
                <br> Swoje doświadczenia chcemy przełożyć na grunt szkoły jazdy w teorii i praktyce. Kładziemy nacisk na szeroko rozumiane bezpieczeństwo ruchu drogowego. Umiejętna jazda w przyjaznych warunkach nie zdaje się na nic, gdy kierowca wpadnie w poślizg. Do takich sytuacji przygotuje kurs w naszej Szkole Jazdy. </p>

Rozumiem, że to jest lista, więc stwórz listę.

```
<div class="separator"></div>
```
Od tego jest border-bottom lub hr (w tym przypadku border-bottom)
Rozumiem, że opinie są niedokończone i roboczo poukrywane. plus opinie to lista
Obrazki mają jakieś losowe alt. W przypadku gdy zdjęcie jest ważne dla treści strony/on sam nią jest, powinien zawierać w alt opis obrazka
```
<p>Napisz do nas maila
<br/> lub zadzwoń na: &nbsp; <i class="ion-android-call"></i> <b>511 152 528</b></p>
```
W tym przypadku tworzysz nową linie, która nie ma sensu podczas czytania. Ma ona tylko "sens" wizualny. W takim przypadku jedna z części powinna zostać wsadzona do jakiegoś span-a, a on sam powinien dostać display: block
Numer telefonu można wsadzić do a[href=tel:101010010]
Ograniczenia prawne na stronie można wsadzić do small
Podczas wchodzenia na stronę wykonuje 94 requesty i od każdego dostaje 200 OK, zamiast 304 Non Modified.
Cache. Cache (almost) everything.
Związane z requestami, ale najwyżej powtórzę: Wszystkie skrypty i style, które ładujesz powinny znaleźć się w jednym pliku i tylko jeden plik powinien być ładowany. Może nie jeden, ale na pewno jest ich za dużo.
Tekst w "Szybko i efektywnie", "Interaktywne lekcje", "Pozytywne wyniki" ma za słaby kontrast z tłem i przez to może być słabo widzialny dla niektórych osób.
Czcionki (w tym ikonki), które i tak są ładowane jako stylesheet powinny być w pliku z CSS-em, bo tam one są potrzebne. Czcionki nie używasz/ustalasz w HTML-u, a w CSS-ie. @import!

komentarz 24 stycznia 2017 przez Olaf Siwiński Mądrala (7,060 p.)

Znacznik HTML ma lang

komentarz 24 stycznia 2017 przez Ivan Maniak (60,650 p.)

Mój błąd. Nie wiem skąd to wziąłem.

komentarz 24 stycznia 2017 przez Adecristo Początkujący (460 p.)

Dzięki za opinię, wyciągnę wnioski :)

odpowiedź 24 stycznia 2017 przez Paweł123 Nałogowiec (33,500 p.)

odpowiedź 24 stycznia 2017 przez Jack9999 Początkujący (300 p.)

Dlaczego ładujesz skrypty JS pod koniec <body> a nie w <head> ? Z tego co wiem to ładowanie plików na stronę powinno odbywać się w <head> a ich wykonanie można uzależnić od momentu gdy DOM będzie gotowy np.

$(document).ready( /*tutaj funkcja*/ )

oczywiście mogę się mylić i jest to bardziej pytanie niż zarzut :)

komentarz 24 stycznia 2017 przez Olaf Siwiński Mądrala (7,060 p.)

Skrypty lepiej ładować pod koniec body. Ładując jest w head sprawiasz że przeglądarka zamiast renderować HTML i CSS zajmuje się przetwarzaniem skryptów. Przy małych plikach js i dzisiejszych standardach to nie ma aż tak dużego znaczenia, ale gdy będziesz ładował tak jak w tym przypadku 7 skryptów w head to użytkownik będzie zmuszony oglądać białą stronę do czasu ich przetworzenia.