⌬ Aytict Academy
🎨

CSS Professional

Capstone: build a responsive, themed card layout graded by the Academy AI.

1 lessons 🛠 Project-based
Lessons Project Certificate

📚 Lessons

1 Brief & rubric

This level is project-based. Write the CSS described below in the editor. The Academy AI scores accuracy, cleanliness and performance — reach 70% to earn the certificate.

🛠 Capstone Project

Build a responsive, themed card grid

Write a CSS stylesheet that lays out a responsive card grid and themes it with custom properties. (The preview injects sample .grid > div cards and a heading.)

Requirements

  • Define at least two custom properties on :root (e.g. --brand, --gap)
  • Use them via var() in your rules
  • Lay the .grid out with display: grid and a repeat() column track
  • Make it responsive with at least one @media query
  • Add a transition on the cards for a hover effect
  • Avoid !important

When you submit, the Academy AI evaluates your code on accuracy (50%), code cleanliness (25%) and performance (25%). Score 70%+ to earn your certificate.

CSS · your solution 

            

        

    

    






    
🎓 Certificate of Completion

    

        
🔒 Pass the project evaluation above (70%+) to unlock your downloadable certificate.