⌬ Aytict Academy
🎨

CSS Intermediate

Flexbox, Grid and responsive design with media queries.

3 lessons 5 tasks ⚡ Live compiler
Lessons Compiler Quiz Certificate

📚 Lessons

1 Flexbox

Flexbox lays items along one axis. Set display:flex and control alignment with justify-content and align-items.

.row {
  display: flex; gap: 12px;
  justify-content: space-between; align-items: center;
}
.row > div { flex: 1; background:#dbeafe; padding:10px; }

2 CSS Grid

Grid handles two-dimensional layouts with rows and columns. grid-template-columns: repeat(3, 1fr) makes three equal columns.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.grid > div { background:#ede9fe; padding:12px; }

3 Responsive design

Media queries adapt layouts to screen size. Design mobile-first, then enhance for wider viewports.

.grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

⚡ CSS Compiler

Code runs live in a sandboxed frame, rendered by your browser.

CSS 

            

        

    







    
📝 Tasks

    
5 tasks across 2 pages — multiple-choice and fill-in (type the answer). Score 70% or higher to earn your certificate.

    

    






    
🎓 Certificate of Completion

    

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