Laboratorul 3

️Prezentare generală

Foi de stiluri in cascada (CSS)

Pagina cursului

Prezentarile de la curs

Resurse de interes

Regulament intern

Pagina laboratorului

Aspecte privind evaluarea activitatii

Detalii despre proiectele practice

Intrebari frecvente

Slide-uri laborator

⚙️ Instrumente recomandate

• CodePen
• JSFiddle
• Colorhunt

📖 Resurse

• MDN - Flexbox
• CSS-Tricks - A Complete Guide to Flexbox
• Grid vs Flexbox
• MDN - Grids
• A Complete Guide to CSS Grid
• CSS Tricks - CSS Media Queries & Using Available Space
• MDN - Using CSS animations
• CSS Tricks - Animation
• Google Devs - CSS Variables: Why Should You Care?
• Media Query Intro
• Flex Layout Intro
• Grid Sizing
• Mai multe resurse interesante se gasesc aici ⭐

💻 Exerciții laborator

• Exercitiul 1 - Media Queries
  • Folosim Display si Media Query
  • Breakpoints la 480px si 1200px
• Exercitiul 2 - Flex Direction
  • flex-direction.html
• Exercitiul 3 - Flexbox Froggy
• Exercitiul 4 - Flexbox Sizing
• Exercitiul 5 - Grid Display
• Exercitiul 6 - Grid Sizing
• Exercitiul 7 - Grid Garden
• Exercitiul 8 - Animatii CSS
  • animation.html
  • animation.css
• Exercitiul 9 - Rescrieti codul de la exercitiul 5 folosind variabile

Validare HTML: aici
Validare CSS: aici

🏠 Exerciții suplimentare

Flexbox Defense, Test your skills: Flexbox, learn-css-grid css-animations.io