Web Development Basics

Learn the fundamentals of HTML, CSS and JavaScript. Choose a topic on the left.

HTML Introduction

1️⃣ What is HTML?

HTML (HyperText Markup Language) is the standard language for creating and structuring content on the web.

It is not a programming language; it is a markup language, meaning it describes the structure of information.

HTML defines what content is, not how it looks (that’s CSS) or how it behaves (that’s JavaScript).

It is the foundation of every website, enabling browsers to display text, images, videos, links, forms, tables, and more.

HTML Syntax

<p>This is a paragraph.</p>
<a href="https://example.com">Click Me</a>

Basic HTML Page Structure

<!doctype html>
<html>
  <head><title>My Page</title></head>
  <body><h1>Hello World</h1></body>
</html>

HTML Links

Use <a href> to create hyperlinks.

HTML Images

Use <img src="path" alt="text"> to add images.

Join Mentorship

CSS Introduction

CSS (Cascading Style Sheets) styles the HTML by changing colors, spacing, layout, and fonts.

CSS Selectors

p { color: blue; }
#idname { font-size: 18px; }
.classname { margin: 20px; }

CSS Colors

h1 { color: red; }
div { background-color: lightblue; }

Box Model

Every element has margin, border, padding, and content area.

div {
  margin:10px;
  padding:20px;
  border:2px solid black;
}

Typography

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Join Mentorship

JavaScript Introduction

JavaScript adds interactivity to webpages: clicks, animations, form validation, etc.

Variables

let name = "John";
const age = 25;
var city = "New York";

Functions

function greet() {
  alert("Hello!");
}
greet();

Events

<button onclick="alert('Clicked!')">Click me</button>

DOM Manipulation

document.getElementById("demo").innerHTML = "Updated!";

Join Mentorship