Mastering Web Development: HTML, CSS, and JavaScript

Posted on Dec 22, 2025 in Computers

Example: Simple HTTP Request (Browser to Server)

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/122.0
Accept: text/html

This is the real request your browser sends to the server.

Unit 2: HTML Elements and Structure

1. Basic HTML Structure

<title>My First Page</title>
<h1>Welcome</h1>
<p>This is a paragraph.</p>

2. Hyperlink

Visit Website

3. List

• HTML
• CSS
• JavaScript

4. Table

5. Image

6. Div and Span

This is inline text.

Unit 3: HTML Forms and Multimedia

1. Basic HTML Form

Name:

Password:

Submit

2. Audio

3. Video

4. Canvas

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 60);

Unit 4: CSS Basics and Layouts

1. Inline CSS

Hello

2. Internal CSS

h1 { color: green; }

3. External CSS

style.css

body {
    background-color: #f5f5f5;
}

4. Box Model

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

5. Display / Float

.left {
    float: left;
    width: 40%;
}
.right {
    float: right;
    width: 40%;
}

6. Button Styling

button {
    padding: 10px 20px;
    background: blue;
    color: white;
    border: none;
    cursor: pointer;
}

Unit 5: JavaScript Basics

1. Variables and Data Types

let name = "Ankit";
let age = 20;
let isStudent = true;

2. Operators

let a = 10;
let b = 5;
let c = a + b;
console.log(c);

3. If–Else

let marks = 40;
if (marks >= 35) {
    console.log("Pass");
} else {
    console.log("Fail");
}

4. Switch

let day = 3;
switch(day){
    case 1: console.log("Mon"); break;
    case 2: console.log("Tue"); break;
    case 3: console.log("Wed"); break;
}

5. Loops

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Unit 6: Advanced JavaScript

1. JavaScript Object

let student = {
    name: "Ankit",
    age: 20,
    course: "Web Designing"
};
console.log(student.name);

2. Event Handling

Click

function show(){
    alert("Button clicked!");
}

3. Simple Form Validation

Submit

function check(){
    let x = document.getElementById("name").value;
    if(x === ""){
        alert("Name required");
        return false;
    }
    return true;
}

4. Array Example

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]);