Day 1 (1.
5 Hours) - Introduction to HTML
1. Introduction to Web Development
What is HTML?
Basic Structure of an HTML document
2. Essential HTML Tags
Headings (<h1> to <h6>), Paragraphs (<p>), and Links (<a>)
Images (<img>), Lists (<ul>, <ol>, <li>)
3. Attributes in HTML
src, alt, href, target, etc.
4. Forms in HTML
Input types, form elements (<input>, <textarea>, <button>, <form>, etc.)
5. Hands-on Practice:
Create a simple HTML page with headings, images, links, and a form.
Day 2 (1.5 Hours) - Advanced HTML and Introduction to CSS
1. HTML Tables and Multimedia
Tables (<table>, <tr>, <td>, <th>)
Embedding multimedia (<audio>, <video>)
2. Introduction to CSS
What is CSS?
Inline, Internal, and External CSS
Basic CSS Syntax and Selectors
3. Hands-on Practice:
Style the HTML page created on Day 1 with inline and internal CSS.
Day 3 (1.5 Hours) - Basic CSS
1. Selectors, Properties, and Values
Element, Class, ID selectors
Colors, Fonts, and Text Styling
Background and Borders
2. The Box Model
Margin, Padding, Border, Content
3. Hands-on Practice:
Style an HTML form using CSS (focus on colors, spacing, and box model).
Day 4 (1.5 Hours) - Layout and Positioning in CSS
1. CSS Layout Techniques
Display: block, inline, and inline-block
Positioning (static, relative, absolute, fixed)
Float and Clear
2. Flexbox (Introduction)
Basics of Flexbox
Aligning items, Flexbox properties
3. Hands-on Practice:
Create a responsive layout using Flexbox.
Day 5 (1.5 Hours) - Introduction to JavaScript
1. What is JavaScript?
Embedding JS in HTML
Console and Developer Tools
2. JavaScript Basics
Variables (var, let, const)
Data Types, Operators
3. Functions in JavaScript
Defining and calling functions
Parameters and return values
4. Hands-on Practice:
Write basic scripts to manipulate HTML elements.
Day 6 (1.5 Hours) - JavaScript Control Structures
1. Conditionals
if, else if, else, and switch
2. Loops
for, while, and do...while
3. Events in JavaScript
Adding event listeners, Handling button clicks
4. Hands-on Practice:
Create a simple form validation with JavaScript (using conditionals and loops).
Day 7 (1.5 Hours) - DOM Manipulation with JavaScript
1. Understanding the DOM (Document Object Model)
Selecting elements with getElementById, querySelector
Manipulating elements (innerHTML, style changes)
2. Event Handling
Handling user inputs and changing DOM elements
3. Hands-on Practice:
Build a simple interactive web page (e.g., a to-do list).
Day 8 (1.5 Hours) - Advanced JavaScript Concepts
1. Arrays and Objects
Defining and using Arrays and Objects
2. Array Methods
Common methods (push(), pop(), forEach())
3. Object Methods
Adding methods to objects
4. Hands-on Practice:
Manipulate arrays and objects in a web page (e.g., adding tasks to a to-do list).
Day 9 (1.5 Hours) - Final Project
1. Integrating HTML, CSS, and JavaScript
Plan and structure a simple project
2. Responsive Design
Use media queries to make the design responsive
3. Hands-on Practice:
Build a small website with HTML, CSS, and JavaScript (e.g., a portfolio or landing
page).
Day 10 (1.5 Hours) - Final Touches and Deployment
1. Finalizing the Project
Add finishing touches (styling, functionality)
2. Introduction to Hosting and Deployment
How to deploy a website using GitHub Pages or any hosting service
3. Hands-on Practice:
Deploy the final project.
