Back to Program Overview

Module 2: Responsive Design

Module/Week 1: Foundations & UI Design

Module 2: Responsive Design

Programme

Frontend Developer Internship

Module Number

2

Module Title

Responsive Design & Layouts

Duration

1 Week (15–18 Hours)

Level

Beginner → Intermediate

Prerequisites

Module 1 – Web Fundamentals

Tools Required

Visual Studio Code, Google Chrome, Live Server, Chrome DevTools

Overview

This module focuses on building responsive and adaptive web layouts that work seamlessly across mobile, tablet, and desktop devices. Learners will understand modern layout techniques such as Flexbox and CSS Grid, apply mobile-first design principles, and create real-world responsive components like navigation bars, hero sections, and image galleries. Responsive design is a core industry skill, and this module ensures learners can build layouts that meet modern UX standards.

Objectives

  • Explain the importance of responsive web design
  • Teach mobile-first and device-adaptive layouts
  • Introduce Flexbox and CSS Grid systems
  • Build responsive navigation menus
  • Design professional hero sections
  • Create responsive image galleries

Course Content

8 Topics

Hands-on Tasks

  • Fully responsive layout
  • Mobile-first design
  • Clean and readable CSS
  • Works on mobile, tablet, and desktop
  • index.html
  • style.css
  • (Optional) script.js

Learning Outcomes

  • Build mobile-friendly web layouts
  • Use media queries effectively
  • Design layouts using Flexbox and Grid
  • Create responsive navigation menus
  • Design professional hero sections
  • Implement responsive image galleries
  • **Difficulty Level**: Easy (E)
  • **Module Type**: Core UI Foundation