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

Prośba o ocenę kodu

VPS Starter Arubacloud
+1 głos
1,059 wizyt
pytanie zadane 1 lipca 2017 w HTML i CSS przez DraveS Początkujący (300 p.)
Witam. Uczę się od jakiegoś czasu HTML i CSS. Tak wczoraj dla treningu zrobiłem na szybko kopię prostej strony patrząc na obrazek. Chciałbym, żeby ktoś ocenił jakość kodu jaki napisałem. Co do poprawy, co dobrze czego nie robić.

https://github.com/SchmidtDawid/Page-copying-1/tree/master

4 odpowiedzi

+3 głosów
odpowiedź 1 lipca 2017 przez Shaoi Mądrala (7,020 p.)
wybrane 2 lipca 2017 przez DraveS
 
Najlepsza
<div id="megacontainer">
  • W wersji mobilnej nie będzie już taki mega. Container w zupełności wystarczy.
<header>
    <div id="logo">village</div>
    <div id="slogan">welcome slogan goes here</div>
    <div style="clear:both"></div>
</header>
<nav>
    <a href="#">> home</a>
    <a href="#">> about us</a>
    <a href="#">> contact us</a>
    <a href="#">> information</a>
    <a href="#">> company</a>
    <div style="clear:both"></div>
</nav>
  • Nav powinno być w header, a w środku powinna znajdować się lista ul/ol. + button do pokazywania / ukrywania menu na mniejszych urządzeniach.
<div id="logo">village</div>
  • Logo powinno być nagłówkiem pierwszego stopnia (h1).
<div style="clear:both"></div>
  • Tak się tego nie robi.
<img id="topimage" src="img/topimage.jpg">
  • Obrazki powinny posiadać swój [alt].
<article>
    <div id="left-side">
        <section id="business"><span class="heading1">Business Solution</span>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </section>
        <section id="company"><span class="heading2">Company Information</span>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </section>
    </div>
    <div id="right-side">
        <section id="welcome"><span class="heading3">Welcome Solution</span>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets 
            containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>
        </section>
    </div>
</article>
  • left-side. right-side w wersji mobilej już nie będzie po lewej/prawej stronie. Nazwy class powinny być abstrakcyjne.
<span class="heading1">Business Solution</span>
<span class="heading2">Company Information</span>
<span class="heading3">Welcome Solution</span>
  • To powinno być h2, nie spanem.
  • Nie stylizuje się po tagach, id, tylko po nazwach class.
  • Strona nie jest responsywna.

Ogólnie słabo, ale to dopiero początki. Daleka droga przed Tobą. Postaraj się poczytać oceny innych stron na forum, pełno tego. Poprawisz dzięki temu swoje błędy, jak i przy okazji dowiesz się mnóstwa nowych rzeczy.

komentarz 2 lipca 2017 przez DraveS Początkujący (300 p.)
Hej jestem zaskoczony, że tak wielu osobom chce się oceniać takie rzeczy. Dziękuję bardzo za odpowiedź.

Wiele błędów na które tutaj zostało wskazane to wina Zelenta ;) On robił w którymś projekcie diva który ma tylko clear:both;. Ale ok już więcej nie powtórzę błędu. Jeśli mozna zapytać. Jak więc się to robi? ;)
komentarz 2 lipca 2017 przez Shaoi Mądrala (7,020 p.)
edycja 2 lipca 2017 przez Shaoi

Tak, i nikt Cie o to nie obwinia, po prostu dostałeś rady, które miejmy nadzieje wykorzystasz. Odsyłam do tematu na forum, w którym pokazano jak można użyć prawidłowego clearfixa: Lepiej :after clear:both czy overflow: hidden?

+2 głosów
odpowiedź 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
1. dodaj ten tag, warto.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2. Strona nie jest responsywna, nie mówię od razu o bootstrapie, ale poczytaj o tym i przejdź z px na %

3. Nie stylizuj po tag np. div zawsze twórz klasy do nich.

4. Nie używaj id do stylizowania. Na razie nie będę ci w głowie czemu, ale nawet do pojedynczych obiektów twórz klasy.

Jest jeszcze sporo nauki przed tobą, ale jest dobrze jak na początek :D
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Zaraz się czepią....

przejdź z px na %

chodzi mi głównie o width
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
JEZUSIE zapomniałbym #panCom nie ma altów przy img ;)
komentarz 1 lipca 2017 przez Krzysztof Drozdowski Użytkownik (830 p.)
Jeden z pierwszych projektów - to widać. Nie ma sensu napierać na znajomości framworków css. Widać nie miała być responsywna - px to nie błąd :P
3
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Wiem, ale użycie width:80%;  margin-left:auto;  margin-right: auto; na głównym kontenerze strony nie boli wymaga wiedzy którą jak widać już posiada, a znacznie poprawi stronę. Bo u mnie wygląda jak by była co najmniej tworzona pod monitory CRT :D
komentarz 2 lipca 2017 przez DraveS Początkujący (300 p.)
Dzięki za odpowiedź. Biorę wszystko do serca i uczę się dalej. Oczywiście strona nie miała nawet udawać responsywnej. Chodziło by tylko odwzorować to co widziałem na obrazku. (template.jpg) beż żadnych mechanik.

Własnie kupiłem kurs bootstrapa więc jeszcze trochę i będzie lepiej ;)

alty przy obrazkach - przepraszam ;(

to używać w ogóle id? Czy używać id do opisu elementu ale dodać wtedy jeszcze klasę i ją stylizować?
komentarz 2 lipca 2017 przez Shaoi Mądrala (7,020 p.)

Stylizuje się po class, nie po tagach/id, jak już wcześniej wspomniałem.
HTML- class czy ID. Warto przeczytać.

+1 głos
odpowiedź 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)
  • raczej staraj się nie używać diva tylko dla clear: both, a zamiast tego wykorzystaj display: inline-block lub flexbox
  • navigacja raczej powinna być listą ul, w niej <li>, a dopiero w środku wykorzystaj <a>
  • jeszcze nie jestem pewna co do id left-side i right-side, bo HTML nie powinniśmy mieszać z czymś co jest związane z wyglądem, a tu od razu zakładamy położenie tych divów
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
  • raczej staraj się nie używać diva tylko dla clear: both, a zamiast tego wykorzystaj display: inline-block lub flexbox

Nie koniecznie. Zależy od sytuacji :D W tym wypadku tak. Ale nie zawsze jest to dobre rozwiązanie. 

komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)
użycie pustego znacznika może być lepszym rozwiązniem?
nie sondze :D
jeśli już to chyba za pomocą after możemy użyć również clear: both, w każdym razie zrobienie tego za pomocą CSS jest lepsze niż pusty znacznik w HTML ;)
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)

chodziło mi raczej że czasem float:left; jest lepsze display: inline-block; a czasem nie. Ale tak ogólnie masz racje. Chociaż czy komuś przeszkadza pusty tag? chyba że o czymś nie wiem :d 

komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)
a komuś przeszkadza <br> ?
możemy sobie wszyscy pododawać puste divy i inne puste elementy w HTML?
mooże czasami float: left i float: right jest lepsze (chyba rzadko), ale nie ma sensu zaśmiecać HTML.
Przypominam, że CSS odpowiada za stylowanie ;)
komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
A gdy div muszą być zlepione ?
1
komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)
flex?
+1 głos
odpowiedź 1 lipca 2017 przez Krzysztof Drozdowski Użytkownik (830 p.)

Hej,

Tak na szybko:

div {
    size: 750px;
}

Staraj się unikać stylizowania divów.

section {
    
}

Usuwaj puste odniesienia (szczególnie jak już je wystylizowałeś wcześniej - a to już osobny problem).

Widzę, że stylizujesz znaczniki semantyczne HTML 5. Ogólnie odradzam taką praktykę - lepiej wsadzić to w diva i stylizować go po klasie/id - lepiej to wygląda. 

Nagłówki umieszczamy w znacznikach <h1-6>, tworzenie dla nich spana z osobną klasą wygląda dosyć dziwnie :P 

To wszystko co wyłapałem. Sam nie jestem zawodowcem, więc proszę patrzeć na moje uwagi z przymrużeniem oka. Pozdrawiam i życzę wytrwałości w dalszych projektach :D

2
komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)

Widzę, że stylizujesz znaczniki semantyczne HTML 5. Ogólnie odradzam taką praktykę - lepiej wsadzić to w diva i stylizować go po klasie/id - lepiej to wygląda. 

Zabrzmiało to tak, jakby miał usunąć <section> i zamiast tego użyć <div class="section"> albo o innej klasie :P więc nie wsadzić w diva, tylko raczej po prostu do znacznika dodać klasę i stylizować po klasie (id akurat nie służy do stylizowania) ;).

komentarz 1 lipca 2017 przez Krzysztof Drozdowski Użytkownik (830 p.)
Tak, dokładnie o to mi chodziło. Użyłem trochę za dużego skrótu myślowego :D
komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)

achh no dobrze, jeszcze tym razem nie dostaniesz kary devil :D 

komentarz 1 lipca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
<section>
<div class="section">

TREŚĆ

</dvi>

</section
1
komentarz 1 lipca 2017 przez Ehlert Ekspert (212,630 p.)

achh no dobrze, jeszcze tym razem nie dostaniesz kary devil :D 

To pierwszy taki tekst na  tym forum laughdevil

komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)

hahah wybacz Ehlert zagalopowałam się laugh

komentarz 2 lipca 2017 przez DraveS Początkujący (300 p.)
Dzięki wielkie za odpowiedź :). A można dodać klasę do znacznika np <section class="section"> albo <section class="business"> (żeby nie powielać nazwy)
1
komentarz 2 lipca 2017 przez Shaoi Mądrala (7,020 p.)
Tak, po to one tak naprawdę są. Dodajesz je, aby nie stylizować elementów po tagach.
1
komentarz 2 lipca 2017 przez Ehlert Ekspert (212,630 p.)

@Noemi, wydało się. Przejrzałem Twoją naturę devil

Podobne pytania

0 głosów
2 odpowiedzi 220 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez DraveS Początkujący (300 p.)
0 głosów
1 odpowiedź 221 wizyt
pytanie zadane 20 sierpnia 2017 w PHP przez Smatix Obywatel (1,050 p.)
0 głosów
3 odpowiedzi 424 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...