Gal galite įvertinti puslapį?

[KayohiPlay]

 

 

Žodžiu esmė yra tokia, kad nesenai pradėjau mokytis HTML ir CSS ir nežinau ar išvis kažką normaliai darau, bet šiandien nusprendžiau pabandyti kažką gražesnio ir truputį animacijų pridėti paprastų ir noriu paklausti kaip jūs įvertintumėte šį puslapį. Naudojau flexbox, sukūriau per gal kokias 3h, ką manote? IR TAIP JIS NĖRA RESPONSIVE

 

HTML: https://pastebin.com/uPvW93h3
CSS: https://pastebin.com/CRYrVtrq

Redaguota Balandžio 12, 2020, nario KayohiPlay

[Jacob`]

Aš gal ir nenusimanau apie tai, bet mano akymis tikraj gražus darbelis !

[Guest heatzy]

Asmeniškai man atrodo skoningai ir solidžiai, nenusimanau šiuose dalykuose, pats tik bandysiu mokintis. Paprasta, bet tikrai gražu.

[marcus]

parodyk koda, gal bus kazkokiu klaideliu paprastu, kurias galima istaisyti, vien is vaizdo pasakyt daug negalima

[nebestumk gerai]

Jei kodini webus nepamirsk ir dometis apie webus, ju struktura ir taisykles

[KayohiPlay]

35 minutes prieš, `bitchh parašė:

Aš gal ir nenusimanau apie tai, bet mano akymis tikraj gražus darbelis !

Dėėkui.

 

10 minutes prieš, Plutonas parašė:

Asmeniškai man atrodo skoningai ir solidžiai, nenusimanau šiuose dalykuose, pats tik bandysiu mokintis. Paprasta, bet tikrai gražu.

Dėkui

 

1 minute prieš, nebestumk gerai parašė:

Jei kodini webus nepamirsk ir dometis apie webus, ju struktura ir taisykles

Ačiū už pastebėjimą, reikės pasižiūrėti, o kas būtent čia blogai?

[Inn#Progress]

Kad čia praktiškai nieko nėra ir dar vien tik video, įmesk į githubą ar kur nors kitur, kad galima būtų normaliai įvertinti, nes dabar visi atsižvelgia tik į vaizdą.

[KayohiPlay]

22 minutes prieš, intrigantas parašė:

parodyk koda, gal bus kazkokiu klaideliu paprastu, kurias galima istaisyti, vien is vaizdo pasakyt daug negalima

 

11 minutes prieš, Inn#Progress parašė:

Kad čia praktiškai nieko nėra ir dar vien tik video, įmesk į githubą ar kur nors kitur, kad galima būtų normaliai įvertinti, nes dabar visi atsižvelgia tik į vaizdą.

Įdėjau Html ir Css kodus į temą, yeah ten dar daug mėginau kaiką padaryti, tai nesigavo, tai tiesiog palikau tas klases

[NTQ]

Kelios pastabos:

CSS3:

1. * { } – šio atributo nerekomenduojama daugiau naudoti, keisk į html, body { }
2. jeigu naudoji HEX spalvas, pavyzdžiui, #ccc, išlaikyk vientisumą: dabar pas tave yra kai kur žodinės spalvos (white, black), keičiam į #000 (juoda) arba (#FFF);
3. jei naudoji trumpintas hex spalvas, išlaikyk tokį standartą, priešingu atveju naudok pilną variaciją, t. y. #000000 (kaip pavyzdžiui);
4. naršyklės žodines spalvas gali interpretuoti pagal save, kaip ir <input type="submit">, todėl būk tikslus;
5. font-family: "Sedgwick Ave"; – rekomenduojamos viengubos kabutės pagal standartą;
6. kai nustatai šriftą, pateik keletą kitų alternatyvų, nes yra tikimybė, jog neužkraus custom dėl kokių nors priežasčių ir atvaizduos default (ugly), šiuo atveju pataisymas: font-family: 'Sedgwick Ave', Arial, Sans-Serif;
7. background-color – naudok tiesiog background, išlaikysi lankstumą, pvz, background: #DDDDDD, ateityje galėsi lengviau pridėti nuotrauką, tarkim: background: #DDDDDD url('kelias'); (pirmą rodys spalvą, o kada tik užkraus nuotrauką, tada ją atvaizduos).
8. rėmelius irgi trumpink į: border: (skaičius)*Myliu SuperGames.lt* (stilius) (spalva), pvz, border: 1px solid #000000;
9. stenkis nekeisti šriftų arba jų dydžių skirtinguose elementuose, vėliau bus košmaras suvaldyti viską ar atnaujinti, nurodyk daugumai tik 1 šriftą, šiuo atveju per body { };
10. visad perrašyk h1, h2, h3, h4, h5, h6 pagal save, jų marginus, paddingus, šriftą, naudok jos dažnai (pagal tikslą), programos ar SEO atsižvelgia į tai;
11. per daug kartoji kodą:

12. transform: translate(

        -50%,

        -50%

      )

13. visad apsirašyk kokią nors klasę, pvz, .vertical-align, bus lengviau valdyti ir readability much more better;

14. z-index – stenkis nenaudoti be svarių priežasčių, nebent darai kokį loaderį ir turi būti viršesnis už visus kitus, elementai susiskirsto patys pagal jų pozicijas, perrašyti tikrai nereikia:);

15. width: auto; – vėlgi, vientisumo trūksta. Keičiam į width: 100%;

16. height: auto; arba height: 100% – kontroversiškas dalykas, daugelių situacijų tai default ir rezultatų nepakeičia;

17. naudokis generatoriai, kad išlaikytum naršyklių didesnį palaikymą, pvz, box-shadow = https://www.cssmatic.com/box-shadow

Šaunuolis, kad ant 0 nerašai matavimų vienetų:)

HTML:

<meta charset="UTF-8" /> – tokių brūkšnių / gale venk, HTML5 nereikia jų.

<a class="link" href="#"> – href viršesnis už class, tai jis eina pirmoje vietoje

1. <link
2.      href="https://fonts.googleapis.com/css2?family=Merienda+One&display=swap"
3.      rel="stylesheet"
4.    />
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta viršesnis už CSS ar JS atributus, tai jis turi būti šalia savo brolio <meta charset="UTF-8">

 

 

 

 

 

@media (min-aspect-ratio: 16/9) {

  #videoBG {

    width: 100%;

    height: auto;

  }

}

@media (max-aspect-ratio: 16/9) {

  #videoBG {

    width: auto;

    height: 100%;

  }

}

Dar tokia pastaba, kad nekartok tų pačių media. Jos palaiko klases ar ID po bracketų. Nereikia kiekvienam rašyti po atskirą. + geriau rinkis max-width, max-ascept-ratio gali sukelti nenumatytų rezultatų.

P. s. width: 100% nebūtina rašyti, bet tvarkingiau. auto atributas tas pats kaip nieko nerašyti, nebent anksčiau esi nurodęs ir nori atstatyti į default.

[KayohiPlay]

Prieš 1 valandą, NTQ parašė:

Kelios pastabos:

CSS3:

1. * { } – šio atributo nerekomenduojama daugiau naudoti, keisk į html, body { }
2. jeigu naudoji HEX spalvas, pavyzdžiui, #ccc, išlaikyk vientisumą: dabar pas tave yra kai kur žodinės spalvos (white, black), keičiam į #000 (juoda) arba (#FFF);
3. jei naudoji trumpintas hex spalvas, išlaikyk tokį standartą, priešingu atveju naudok pilną variaciją, t. y. #000000 (kaip pavyzdžiui);
4. naršyklės žodines spalvas gali interpretuoti pagal save, kaip ir <input type="submit">, todėl būk tikslus;
5. font-family: "Sedgwick Ave"; – rekomenduojamos viengubos kabutės pagal standartą;
6. kai nustatai šriftą, pateik keletą kitų alternatyvų, nes yra tikimybė, jog neužkraus custom dėl kokių nors priežasčių ir atvaizduos default (ugly), šiuo atveju pataisymas: font-family: 'Sedgwick Ave', Arial, Sans-Serif;
7. background-color – naudok tiesiog background, išlaikysi lankstumą, pvz, background: #DDDDDD, ateityje galėsi lengviau pridėti nuotrauką, tarkim: background: #DDDDDD url('kelias'); (pirmą rodys spalvą, o kada tik užkraus nuotrauką, tada ją atvaizduos).
8. rėmelius irgi trumpink į: border: (skaičius)*Myliu SuperGames.lt* (stilius) (spalva), pvz, border: 1px solid #000000;
9. stenkis nekeisti šriftų arba jų dydžių skirtinguose elementuose, vėliau bus košmaras suvaldyti viską ar atnaujinti, nurodyk daugumai tik 1 šriftą, šiuo atveju per body { };
10. visad perrašyk h1, h2, h3, h4, h5, h6 pagal save, jų marginus, paddingus, šriftą, naudok jos dažnai (pagal tikslą), programos ar SEO atsižvelgia į tai;
11. per daug kartoji kodą:

12. transform: translate(

        -50%,

        -50%

      )

13. visad apsirašyk kokią nors klasę, pvz, .vertical-align, bus lengviau valdyti ir readability much more better;

14. z-index – stenkis nenaudoti be svarių priežasčių, nebent darai kokį loaderį ir turi būti viršesnis už visus kitus, elementai susiskirsto patys pagal jų pozicijas, perrašyti tikrai nereikia:);

15. width: auto; – vėlgi, vientisumo trūksta. Keičiam į width: 100%;

16. height: auto; arba height: 100% – kontroversiškas dalykas, daugelių situacijų tai default ir rezultatų nepakeičia;

17. naudokis generatoriai, kad išlaikytum naršyklių didesnį palaikymą, pvz, box-shadow = https://www.cssmatic.com/box-shadow

Šaunuolis, kad ant 0 nerašai matavimų vienetų:)

HTML:

<meta charset="UTF-8" /> – tokių brūkšnių / gale venk, HTML5 nereikia jų.

<a class="link" href="#"> – href viršesnis už class, tai jis eina pirmoje vietoje

1. <link
2.      href="https://fonts.googleapis.com/css2?family=Merienda+One&display=swap"
3.      rel="stylesheet"
4.    />
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta viršesnis už CSS ar JS atributus, tai jis turi būti šalia savo brolio <meta charset="UTF-8">

 

 

 

 

 

@media (min-aspect-ratio: 16/9) {

  #videoBG {

    width: 100%;

    height: auto;

  }

}

@media (max-aspect-ratio: 16/9) {

  #videoBG {

    width: auto;

    height: 100%;

  }

}

Dar tokia pastaba, kad nekartok tų pačių media. Jos palaiko klases ar ID po bracketų. Nereikia kiekvienam rašyti po atskirą. + geriau rinkis max-width, max-ascept-ratio gali sukelti nenumatytų rezultatų.

P. s. width: 100% nebūtina rašyti, bet tvarkingiau. auto atributas tas pats kaip nieko nerašyti, nebent anksčiau esi nurodęs ir nori atstatyti į default.

Ačiū už kiekvieną pastebėtą klaidą, bandysiu improvint savo skills ir tai man labai padeda. Ačiū dar kartą.

 

 

----

Norėjau paklausti gal kažkas žino gal kokius discord serverius, kur galėčiau sutikti bendraminčių jeigu reiktų pagalbos ar jiem, būtų išties šaunu!