— Tematiskais ietvars (5 stundas), SASKAŅOTS AR SKOLA2030 STANDARTIEM

0. KOPSAVILKUMS (ĪSS PĀRSKATS)

Šis metodiskais materiāls nodrošina padziļinātu un strukturētu pieeju kaskādēto stila lapu (CSS) apguvei 11. klasē, pārejot no vienkāršas vizuālo īpašību maiņas uz kognitīvi pamatotu izpratni par tīmekļa lapu struktūras un noformējuma nošķiršanu, kastes modeli (Box Model), specifiskumu un mūsdienīgiem izkārtojuma rīkiem (Flexbox). 5 stundas × 40 min · 18 uzdevumi ar atbildēm · 5 diferenciācijas profili · 10 tipiskas kļūdas · 1 pārbaudes darbs

1. TĒMAS PAMATOJUMS

• Kāpēc svarīga: Tīmekļa tehnoloģijas ir mūsdienu digitālās pasaules pamats. Izpratne par satura (HTML) un dizaina/izvietojuma (CSS) nošķiršanu veido programmēšanas un sistēmiskās domāšanas pamatprincipus.
• Saistība ar iepriekšējo un nākamo saturu: Tēma balstās uz iepriekš apgūtajiem HTML pamatiem (semantiskie tagi, DOM koka struktūra) un sagatavo skolēnus dinamisko tīmekļa lietotņu izstrādei ar JavaScript, kā arī lietotāja saskarnes (UI/UX) dizaina izstrādei.
• Skola2030 standarta sasaiste: Datorika (Vidusskola) — sasniedzamie rezultāti:
  • D.V.2.1.2. Izmanto tīmekļa tehnoloģijas (HTML, CSS) strukturētas un stilistiski vienotas informācijas publicēšanai tīmeklī.
  • D.V.1.1.3. Analizē un atkļūdo kodu, izmantojot pārlūkprogrammas izstrādātāja rīkus (DevTools).

2. SASNIEDZAMIE REZULTĀTI (SR)

• Zināšanas:
  • Pārzina trīs CSS pievienošanas veidus (rindā / inline, iekšējais / internal, ārējais / external) un to prioritātes (D.V.2.1.2.1).
  • Zina CSS sintakses struktūru: selektors, īpašība (property), vērtība (value) (D.V.2.1.2.2).
  • Zina CSS kastes modeļa (Box Model) komponentes: saturs (content), iekšējā atstarpe (padding), apmale (border), ārējā atstarpe (margin) (D.V.2.1.2.3).
• Izpratne:
  • Izprot kaskādes un specifiskuma darbības loģiku (kā pārlūks izlemj, kuru stilu piemērot konflikta gadījumā).
  • Izprot atšķirību starp satura semantiku un tā vizuālo reprezentāciju ekrānā.
• Prasmes:
  • Patstāvīgi veido ārējo .css failu un sasaista to ar HTML dokumentu, izmantojot <link> tagu.
  • Veido precīzus selektorus (elementu, klašu ., identifikatoru #, pēcteču un pseidoklašu :hover).
  • Izmanto Flexbox bāzes īpašības elementu izlīdzināšanai vienā dimensijā.
  • Pielieto pārlūkprogrammas Inspect Element rīku koda atkļūdošanai.
• Caurviju prasmes:
  • Kritiskā domāšana un problēmu risināšana: Koda atkļūdošana (debugging), kļūdu cēloņu identificēšana.
  • Pašvadīta mācīšanās: Dokumentācijas (piemēram, MDN Web Docs) lasīšana un jaunu īpašību patstāvīga apguve.
• Tipiskākie maldīgie priekšstati:
  • Malds: CSS ir tikai krāsu un fontu maiņa (ignorējot izvietojumu un arhitektūru).
  • Malds: Ja elements nepārvietojas, kā paredzēts, vienkārši jāpalielina margin vai jāizmanto !important.
  • Malds: padding atrodas ārpus apmales, bet margin iekšpusē.

3. ATBILSTĪBA SKOLA2030 CAURVIJU PRASMĒM

• 1. stunda: Pašvadība — personīgā koda organizēšana, failu struktūras pārvaldība.
• 2. stunda: Kritiskā domāšana — kastes modeļa matemātiskais aprēķins un vizualizācija.
• 3. stunda: Problēmu risināšana — specifiskuma konfliktu atrisināšana kaskādē.
• 4. stunda: Sadarbība — pāru programmēšana (pair programming), veidojot responsīvu kartīti.
• 5. stunda: Jaunrade un digitālā pratība — personīgās tīmekļa lapas dizaina izstrāde un koda audits.

4. GALVENAIS DOMĀŠANAS MĒRĶIS

Skolēns domā nevis kā "koda rakstītājs, kurš min īpašības, kamēr lapa izskatās labi", bet kā sistēmu arhitekts, kurš spēj mentāli vizualizēt DOM elementu hierarhiju, kastes modeļa ģeometriju un kaskādes prioritātes vēl pirms pārlūkprogrammas loga atvēršanas.

5. 5 SECĪGU STUNDU PLĀNS

1. STUNDA: Ievads CSS — no struktūras uz stilu

• SR numurs: D.V.2.1.2.1
• Stundas mērķis: Izprast CSS lomu tīmekļa izstrādē, nošķirt saturu no noformējuma un apgūt trīs CSS piesaistes veidus.
• Ko skolēns prot: Izveidot ārēju .css failu, piesaistīt to HTML lapai un nomainīt teksta un fona pamatīpašības.
• Aktivitātes ar laiku:
  • 0–8 min Iekustināšana: "Lapa bez stila" (skolēniem tiek parādīta populāra tīmekļa vietne bez CSS).
  • 8–20 min Jaunais saturs: CSS sintakse, selektori (tags, klase, ID), piesaistes veidi.
  • 20–35 min Praktiskā darbība: vienkārša HTML raksta stilizēšana (ārējais CSS).
  • 35–40 min Refleksija un izejas biļete.
• Skolotāja darbības: Demonstrē kontrastu starp HTML ar un bez CSS; vada diskusiju par koda uzturējamību.
• Skolēnu darbības: Eksperimentē ar selektoriem, analizē atšķirību starp klasi un ID.
• Materiāli: Starta HTML fails index.html, darba lapa ar selektoru sintakses shēmu.
• Saikne: Balstās uz HTML; sagatavo nākamo stundu par kastes modeli.
• Pedagoģiskais pamatojums: Kognitīvā kontrasta metode veicina izpratni par CSS nepieciešamību.

2. STUNDA: CSS kastes modelis (Box Model)

• SR numurs: D.V.2.1.2.3
• Stundas mērķis: Konstruēt un aprēķināt elementa kopējo izmēru, izprotot kastes modeļa slāņus.
• Ko skolēns prot: Pielietot content, padding, border, margin un iestatīt box-sizing: border-box.
• Aktivitātes ar laiku:
  • 0–5 min Atsauce uz 1. stundu: ātrā viktorīna par selektoriem.
  • 5–17 min Demonstrācija: fiziskās kastes un DevTools kastes modeļa salīdzināšana.
  • 17–32 min Uzdevums: divu bloku novietošana blakus, aprēķinot pikseļu platumus.
  • 32–40 min Pašvērtējums un kļūdu analīze.
• Skolotāja darbības: Rāda elementa izmēru izmaiņas tiešraidē ar DevTools.
• Skolēnu darbības: Zīmē un rēķina elementu platumus; veido kartītes dizainu.
• Materiāli: Kartona kaste, iepakojuma plēve (demonstrācijai), VS Code / pārlūks.
• Saikne: Savieno selektoru sintaksi ar elementu reālo telpisko izmēru.
• Pedagoģiskais pamatojums: Konkrēts-uzskatāms-abstrakts (CPA pieeja).

3. STUNDA: Kaskāde, mantojamība un selektoru specifiskums

• SR numurs: D.V.2.1.2.2
• Stundas mērķis: Atkļūdot stila konfliktus, aprēķinot selektoru specifiskuma punktus.
• Ko skolēns prot: Aprēķināt specifiskuma svaru (ID > Klase > Elements) un paredzēt, kurš stils uzvarēs.
• Aktivitātes ar laiku:
  • 0–7 min Problēmsituācija: "Kāpēc mans teksts nekļūst sarkans?" (koda mīkla).
  • 7–20 min Teorija: Specifiskuma "kalkulators" (0, 0, 0) un kaskādes kārtība.
  • 20–35 min Pāru cīņa: "Kura rinda uzvarēs?" uzdevumu risināšana un koda refaktorings.
  • 35–40 min Apkopojums un noteikumu fiksēšana.
• Skolotāja darbības: Vada domāšanas procesu, novēršot vēlmi izmantot !important.
• Skolēnu darbības: Analizē konfliktējošu kodu, nosaka kaskādes uzvarētāju bez koda palaišanas.
• Materiāli: Interaktīvās darba kartītes "Specifiskuma duelis".
• Saikne: Novērš biežākās loģikas kļūdas pirms pārejas uz sarežģītākiem izkārtojumiem.
• Pedagoģiskais pamatojums: Algoritmiskās domāšanas attīstīšana caur formālu noteikumu piemērošanu.

4. STUNDA: Mūsdienīgs izkārtojums ar Flexbox

• SR numurs: D.V.2.1.2.4
• Stundas mērķis: Izveidot elastīgu, adaptīvu viena virziena elementu izvietojumu ar CSS Flexbox.
• Ko skolēns prot: Pielietot display: flex, justify-content, align-items, gap navigācijas joslas un karšu izveidei.
• Aktivitātes ar laiku:
  • 0–5 min Salīdzinājums: tradicionālais bloku izkārtojums pret elastīgo.
  • 5–18 min Interaktīva demonstrācija: galvenā ass (main axis) un šķērsass (cross axis).
  • 18–33 min Uzdevums: responsīvas navigācijas izvēlnes un produktu galerijas izveide.
  • 33–40 min Formējošais novērtējums: ekrāna mērogošanas tests.
• Skolotāja darbības: Skaidro asu koncepciju, izmantojot vizuālas bultu shēmas.
• Skolēnu darbības: Veido un pielāgo Flexbox konteinerus; testē pārlūka loga izmēra maiņu.
• Materiāli: Digitālais rīks (piemēram, Flexbox Froggy vai skolotāja sagatavota šablona lapa).
• Saikne: Savieno kastes modeli ar reālu tīmekļa lapas komponentu izvietojumu.
• Pedagoģiskais pamatojums: Spēļošana un tūlītēja vizuālā atgriezeniskā saite.

5. STUNDA: Formatīvais darbs un tīmekļa komponentes izstrāde

• SR numurs: D.V.2.1.2, D.V.1.1.3
• Stundas mērķis: Integrēt visas apgūtās CSS koncepcijas, patstāvīgi izstrādājot un auditējot profila vizītkarti.
• Ko skolēns prot: Izveidot semantiski pareizu, stilistiski pievilcīgu un kļūdu nesaturošu tīmekļa komponenti.
• Aktivitātes ar laiku:
  • 0–5 min Darba uzdevuma un vērtēšanas rubrikas analīze.
  • 5–25 min Patstāvīgais darbs: "Profila kartītes" izstrāde pēc dotā dizaina parauga.
  • 25–35 min Vienaudžu vērtēšana (Peer review) ar kontrolsarakstu un DevTools auditu.
  • 35–40 min Refleksija un gala iesniegšana.
• Skolotāja darbības: Individuālas konsultācijas, vērošana, formatīvā atbalsta sniegšana.
• Skolēnu darbības: Programmē, pārbauda kaimiņa kodu, veic uzlabojumus.
• Materiāli: Tehniskā specifikācija ar dizaina skici (Figma/attēls), kritēriju lapa.
• Saikne: Noslēdz CSS pamatu moduli; kalpo kā ievads tālākajiem JavaScript projektiem.
• Pedagoģiskais pamatojums: Autentisks izpildes uzdevums (performance task) ar pašnovērtējumu.

6. SKOLOTĀJU BIEŽĀKĀS KĻŪDAS

1. Pāragra iepazīstināšana ar !important:
   • Kāpēc rodas: Skolotājs vēlas ātri atrisināt skolēna stila neparādīšanās problēmu.
   • Labāks risinājums: Apmācīt skolēnu lasīt un aprēķināt specifiskumu; izmantot DevTools, lai redzētu pārsvītrotos stilus.
2. Kastes modeļa izlaišana vai virspusēja izskatīšana:
   • Kāpēc rodas: Šķiet, ka margin un padding ir pašsaprotami.
   • Labāks risinājums: Obligāti vizualizēt un praktiski aprēķināt kopējo platumu ar un bez box-sizing: border-box.
3. HTML un CSS vienlaicīga mācīšana no nulles:
   • Kāpēc rodas: Vēlme ātri iegūt skaistu rezultātu.
   • Labāks risinājums: CSS mācīt tikai tad, kad HTML semantiskā struktūra jau ir nostiprināta.
4. Tikai "akla" koda kopēšana no tāfeles:
   • Kāpēc rodas: Skolēniem šķietami viss izdodas, stunda rit mierīgi.
   • Labāks risinājums: Izmantot "salauzta koda" (debugging) uzdevumus, kur jāatrod un jāizlabo kļūda.
5. Pārlūka izstrādātāja rīku (DevTools) ignorēšana stundās:
   • Kāpēc rodas: Paļaušanās tikai uz koda redaktoru.
   • Labāks risinājums: No pirmās dienas rādīt, kā reāllaikā manipulēt ar stiliem un pārbaudīt elementu robežas pārlūkā.

7. SKOLĒNU TIPISKĀKĀS KĻŪDAS

1. Sintakses kļūda selektoros: Klases vārdam CSS failā aizmirsts punkts priekšā (piem., card vietā .card).
   • Kā novērst: Salīdzināšanas tabula: HTML class="x" $\rightarrow$ CSS .x.
2. margin un padding jaukšana: Skolēns vēlas attālināt tekstu no rāmja, bet izmanto margin.
   • Kā novērst: Mnemotehnika: Padding = Spilvens (iekšā), Margin = Mala līdz kaimiņam (ārā).
3. Semantiskā failu sasaistes kļūda: <link> tags ievietots <body> sadaļā vai nepareizs ceļš href="style.css".
   • Kā novērst: Pārbaudīt failu koku; mācīt pārliecināties, vai fails atrodas tajā pašā mapē.
4. Pikseļu vienību aizmirstība: Uzrakstīts width: 300; bez mērvienības px.
   • Kā novērst: Atgādināt, ka CSS skaitlis bez mērvienības ir derīgs tikai 0 gadījumā.
5. Kaskādes pārrakstīšana: Tiek definēta viena un tā pati īpašība divreiz, un skolēns nesaprot, kāpēc pirmā nedarbojas.
   • Kā novērst: Lasīt kodu no augšas uz leju tā, kā to dara pārlūks.
6. Pārlieku augsta specifiskuma izmantošana: Viss tiek stilizēts ar ID # selektoriem, padarot kodu atkārtoti neizmantojamu.
   • Kā novērst: Zelta likums: stiliem izmantojam klases, ID atstājam enkursaitēm un vēlāk JS.
7. box-sizing neizpratne: Pievienojot padding: 20px, elements izbīda kaimiņu elementus ārā no ekrāna.
   • Kā novērst: Globālā reseta ieviešana CSS sākumā: *, *::before, *::after { box-sizing: border-box; }.
8. Klašu nosaukumi ar atstarpēm: HTML definēts class="mana poga", bet CSS mēģina rakstīt .mana poga.
   • Kā novērst: Skaidrot, ka atstarpe HTML nozīmē divas atsevišķas klases; mācīt kebab-case (mana-poga).
9. Teksta centrēšana ar Flexbox pret text-align: Mēģinājums centrēt rindkopas tekstu, izmantojot align-items: center uz paša teksta taga.
   • Kā novērst: Nošķirt teksta satura formatēšanu no elementa novietojuma konteinerā.
10. Aizvēršanas iekavu vai semikolu izlaidums: Aizmirsts ; īpašības beigās, kā dēļ visa nākamā rinda netiek nolasīta.
    • Kā novērst: Koda redaktora sintakses izcelšanas krāsu maiņas vērošana.

8. UZDEVUMU SISTĒMA (10 KOGNITĪVIE LĪMEŅI)

1. Atpazīšana: Identificēt, kurš no dotajiem variantiem ir pareizs CSS klases selektors.
2. Kategorizācija: Sadalīt dotos stilus 3 kategorijās: ārējais, iekšējais vai rindas CSS.
3. Tiešā pielietošana: Nomainīt virsraksta krāsu uz zilu un fonta izmēru uz 24px.
4. Matemātiskais aprēķins: Aprēķināt bloka kopējo aizņemto platumu, ja width: 200px, padding: 10px, border: 2px, margin: 15px.
5. Kļūdu meklēšana (Debugging): Atrast 3 sintakses kļūdas dotajā CSS fragmentā.
6. Specifiskuma prognozēšana: Noteikt, kādā krāsā būs teksts, ja elementam piemēroti trīs konfliktējoši selektori.
7. Struktūras pārveidošana: Pārveidot vertikālu sarakstu par horizontālu navigācijas joslu ar Flexbox.
8. Koda refaktorings: Aizstāt 10 inline stilus ar vienu kompakti strukturētu ārējo CSS klasi.
9. Dizaina reversā inženierija: Apskatīt reālas tīmekļa kartītes attēlu un uzrakstīt tai nepieciešamo HTML/CSS skeletu.
10. Sintēze un optimizācija: Izveidot pilnībā responsīvu produkta kartīti, kas iekļaujas dotajos veiktspējas un pieejamības (accessibility) kritērijos.

9. SAISTĪBA AR CITIEM PRIEKŠMETIEM

• Vizuālā māksla / Dizains un tehnoloģijas: Kompozīcija, krāsu teorija (kontrasts, harmonija), tipogrāfija (fontu savietojamība, rindu atstatumi), vizuālā hierarhija.
• Matemātika: Koordinātu plakne (asīm Flexbox/Grid sistēmās), ģeometrija (kastes modeļa perimetra un laukuma loģika, pikseļu proporcijas).
• Latviešu valoda / Svešvalodas: Semantika un sintaktiskā struktūra (valodas noteikumu precīza ievērošana, lai nodrošinātu jēgpilnu koda "lasāmību").

— VIENA IZCILA STUNDA (40 min)

Tēma: CSS kastes modelis (Box Model) un telpiskā domāšana tīmeklī

1. IEKUSTINĀŠANA: "Dāvanu kastes noslēpums" (0–7 min)

• Konteksts: Skolotājs ieiet klasē ar reālu kartona kurpju kasti, burbuļplēvi un nelielu priekšmetu (piem., krūzīti).
• Skolotāja jautājums: "Ja es gribu nosūtīt šo krūzīti pa pastu, cik daudz vietas tā aizņems pakomātā? Vai tikai tik, cik pati krūze?"
• Skolēnu darbība: Skolēni secina: vietu aizņem krūze + aizsargmateriāls (burbuļplēve) + pašas kastes kartona biezums + brīvā vieta līdz blakus kastei.
• KĀPĒC šis posms ir svarīgs: Veido tiešu fizisku un taustāmu analoģiju abstraktajam pārlūkprogrammas mehānismam.

2. ATKLĀŠANA: No fiziskās kastes uz digitālo ekrānu (7–17 min)

• Skolotāja darbība: Skolotājs atver pārlūka DevTools un demonstrē to pašu kasti uz jebkura elementa:
  • Krūze = Content (saturs: teksts vai bilde).
  • Burbuļplēve = Padding (iekšējā atstarpe starp saturu un rāmi).
  • Kartons = Border (apmale).
  • Attālums līdz nākamajai kastei = Margin (ārējā atstarpe).
• Skolotāja provokatīvais jautājums: "Ja elementa width ir 200px un es pievienoju padding: 20px no visām pusēm, cik plats tagad ir elements?"
• Skolēnu reakcija: Lielākā daļa atbild: "200px!".
• Demonstrācija ekrānā: Skolotājs parāda, ka ekrānā tas kļuvis 240px plats ($200 + 20 + 20$), sagraujot blakus esošo izkārtojumu.

3. PRAKTIZĒŠANA: "Salabo kastes!" (17–28 min)

• Uzdevums: Skolēni datorā atver sagatavotu kļūdainu failu, kur divām 50% platuma kārtīm vajadzētu atrasties blakus vienā rindā, bet otrā karte "nokrīt" zemāk padding un border dēļ.
• Skolēnu darbība:
  1. Izmantojot DevTools, diagnosticēt patieso elementu platumu.
  2. Pielietot matemātisko risinājumu (samazināt width).
  3. Pielietot moderno standartu: pievienot box-sizing: border-box; un novērot, kā pārlūks automātiski iekļauj padding un border norādītajā 200px platumā.
• KĀPĒC šis posms ir svarīgs: Skolēns personīgi piedzīvo kļūdu un atklāj glābējinstrumentu (border-box), nostiprinot cēloņu-seku sakarību.

4. PĀRNESE: Profila kartītes komponentes veidošana (28–35 min)

• Uzdevums: Izveidot lietotāja vizītkarti ar precīziem parametriem:
  • Fons: gaiši pelēks.
  • Padding: 16px.
  • Border: 2px cieta zila līnija ar noapaļotiem stūriem (border-radius: 8px).
  • Margin: 20px no citām kartēm.
• Skolēnu darbība: Patstāvīgs darbs koda redaktorā, pārbaudot gala rezultātu pārlūkā.

5. REFLEKSIJA UN IZEJAS BIĻETE (35–40 min)

• Izejas biļete (Exit Ticket): Katrs skolēns uz lapiņas vai digitālajā formā atbild uz jautājumu:

  "Kāds būs elementa kopējais platums ekrānā, ja width: 300px, padding: 15px, border: 5px, margin: 10px, un ir iestatīts standarta box-sizing: content-box?" (Atbilde: 340px platums ekrānā bez ārējās atstarpes; kopējā aizņemtā telpa ar margin ir 360px).

KARTĪTE: "Kāpēc šī stunda ir izcila, nevis viduvēja"

PRAKTISKĀ DEMONSTRĀCIJA (Eksperiments klasē)

• Nosaukums: "Fiziskais kastes modelis pret Pārlūka kasti".
• Nepieciešamie materiāli:
  1. Neliela kartona kaste ($15 \times 15\text{ cm}$).
  2. Burbuļplēve vai saburzītas avīzes.
  3. Grāmata vai telefons (kā saturs).
  4. Līmlente ar marķieri.
• Gaita:
  1. Skolotājs uz galda ar līmlenti iezīmē laukumu $20 \times 20\text{ cm}$ (ekrāna konteiners).
  2. Ieliek grāmatu (saturs).
  3. Aptin ar burbuļplēvi (Padding) — skolēni redz, ka laukums pieaug.
  4. Ieliek kastē (Border) — laukums pieaug vēl vairāk.
  5. Noliek blakus otru kasti, rādot, ka starp tām nepieciešama brīva telpa (Margin).
• Ko skolēni saprot: Katrs slānis fiziski aizņem vietu telpā. Tīmekļa lapā pikseļi uzvedas tieši tāpat kā priekšmeti uz galda.

— VĒRTĒŠANA, KAS ATSEDZ DOMĀŠANU

FORMATĪVĀS VĒRTĒŠANAS FORMAS

1. Izejas biļete (Exit Ticket): Pārbauda konkrētu kognitīvo konceptu (piem., platuma aprēķins) stundas pēdējās 3 minūtēs.
2. "Luksofors" (🟢🟡🔴): Pašnovērtējums pēc tēmas "Kaskādes specifiskums" — 🟢 varu paskaidrot kaimiņam; 🟡 saprotu, bet vajag formulu; 🔴 nesaprotu, kāpēc viena krāsa uzvar otru.
3. Mini-tāfeles / Pirkstu skala (1–4): Tūlītēja izpratnes pārbaude: skolotājs parāda koda fragmentu, skolēni ar pirkstiem rāda, kurš stils tiks piemērots.
4. Vērošanas lapa patstāvīgā darba laikā: Skolotājs fiksē skolēnus, kuri izmanto DevTools un kuri mēģina "minēt" īpašības.
5. Vienaudžu koda audits (Peer Review): Pāri apmainās ar darbiem un pēc kontrolsaraksta pārbauda klases vārdu semantiku un lieko stilu neesamību.

PĀRBAUDES DARBA UZDEVUMU KOMPLEKTS

1. DAĻA: Vieglie uzdevumi (🌱 Pamatlīmenis)

1. Uzdevums (Atbilžu varianti):

• A variants: Kurš no šiem ir pareizs veids, kā piesaistīt ārējo stila lapu HTML dokumentam? a) <style src="style.css"> b) <link rel="stylesheet" href="style.css"> c) <stylesheet>style.css</stylesheet> d) <css link="style.css"> (Atbilde: b)
• B variants: Kurā HTML dokumenta sadaļā standarta gadījumā tiek ievietots <link> tags stila lapas piesaistei? a) <body> b) <header> c) <head> d) <footer> (Atbilde: c)

2. Uzdevums (Pāru savienošana):

• A variants: Savieno CSS selektoru ar tā veidu:
  1. h1 | 2. .main-title | 3. #header A. ID selektors | B. Elementa (taga) selektors | C. Klases selektors (Atbilde: 1-B, 2-C, 3-A)
• B variants: Savieno CSS kastes modeļa jēdzienu ar tā nozīmi:
  1. padding | 2. margin | 3. border A. Ārējā atstarpe līdz citiem elementiem | B. Iekšējā atstarpe ap saturu | C. Apmale ap iekšējo atstarpi (Atbilde: 1-B, 2-A, 3-C)

3. Uzdevums (Īsā atbilde):

• A variants: Kāda ir atšķirība starp klases (.) un ID (#) selektora lietošanu HTML dokumentā? (Atbilde: Klasi var izmantot vairākiem elementiem vienā lapā, bet ID jābūt unikālam — tikai vienam konkrētam elementam).
• B variants: Kāpēc tīmekļa izstrādē nav ieteicams izmantot inline stilus (piemēram, <p style="color: red;">)? (Atbilde: Tie sajauc saturu ar dizainu, padara kodu grūti uzturējamu un tiem ir pārāk augsta prioritāte kaskādē).

4. Uzdevums (Atbilžu varianti):

• A variants: Kura CSS īpašība nosaka teksta krāsu? a) text-color | b) font-color | c) color | d) background-color (Atbilde: c)
• B variants: Kura CSS īpašība nosaka fonta izmēru? a) text-size | b) font-size | c) font-weight | d) size (Atbilde: b)

5. Uzdevums (Īsā atbilde):

• A variants: Kas notiek, ja CSS failā aiz īpašības vērtības aizmirst pielikt semikolu ;? (Atbilde: Pārlūks nevar nolasīt nākamo īpašību, un tā (vai abas) nedarbojas).
• B variants: Kādu noklusēto vērtību pārlūks piešķir display īpašībai <div> elementam? (Atbilde: block).

2. DAĻA: Vidējie uzdevumi (🌿 Vidējais līmenis)

6. Uzdevums (Aprēķinu uzdevums):

• A variants: Aprēķini elementa kopējo fizisko platumu ekrānā, ja tam ir šādi stili: width: 250px; padding: 10px 20px; border: 2px solid black; margin: 15px; box-sizing: content-box; (Risinājums: Platums = Platums + Kreisais/Labais Padding + Kreisais/Labais Border = 250 + 20 + 20 + 2 + 2 = 294px. Margin neietilpst elementa paša platumā, bet kopējā aizņemtajā vietā = 294 + 30 = 324px. Atbilde: Elementa platums ir 294px).
• B variants: Aprēķini elementa satura (content) platumu, ja dots: width: 300px; padding: 25px; border: 5px solid red; box-sizing: border-box; (Risinājums: Tā kā ir border-box, kopējais platums ir 300px. Satura platums = 300 - (25 × 2) - (5 × 2) = 300 - 50 - 10 = 240px. Atbilde: 240px).

7. Uzdevums (Diagnostikas jautājums):

• A variants: Skolēns uzrakstīja šādu CSS:

  p { color: blue; }
  .raksts p { color: green; }
  #galvenais { color: red; }
  

  HTML kods: <div id="galvenais" class="raksts"><p>Sveika, pasaule!</p></div> Kādā krāsā būs teksts rindkopā? a) Zils | b) Zaļš | c) Sarkans | d) Melns (Atbilde: b) Zaļš. Diagnostika: ID pieder vecākam div, bet klases pēcteča selektors .raksts p tieši atlasa <p> elementu, pārspējot vienkāršo p un mantoto krāsu no #galvenais).
• B variants: Dots CSS:

  .poga { background-color: yellow; }
  button { background-color: gray; }
  .header .poga { background-color: orange; }
  

  HTML kods: <div class="header"><button class="poga">Klikšķini</button></div> Kāda būs pogas fona krāsa? (Atbilde: Orange. Divu klašu selektora specifiskums (0,2,0) ir augstāks par vienas klases (0,1,0) vai elementa (0,0,1) selektoru).

8. Uzdevums (Atvērtais jautājums):

• A variants: Paskaidro, kāpēc mūsdienu tīmekļa izstrādē globāli tiek iestatīts * { box-sizing: border-box; }! Kā tas atvieglo izkārtojuma veidošanu? (Atbilde: Tas nodrošina, ka elementa norādītais platums un augstums ietver arī padding un border. Izstrādātājam nav manuāli jāpārrēķina un jāsamazina platums ikreiz, kad tiek pievienota iekšējā atstarpe).
• B variants: Kāda ir būtiskākā atšķirība starp display: none; un visibility: hidden;? (Atbilde: display: none; pilnībā izņem elementu no dokumenta plūsmas (tas neaizņem vietu), bet visibility: hidden; padara elementu neredzamu, saglabājot tā aizņemto fizisko vietu ekrānā).

9. Uzdevums (Datu / koda analīze):

• A variants: Dots Flexbox konteiners:

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  Kā elementi tiks izkārtoti horizontāli un vertikāli? (Atbilde: Horizontāli elementi tiks izkārtoti ar vienādām atstarpēm starp tiem, piespiežot pirmo un pēdējo elementu pie malām. Vertikāli elementi tiks centrēti).
• B variants: Kas jādara, lai Flexbox elementi pārnestos jaunā rindā, ja tie neietilpst ekrānā? (Atbilde: Konteineram jāpievieno īpašība flex-wrap: wrap;).

10. Uzdevums (Atvērtais jautājums ar pamatojumu):

• A variants: Kādās situācijās labāk izmantot relatīvās mērvienības (rem, %, vh/vw), nevis absolūtos pikseļus (px)? (Atbilde: Relatīvās mērvienības nodrošina responsīvu dizainu un pieejamību — fonts mērogojas atbilstoši lietotāja pārlūka iestatījumiem, bet elementi pielāgojas dažādiem ekrāna izmēriem).
• B variants: Kā pseidoklase :hover uzlabo lietotāja pieredzi (UX) tīmekļa vietnē? (Atbilde: Tā sniedz vizuālu atgriezenisko saiti lietotājam, norādot, ka elements (poga, saite) ir interaktīvs un uz tā var uzklikšķināt).

3. DAĻA: Grūtie un padziļinātie uzdevumi (🌳 Paplašinātais līmenis)

11.–14. Uzdevumi (Padziļinātā koda sintēze un atkļūdošana):

• 11. uzdevums (Atkļūdošana): Dots nefunkcionējošs navigācijas joslas kods. Atrodi un izlabo visas 4 kļūdas, lai saites būtu horizontālā rindā bez saraksta punktiem:

  /* KĻŪDAINAIS KODS */
  nav ul {
    list-style: dots;
    display: block;
  }
  nav li {
    float: center;
    margin-right: "15px";
  }
  

  (Labojums: 1. list-style: none;, 2. display: flex; uz ul, 3. noņemt nederīgo float: center, 4. noņemt pēdiņas pie 15px).

• 12. uzdevums (Specifiskuma hierarhijas sakārtošana): Sakārto šos selektorus augošā specifiskuma secībā (no vājākā uz spēcīgāko):

  1. header nav ul li a
  2. #main-nav .menu-item
  3. .nav-link:hover
  4. a
  5. #main-nav (Pareizā secība: 4 (0,0,1) $\rightarrow$ 1 (0,0,5) $\rightarrow$ 3 (0,2,0) $\rightarrow$ 5 (1,0,0) $\rightarrow$ 2 (1,1,0)).

REĀLĀS DZĪVES PROBLĒMUZDEVUMS: E-komercijas cenu kartītes izstrāde

Situācijas apraksts: Tu strādā jaunuzņēmumā, kas veido vietni interneta veikalam. Dizainers ir iesniedzis prasības cenu kartītei (Pricing Card). Kartītei jābūt precīzi $320\text{ px}$ platai uz darbvirsmas ekrāna. Kartītes iekšpusē ir virsraksts, cena un poga "Pirkt". Izstrādātājs pirms tevis ir uzrakstījis šādu CSS:

.pricing-card {
  width: 320px;
  padding: 24px;
  border: 4px solid #2b6cb0;
  margin: 16px;
  background-color: #ffffff;
}
.pricing-card .btn-buy {
  background-color: #3182ce;
  color: white;
  padding: 10px 20px;
  display: inline-block;
}
button {
  background-color: #e2e8f0;
}

Jautājumi:

• a) Aprēķini cenu kartītes faktisko fizisko platumu ekrānā, ja lapā tiek izmantots standarta pārlūka kastes modelis (box-sizing: content-box).
• b) Kāpēc poga ar klasi .btn-buy būs zilā krāsā (#3182ce), nevis pelēkā (#e2e8f0), lai gan button selektors CSS failā ir uzrakstīts zemāk?
• c) Uzraksti vienu CSS koda rindiņu, kas nodrošinās, ka kartītes kopējais platums ar visiem padding un border būs tieši $320\text{ px}$, nevis lielāks.
• d) Uzraksti nepieciešamo Flexbox CSS kodu klasei .pricing-card, lai visi tās iekšējie elementi (virsraksts, cena, poga) tiktu automātiski izkārtoti vertikāli vienā kolonnā ar $16\text{ px}$ atstarpi starp tiem un nocentrēti horizontāli.
• e) Kāpēc definīcija margin: 16px auto; būtu labāka par margin: 16px;, ja šī kartīte mobilajā tālrunī atrodas viena pati uz ekrāna?

Pilna atbilde un atrisinājums:

• a) Platums = $320\text{ (width)} + 24\text{ (padding-left)} + 24\text{ (padding-right)} + 4\text{ (border-left)} + 4\text{ (border-right)} = 376\text{ px}$.
• b) Selektora .pricing-card .btn-buy specifiskums ir $(0, 2, 0)$ (divas klases), kamēr button specifiskums ir $(0, 0, 1)$ (viens elements). Augstāks specifiskums vienmēr pārspēj kaskādes secību.
• c) box-sizing: border-box; (vai pievienot to kartītei vai globālajam stilam).
• d)

  .pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  

• e) Vērtība auto kreisajā un labajā malā (margin-left: auto; margin-right: auto;) automātiski aprēķina brīvo vietu un perfekti centrē kartīti mobilās ierīces ekrānā.

VĒRTĒŠANAS KRITĒRIJU TABULA SAREŽĢĪTĀKAJIEM UZDEVUMIEM

DIAGNOSTIKAS JAUTĀJUMU TIPI (KO ATKLĀJ KATRS VARIANTS)

Piemēra jautājums: Skolēnam jānocentrē poga bloka iekšpusē. Viņš izvēlas starp:

• A variants: text-align: center; uz vecākelementa $\rightarrow$ Atklāj: Skolēns saprot inline elementu dabu, bet nenošķir teksta formatēšanu no strukturāla bloku izkārtojuma.
• B variants: margin: 0 auto; uz pašas pogas (ar display: block) $\rightarrow$ Atklāj: Dziļa izpratne par bloka elementu kastes modeli un brīvās telpas sadali.
• C variants: justify-content: center; uz vecākelementa (ar display: flex) $\rightarrow$ Atklāj: Mūsdienīga, elastīga domāšana atbilstoši modernajiem standartiem.
• D variants: padding-left: 150px; uz pogas $\rightarrow$ Atklāj: Kognitīvs strupceļš! Skolēns "iekaļ" fiksētas vērtības, nesaprotot responsīvo dizainu un ekrānu dažādību.

VĒRTĒŠANAS RUBRIKA (4 LĪMEŅI × 3 DIMENSIJAS)

PAŠVĒRTĒJUMA LAPA SKOLĒNAM

Vārds, Uzvārds: ___________________________________ Datums: ______________

Novērtē savas prasmes skalā no 1 līdz 4 (1 - vēl mācos, 4 - protu lieliski un varu iemācīt citam):

[ ] 1. Es protu izveidot un pareizi piesaistīt ārējo CSS failu ar <link> tagu.
[ ] 2. Es skaidri zinu atšķirību starp Margin (ārējo) un Padding (iekšējo) atstarpi.
[ ] 3. Es saprotu, kāpēc un kad lietot `box-sizing: border-box`.
[ ] 4. Es varu noteikt, kurš stils "uzvarēs", ja elementam ir vairāki konfliktējoši selektori.
[ ] 5. Es protu izmantot pārlūka "Inspect Element" (DevTools), lai atrastu kļūdas savā kodā.
[ ] 6. Es spēju izlīdzināt elementus rindā vai kolonnā ar CSS Flexbox.

Mana lielākā šīs tēmas "Uzvara" (kas man izdevās vislabāk):
_________________________________________________________________________

Vieta, kur es vēl dažreiz "iestrēgstu" un kas man jāpatrenē:
_________________________________________________________________________

— AI INTEGRĀCIJA UN DIFERENCIĀCIJA

KUR AI PALĪDZ UN KUR KAITĒ

✅ Kur AI PALĪDZ mācību procesā:

1. Sintakses un kļūdu skaidrošana (Rubber Duck Debugging): Skolēns iekopē savu nestrādājošo kodu un lūdz: "Neizlabo manu kodu, bet paskaidro, kura CSS kastes modeļa rindiņa izraisa horizontālo ritjoslu!"
2. Personalizētu analoģiju ģenerēšana: Mākslīgais intelekts var piemeklēt metaforas skolēna interešu jomā (piem., kastes modelis kā hokeja laukuma aizsargbarjeras vai basketbola zonas).
3. Diferencētu datu un teksta sagatavju ģenerēšana: Skolotājs var 5 sekundēs iegūt 10 dažādas reālistiskas HTML sagataves (receptes, ziņu raksti, profili), uz kurām skolēniem trenēties CSS.
4. Vienaudžu koda audita asistents: AI var izmantot kā "trešo vērtētāju", kurš analizē skolēna kodu un piedāvā labās prakses ieteikumus (Clean Code).

❌ Kur AI KAITĒ (un kā to novērst):

1. Aklā koda kopēšana bez izpratnes: Skolēns ieprasa "uzraksti man navigācijas joslu" un nokopē 50 rindiņas ar position: absolute un nesaprotamiem trikiem.
   • Novēršana: Prasīt skolēnam mutiski vai komentāros aizstāvēt katru CSS īpašību.
2. Kognitīvās piepūles apiešana specifiskuma aprēķinā: Skolēns nepārzina kaskādes likumus, jo AI vienmēr iedod pareizo selektoru.
   • Novēršana: Pārbaudes darbi un diagnostikas uzdevumi bez piekļuves AI rīkiem.
3. Paļaušanās uz novecojušiem CSS paņēmieniem: AI dažkārt mēdz ģenerēt novecojušu kodu (piem., float: left; izkārtojumiem Flexbox vietā).
   • Novēršana: Mācīt kritiski izvērtēt AI ieteikumus pret modernajiem standartiem (MDN Docs).
4. Zūd prasme patstāvīgi lietot pārlūka DevTools: Skolēns neiemācās klikšķināt un pētīt elementus pārlūkā, jo paļaujas uz tūlītēju AI atbildi.
   • Novēršana: Praktiskie darbi klasē ar tiešo ekrāna demonstrāciju un koda inspekciju.

GATAVA UZVEDNE (PROMPT) SKOLOTĀJAM

Tu esi pieredzējis programmēšanas mentors un kognitīvās pedagoģijas eksperts. 
Es mācu CSS tēmu 11. klases skolēniem (tēma: CSS Box Model un Flexbox pamati).
Izveido 3 dažādu grūtības līmeņu "salauzta koda" (debugging) uzdevumus HTML/CSS formātā.

Prasības uzdevumiem:
1. Katrā uzdevumā jābūt reālistiskai, skolēnu tipiskai kļūdai (1. uzdevums: aizmirsts box-sizing/nepareizs padding; 2. uzdevums: specifiskuma konflikts; 3. uzdevums: Flexbox asu sajaukšana).
2. Katram uzdevumam pievieno:
   - Īsu situācijas aprakstu (ko klients vēlējās panākt).
   - Kļūdaino koda fragmentu (HTML + CSS).
   - Diagnostikas jautājumu skolotājam, ko pajautāt skolēnam, lai aizvestu viņu pie risinājuma (Sokrata metode).
   - Pareizo atrisinājumu ar pedagoģisku skaidrojumu latviešu valodā.

DIFERENCIĀCIJAS STRATĒĢIJAS

• Skolēniem ar augstiem sasniegumiem: Tiek piedāvāts atteikties no fiksētiem pikseļiem un pāriet uz CSS mainīgajiem (custom properties --primary-color), kā arī izveidot CSS režģi (Grid) vai pievienot vienmērīgas pārejas (transition: all 0.3s ease).
• Skolēniem ar mācīšanās grūtībām: Tiek nodrošināts vizualizēts "špikeris" ar kastes modeli, krāsu kodēti koda fragmenti un strukturēti koda rāmji (scaffolding), kur jāieraksta tikai iztrūkstošās CSS vērtības.
• Skolēniem ar valodas grūtībām: Angļu valodas CSS atslēgvārdu vizuālā vārdnīca ar ikonām (piem., justify-content: space-between attēlots ar divām bultiņām uz pretējām pusēm).

5 KONKRĒTI SKOLĒNU PROFILI UN PIELĀGOJUMI

1. Anna — "Perfekcioniste"

• Raksturojums: Augsta motivācija, teicamas sekmes, bet paralizējošas bailes kļūdīties; pārdzīvo, ja CSS elements uzreiz nenostājas ideāli.
• Pielāgojumi:
  1. Uzdevums: Iedot uzdevumu, kurā mērķis ir apzināti pieļaut 3 kļūdas un fiksēt, kā pārlūks uz tām reaģē.
  2. Loma: Koda recenzente vienaudžu vērtēšanā (attīsta prasmi redzēt kļūdas kā dabisku procesa daļu).
  3. Atgriezeniskā saite: Uzsvērt domāšanas procesu un eksperimentēšanas drosmi, nevis gala pikseļu precizitāti.
• Pamatojums: Mazina trauksmi un veicina elastīgu domāšanu (growth mindset).

2. Roberts — "Radošais domātājs"

• Raksturojums: Ģenerē fantastiskas vizuālās idejas, bet pretojas stingrai sintaksei, ignorē semantiku un koda struktūru.
• Pielāgojumi:
  1. Uzdevums: Brīva tēmas izvēle vizītkartes dizainam, bet ar stingru ierobežojumu: drīkst izmantot ne vairāk kā 5 konkrētas CSS klases.
  2. Loma: UI dizainers pāru darbā, kuram jāsagatavo CSS stila ceļvedis (Style Guide).
  3. Atgriezeniskā saite: Parādīt, kā koda kārtība palīdz viņa radošajai vīzijai darboties bez "gļukiem".
• Pamatojums: Saglabā radošo dzirksti, ieliekot to funkcionālos rāmjos.

3. Marta — "Praktiķe"

• Raksturojums: Ļoti disciplinēta, cītīgi pilda soļus, bet saskaras ar grūtībām, tiklīdz parādās abstrakta matemātiskā loģika un specifiskuma aprēķini.
• Pielāgojumi:
  1. Uzdevums: Aprēķinus veikt nevis galvā, bet izmantojot fizisku kastes modeļa šablonu (uz papīra uzdrukāta matrica).
  2. Loma: Testētāja — pārbauda elementus ar pārlūka DevTools lineālu un vizuālo kastes rīku.
  3. Atgriezeniskā saite: Soli pa solim vizualizēti algoritmi ("Ja redzi problēmu A, pārbaudi soļus 1, 2, 3").
• Pamatojums: Mazina kognitīvo slodzi, nodrošinot taustāmu atbalsta sistēmu (scaffolding).

4. Kārlis — "Dziļais analītiķis"

• Raksturojums: Ļoti ātrs, tēmu jau apguvis patstāvīgi mājās, stundās ātri kļūst garlaikots un izvairās no sadarbības ar citiem.
• Pielāgojumi:
  1. Uzdevums: CSS arhitektūras optimizācija (BEM metodoloģijas ieviešana, responsīvā dizaina @media vaicājumu integrācija).
  2. Loma: "Vecākais programmētājs" (Tech Lead) — palīdz sagatavot automatizētus koda testus vai konsultē citus sarežģītos kļūdu gadījumos.
  3. Atgriezeniskā saite: Fokusēta uz koda efektivitāti, mērogojamību un industrijas standartiem.
• Pamatojums: Novērš garlaicību un attīsta līderības un komunikācijas caurviju prasmes.

5. Laura — "Sociālā mācekle"

• Raksturojums: Lieliski komunicē un ģenerē idejas grupā, bet apjūk patstāvīga individuāla koda rakstīšanas procesā pie datora.
• Pielāgojumi:
  1. Uzdevums: Sadalīts mazos posmos ar skaidriem kontrolpunktiem pēc katrām 3 uzrakstītajām CSS rindiņām.
  2. Loma: "Navigatore" pāru programmēšanā (stāsta, kādam jābūt loģiskajam solim, kamēr partneris raksta kodu).
  3. Atgriezeniskā saite: Regulārs, tūlītējs formatīvais atbalsts stundas laikā.
• Pamatojums: Strukturēta ārējā vide palīdz fokusēties uz individuālo izpildi.

PRODUKTĪVA PĀRA PIEMĒRS: Laura (Sociālā) + Kārlis (Analītiķis)

• Kāpēc šis savienojums darbojas: Kārlis parasti strādā pārāk ātri un nerunā, savukārt Laura baidās no koda sintakses.
• Lomu sadalījums: Laura ir "Vadītāja" (Driver — pie klaviatūras), Kārlis ir "Navigators" (Navigator — drīkst tikai runāt un skaidrot loģiku, bet nedrīkst pieskarties pelei un klaviatūrai).
• Abpusējais ieguvums: Laura iegūst tūlītēju drošības sajūtu un praktizē koda rakstīšanu; Kārlis spiests dziļi artikulēt un formulēt savu domāšanu vienkāršā valodā, kas nostiprina viņa paša konceptuālo izpratni.

IETEIKUMS SKOLAI PAR AI LIETOŠANU

Vienotā skolas pieeja: AI rīki programmēšanā ir atļauti un atbalstāmi kā koda skaidrotāji un analīzes partneri, bet ir stingri aizliegti kā akli koda ģeneratori bez skolēna spējas to aizstāvēt. Skolēna vērtējumu veido nevis rezultātā iegūtais CSS fails, bet viņa spēja paskaidrot un modificēt katru rindiņu skolotāja vai klasesbiedru klātbūtnē.

MĀCĪŠANĀS STILU (VAK) PROFILĒŠANA

• Vizuālais tips:
  • Aktivitāte: Krāsu kodētas diagrammas ar kastes modeli; DevTools krāsaino slāņu (zils=saturs, zaļš=padding, dzeltens=margin) pētīšana un zīmēšana.
• Auditīvais tips:
  • Aktivitāte: Koda "skaļā lasīšana" un kaskādes soļu mutiska izrunāšana ("Pārlūks skatās uz klasi, tad redz ID un izvēlas ID, jo tas ir smagāks").
• Kinestētiskais tips:
  • Aktivitāte: Fizisko kastu kraušana, roku žesti Flexbox asu virzienu rādīšanai (horizontālā ass = rokas izstieptas sānis, vertikālā = rokas augšā/lejā).

— SKOLOTĀJA ROKASGRĀMATA UN PAŠKRITIKA

5 PADOMI JAUNAM SKOLOTĀJAM

1. Nekad nemāci CSS bez pārlūka izstrādātāja rīkiem (DevTools): Tas nav "papildu rīks", tas ir vienīgais veids, kā skolēns fiziski ierauga koda neredzamo ietekmi uz elementu robežām.
2. Neļauj skolēniem lietot !important: Ja skolēns to ieraksta, uztver to kā "trauksmes signālu", ka nav izprasts selektoru specifiskums vai kaskādes secība.
3. Māci klases, nevis elementu tagu stilizēšanu: Jau no pirmās dienas pieradini skolēnus pie labās prakses: semantiskie tagi HTML struktūrai, klases — dizainam.
4. Sāc ar kastes modeli, nevis krāsām: Krāsas nomainīt ir viegli, bet izkārtojums un elementu sabrukšana ir vieta, kur skolēni zaudē motivāciju.
5. Izmanto analoģijas no reālās dzīves: Kaste, pakomāts, saliekamā gulta, lego klucīši — jo taustāmāka metafora, jo noturīgāks mentālais modelis.

KUR SKOLĒNI VISBIEŽĀK IESTRĒGST

1. "Elements pazūd vai nokrīt zemāk":
   • Iemesls: content-box noklusētā uzvedība — pievienojot padding, elementa kopējais platums pārsniedz $100$ no ekrāna platuma.
2. "Es mainu krāsu, bet nekas nemainās":
   • Iemesls: Specifiskuma konflikts (augstāk kodā definēts ID vai specifiskāks selektors, kas pārraksta jauno stilu) vai vienkārši aizmirsts saglabāt .css failu (Ctrl+S).
3. "Flexbox necentrē manu elementu":
   • Iemesls: justify-content vai align-items tiek uzrakstīts pašam bērna elementam, nevis tā vecākkonteineram (display: flex).

KĀ SAGLABĀT MOTIVĀCIJU

• Ātrie vizuālie panākumi (Instant Gratification): Jau pirmajā stundā panākt, ka briesmīga, melnbalta HTML lapa ar 5 CSS rindiņām pārtop par modernu "Tumšā režīma" (Dark Mode) vietni.
• Reāli un personīgi konteksti: Neveidot abstraktus "Paraugs 1", bet stilizēt reālu mūzikas atskaņotāja kartīti, iecienītākās videospēles profila lapu vai picērijas pasūtījuma formu.
• Spēļošana: Izmantot programmēšanas mīklas un interaktīvās spēles (piem., Flexbox Froggy, CSS Diner), kur katrs līmenis dod tūlītēju atgriezenisko saiti.
• Sociālā atzinība: Stundas noslēgumā veltīt 3 minūtes "Kaimiņa koda galerijai" — piecelties un apskatīt blakussēdētāju ekrānus.

NOBEIGUMS

CSS apguve nav vienkārši programmēšanas valodas sintakses iegaumēšana — tā ir telpiskās un algoritmiskās domāšanas attīstīšana digitālajā vidē. Šajā metodiskajā ieteikumā izmantotais princips (no fiziskas analoģijas $\rightarrow$ koda eksperimentam $\rightarrow$ patstāvīgai arhitektūrai) ir universāli pārnesams uz jebkuru programmēšanas un datorikas tēmu vidusskolā.

3 VĀJIE PUNKTI ŠAJĀ METODIKĀ UN KĀ TOS UZLABOT

1. Laika deficīts 40 minūšu stundā:
   • Paškritika: Flexbox un kastes modeļa apvienošana vienā modulī 5 stundās ir ļoti blīva; lēnākiem skolēniem var pietrūkt laika koda eksperimentiem.
   • Uzlabojums: Nodrošināt jau iepriekš sagatavotus koda šablonus (boilerplates), lai skolēniem nav jātērē laiks HTML rakstīšanai no nulles.
2. Pārlūku atšķirības un kešatmiņa (Cache):
   • Paškritika: Dažkārt skolēns veic izmaiņas CSS, bet pārlūks rāda veco versiju kešatmiņas dēļ, radot lieku apjukumu.
   • Uzlabojums: Mācīt lietot Hard Refresh (Ctrl+F5) un izmantot koda redaktora tiešraides spraudņus (Live Server).
3. Pāreja uz viedtālruņu ekrāniem (Responsivitāte):
   • Paškritika: 5 stundu ietvaros padziļināti netiek apskatīti @media vaicājumi, kas ir mūsdienu tīmekļa standarts.
   • Uzlabojums: Flexbox tēmā uzsvērt elastīgo dizainu ar flex-wrap un relatīvajām mērvienībām, liekot pamatus nākamajam padziļinātajam modulim.

NOSLĒGUMA TĒZE

CSS nav vizuāla nejaušība — tā ir stingra matemātiska un hierarhiska sistēma, kuru izprotot, skolēns no koda patērētāja kļūst par digitālās telpas arhitektu.

— DARBLAPA SKOLĒNAM

DARBLAPA — CSS pamati un kastes modelis (11. klase)

Vārds, Uzvārds: _______________________________________
Datums: ________________________ Klase: ____________

🌱 1. LĪMENIS: Pamatprasmes un sintakse (Obligāts visiem)

1. Uzdevums:
Uzraksti pareizu CSS kārtulu, kas visiem otrā līmeņa virsrakstiem (<h2>) iestata zilu teksta krāsu (blue) un fonta izmēru $20\text{ px}$!

/* Raksti savu kodu šeit: */

2. Uzdevums:
Savieno ar bultiņu jēdzienu ar tā atrašanās vietu kastes modelī:

• Padding $\rightarrow$ [ ] Apmale ap elementu
• Margin $\rightarrow$ [ ] Iekšējā atstarpe starp saturu un apmali
• Border $\rightarrow$ [ ] Ārējā atstarpe, kas atgrūž citus elementus

3. Uzdevums:
Kādu simbolu liek CSS failā pirms selektora, ja mēs vēlamies stilizēt:

• a) Klasi: ______
• b) Identifikatoru (ID): ______
• c) Standarta HTML elementu (tagu): ______

🌿 2. LĪMENIS: Aprēķini un situāciju analīze

4. Uzdevums (Kastes modeļa kalkulators):
Tev ir dots bloks ar šādiem CSS iestatījumiem:

.kaste {
  width: 200px;
  padding: 15px;
  border: 3px solid black;
  margin: 20px;
  box-sizing: content-box;
}

• a) Aprēķini elementa kopējo platumu ekrānā (bez margin):
  Aprēķins: ____________________________________________________
  Atbilde: ________ px
• b) Kāds būtu elementa platums ekrānā, ja tam pievienotu box-sizing: border-box;?
  Atbilde: ________ px

5. Uzdevums (Kaskādes detektīvs):
Dots šāds HTML un CSS kods:

<p id="svarigs" class="zils-teksts">Kādā krāsā es būšu?</p>

p { color: black; }
.zils-teksts { color: blue; }
#svarigs { color: red; }

Kādā krāsā būs teksts pārlūkprogrammā?
Atbilde: ____________________
Pamatojums (kāpēc?): _________________________________________________________________

6. Uzdevums (Flexbox loģika):
Tev ir navigācijas josla <nav>, kurā atrodas 3 saites <a>. Uzraksti minimālo CSS kodu, kas novietos šīs saites horizontālā rindā ar vienādām atstarpēm starp tām!

nav {
  /* Raksti nepieciešamās CSS rindiņas šeit: */



}

🌳 3. LĪMENIS: Koda atkļūdošana un meistarība

7. Uzdevums (Atrodi un izlabo kļūdas):
Šajā koda fragmentā ir paslēptas 3 kļūdas. Atrodi tās, apvelc un blakus uzraksti pareizo variantu!

1. rinda:  #profila-karte {
2. rinda:    width: 300;
3. rinda:    background color: #f4f4f4
4. rinda:    margin: 0 auto;
5. rinda:    padding: 20px;
6. rinda:  }

Labojumi:

1. kļūda: _________________________________________________________________
2. kļūda: _________________________________________________________________
3. kļūda: _________________________________________________________________

🌟 PAPILDU IZAICINĀJUMS (Ātrākajiem un zinātkārajiem)

8. Uzdevums (Mini-dizaina arhitektūra):
Uzraksti pilnu CSS kodu lietotāja profilam .user-badge, kuram jāatbilst šādiem kritērijiem:

1. Fona krāsa ir tumši pelēka (#222), teksta krāsa ir balta.
2. Iekšējā atstarpe no visām pusēm ir $16\text{ px}$.
3. Stūri ir noapaļoti ar rādiusu $12\text{ px}$.
4. Kad lietotājs uzbīda peli (:hover), fons vienmērīgi mainās uz koši zilu (#0066cc).

/* Raksti savu risinājumu šeit: */
.user-badge {






}

.user-badge:hover {



}