Code review html + css

pytanie zadane 13 lutego 2017 w HTML i CSS przez dewe Gaduła (4,300 p.)

Proszę o ocenę kodu jak i designu; co zmienić, główną rozkminę mam co do nawigacji górnej, jakieś pomysły jak to wyśrodkować w inny sposób niż jest teraz? ;)
Oczywiście w opiniach będzie slider, no i zakoduję RWD, ale na razie chcę mięć dobrze zakodowaną podstawę.
ps; Ostatnie prace i kontakt to nic specjalnego więc jeszcze nie kodowałem, wrzucam tylko to do oceny.

http://unixweb.pl/por/

1	komentarz 13 lutego 2017 przez Vento Pasjonat (17,120 p.) http://tutorials.comandeer.pl/html5-blog.html

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Póki co nie stosuję znaczników html5, nie wszystkie przeglądarki interpretują takowy kod.

1	komentarz 13 lutego 2017 przez Pietrak Pasjonat (18,850 p.) Wszystkie współczesne.

1	komentarz 13 lutego 2017 przez xmentor Nałogowiec (49,520 p.) Póki co nie stosuję znaczników html5, nie wszystkie przeglądarki interpretują takowy kod. html5shiv.

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

W pewnych dość rozwiniętych firmach nie stosują ich, wiem, bo odbywałem praktyki w niej, dlatego sam póki co nie stosuję, być może przekoduję stronę za jakiś czas.

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Na ten moment prosiłbym o wytknięcie bieżących błędów

komentarz 13 lutego 2017 przez xmentor Nałogowiec (49,520 p.)

W pewnych dość rozwiniętych firmach nie stosują ich

No to słabo są one rozwinięte.

brak title w head
używasz znacznika hr raczej nie zgodnie z jego zastosowaniem, dodatkowo używasz atrybutu size i noshade, które w HTML5 są zdeprecjonowane - możesz użyć :after i :before
obrazki nie mają altów, nawet jeżeli są jednie dekoracyjne powinny mieć pusty alt.

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

alty i title obrazkowe to sprawa oczywista, kod klepałem na szybko i na razie tego nie wstawiłem, zajmę się tym zaraz przed pisaniem kodu js, title zaraz dodam no i hr jutro poprawie :)

3 odpowiedzi

odpowiedź 13 lutego 2017 przez radek024 Szeryf (77,160 p.)

brak responsywności poniżej 700px - to duży błąd,
brak atrybutu title,
brak obsługi polskich znaków...
meta charset definiujemy zawsze jako pierwszy w head!
a style definiujące ostateczny wygląd strony jako ostatnie na liście dołączonych styli,
kod nie jest sematyczny,
hr jest znacznikiem sematycznym - tutaj służy jako dekoracja,

<div class="row-button">
 <p class="button active left">
  <a href="#">LOREM IPSUM</a>
</p>
<p class="button right">
 <a href="#">LOREM IPSUM</a>
</p>
</div>

nazwy klas niesematyczne, przy okazji - nie stosujemy nazw w stylu left, right w dobie wszechobecnego RWD,
obrazki w "Co oferuj�?" powinny mieć atrybut alt - pusty lub nie w zależności od ich docelowej treści,

<p class="read-more"><a href="#">CZYTAJ DALEJ</a></p>

paragraf zbędny - można wystylizować odnośnik,
ID nie stosujemy do stylizowania - strona powinna być responsywna - nigdy nie wiesz, czy nie przyda Ci się po raz drugi taki sam element,
używasz float w CSS, ale nie clearujesz ich, co może spowodować sypanie się strony(przynajmniej nie ma ich tam gdzie, być powinny - w CSS),

#header .box .sup-header { }

pusty zapis jest zbędnym zapisem,

Walidator: [KLIK]
Twoja strona jest idealnym przykładem tego, że fajna stronka z wyglądu może zostać napisana źle pod względem kodu :).

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Oczywiście znaki poprawiłem, title dodany i te mniejsze błędy poprawione/poprawię.

Co do responsywności w temacie jest napisane, iż RWD będę pisał w późniejszej fazie, gdy podstawa będzie skończona, alty dodam i tym podobne.

Najbardziej mnie zastanawia nawigacja górna. Dobrze to zakodowałem? :) Oraz cała górna sekcja zresztą.

komentarz 13 lutego 2017 przez radek024 Szeryf (77,160 p.)

Jeżeli nie zakodujesz czegoś na początku projektu, to później:

nie będziesz się mógł w nim odnaleźć,
nie będzie Ci się chciało,
będziesz uważał, że stronka i tak wygląda dobrze.

Nawigacja jest zrobiona.. dziwnie. Masz float, nie czyścisz go, position: absolute też nie jest potrzebny... najłatwiej tutaj flexem to zrobić. I z pewnością bez kombinowania.

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

flex nie jest obsługiwany na telefonach i dlatego tego nie stosuję, chciałbym wyśrodkować to w "normalny" sposób, ale nie mam pomysłów.

2	komentarz 13 lutego 2017 przez Ivan Maniak (60,650 p.) CO? Flexbox nie jest obsługiwany na telefonach? Od kiedy? http://caniuse.com/#feat=flexbox Nawet OPERA MINI go wspiera, a jak to cudo coś wspiera co większość przeglądarek będzie wspierało :)

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Pionowe wyśrodkowanie flexem nie działało mi jeszcze na przełomie lipca gdy kodowałem pewien projekt :P dlatego się zraziłem

1	komentarz 13 lutego 2017 przez Ivan Maniak (60,650 p.) Może źle zakodowałeś :) Jak się zraziłeś to powiedz, że nie potrafisz z tym współpracować, a nie że przeglądarki nie wspierają :)

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Kodowałem to w firmie na praktykach, doradzał mi fullstack developer z tytułem magistra, sądzę, że słusznie mi powiedział, iż flex nie jest obsługiwany na telefonach.

komentarz 13 lutego 2017 przez dewe Gaduła (4,300 p.)

Na kompie działało, ale na telefonie się całkowicie rozjeżdżało, nie wiem ;p zostawię na razie tak jak jest, może wykombinuje inne rozwiązanie niż flex.

komentarz 13 lutego 2017 przez Ivan Maniak (60,650 p.)

Miałeś kiedyś nauczyciela, który w ogóle nie nadawał się do nauczania lub nie miał pojęcia o czym mówi? On też miał/ma tytuł magistra.

W linku, który Ci podałem, możesz sobie rozwinąć dane "Date relative". Od 16 marca 2015 roku flexbox-a zaczęła wspierać Opera Mini, czyli wszystkie większe przeglądarki od tego momentu wspierają flexbox-a. Jedynie IE ma tam parę niedociągnięć, które można załatać. Lepiej sprawdzić u źródła, czy od losowej osoby?

Zanim coś powtórzysz, warto sprawdzić czy coś się zmieniło, bo tutaj wszystko się szybko zmienia. No i czy w ogóle to osoba mówi prawdę i tylko prawdę. Uzupełni braki i powodzenia :)

odpowiedź 13 lutego 2017 przez Benek Szeryf (91,010 p.)

odpowiedź 13 lutego 2017 przez Ivan Maniak (60,650 p.)

Pisz po polskiemu :) Pierwsza litera wielka, kolejne małymi, a jak chcesz, aby każda wizualnie była wielka to możesz to zrobić z poziomu CSS-a
:focus nie jest widoczny na przyciskach, a w nawigacji to mógłbym się pokłócić czy widać go, czy jednak nie. Ale i tak plus, bo nie został usunięty.
Stylizuj po id tylko w ostateczności. Tak samo z znacznikami. Jeden z powodów: CSS powinien być reusable (Jak ktoś wymyśli godne tłumaczenia to mogę go pogłaskać po włosach :))