Web Development

1. Introduction to Web Development

• What is web development?

• Front-end vs Back-end

• How websites work (browser, server, database)

• Tools you will use (VS Code, Chrome DevTools, Git)

2. HTML – Structure of the Web

Topics Covered

• HTML tags & page structure

• Headings, lists, links, images

• Forms & form validations

• Tables, semantic tags, iframes

• SEO-friendly HTML structure

Practical Work

• Create a complete multi-page website layout

• Build forms with inputs, radio, select, textarea

3. CSS – Styling Websites

Topics Covered

• CSS syntax, selectors, properties

• Box model, margin, padding, border

• Flexbox & Grid layout

• Colors, typography, transitions

• Responsive design & media queries

Practical Work

• Create a responsive homepage

• Build layouts using Flexbox and Grid

4. JavaScript – Interactivity & Logic

Topics Covered

• Variables, data types, operators

• Functions, loops, conditional statements

• DOM manipulation

• Events (click, change, keypress)

• Fetch API & JSON

• ES6 basics (let, const, arrow functions)

Practical Work

• Interactive form validation

• Toggle menus, sliders, popups

• Fetch API data and display it

5. Tailwind CSS – Utility-First Frontend Framework

Topics Covered

• Installing Tailwind

• Utility classes overview

• Creating modern UI components

• Layouts using Flexbox & Grid in Tailwind

• Customizing theme & colors

• Responsive design with Tailwind

Practical Work

• Build a landing page with Tailwind

• Create reusable UI components (cards, buttons, modals)

6. Laravel – Full Stack PHP Framework

Topics Covered

• Laravel installation & folder structure

• MVC architecture (Model, View, Controller)

• Routing system (web & API routes)

• Controllers & Blade templates

• Database migrations & Eloquent ORM

• Authentication (login/register)

• Middleware & security

• File upload & form handling

• API creation (JSON response)

Practical Work

• Build a CRUD application (Create, Read, Update, Delete)

• Create a blog system with admin panel

• Build an API and connect with JavaScript frontend

7. Project Work

Hands-On Projects

• Responsive portfolio website

• Tailwind-based landing page

• JavaScript interactive features

• Laravel blog or CMS

• REST API integration

8. Deployment & Version Control

Topics Covered

• Git & GitHub basics

• Pushing code to GitHub

• Deploy Laravel app on shared hosting / VPS

• Deploy static sites using Netlify / Vercel

9. Final Assessment

• Live project submission

• Presentation & code review

• Feedback & improvement suggestions

10. Certification

Students receive a completion certificate after successfully submitting the final project.