Technologies You Will Learn
Figma
HTML5
CSS3
Bootstrap 5
JavaScript
React
Git & GitHub
Curriculum
Web Designing & UI/UX Curriculum
01
Introduction to Web Designing and UI/UX
14 Topics
Month 1
Introduction to web designing and frontend development
Difference between UI design, UX design, web design and web development
Role and responsibilities of a web designer and UI/UX designer
Website structure, webpages, websites and web applications
Design principles: alignment, contrast, proximity, repetition and visual hierarchy
Color theory, typography, spacing, consistency and visual balance
Introduction to user research, user personas and user journeys
Introduction to usability, accessibility and responsive design
Introduction to Figma and its workspace
Creating Figma accounts, files, pages and frames
Using shapes, text, images, colors, fills, strokes and effects
Creating buttons, cards, navigation bars and basic UI elements
Understanding design grids, spacing systems and alignment
Practical: Design a basic website homepage in Figma
02
Figma Wireframing, Mockups and Prototyping
13 Topics
Month 1
Understanding website requirements and target users
Information architecture and website sitemap creation
Creating user flows for common website tasks
Low-fidelity wireframes using simple shapes and placeholders
Designing desktop, tablet and mobile wireframes
High-fidelity UI mockups using colors, typography and images
Reusable components, variants and component properties
Auto Layout and responsive design concepts in Figma
Creating interactive prototypes using clickable elements
Prototype navigation, overlays, transitions and Smart Animate
Sharing designs, collecting feedback and making revisions
Design handoff and inspecting design properties for development
Practical: Design and prototype a multi-page business website
03
HTML5 Fundamentals
13 Topics
Month 1
Introduction to HTML, browsers, editors and development tools
HTML document structure and HTML5 doctype
Headings, paragraphs, line breaks, horizontal rules and comments
Text formatting, quotations, code and special characters
Links, relative paths, absolute paths and anchor navigation
Images, image paths, alt text and figure elements
Ordered lists, unordered lists and description lists
Tables, captions, table headings, rows, columns and spanning cells
Div, span and common container patterns
Semantic HTML: header, nav, main, section, article, aside and footer
HTML entities and character encoding
Creating multi-page websites and linking webpages
Practical: Build a personal profile and multi-page information website
04
HTML Forms and Modern HTML
11 Topics
Month 1
Form, label, input, textarea, select and button elements
Input types: text, email, password, number, date, file and checkbox
Radio buttons, dropdowns and grouped form controls
Required fields, placeholders, patterns and built-in validation
Fieldset, legend and accessible form labels
Audio, video, iframe and embedding external content
HTML metadata, title, description and viewport settings
Introduction to SEO-friendly HTML structure
Accessibility basics: semantic markup, alt text and keyboard navigation
HTML debugging using browser developer tools
Practical: Create a registration form, contact form and course enquiry page
05
CSS Fundamentals and Styling
14 Topics
Month 2
Introduction to CSS and its role in website design
Inline, internal and external CSS
CSS syntax, selectors and declaration rules
Element, class, ID, universal and attribute selectors
Grouping, descendant, child and sibling selectors
Pseudo-classes and pseudo-elements
Colors, HEX, RGB, RGBA, HSL and opacity
Background colors, images, gradients and background positioning
Font families, font sizes, font weights and line height
Text alignment, decoration, transformation and spacing
CSS units: px, percentage, em, rem, vw and vh
CSS inheritance, specificity and the cascade
Using Google Fonts and web-safe fonts
Practical: Style HTML webpages with professional typography and colors
06
CSS Box Model and Layout Techniques
13 Topics
Month 2
CSS box model: content, padding, border and margin
Width, height, max-width and min-height
Box-sizing and overflow handling
Display properties: block, inline, inline-block and none
Positioning: static, relative, absolute, fixed and sticky
Z-index and stacking contexts
Float and clear for legacy layout understanding
Flexbox: main axis, cross axis, alignment and wrapping
CSS Grid: grid containers, tracks, gaps and placement
Creating two-column and multi-column layouts
CSS variables and reusable styling values
Borders, border-radius, shadows and outline
Practical: Build a modern landing page using Flexbox and Grid
07
Responsive Web Design and CSS Advanced Features
14 Topics
Month 2
Mobile-first and desktop-first design approaches
Viewport configuration and responsive breakpoints
Media queries for mobile, tablet and desktop
Fluid layouts, flexible containers and responsive images
Responsive typography and CSS clamp()
CSS Grid and Flexbox for adaptive layouts
Responsive navigation bars and mobile menus
Responsive cards, tables, forms and image galleries
CSS transitions, transforms and animations
Hover, focus and active states
Keyframes and animation properties
Introduction to CSS preprocessors and utility-first styling concepts
Accessibility: contrast, visible focus and reduced motion
Practical: Convert a desktop website into a fully responsive website
08
Bootstrap 5 and UI Components
16 Topics
Month 2
Introduction to Bootstrap 5 and its setup
Using Bootstrap through CDN and local files
Bootstrap containers, rows and columns
Responsive grid system and breakpoints
Gutters, spacing utilities and display utilities
Typography, colors, backgrounds and borders
Buttons, button groups and badges
Cards, images, figures and responsive embeds
Navbar, navigation tabs and breadcrumbs
Dropdowns, pagination and list groups
Forms, validation styles and input groups
Alerts, progress bars, spinners and placeholders
Modals, accordions, collapse and tooltips
Bootstrap Icons and icon libraries
Customizing Bootstrap components with CSS
Practical: Build a responsive business website using Bootstrap 5
09
JavaScript Basics and Programming Fundamentals
15 Topics
Month 3
Introduction to JavaScript and its role in web development
Adding JavaScript using inline, internal and external scripts
Variables using var, let and const
Primitive data types and type conversion
Operators: arithmetic, assignment, comparison and logical
Conditional statements: if, else, else-if and switch
Loops: for, while, do-while, break and continue
Functions, parameters, return values and scope
Function expressions, arrow functions and callbacks
Strings and commonly used string methods
Numbers, Math methods and random number generation
Arrays and array methods: push, pop, slice, splice and includes
Objects, properties, methods and destructuring basics
Template literals and optional chaining
Practical: Build calculators, converters and small interactive programs
10
JavaScript Arrays, Objects and Modern ES6+
15 Topics
Month 3
Array iteration using forEach()
map(), filter(), find(), some() and every()
reduce() and common data transformation problems
Sorting and searching arrays
Nested arrays and nested objects
Object methods, entries, keys and values
Spread and rest operators
Array and object destructuring
Default parameters and enhanced object literals
Modules using import and export
Set, Map and common collection use cases
Date and time handling with the Date object
Error handling using try, catch and finally
Debugging with console tools and breakpoints
Practical: Build a product filtering and sorting interface
11
DOM Manipulation and Browser Events
15 Topics
Month 3
Introduction to the Document Object Model
Selecting elements using querySelector() and querySelectorAll()
Changing text, HTML attributes and element properties
Modifying CSS styles and class lists
Creating, inserting, replacing and removing elements
Event listeners and event handling
Mouse, keyboard, input, submit and change events
Event bubbling, capturing and delegation
Preventing default browser behavior
Form validation and error messages using JavaScript
Working with checkboxes, radio buttons and dropdowns
Local Storage and Session Storage
JSON.stringify() and JSON.parse()
Timers using setTimeout() and setInterval()
Practical: Build a to-do list and interactive form validation system
12
Asynchronous JavaScript and Browser APIs
12 Topics
Month 3
Synchronous and asynchronous JavaScript
Callback functions and callback-based operations
Promises and promise chaining
async and await
Handling asynchronous errors with try and catch
Fetch API and HTTP request fundamentals
GET and POST requests using fetch()
Working with JSON responses
Loading indicators, empty states and error messages
Using public REST APIs in frontend applications
Introduction to browser APIs and URL parameters
Practical: Build a weather app or searchable API-based directory
13
JavaScript Projects and Frontend Integration
11 Topics
Month 4
Building reusable functions and organizing JavaScript files
JavaScript classes, constructors and basic object-oriented concepts
Modules and separation of concerns
Dynamic search, sorting, filtering and pagination
Form validation, password strength and confirmation messages
API integration with loading, success and failure states
Working with browser storage for persistent data
Basic authentication interface concepts and protected UI states
Responsive dropdowns, tabs, accordions and modals
Performance basics and avoiding unnecessary DOM updates
Practical: Build an interactive product catalogue or task manager
14
Figma Advanced Design System and Developer Handoff
13 Topics
Month 4
Design system fundamentals and design tokens
Color, typography, spacing and effect styles
Components, variants and reusable UI patterns
Auto Layout for flexible and responsive design
Desktop, tablet and mobile design variations
Designing forms, tables, dashboards and navigation systems
Interactive prototypes with realistic user flows
Usability review and feedback-based design improvements
Accessibility and design consistency checks
Inspecting spacing, dimensions, typography and assets
Exporting images, SVGs and other design assets
Organizing files, pages, components and design documentation
Practical: Create a design system and developer handoff package
15
Graphics and Visual Asset Preparation
10 Topics
Month 4
Image formats: JPG, PNG, SVG, WebP and GIF
Image dimensions, compression and optimization for websites
Transparent backgrounds and suitable image cropping
Creating website banners, thumbnails and promotional graphics
Basic Canva workflow for web and social media assets
Introduction to Photoshop layers, selections and cropping
Basic photo correction, background removal and image export
Using icons, illustrations and stock assets responsibly
Copyright, licensing and attribution basics
Practical: Prepare a consistent set of assets for a website project
16
Git, GitHub and Frontend Workflow
12 Topics
Month 4
Introduction to version control and Git
Installing Git and configuring username and email
Repositories, working directory, staging area and commits
git init, status, add, commit, log and diff
Branches, merging and resolving basic conflicts
Connecting local repositories to GitHub
Push, pull, clone and fetch
Writing useful commit messages and maintaining README files
Using .gitignore and protecting sensitive information
Introduction to npm and package.json
Introduction to Vite for modern frontend projects
Practical: Maintain and publish a frontend project using GitHub
17
React Fundamentals
14 Topics
Month 5
Introduction to React and component-based development
Creating a React project using Vite
Project structure and development server
JSX syntax and embedding JavaScript expressions
Functional components and component composition
Props and passing data between components
Rendering lists and using unique keys
Conditional rendering
Handling events in React
useState and managing component state
Controlled input fields and form handling
Component reuse and separation of concerns
Styling React applications using CSS and Bootstrap
Practical: Build a reusable component-based website
18
React Hooks and State Management
13 Topics
Month 5
Understanding component rendering and state updates
useState for interactive interfaces
useEffect and synchronization with external systems
Effect dependencies and cleanup functions
Fetching API data inside React components
Loading, error and empty states
Lifting state up and sharing data between components
Prop drilling and introduction to Context API
useContext for shared application data
useRef for DOM access and persistent references
Rules of Hooks and common mistakes
Creating custom Hooks for reusable logic
Practical: Build an API-driven dashboard with reusable Hooks
19
React Routing, Forms and API Integration
13 Topics
Month 5
Client-side routing and single-page application concepts
React Router setup and route configuration
Navigation links, nested routes and layout routes
Route parameters, query parameters and navigation
404 pages and fallback routes
Form state, validation and submission handling
Reusable form components and feedback messages
API integration using fetch() or Axios
GET, POST, PUT, PATCH and DELETE request concepts
Displaying API data in lists, cards and tables
Search, filtering, sorting and pagination
Environment variables and frontend configuration
Practical: Build a multi-page application using React Router and APIs
20
React Advanced Concepts and UI Libraries
13 Topics
Month 5
Reusable layouts and component architecture
Context API and state organization
Introduction to Redux Toolkit and when global state is useful
Form libraries and schema-based validation concepts
Reusable tables, cards, modals and notification components
Integrating Bootstrap with React
Introduction to component libraries such as Material UI
Responsive React layouts and mobile navigation
Basic performance optimization and avoiding unnecessary work
Lazy loading and code splitting concepts
Error boundaries and graceful error handling
Accessibility in interactive React interfaces
Practical: Build an admin dashboard or course listing interface
21
Frontend Testing, Debugging and Optimization
12 Topics
Month 6
Using browser developer tools for layout and JavaScript debugging
Debugging responsive layout problems
Testing websites across browsers and screen sizes
Form validation and interactive component testing
Basic unit testing concepts for JavaScript
Introduction to React component testing
Accessibility checks, keyboard navigation and semantic HTML
SEO fundamentals: titles, descriptions, headings and meaningful links
Image optimization and loading performance
Lighthouse and browser performance audits
Responsive layout and cross-browser bug fixing
Practical: Audit and improve an existing website
22
Website Hosting and Deployment
10 Topics
Month 6
Introduction to domains, DNS, hosting and HTTPS
Building production-ready frontend assets
Deploying static websites using GitHub Pages or Netlify
Deploying React applications using Vercel or Netlify
Connecting a custom domain and understanding DNS records
Environment variables and production configuration
Managing build errors and deployment troubleshooting
Updating deployed websites through Git
Basic website maintenance and performance monitoring
Practical: Deploy a responsive website and a React application
23
Major Project 1: UI/UX Design to Responsive Website
11 Topics
Month 6
Understanding a client brief and project requirements
Identifying target users and primary user journeys
Creating a sitemap and wireframes in Figma
Preparing high-fidelity desktop and mobile mockups
Creating a clickable prototype for review
Developing the approved design using HTML, CSS and Bootstrap
Adding JavaScript interactions and form validation
Implementing responsive layouts and accessible components
Testing and correcting layout issues
Deploying the finished website
Preparing project documentation and presenting the design decisions
24
Major Project 2: React Frontend Application
11 Topics
Month 6
Project planning and component breakdown
Creating a responsive React application using Vite
Building reusable components and page layouts
Implementing routing and navigation
Managing forms and component state
Integrating a public API or mock data service
Implementing search, filtering and sorting
Handling loading, error and empty states
Adding responsive design and accessibility improvements
Testing, debugging and optimizing the application
Deploying the application and documenting the source code
25
Portfolio, Interview and Placement Preparation
12 Topics
Month 6
Creating a professional portfolio website
Publishing Figma designs, prototypes and case studies
Maintaining GitHub repositories with useful README files
Writing project descriptions and documenting contributions
Preparing a web designer or frontend developer resume
HTML, CSS, responsive design and Bootstrap interview questions
JavaScript fundamentals, DOM, arrays and asynchronous programming interview questions
React components, props, state, Hooks and routing interview questions
Basic UI/UX principles and Figma interview questions
Explaining project architecture and design decisions
Technical assignments, mock interviews and presentation practice
Final project review and placement preparation
