Back to Program Overview

Module 3: UI Components

Module/Week 1: Foundations & UI Design

Module 3: UI Components

Programme

Frontend Developer Internship

Module Number

3

Module Title

UI Components & Styling

Duration

1 Week (15–18 Hours)

Level

Beginner → Intermediate

Prerequisites

Module 1 – Web Fundamentals, Module 2 – Responsive Design & Layouts

Tools Required

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

Overview

This module focuses on building modern, reusable, and visually appealing UI components using HTML, CSS, and JavaScript. Learners will understand how to break UI designs into reusable components, apply consistent styling, manage themes (light/dark mode), and implement interactive elements such as image carousels. This module builds strong UI engineering and design-system thinking, which is essential for real-world frontend development.

Objectives

  • Introduce component-based UI thinking
  • Build reusable UI components using HTML, CSS, and JS
  • Design modern card-based layouts
  • Implement theme switching using CSS variables
  • Create interactive image carousels
  • Improve UI consistency and visual hierarchy

Course Content

7 Topics

Hands-on Tasks

  • Clean and reusable CSS classes
  • Responsive component design
  • Theme persistence (optional – localStorage)
  • Smooth animations and transitions
  • index.html
  • style.css
  • script.js

Learning Outcomes

  • Design reusable UI components
  • Build modern card-based layouts
  • Implement light/dark theme switching
  • Create interactive image carousels
  • Apply animations for better UX
  • Maintain UI consistency across pages
  • **Difficulty Level**: Easy → Medium (E–M)
  • **Module Type**: UI Development Core