Lecție gratuită

Introducere

CSS (Cascading Style Sheets) este limbajul care dă viață paginilor web. Dacă HTML-ul este structura (scheletul), CSS-ul este aspectul vizual (pielea, hainele, coafura). Fără CSS, web-ul ar fi o colecție de documente alb-negru cu text formatat implicit.

Continuați cu restul cursului

Aceasta a fost o lecție din cele 110 ale cursului. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 70 €

Cuprins

Introducere în CSS - fundamente și sintaxă
- Introducere
- Cele trei metode de adăugare CSS
- Sintaxa CSS
- Cascada - cum decide CSS-ul ce stil se aplică
- Specificitate - scorul de prioritate
- Moștenirea (Inheritance)
- Unități de măsură
Selectori CSS - de la simpli la complecși
- Introducere
- Selectori de bază
- Combinatori
- Gruparea selectorilor
- Selectori moderni
- Nesting CSS nativ
Box Model - temelia layout-ului
- Introducere
- Cele 4 straturi ale box model
- box-sizing: border-box
- Margin Collapsing
- Proprietatea display
- CSS Reset modern
Culori, fundaluri și gradienți
- Introducere
- Formate de culoare CSS
- Proprietăți de fundal
- Gradienți CSS
- Tehnici practice cu fundaluri
Tipografie și text styling
- Introducere
- Font-uri web
- Proprietăți de font
- Proprietăți de text
- Sistem tipografic scalabil
- Tehnici moderne de text
Display, poziționare și float
- Introducere
- Poziționare CSS
- z-index și stacking context
- Centrarea elementelor
Flexbox - layout flexibil
- Introducere
- Concepte fundamentale
- Proprietăți pe container
- Proprietăți pe itemi (copii)
- Exemple practice Flexbox
CSS Grid - layout bidimensional
- Introducere
- Concepte fundamentale Grid
- Unitatea fr (fraction)
- Grid responsiv fără media queries
- Plasarea elementelor pe grid
- Grid Template Areas - layout semantic
- Subgrid
- Exemplu complet - layout de pagină
Responsive design și media queries
- Introducere
- Viewport meta tag (obligatoriu)
- Media Queries
- Container Queries (CSS 2023+)
- Tehnici responsive fără media queries
- Media queries pentru preferințe utilizator
Pseudo-clase și pseudo-elemente
- Introducere
- Pseudo-clase de stare
- Pseudo-clase structurale
- Pseudo-elemente
- Exemple practice pseudo-elemente
Tranziții și animații CSS
- Introducere
- Tranziții CSS
- Animații CSS (@keyframes)
- Animații practice
Transformări 2D și 3D
- Introducere
- Transformări 2D
- transform-origin
- Transformări 3D
- Exemplu practic - Card Flip
- Exemplu - efect parallax cu transform
Variabile CSS (Custom Properties)
- Introducere
- Sintaxa de bază
- Dark Mode cu variabile CSS
- Variabile cu scope (context local)
- Variabile și calc()
Funcții CSS moderne
- Introducere
- calc() - calcule matematice
- clamp() - valori fluid responsive
- min() și max()
- Funcții de culoare moderne
- Alte funcții utile
Forme, filtre și efecte vizuale
- Introducere
- Box Shadow
- Text Shadow
- CSS Filters
- backdrop-filter
- clip-path - forme custom
- mix-blend-mode
Scroll, overflow și tehnici avansate
- Introducere
- Overflow
- Scroll Behavior
- Scroll Snap
- Scroll-driven Animations (CSS 2024+)
- Aspect-ratio
Accesibilitate și performanță CSS
- Introducere
- Accesibilitate CSS
- Performanță CSS
Arhitecturi CSS - BEM, ITCSS, Utility-First
- Introducere
- BEM (Block Element Modifier)
- Utility-First (Functional CSS)
- CUBE CSS
- Organizarea fișierelor CSS
Preprocesoare și CSS modern - Sass, PostCSS, Tailwind
- Introducere
- Sass (SCSS)
- PostCSS
- Tailwind CSS
- CSS Modules
Proiecte practice și glosar
- Introducere
- Proiect: Landing Page responsivă
- Proiect: Componente reutilizabile
- Glosar CSS
- Resurse recomandate