Lecture_9_CSS Flexbox & Responsive Design

Lesson 5: CSS Flexbox & Responsive Design

Objective: Learn to create flexible layouts using Flexbox and media queries for responsive design.

• Duration: 80 minutes

• Topics Covered:

  1. Introduction to Flexbox

     • Flex containers and flex items.

     • Key Flexbox properties: flex-direction, justify-content, align-items, flex-wrap.

  2. Building a Flexbox Layout

     • Creating a basic responsive layout(1-dimensional) using Flexbox.

     • Understanding alignment and spacing with Flexbox.

  3. Responsive Design with Media Queries

     • Using media queries to create responsive designs.

     • Example syntax: @media screen and (max-width: 600px) { /* CSS rules */ }.

  4. Combining Flexbox and Media Queries

     • Creating a mobile-first design with Flexbox and media queries.

• Student Activity:

  • Build a responsive navigation bar using Flexbox. Use media queries to adjust the layout for different screen sizes (desktop, tablet, mobile).

• Homework/Practice:

  • Create a two-column responsive layout using Flexbox. Make the layout stack vertically on smaller screens using media queries.