• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Moja pierwsza strona HTML+ CSS / Ocena

VPS Starter Arubacloud
0 głosów
541 wizyt
pytanie zadane 28 stycznia 2018 w HTML i CSS przez goldzik Nowicjusz (200 p.)
Witam! Stworzyłem swoją pierwszą stronę w HTML + CSS i chciałbym teraz prosić Was o opinię oraz  porady co zmienić. (Wiem, że to tylko HTML+CSS, jednak chcę na spokojnie się rozwijać a nie wszystko na raz)

https://github.com/goldd123/Firstpage
komentarz 28 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

Nie używaj onclicka tylko addEventListener.

3 odpowiedzi

+4 głosów
odpowiedź 28 stycznia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Kilka drobnych kwestii na dalsze etapy nauki:

  1. "container" a nie "conteiner" :) Dałeś co prawda zarówno w html jak i w css z błędem, ale lepiej unikać takich literówek
  2. ale do rzeczy, to po pierwsze nie styluj po tagach (np. header, ul itp.) ani po id (#xxx), tylko po klasach. Jest wiele różnych styli tworzenia i zarządzania klasami, ale na razie nie jest to istotne. Wyrób sobie nawyk stylowania w CSS po klasach, w razie czego dodaj do elementu np. kilka klas (ale też bez przesady...). Nie chcę wgłębiać się tutaj w wady stylowania po id, poczytaj generalnie o selektorach css i na pewno trafisz na opis dlaczego warto używać klas.
  3. poczytaj o jednostkach stosowanych w css, np. o jednostce REM, EM itp. Generalnie poczytaj sobie o takich zagadnieniach jak RDW, czyli strony responsywne i np. dlaczego rem jest lepsze od px itp. Chodzi głównie o to, abyś z czasem przestał myśleć w kategoriach pikseli, ekranu PC itp. ale żebyś tworzył layouty dynamicznie dostosowujące się do ekranu, urządzenia itp. Ale to spokojnie, zobaczysz, że za chwilę samo przyjdzie, zainteresuj się tylko dobrze jednostkami abyś wiedział co i jak.
  4. Jeśli zaczniesz drążyć w necie pkt. 3 to zapewne szybko trafisz na takie tematy jak float vs flexbox vs css grid vs gridy bootstrap itp. Moja rada - na początek zainteresuj się flexbox. Nie uderzaj od razu we frameworki jak bootstrap itp. Potem oki, ale warto abyś wiedział po co chcesz ich użyć :)
  5. nie stosuj onClick bezpośrednio w html. Opanuj podstawy html/css i zacznij interesować się JavaScript. Obecnie nie istnieje frontend bez JS i to dobrego JS. I tutaj podobnie jak w css - na początku nie jQuery itp. tylko czysty JS. Generalnie wiele osób początkujących zauważam, że traktuje JS wyłącznie jako język "webowy" do animacji. To błąd. Kup książkę, poszukaj kursu online itp. (temat wałkowany na forum) i poznaj podstawy samego języka, tak jakbyś chciał się uczyć np. C++. Jeśli w ogóle nie masz doświadczenia w programowaniu to naucz się co to zmienne, pętle, instrukcje itp. itd. Gdy to opanujesz to spokojnie wejdziesz w web. Tutaj moja rada - bardzo fajnie możesz testować podstawy JS w konsoli przeglądarki, np. w Chrome kliknij F12 (poczytaj o konsola przeglądarki, inspektor DOM itp.).

Na początek to tyle. Oczywiście to co napisałem to nie jakieś wskazywanie błędów w tej stronie, tylko parę moich subiektywnych propozycji na dalszą naukę - rzecz jasna nie wszystko na raz :)

komentarz 28 stycznia 2018 przez goldzik Nowicjusz (200 p.)
O właśnie takich informacji mi brakowało. Bardzo dziękuję za pomoc i cenne wskazówki. :)
komentarz 28 stycznia 2018 przez Secrus Nałogowiec (32,880 p.)

@Tomek Sochacki, Kilka z tych punktów przyda się w sumie każdemu zainteresowanemu webdesignem

+3 głosów
odpowiedź 28 stycznia 2018 przez imklau Nałogowiec (42,090 p.)
  • od razu lepiej używać wszędzie ang więc zamiast folderu "zdj" ja bym dała "img" lub "images"
  • nie styluj po tagach ani po id, ze względu na specyficzność selektorów, tzn może Ci być później trudno je nadpisać i ogólnie to po to mamy klasy, żeby po nich stylować :)
  • jak w znaczniku <header> nic więcej nie masz tylko ten div kontener to równie dobrze możesz ten div usunąć i przypisać style do headera
  • tak jak @lapacz.kornel napisał - nie używaj onclika tylko addEventListener

Weź sobie te kilka rad do serducha i działaj dalej! Powodzenia! :)

komentarz 28 stycznia 2018 przez goldzik Nowicjusz (200 p.)
Bardzo dziękuję za pomoc. :)
komentarz 28 stycznia 2018 przez goldzik Nowicjusz (200 p.)

@Noemi, W sumie to teraz jednej rzeczy nie rozumiem tzn. Nie stylować po tagach. To jak mam właśnie ten mój header to w nim mam zrobić jakiegoś diva i w nim wszystko stylować czy jak? 

komentarz 28 stycznia 2018 przez imklau Nałogowiec (42,090 p.)

niee, po prostu daj sobie:

<header class="header">
</header>

To samo jeśli chodzi o menu, możesz zrobić coś takiego:

<ul class="menu">
                 <li class="menu-item"><a class="menu-link" href="#Onas">O Nas</a></li>
                 <li class="menu-item"><a class="menu-link" href="#oferta">Oferta</a></li>
                 <li class="menu-item"><a class="menu-link" href="Podstrony/kontakt.html">Kontakt</a></li>
</ul>

I tak z każdym elementem na stronie, który chcesz wykorzystać w CSS ;)

+1 głos
odpowiedź 28 stycznia 2018 przez Secrus Nałogowiec (32,880 p.)
edycja 28 stycznia 2018 przez Secrus
Za dużo do oceny to tam nie ma :). Kolorki ładne, ale dwóch pasków i buttona + tekst nie da się dobrze imo ocenić.

Pod kątem kodu, wygląda dobrze, ale poczekał bym na wypowiedź osoby bardziej zorientowanej w tematyce webdev.

Ode mnie, strona ma potencjał i za to solidne 3,5/5

EDIT: Pomyśl o konkretnej stronie, na której chcesz się uczyć. Robiąc stronę np o swoich zainteresowaniach itp bedziesz mial wiecej pomyslow jakie "bajery fajerwerki" porobic z czasem
komentarz 28 stycznia 2018 przez goldzik Nowicjusz (200 p.)
Ta wiem, że mało ale muszę jakoś się zorientować czy to co robię to jest poprawnie zrobione czy raczej wszystko źle. ps. Strona normalnie się wyświetla z obrazkiem czy nie? Boo dopiero ogarniam gita i chyba coś źle zrobiłem.. :P
komentarz 28 stycznia 2018 przez Secrus Nałogowiec (32,880 p.)
Obrazka nie widać. Widzę w kodzie, że jest, ale na stronie nic.

Podobne pytania

0 głosów
5 odpowiedzi 1,716 wizyt
+2 głosów
2 odpowiedzi 230 wizyt
+1 głos
3 odpowiedzi 627 wizyt
pytanie zadane 7 lutego 2018 w HTML i CSS przez PolYGlok Pasjonat (19,450 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...