Web Development — Comprehensive 16-Class Program
Course Overview
| Course Title | Web Development — Theory & Practical |
| Total Classes | 16 Classes |
| Mode | In-Person / Online |
| Duration per Class | 2 Hours (1 Hr Theory + 1 Hr Practical) |
| Prerequisites | Basic Computer Skills |
| Target Audience | Beginners to Intermediate Learners |
Detailed Class-by-Class Curriculum
| 1 | Introduction to Web Development | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Overview of the Web: How the Internet Works | Install VS Code and essential extensions (Live Server, Prettier) | |
| 2 | Client-Server Architecture | Create first HTML file and open in browser | |
| 3 | Introduction to Web Browsers and Web Servers | Explore browser Developer Tools (Inspect Element, Console) | |
| 4 | Overview of HTML, CSS, and JavaScript | ||
| 5 | Setting Up the Development Environment (VS Code, Extensions) | ||
| 2 | HTML Fundamentals | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | HTML Document Structure (DOCTYPE, html, head, body) | Build a personal bio page using headings, paragraphs, and lists | |
| 2 | Headings, Paragraphs, and Text Formatting Tags | Add images and hyperlinks to the page | |
| 3 | Lists: Ordered, Unordered, and Description Lists | Validate HTML using W3C Validator | |
| 4 | Links (<a> tag) and Navigation | ||
| 5 | Images (<img> tag) and File Paths | ||
| 3 | HTML Forms & Semantic HTML | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | HTML Forms: Input Types, Labels, and Buttons | Create a Contact Us form with validation attributes | |
| 2 | Form Attributes: action, method, placeholder, required | Rebuild a webpage layout using semantic HTML5 tags | |
| 3 | Semantic HTML5 Elements: header, nav, main, article, section, footer | Test accessibility using browser tools | |
| 4 | Accessibility Basics: alt text, ARIA roles | ||
| 5 | HTML Entities and Special Characters | ||
| 4 | CSS Fundamentals | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Introduction to CSS: Inline, Internal, and External Stylesheets | Style the personal bio page with fonts, colors, and spacing | |
| 2 | CSS Selectors: Element, Class, ID, Universal, and Attribute | Experiment with the Box Model using border and padding | |
| 3 | The CSS Box Model: Margin, Border, Padding, Content | Create a styled button and card component | |
| 4 | Colors, Fonts, and Text Styling | ||
| 5 | CSS Specificity and Inheritance | ||
| 5 | CSS Layouts: Flexbox | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Introduction to CSS Flexbox | Build a responsive navigation bar using Flexbox | |
| 2 | Flex Container Properties: display, flex-direction, justify-content, align-items, flex-wrap | Create a card grid layout with Flexbox | |
| 3 | Flex Item Properties: flex-grow, flex-shrink, flex-basis, align-self | Solve common layout challenges using Flexbox Froggy | |
| 4 | Building Navigation Bars with Flexbox | ||
| 5 | Common Flexbox Layout Patterns | ||
| 6 | CSS Layouts: Grid & Responsive Design | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Introduction to CSS Grid | Build a responsive 3-column magazine-style layout using Grid | |
| 2 | Grid Container and Item Properties | Apply media queries to make an existing page mobile-friendly | |
| 3 | CSS Media Queries and Breakpoints | Test responsiveness using Chrome DevTools device emulator | |
| 4 | Mobile-First Design Approach | ||
| 5 | Responsive Images and Typography | ||
| 7 | JavaScript Fundamentals – Part 1 | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Introduction to JavaScript and Its Role in Web Development | Write JS to check if a number is odd/even, positive/negative | |
| 2 | Variables: var, let, const | Build a simple grade calculator using conditions | |
| 3 | Data Types: String, Number, Boolean, Null, Undefined | Log output to the browser console | |
| 4 | Operators: Arithmetic, Comparison, Logical | ||
| 5 | Conditional Statements: if, else if, else, switch | ||
| 8 | JavaScript Fundamentals – Part 2 | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Loops: for, while, do-while, for…of, for…in | Create a function that filters and sorts an array of products | |
| 2 | Functions: Declaration, Expression, Arrow Functions | Build an object representing a student with methods | |
| 3 | Arrays: Creation, Methods (push, pop, map, filter, reduce) | Use array methods to manipulate a list of items | |
| 4 | Objects: Properties, Methods, and dot notation | ||
| 5 | Introduction to ES6+ Features | ||
| 9 | DOM Manipulation | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | What is the DOM (Document Object Model)? | Build a dynamic to-do list (add and remove items via JS) | |
| 2 | Selecting Elements: getElementById, querySelector, querySelectorAll | Create a real-time character counter for a textarea | |
| 3 | Modifying Content: innerHTML, textContent, style | Dynamically change styles on button click | |
| 4 | Creating and Removing Elements Dynamically | ||
| 5 | Traversing the DOM: parentNode, children, siblings | ||
| 10 | Events & Event Handling | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Introduction to JavaScript Events | Build an interactive quiz with click events and score tracking | |
| 2 | Event Listeners: addEventListener() | Create a form with live validation using input events | |
| 3 | Common Events: click, submit, keyup, mouseover, input | Implement a dropdown menu with mouseover events | |
| 4 | Event Object: target, type, preventDefault() | ||
| 5 | Event Bubbling and Delegation | ||
| 11 | Asynchronous JavaScript & APIs | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Synchronous vs Asynchronous JavaScript | Fetch and display data from a public API (e.g., OpenWeather or JSONPlaceholder) | |
| 2 | Callbacks, Promises, and Async/Await | Build a weather app using Fetch and Async/Await | |
| 3 | Introduction to APIs and JSON | Display loading spinners during API calls | |
| 4 | Fetch API: Making GET and POST Requests | ||
| 5 | Handling API Errors Gracefully | ||
| 12 | Introduction to Bootstrap Framework | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | What is Bootstrap and Why Use It? | Rebuild a previous project using Bootstrap grid and components | |
| 2 | Bootstrap Grid System (12-column layout) | Create a responsive landing page with a Bootstrap navbar and hero section | |
| 3 | Bootstrap Components: Navbar, Cards, Modals, Buttons | Add a modal popup and styled form using Bootstrap | |
| 4 | Bootstrap Utility Classes | ||
| 5 | Customizing Bootstrap with SCSS Variables | ||
| 13 | Introduction to React.js | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | What is React? Component-Based Architecture | Set up a React project and create functional components | |
| 2 | Setting Up React with Create React App / Vite | Build a counter app using useState | |
| 3 | JSX Syntax and How It Works | Pass data between components using props | |
| 4 | Functional Components and Props | ||
| 5 | State Management with useState Hook | ||
| 14 | React – Hooks, Routing & API Integration | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | useEffect Hook: Side Effects and Lifecycle | Build a multi-page React app with React Router | |
| 2 | React Router: Navigating Between Pages | Fetch and display data from an API using useEffect | |
| 3 | Fetching Data from APIs in React | Create a searchable list component with filter functionality | |
| 4 | Conditional Rendering and Lists | ||
| 5 | Introduction to Context API for State Management | ||
| 15 | Introduction to Node.js & Express | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | What is Node.js? Server-Side JavaScript | Set up a basic Express server | |
| 2 | Node.js Modules: require, module.exports | Create a REST API with CRUD routes | |
| 3 | Introduction to Express.js Framework | Test API endpoints using Postman or Thunder Client | |
| 4 | Creating REST API Endpoints: GET, POST, PUT, DELETE | ||
| 5 | Middleware in Express | ||
| 16 | Final Project & Deployment | ||
| # | Topic | Theory Content | Practical Activity |
| 1 | Project Planning: Wireframing and Structuring a Full-Stack App | Build and deploy a full-stack web application (portfolio/todo/blog app) | |
| 2 | Connecting Frontend (React) with Backend (Node/Express) | Deploy frontend on Vercel or Netlify | |
| 3 | Introduction to MongoDB / Firebase for Data Storage | Deploy backend on Render and connect to database | |
| 4 | Deployment: Hosting with Vercel, Netlify, and Render | ||
| 5 | Web Performance, SEO Basics, and Best Practices | ||