🎯 DELIVERY MODEL: 2–3 hours per session | 70% practical
🔹 WEEK 1: INTRO TO WEB DEVELOPMENT (FOUNDATION)
📘 LECTURE NOTES (DETAILED)
1. What is Web Development?
Web development is the process of building websites and web applications that run on the internet using browsers.
2. Types of Web Development
- Frontend → what users see
- Backend → server logic & database
- Fullstack → both
3. Real-Life Examples
- School portals
- Online banking
- E-commerce sites
4. Tools Setup
- Visual Studio Code
- Browser (Chrome)
🎤 FACILITATOR SCRIPT (EXPANDED)
“Look around you—everything is becoming digital.
If you can build websites, you can build income.
This course is not theory. You will build real projects.
By the end, you should be able to say:
👉 ‘I can create and deploy a website myself.’”
🧪 CLASS FLOW
- Install VS Code
-
Create folder:
webclass -
Create file:
index.html
💻 FIRST CODE
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
</body>
</html>
🏠 ASSIGNMENT
👉 Create “About Me” page with:
- Name
- Picture
- Short bio
🔹 WEEK 2: HTML (STRUCTURE)
📘 LECTURE NOTES
HTML Elements
-
Headings:
<h1> - <h6> -
Paragraph:
<p> -
Links:
<a> -
Images:
<img> -
Lists:
<ul>,<ol>
🎤 FACILITATOR SCRIPT
“HTML is the backbone of the web.
If HTML is weak, everything is weak.”
💻 PRACTICAL CODE
<h1>My School</h1>
<p>Welcome to our school website</p>
<a href="https://google.com">Visit Google</a>
<img src="image.jpg" width="200">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
🧪 CLASS PROJECT
👉 Build:
- Homepage
- About page
- Contact page
🏠 ASSIGNMENT
👉 Create a 3-page school website
🔹 WEEK 3: CSS (DESIGN)
📘 LECTURE NOTES
CSS Basics
- Colors
- Fonts
- Margins & padding
💻 CODE
body {
background-color: #f4f4f4;
font-family: Arial;
}
h1 {
color: blue;
}
🎤 FACILITATOR SCRIPT
“Without CSS, your site looks like a government form.
CSS brings beauty and professionalism.”
🧪 CLASS PRACTICAL
- Style homepage
- Add colors
- Center content
🏠 ASSIGNMENT
👉 Design a modern landing page
🔹 WEEK 4: JAVASCRIPT (INTERACTION)
📘 LECTURE NOTES
Concepts:
- Variables
- Functions
- Events
💻 CODE
function greet() {
alert("Welcome to our site!");
}
<button onclick="greet()">Click Me</button>
🎤 FACILITATOR SCRIPT
“JavaScript makes your site smart.
Without it, your site cannot respond.”
🧪 CLASS PRACTICAL
- Button alert
- Form validation
🏠 ASSIGNMENT
👉 Build calculator OR interactive form
🔹 WEEK 5: BUILDING A WEB APP
📘 LECTURE NOTES
What is a Web App?
A system where users interact and data is processed.
💻 CODE (REGISTRATION FORM)
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<button type="submit">Register</button>
</form>
🎤 FACILITATOR SCRIPT
“This is where you move from learning to building solutions.”
🧪 CLASS PRACTICAL
👉 Build event registration form
🏠 ASSIGNMENT
👉 Add:
- Validation
- Success message
🔹 WEEK 6: BACKEND (INTRO)
📘 LECTURE NOTES
Backend Handles:
- Data storage
- Processing
Tools:
- PHP
- OR Node.js
🎤 FACILITATOR SCRIPT
“Frontend collects data, backend keeps it safe.”
🧪 CLASS PRACTICAL
- Connect form to backend
🏠 ASSIGNMENT
👉 Submit form to backend
🔹 WEEK 7: DEPLOYMENT
📘 LECTURE NOTES
Hosting:
- GitHub
- Netlify
- Go54
🎤 FACILITATOR SCRIPT
“If your project is not online, it does not exist.”
🧪 CLASS PRACTICAL
👉 Deploy site live
🏠 ASSIGNMENT
👉 Share live link
🔹 WEEK 8: FINAL PROJECT
📘 PROJECT OPTIONS
- School portal
- Event app
- Online store
🎤 FACILITATOR SCRIPT
“This is your transition from student to developer.”
🧪 FINAL
Students present projects
🔥 BONUS (FOR YOUR BRAND)
🎯 FIRE CONFERENCE APP
- Registration
- Speaker page
- Countdown
🎓 FINAL CHARGE (USE THIS)
“Don’t just learn coding—use it to create value.
Skills open doors. Execution builds empires.”
No comments:
Post a Comment