HTML și CSS fără magie
Un curs despre motivul pentru care pagina arată exact așa. Analizăm fluxul, modelul de cutie, flex și grid până la cauze, nu până la rețete, și scriem machete reale din cursul «Interfețe în Figma».
Ce vei putea face
11 module, un singur proiect
01 Cum este construită o pagină3 lecții · 2 h 16 minDeschis
Începem cu un fișier și un browser. Vedem cum se adună tagurile în arborele documentului și de ce semantica decide ce vor auzi motorul de căutare și cititorul de ecran.
02 Selectori, cascadă și modelul de cutie3 lecții · 2 h 07 min
De unde ia browserul valoarea finală a unei proprietăți: selector, specificitate, moștenire. Apoi calculăm manual lățimea unui bloc și înțelegem unde se duc spațierile și bordurile.
03 Flux și poziționare3 lecții · 2 h 06 min
Fluxul normal este starea implicită și majoritatea ciudățeniilor se explică prin el. Analizăm colapsarea marginilor, cele patru tipuri de poziționare și ordinea de suprapunere.
04 Flexbox3 lecții · 2 h 24 min
Flexbox pentru rânduri și coloane. Învățăm să citim comportamentul unui element prin axe, spațiul liber și cele trei proprietăți de întindere, în loc să ghicim valori.
05 CSS Grid3 lecții · 2 h 20 min
Grid pentru layout-uri bidimensionale: catalog, galerie, antet complex. Definim grila pe rânduri și coloane, numim zonele și construim pagina fără ambalaje inutile.
06 Tipografie și fonturi3 lecții · 2 h 06 min
Mutăm fontul din machetă în pagină: formate de fișiere, greutăți, variante de rezervă. Analizăm dimensiunea, interlinierea și lungimea rândului — de ele depinde lizibilitatea.
07 Responsivitate și breakpoint-uri3 lecții · 2 h 10 min
Breakpoint-urile vin din machetă, nu dintr-o listă de dispozitive populare. Dimensiunile flexibile îți permit să scrii mai puține media query-uri și să obții un rezultat previzibil la orice lățime.
08 Stări și tranziții2 lecții · 1 h 33 min
Hover, focus, apăsare, indisponibil — fiecare se activează după regulile lui. Adăugăm tranziții astfel încât pagina să rămână rapidă și pe un dispozitiv slab.
09 Accesibilitate2 lecții · 1 h 42 min
Parcurgem pagina doar de la tastatură, verificăm contrastul textului și ascultăm ce citește cititorul de ecran. Majoritatea corecturilor se dovedesc simple dacă știi ce cauți.
10 Formulare2 lecții · 1 h 35 min
Formularul este locul în care codul se întâlnește cu datele utilizatorului. Legăm câmpul de etichetă, arătăm eroarea clar și nu stricăm comportamentul implicit al browserului.
11 Asamblare și publicare2 lecții · 1 h 35 min
Modulul final: așezăm fișierele, fonturile și imaginile în foldere, parcurgem checklistul de dinainte de publicare și punem pagina online pas cu pas.
Ce primești
Video cu marcaje de timp și variantă scrisă: poți reveni la locul potrivit fără să revezi toată lecția.
Aceleași fișiere pe care învață designerii școlii: scrii cod pentru o machetă reală, nu pentru o imagine simplificată.
Un șablon de start și soluția finită: îți compari codul cu referința și găsești locul unde comportamentul a divergat.
Verificarea structurii, contrastului, comportamentului la tastatură și a responsivității — punct cu punct, ca să nu uiți nimic.
Primul modul este deschis în întregime
Urmărește lecțiile primului modul și prima temă. Dacă formatul nu ți se potrivește, nu ai pierdut nimic.