Lesson 1.4: Basics of HTML, CSS, JS & Their Role

🔹 Introduction

A website is built with three core technologies: HTML, CSS, and JavaScript.
Each plays a unique role:

• HTML provides the structure.

• CSS adds styling and design.

• JavaScript makes the page interactive.

🔹 1. HTML (HyperText Markup Language) – Structure

• Acts as the skeleton of a webpage.

• Uses tags (like <h1>, <p>, <img>) to define content.

• Example:

   

  <h1>Welcome to My Website</h1>
<p>This is a simple paragraph.</p>
<img src="logo.png" alt="Website Logo">


• Without HTML, a browser would have no idea what content to display.

🔹 2. CSS (Cascading Style Sheets) – Design

• Adds style, layout, and colors to HTML elements.

• Controls fonts, margins, padding, backgrounds, animations, and responsiveness.

• Example:

   

  h1 {
color: blue;
text-align: center;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
}


• Without CSS, websites look plain and boring.

🔹 3. JavaScript – Interactivity

• Adds logic and behavior to a webpage.

• Can respond to user actions like clicks, form submissions, or key presses.

• Example:

   

  function greetUser() {
alert("Welcome to My Website!");
}

   

  <button onclick="greetUser()">Click Me</button>


• Without JavaScript, websites are static and non-interactive.

🔹 How They Work Together

Think of a human body as an example:

• HTML = Skeleton (structure)

• CSS = Skin & Clothes (style)

• JavaScript = Muscles & Brain (movement and logic)

Together, they form a complete, functional website.

📝 Quick Recap

• HTML builds the structure of webpages.

• CSS makes them look attractive.

• JavaScript makes them interactive.

• All three combined are the foundation of Frontend Web Development.