Proszę o rzucenie okiem i Wasze opinie, www

pytanie zadane 6 lutego 2016 w HTML i CSS przez patrycja Początkujący (450 p.)

Witam. Zaczęłam się niedawno bawić w html i css, może to nie jest moje pierwsze podejście, bo robiłam już parę takich szablonów, opierających się na odcinkach Pana Mirosława, ale ta jest pierwsza, do której się nieco bardziej przyłożyłam. Brat dużo gra w counter strike i tak z braku inspiracji zaczęłam sobie pisać. Zanim przejdę do jakiś bardziej rozbudowanych stron, chciałabym najpierw ogarnąć dobrze html i css. Dlatego chciałabym Was prosić, żeby rzucić okiem na kod - czy może jest tam coś niepotrzebnego, albo coś co niby wygląda, ale zrobilibyście to inaczej..

adres do stronki:

http://gamersfragteam.cba.pl/

Pozdrawiam

6 odpowiedzi

odpowiedź 6 lutego 2016 przez Javowiec Pasjonat (21,560 p.)

Pierwszy otwarty znacznik powinien być ostatnim zamkniętym, drugi przedostatnim itd.

Masz coś takiego:

<div><a><i></a></i></div>

Powinno być:

<div><a><i></i></a></div>

Kwestia wizualna: menu i litery są w ogóle nieczytelne na tym tle :)

komentarz 6 lutego 2016 przez patrycja Początkujący (450 p.)

O właśnie, zaraz to poprzeglądam, dziękuję!

odpowiedź 6 lutego 2016 przez Narmianek Nowicjusz (180 p.)

Co do samego kodu popełniasz błędy z zamykaniem znaczników. Pamiętaj zasadę, Pierwsze co otworzyłeś, ostatnie zamykasz. Jeśli chodzi o kwestię wyglądu tej strony to bardzo nieczytelna. Straszny efekt "przybliżenia" Przez co od patrzenia bolą oczy. Ale pomysłowo jest ok.

komentarz 6 lutego 2016 przez patrycja Początkujący (450 p.)

dzięki popracuję nad tym

odpowiedź 6 lutego 2016 przez Arkadiusz Waluk Ekspert (290,250 p.)

Od razu po wejściu na stronę rzuca mi się w oczy tło - a konkretniej to co się dzieje gdy obrazek, że tak to nazwę, się skończy i powtarza się w pionie: http://prntscr.com/9zrum8 - fakt, na rozdzielczości FullHD jest dobrze, ale na 1280x1024 wygląda to słabo. Ogólnie stronka nawet mi się podoba, chociaż dałbym chyba troszeczkę mniejszą przeźroczystość, tak aby wszystkie elementy były lepiej widoczne. Ikonka Steamu jest za to aż za bardzo widoczna - nie wiem czy to celowy efekt, czy niedopatrzenie (jeszcze do tego link prowadzi do TeamSpeaka ale to tylko kwestia podpięcia odpowiednich linków, pewnie specjalnie tego nie robiłaś).

Co do samego kodu to rzuca się w oczy dużo

<div style="clear:both;"></div>

a można to zastąpić ładniejszymi pseudoelementami. Menu czy takie linki do sociali aż się prosi żeby zrobić na listach, a nie po prostu na divach - tak jest teraz polecane. Na koniec jeszcze dodam, że warto by było też użyć nowych znaczników z HTML5 oraz nagłówków - teraz strona jest na samych nic nie znaczących divach więc lekko słabo.

komentarz 6 lutego 2016 przez patrycja Początkujący (450 p.)

no ta przeźroczystość trochę mnie zgubiła tutaj

o te divy mi właśnie chodziło, czy nie za dużo, czy można to jakoś inaczej zrobić - celna uwaga, będę kombinować na listach następnym razem

dziękuję

komentarz 6 lutego 2016 przez Arkadiusz Waluk Ekspert (290,250 p.)

Polecam jeszcze zajrzeć tutaj: http://tutorials.comandeer.pl/html5-blog.html ;)

komentarz 6 lutego 2016 przez patrycja Początkujący (450 p.)

O dzięki - przyda się

odpowiedź 6 lutego 2016 przez Pietrak Pasjonat (18,850 p.)

Nie jest źle od strony koncepcyjnej. Fajny pomysł na styl, ale gorsze wykonanie. Za duża przezroczystość. Przez co kompletnie nie czytelne. W drużyna za małe paddingi - źle to się czyta.

Definujesz, że używasz html5, a potem takie kwiatki w head:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Language" content="pl">

nie musisz pisać type="text/css" i type="text/javascript" dla znaczników, w których domyślnie jest css i js.
-brak lang w html
-brak jakiejkolwiek semantyki - wszędzie <div> zamiast header, main, article, footer, nav itp.
-brak wsparcia do czytników ekranów - img nie mają odpowiednich alt, ikonki fontello nie mają etykiet
-brak normalizacji css
-brak responsywności i nie skalowalne tło dla pionowych minitorów
-używanie do stylizacji id jest złą praktyką. więcej w komentarzach na swoim blogu napisał comandeer: http://tutorials.comandeer.pl/html5-blog.html

No i cba... przejście miedzy stronami trwa z 5s.

komentarz 6 lutego 2016 przez patrycja Początkujący (450 p.)

Jeśli chodzi o head to cenna uwaga, moja cała wiedza na razie opiera się o odcinki Pana Mirosława, tak samo z tymi divami

dziękuję za uwagi i stronkę, zanim zacznę robić coś nowego to tam zajrzę