Tema
/
HTML ir CSS pagrindai HTML
Pamoka 7 / 7 Karkasai — kada jie verti savo vietos ~40 min
Namų darbas

Namų darbas — nuspręsk ir apgink

Namų darbas — šįkart jokio kodo. Įgūdis, kurį ši pamoka ugdo, yra nuovoka, tad užduotis — spręsti.

Nuspręsk ir apgink

Kiekvienam žemiau esančiam projektui pasirink vieną iš trijų požiūrių — komponentinį karkasą (Bootstrap tipo), utility-first (Tailwind tipo) arba rankomis rašytą CSS — ir apgink pasirinkimą vienu ar dviem sakiniais. Teisingų atsakymų nėra, tik gerai argumentuoti; geras gynimas įvardija, ką perki ir ką moki.

  1. Startuolio vidinis administravimo skydelis. Trys kūrėjai, pristatymas per dvi savaites, niekas komandoje nėra dizaineris.
  2. Dizaino studijos savas portfolio puslapis. Išskirtinė, įsimintina išvaizda yra produktas.
  3. Asmeninis tinklaraštis — vienas ilgas puslapis, daugiausia tekstas, ir tau svarbu, kad jis kraunasi akimirksniu telefone su silpnu ryšiu.
  4. Didelė elektroninės prekybos svetainė, penkiolikos žmonių komanda, kuriama dvejus metus, kur kiekvienas puslapis turi atrodyti nuosekliai, o nauji kūrėjai nuolat prisijungia.

Užrašyk savo pasirinkimą ir priežastį kiekvienam. Jei gali argumentuoti ir priešingą pasirinkimą — dar geriau; tai ženklas, kad iš tikrųjų supranti mainus, o ne turi mėgstamą.

Ką sudėjai ir kur tai keliauja toliau

Atsitrauk ir pažvelk, ką šios septynios pamokos sukūrė. Pradėjęs nuo tuščio failo, sudėjai visą tikros programos — Cosmos — veidą, naudodamas vien HTML ir CSS:

  • semantinį dokumentą, kurį gali perskaityti ir ekrano skaitytuvas, ir paieškos sistema;
  • temizuojamą paletę, kur tamsi ir šviesi kainuoja vieną atributą;
  • prieinamą puslapį su „praleidimo" nuoroda, tikrais mygtukais, sąžiningu alt tekstu ir klaviatūros fokuso žiedu;
  • responsyvią galeriją, kuri persidėlioja pati, kraštuose suderinta vienintele media užklausa;
  • validuojančią formą, kuri patikrina įvestį prieš pateikimą;
  • ir nuovoką nuspręsti, ar karkasas dera tavo kitame projekte.

Ir tai nesustoja čia. Stiliaus failas, kurį parašei, yra perdavimas: kliento dalies takelis paima būtent šį style.css nepakeistą ir perstato index.html kaip gyvą JavaScript programą. Ten paveikslėliai parsiunčiami iš NASA realiu laiku, o ne įrašyti kietai; „mėgstamų" mygtukas iš tikrųjų išsaugo į kolekciją; kontaktų forma iš tikrųjų išsiunčia. Viskas, kas sustojo ties „statinis puslapis to negali" — tuščia galerija, kurią JavaScript pripildo, , kuris nieko nedaro, Send, kuris niekur neveda — yra būtent ten, kur tas takelis prasideda.

Sudėjai dalį, kuri turi būti teisinga, kad bet kas iš viso to būtų vertas daryti: struktūrą, stilių ir prieinamumą. Elgsena ateina toliau — ant pamato, kurį dabar supranti eilutę po eilutės.