Strona Początkującego ---> Ocena

pytanie zadane 3 września 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)

Witam, dzisiejszy popołudnie spędziłem na tworzeniu jakieś tam strony jak to początkujący zaczynają, wiem, że nie wygląda ona jakoś wyśmienicie, czy wspaniale, ale chciałbym, żeby spotkała się z krytycznym komentarzem osób które są już na poziomie zaawansowanym w tej branży. Chciałbym również abyście powiedzieli co zrobiłem źle a co dobrze, czego nie powinienem robić, a co wykorzystywać.Prosiłbym o szczerą krytykę.O plusy czy tez minusy rowniez prosiłbym :)

Jeżeli chodzi o to jak wygląda strona to :

Jeżeli chodzi o kod to: https://codepen.io/Mefik/pen/dqWegz

1	komentarz 3 września 2018 przez Tomek Sochacki Ekspert (227,510 p.) daj najlepiej strone na githuba i udostepnij link na gh pages, to znacznie ulatwia po pierwsze oglądanie, bo masz strone na normalnym adresie. a nie jpg, a po drugie code review bo możesz latwo wskazać konkretne linie w plikach.

1	komentarz 3 września 2018 przez radek024 Szeryf (77,160 p.) Zgadzam się z Tomkiem - code-review robi się łatwiej jeżeli strona jest na np.: Github Pages. Jeżeli nie wiesz jak to zrobić, możesz o tym przeczytać tutaj: https://radek024.github.io/blog/strony-www/2017/07/14/github-pages/

1	komentarz 4 września 2018 przez Meffy Użytkownik (730 p.) Okeej, zrobiłem tak jak mi doradziliście. https://github.com/MeffyS/MojaStrona/tree/gh-pages :)

5 odpowiedzi

odpowiedź 4 września 2018 przez radek024 Szeryf (77,160 p.)
wybrane 4 września 2018 przez Meffy

Najlepsza

warto aby html posiadał atrybut lang,

<h1> LOGO </h1>

Czy logo nie powinno czegoś przedstawiać? Co prawda zakładam że to tymczasowe - ale uczulam.
Wcięcia są bardzo duże i bez sensu - kod strony jest lekko nieczytelny,

<div class="menu">
 <ul>
  <li><a href=>STRONA GŁÓWNA</a></li>
  <li><a href=>O GRACH</a></li>
  <li><a href=>GRY ONLINE</a></li>
  <li><a href=>GRY ZRECZNOSCIOWE</a></li>
  <li><a href=>GRY FFS</a></li>
  <li><a href=>GRY MMORPG</a></li>
 </ul>
</div>

Semantyka. Mamy tag nav, więc po co używasz diva?
Nie widziałem jeszcze CSSa - ale elementy menu bardzo często się stylizuje, a że złym pomysłem jest stylizowanie po klasach to warto je dodać.
Atrybut href nie jest domknięty. Należy to zrobić.
WIELKIE LITERY TUTAJ SĄ BEZ SENSU. MAMY WŁAŚCIWOŚĆ text-transform: uppercase;

<div class="test">
 <figure>
  <img src="images/1.png" alt="screan">
  <figcaption> Tekst jakiś </figcaption>
</figure>
<figure>
 <img src="images/2.png" alt="screan">	
 <figcaption> Tekst jakiś </figcaption>
</figure>
<figure>
 <img src="images/3.png" alt="screan">	
 <figcaption> Tekst jakiś </figcaption>
</figure>
</div>

Nie za bardzo do czego to służy. Zakładam że to jakaś galeria. Przede wszystkim: źle wypełniony atrybut alt. Powinien przedstawiać tekst alternatywny w razie nie pojawienia się obrazka. Screan to chyba za mało? ;)
W figcaption nie dajemy jakiegoś tekstu, tylko test dopowiadający obrazek.
W div.news poleciałeś :D
- po pierwsze: dlaczego div? Moim zdaniem fajnie by było gdyby to było section...
- ...a w nim zamiast figure - article.
- Za dużo h1. Niewłaściwie je stosujesz.
Przez złe wcięcia miałem wrażenie że div.contactandupdates nie jest domknięty. Nazwa klasy dość słaba swoją drogą - trochę za długa. Div ten ponadto łączy dwie różne rzeczy - a to powinno być jednak oddzielnie.

CSS:

Dobrą praktyką jest stosowanie nazw RGB. Nazwy "pisane" ograniczają zasób kolorów,

.menu > ul > li

o tym już pisałem,

padding: 5px;
padding-left: 5px;

to jak w końcu? :D

margin-bottom: 5px;
margin-top: 5px;

margin-left: auto;
margin-right: auto;

Shorthands for the win!

div.photo {
	width: 1000px;
	float:left;
}

Nie czyścisz tego floata. Jak to zrobić? Tutaj jest cleafix: https://radek024.github.io/blog/bykiwkodzie/css/2017/05/19/pseudoklasy_oraz_pseudoelementy/

Ogólem to dość klasycznie jak na start. Nie jest wybitnie źle, nie jest wybitnie dobrze. Ucz się, ucz i sam zobaczysz co jest nie tak :)

komentarz 4 września 2018 przez Meffy Użytkownik (730 p.)

Okeeej, dzięki za krytyczny komentarz i dzieki wielkie za te rady, bedę próbował powoli wprowadzać HTML5 i przy okazji zwrócę na błędy które popełniałem :)

odpowiedź 4 września 2018 przez imklau Nałogowiec (42,090 p.)

To ja jeszcze wymienię kilka rzeczy, o których Radek nie wspomniał :)

zamiast ustawiać na sztywno szerokość to możesz użyć po prostu "max-width", dzięki czemu container będzie się dopasowywał do okna przeglądarki. (no chyba, że coś w środku będzie miał źle ustawione to wtedy i tak tamto będzie wystawać)

.container {
	width: 1000px;
	background-color:gray;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}

tutaj wykorzystałeś "inline-block" po to, żeby elementy były obok siebie, ale lepiej byłoby wykorzystać tutaj flexbox - mdn

.menu > ul > li {
	text-align:center;
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	padding: 5px;
	padding-left: 5px;
	border-bottom: 3px solid green;
	margin-bottom: 5px;
}

o ile dobrze mi się wydaje to taki zapis border nie działa :D

figure {
	border: bold #c0c0c0 solid;
	display: flex;
	flex-flow: column;
	margin-left: auto;
	margin-right: auto;
	width: 19em;
	background-color: #222;
}

text-align: justify jest raczej odradzane z racji, że jednak ciężko się to czyta

.news > figcaption {
	text-align: justify;
}

Poprawiaj i działaj dalej :)

komentarz 4 września 2018 przez Meffy Użytkownik (730 p.)

Okeeej, dzięki za krytyczny komentarz i dzieki wielkie za te rady, przy nastepnym kodzie zwrócę na to uwagę i to uwzględnię :)

odpowiedź 4 września 2018 przez Louis_Cyphre Początkujący (300 p.)

Zamiast text-align: center; dałbym text-align: justify; text lepiej wygląda wyrównany do prawej i lewej... cd listy w środku to jeśli chcesz mieć text na środku to usunąłbym cyfry lub jeśli chcesz mieć ponumerowane to wyrównałbym do lewej. Z górnego paska usunąłbym podkreślenie, oraz zmienił kolor tekstu. Z detali to popracowałbym nad czcionką - kursywa daje sporo, zawsze strona prezentuje się w ciekawszy sposób. Usunąłbym jeszcze dolny pasek (tam gdzie jest contact us) i wsadziłbym jeszcze jedną zakładkę w navigacji z tymi informacjami.

odpowiedź 4 września 2018 przez Bzytek Użytkownik (810 p.)
edycja 4 września 2018 przez Bzytek

Przejrzałem też zaznaczam pobieżnie kod, ale patrząc na wynik wyświetlania stwierdziłem że "chyba" strona jest nie-responsywna przez sztywno ustawione wymiar 3 kolumn. A to podstawa do uzyskania jakiej takiej popularności w sieci. No chyba że będziesz miał wersję na telefony oddzielnie.

Pzdr

komentarz 4 września 2018 przez Louis_Cyphre Początkujący (300 p.)

Napisał, że jest początkujący. Może niech najpierw dobrze opanuje pisanie stron a potem niech zabierze się za responzywność?

komentarz 4 września 2018 przez Bzytek Użytkownik (810 p.)

niedawno czytałem że powinno? się najpierw nauczyć-napisać tworzyć responsywną treść a następnie dostosować ją do "normalnego" widoku . Chociaż responsywność to trudniejsza lekcja do zrobienia

odpowiedź 5 września 2018 przez coderCpp93 Gaduła (4,200 p.)

Ja bym też unikał takiego kolorowania nagłówków, tyczy się to też całego tekstu, ale z nim jest wporządku. Takie kolorowanie zawsze zdradza, że autor to początkujący webmaster. Kolor nagłówków jest zbyt mało kontrastowy z tłem, ale nie może być zbyt jaskrawy, np. żółty tekst na zielonym tle.

Kolejna sprawa to obrazki. Jeśli jakiś obraz pełni tylko funkcję oprawy graficznej lepiej wstawić go jako tło diva lub innego elementu. Jeśli jednak należy do jakiejś galerii zdjęć to jak najbardziej trzeba zastosować img.

Następna rzecz to responsywność. Musisz się nauczyć się korzystać z dobrodziejstw HTML5, które znaczniki odpowiadają za wygląd np. tekstu, a które za jego znaczenie. Np.tag <strong> wzmacnia znaczenie tekstu pomiędzy nim i przy okazji go wytłuszcza, kiedy tag <b> tylko wytłuszcza. Dla niektórych ludzi to bez znaczenia, ale dla robotów indeksujących i osób niewidomych używających syntezatorów mowy tak.