Verse Logo
WEB Dev - Verse'26WEB - V'26
HomeSessionsAssignmentsCode ExamplesMembersLeaderboardAboutContact

Team WEB - Verse'26

Transform from absolute beginner to confident, portfolio-ready web developer in 16 weeks. Master modern web technologies through hands-on projects.

Quick Links

  • Sessions
  • Assignments
  • About
  • Contact

Resources

  • MDN Web Docs
  • W3Schools
  • GitHub
  • CodePen
© 2025 Abdelrhman Nasr. All rights reserved.
Back to Sessions
Week 8CSS Mastery
3 hours

Advanced CSS - Animations & Responsive Design

Create smooth animations and fully responsive websites

Learning Objectives

  • Create smooth transitions
  • Build CSS animations
  • Implement responsive design
  • Use media queries effectively
  • Apply mobile-first approach

Topics Covered

  • 1
    CSS Transitions (property, duration, timing-function, delay)
  • 2
    2D Transforms (translate, scale, rotate, skew)
  • 3
    Transform Origin
  • 4
    CSS Animations and Keyframes
  • 5
    Animation Properties (name, duration, iteration-count, direction, fill-mode)
  • 6
    Mobile-First Philosophy
  • 7
    Media Queries (min-width, max-width, orientation)
  • 8
    Common Breakpoints
  • 9
    Responsive Images and Typography

Assignment

Responsive Portfolio Homepage

Complete a responsive portfolio homepage with mobile, tablet, and desktop versions. Include smooth animations, hamburger menu with animation, and at least 3 sections. Research JavaScript basics.

Resources

  • • Responsive Design Patterns
  • • Animation Examples
View All Assignments
Previous SessionNext Session