Curs HTML5 și CSS3

Lecția 1 • Introducere în Rolurile HTML și CSS

Distinge structura (HTML), prezentarea (CSS) și comportamentul (JavaScript) ca preocupări separate. Stabilește așteptările pentru întregul parcurs al cursului.

Lecția 2 • Cum Funcționează Web-ul

Acoperă ciclurile request-response HTTP, rezoluția DNS și pipeline-urile de randare ale browserului. Fundamentează toată munca ulterioară cu HTML/CSS în comportamentul real al browserului.

Lecția 3 • Configurarea Mediului de Dezvoltare

Instalează și configurează un editor de cod, uneltele de dezvoltare ale browserului și un server local de fișiere. Se asigură că fiecare student are un spațiu de lucru consecvent și productiv.

Lecția 1 • Reguli de Sintaxă și Anatomie HTML5

Explică tag-urile, atributele, regulile de înglobare și declarația DOCTYPE. Sintaxa corectă previne problemele de randare în modul quirks-mode al browserului.

Lecția 2 • Elemente de Conținut Text

Învață heading-uri, paragrafe, liste, citate în bloc și elemente text inline. Studenții structurează conținut lizibil și semnificativ din punct de vedere semantic al corpului.

Lecția 3 • Tabele și Prezentarea Datelor

Construiește tabele de date accesibile folosind elementele thead, tbody, th și td. Consolidează HTML-ul semantic rezervând tabelele strict pentru date tabelare.

Lecția 4 • Legături și Imagini

Acoperă tag-urile ancoră, valorile href, atributele target și elementul img cu text alt. Aceste elemente formează baza paginilor web navigabile și vizuale.

Lecția 1 • Bazele Formularelor HTML5

Acoperă elementul form, atributele action, method și tipurile de input de bază. Formularele sunt mecanismul principal pentru trimiterea datelor de către utilizator.

Lecția 2 • Select, Textarea și Fieldset

Construiește meniuri dropdown, zone de text pe mai multe linii și controale de formular grupate. Fieldset și legend îmbunătățesc accesibilitatea și gruparea logică a formularelor.

Lecția 3 • Elemente de Reper Semantic

Introducere în elementele header, nav, main, article, section, aside și footer. Markup-ul semantic îmbunătățește accesibilitatea și indexarea în motoarele de căutare.

Lecția 4 • Tipuri și Atribute Avansate de Input

Explorează tipurile de input HTML5: date, range, culoare, tel și număr. Tipurile native de input reduc dependența de JavaScript și îmbunătățesc UX-ul pe mobil.

Lecția 1 • Modelul Cutiei CSS

Definește zonele de conținut, padding, border și margine și efectul lor asupra dimensiunii elementelor. Stăpânirea modelului cutiei este o condiție prealabilă pentru orice lucrare de layout.

Lecția 2 • Specificitate, Moștenire și Cascadă

Explică modul în care browserele rezolvă regulile conflictuale folosind scoruri de specificitate și ordinea sursei. Stăpânirea cascadei previne suprascrierile neașteptate de stiluri.

Lecția 3 • Sintaxa CSS și Metodele de Legare

Acoperă seturile de reguli, declarațiile, stilurile inline, blocurile de stil interne și foaia de stil externă. Foile de stil externe sunt stabilite ca standard profesional.

Lecția 4 • Culori, Unități și Bazele Tipografiei

Acoperă valorile hex, RGB, HSL și unitățile CSS absolute vs. relative. Utilizarea consecventă a unităților rem și em suportă o tipografie scalabilă și accesibilă.

Lecția 1 • Combinarea Flexbox și Grid

Demonstrează când să înglobezi Flexbox în celule Grid și invers. Studenții construiesc un layout complet de pagină folosind ambele sisteme în mod corespunzător.

Lecția 2 • Plasarea în Grid și Zonele Denumite

Învață plasarea pe linii, sintaxa span și grid-template-areas pentru regiuni denumite. Zonele denumite fac layout-urile complexe lizibile și ușor de întreținut.

Lecția 3 • Alinierea și Ordonarea în Flexbox

Acoperă proprietățile justify-content, align-items, align-self și order. Aceste proprietăți permit controlul precis asupra distribuției și stivuirii elementelor.

Lecția 4 • Fundamentele Flexbox

Introducere în modelul container flex și element flex, axe și proprietatea flex-direction. Flexbox rezolvă elegant problemele de aliniere unidimensionale.

Lecția 1 • Tipografie și Spațiere Responsivă

Aplică clamp, unități vw și scale de spațiere fluidă pentru tipografie și goluri de layout. Textul fluid elimină necesitatea suprascrierii mai multor breakpoint-uri.

Lecția 2 • Sintaxa Media Query și Breakpoint-urile

Învață sintaxa @media, tipurile de media și operatorii logici pentru definirea breakpoint-urilor. Breakpoint-urile ar trebui să reflecte nevoile de conținut, nu dimensiunile specifice ale dispozitivelor.

Lecția 3 • Principii de Design Responsiv

Acoperă grilele fluide, imaginile flexibile și meta tag-ul viewport ca cei trei piloni ai RWD-ului. Aceste principii ghidează fiecare decizie de layout din acest capitol.

Lecția 4 • Imagini și Media Responsive

Folosește srcset, sizes și elementul picture pentru a livra imagini de dimensiuni adecvate. Livrarea corectă a imaginilor reduce greutatea paginii pe rețelele mobile.

Lecția 1 • Performanța și Accesibilitatea Mișcării

Identifică proprietățile compozite, evită animațiile care declanșează layout și respectă prefers-reduced-motion. Designul responsabil al mișcării servește tuturor utilizatorilor.

Lecția 2 • Transformări CSS

Aplică transformările translate, rotate, scale și skew în spațiul 2D și 3D. Transformările sunt accelerate de GPU și nu declanșează reflow-ul layout-ului.

Lecția 3 • Proprietăți Personalizate CSS

Definește și consumă variabile CSS pentru culori, spațiere și token-uri de tipografie. Proprietățile personalizate permit modificări la nivel de temă dintr-o singură declarație.

Lecția 4 • Animații Keyframe CSS

Construiește animații în mai mulți pași folosind @keyframes, animation-name și proprietățile de animație. Animațiile keyframe rulează independent de interacțiunea utilizatorului.

Lecția 1 • Aplicarea Sistemului de Design CSS

Implementează proprietăți personalizate, o scară tipografică și stiluri de componente pe toate paginile. Un sistem de design partajat asigură coerența vizuală pe întreg site-ul.

Lecția 2 • Planificarea Proiectului și Wireframing

Definește obiectivele site-ului, inventarul de conținut și wireframe-uri de joasă fidelitate înainte de a scrie cod. Planificarea previne rescrieri structurale și extinderea domeniului în timpul dezvoltării.

Lecția 3 • Implementarea Layout-ului Responsiv

Aplică layout-uri Grid și Flexbox cu media queries mobile-first pe toate paginile. Fiecare pagină trebuie să se redea corect la lățimi de viewport de la 320px la 1440px.

Lecția 4 • Audit de Accesibilitate și Lustruire Finală

Rulează verificări automate și manuale de accesibilitate, corectează problemele de contrast și adaugă preferințele de mișcare. Site-ul final respectă standardele WCAG AA de contrast și navigare cu tastatura.