6.MaterialsCSS.md

CSS: Documentație pe Categorii

1. Selecții și Selectori

• Documentație:
  • W3Schools Selectors - Acoperă toate tipurile de selectori CSS, inclusiv cei simpli, combinatori, pseudo-clase și pseudo-elemente.
  • MDN CSS Selectors - Oferă o descriere detaliată și exemple pentru fiecare tip de selector CSS.
• Video:
  • CSS Selectors Tutorial for Beginners - Introducere completă în selectori CSS, utilă pentru începători.
  • CSS Selectors Crash Course - Un curs intensiv care acoperă cei mai comuni selectori CSS și cum să îi utilizați.

2. Box Model

• Documentație:
  • W3Schools Box Model - Explică conceptele de bază ale modelului box, inclusiv margini, padding, frontieră și conținut.
  • MDN Box Model - O privire de ansamblu detaliată a modelului box și cum să îl aplicați în designul paginilor web.
• Video:
  • Understanding the CSS Box Model - O prezentare clară și detaliată a modelului box în CSS.
  • CSS Box Model Explained - Explică fiecare componentă a modelului box și cum influențează layout-ul paginii.

3. Text și Fonturi

• Documentație:
  • W3Schools CSS Text - Acoperă proprietăți de bază și avansate pentru stilizarea textului în CSS.
  • MDN CSS Text - Oferă o documentație completă despre manipularea textului și proprietățile CSS asociate.
• Video:
  • CSS Typography Crash Course - Un ghid complet despre tipografia în CSS.
  • CSS Fonts and Text Styles - Explică cum să stilizezi fonturile și textul folosind CSS.

4. Culori și Fundaluri

• Documentație:
  • W3Schools CSS Backgrounds - Explică cum să aplici culori și imagini de fundal în CSS.
  • MDN CSS Backgrounds - Oferă detalii avansate despre proprietățile de fundal și utilizările lor.
• Video:
  • CSS Colors and Backgrounds - Un ghid detaliat despre utilizarea culorilor și fundalurilor în CSS.
  • CSS Backgrounds and Borders - Explică cum să stilizezi fundalurile și bordurile folosind CSS.

5. Flexbox și Grid

• Documentație:
  • W3Schools Flexbox - Introducere în Flexbox, explică proprietățile și modul de utilizare.
  • MDN Flexbox - O privire detaliată asupra Flexbox și cum să construiești layout-uri flexibile.
  • W3Schools CSS Grid - Introducere în CSS Grid Layout, explică proprietățile de bază și avansate.
  • MDN CSS Grid - Oferă o documentație completă despre CSS Grid și cum să creezi layout-uri complexe.
• Video:
  • Flexbox CSS in 20 Minutes - Un ghid rapid și concis despre Flexbox.
  • CSS Grid Layout Crash Course - Un curs intensiv care acoperă toate aspectele CSS Grid Layout.

6. Poziționare

• Documentație:
  • W3Schools CSS Position - Explică tipurile de poziționare în CSS și utilizările lor.
  • MDN CSS Position - Oferă detalii avansate despre proprietatea position și cum să o utilizezi pentru layout-uri complexe.
• Video:
  • CSS Positioning Explained - O prezentare detaliată despre cum funcționează poziționarea în CSS.
  • Understanding CSS Positioning - Explică toate tipurile de poziționare și cum să le aplici corect.

7. Animații și Tranziții

• Documentație:
  • W3Schools CSS Transitions - Explică cum să adaugi tranziții animate între stările CSS.
  • MDN CSS Transitions - Oferă o documentație completă despre utilizarea tranzițiilor CSS.
  • W3Schools CSS Animations - Introducere în animații CSS, explică cum să creezi animații simple și complexe.
  • MDN CSS Animations - Oferă detalii avansate despre utilizarea animațiilor CSS.
• Video:
  • CSS Transitions and Animations - Un ghid complet despre tranzițiile și animațiile în CSS.
  • Creating Animations with CSS - Explică cum să creezi animații captivante folosind CSS.

8. Responsivitate

• Documentație:
  • W3Schools CSS Media Queries - Explică cum să folosești media queries pentru a crea layout-uri responsive.
  • MDN CSS Media Queries - Oferă detalii complete despre utilizarea media queries în design responsive.
• Video:
  • Responsive Web Design with Media Queries - Un ghid detaliat despre cum să creezi design-uri web responsive folosind media queries.
  • CSS Media Queries for Responsive Design - Explică cum să folosești media queries pentru a adapta design-ul la diferite dimensiuni de ecran.

9. Utilități Diverse

• Documentație:
  • W3Schools CSS Opacity - Explică cum să aplici transparență elementelor folosind proprietatea opacity.
  • MDN CSS Opacity - Oferă detalii complete despre utilizarea opacity în CSS.
  • W3Schools CSS Cursor - Listă completă a tipurilor de cursori și utilizarea lor în CSS.
  • MDN CSS Cursor - Oferă detalii avansate despre utilizarea proprietății cursor.
• Video:
  • [CSS Tips and Tricks](https://www

.youtube.com/watch?v=qi8mFAOq5_k) - Un video cu trucuri utile și tehnici avansate în CSS.

• CSS Utility Classes - Explică cum să creezi și să utilizezi clase de utilitate în CSS pentru a simplifica designul.

10. Instrumente CSS moderne

• Documentație:
  • W3Schools CSS Variables - Introducere în variabilele CSS, explică cum să le definești și să le folosești.
  • MDN CSS Variables - Oferă detalii complete și exemple despre utilizarea variabilelor CSS.
  • W3Schools CSS Grid Layout - Introducere în layout-ul CSS Grid, explică proprietățile de bază și avansate.
  • MDN CSS Grid Layout - Oferă o documentație completă despre CSS Grid și cum să creezi layout-uri complexe.
• Video:
  • CSS Custom Properties (Variables) - Un ghid complet despre utilizarea variabilelor CSS.
  • CSS Grid Tutorial - Explică cum să creezi layout-uri complexe și responsive folosind CSS Grid.

11. Transformări și Efecte

• Documentație:
  • W3Schools CSS Transforms - Explică cum să aplici transformări 2D și 3D elementelor CSS.
  • MDN CSS Transforms - Oferă detalii complete și exemple despre utilizarea transformărilor CSS.
• Video:
  • CSS Transforms and Transitions - Un ghid detaliat despre utilizarea transformărilor și tranzițiilor în CSS.
  • Creating CSS 3D Transforms - Explică cum să creezi efecte 3D impresionante folosind CSS.

12. Preprocesatoare CSS

• Documentație:
  • Sass Official Guide - Ghid oficial pentru învățarea Sass, un preprocesator CSS popular.
  • LESS Documentation - Documentație oficială pentru LESS, un alt preprocesator CSS.
• Video:
  • Sass Tutorial for Beginners - Un ghid complet despre cum să începi cu Sass.
  • LESS Crash Course - Introducere în utilizarea LESS pentru a scrie CSS mai eficient.

13. Debugging și Performanță CSS

• Documentație:
  • Chrome DevTools CSS - Ghid despre utilizarea Chrome DevTools pentru debugging CSS.
  • MDN CSS Performance - Sfaturi și trucuri pentru optimizarea performanței CSS.
• Video:
  • Debugging CSS with Chrome DevTools - Ghid despre cum să folosești Chrome DevTools pentru a rezolva problemele CSS.
  • Improving CSS Performance - Sfaturi și tehnici pentru optimizarea performanței CSS.

14. Framework-uri CSS

• Documentație:
  • Bootstrap Documentation - Ghid oficial pentru utilizarea framework-ului CSS Bootstrap.
  • Tailwind CSS Documentation - Documentație oficială pentru Tailwind CSS, un framework utilitar modern.
• Video:
  • Bootstrap 5 Crash Course - Un ghid complet despre utilizarea Bootstrap 5.
  • Tailwind CSS Tutorial - Introducere în utilizarea Tailwind CSS pentru a crea design-uri rapide și eficiente.

15. Unități de Măsură și Funcții CSS

• Documentație:
  • W3Schools CSS Units - Explică toate unitățile de măsură disponibile în CSS.
  • MDN CSS Functions - Oferă detalii despre funcțiile CSS disponibile pentru calcule și manipulări avansate.
• Video:
  • CSS Units Explained - Un ghid despre utilizarea corectă a unităților de măsură în CSS.
  • Using CSS calc() Function - Explică cum să folosești funcția calc() pentru calcule dinamice în CSS.