Learn the basics.
This section contains beginner-friendly material on programming and web development — written to actually explain things, not just list them.
HyperText Markup Language
HTML is the skeleton of every webpage. It's not a programming language — it doesn't do logic. It just describes structure: what something is. A heading. A paragraph. A link. A form.
Document structure
Every HTML file starts with a document type declaration, then wraps everything inside an <html> tag. The <head> holds metadata — title, charset, linked stylesheets. The <body> holds everything the user actually sees.
Elements and attributes
HTML is made of elements: opening tag, content, closing tag. Attributes live inside the opening tag and add extra information — href on a link, src on an image, class for CSS targeting.
Key elements to know
Headings h1–h6 for hierarchy. Paragraphs with p. Links with a href. Images with img src. Lists with ul/ol/li. Forms with form, input, button.
Semantic HTML
Instead of using div for everything, use elements that describe what they contain: header, nav, main, article, section, footer. This helps browsers, screen readers, and search engines understand your page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Page</title>
</head>
<body>
<header>
<h1>Hello, world</h1>
<nav>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>My first article</h2>
<p>
This is a paragraph. HTML gives
this text its meaning.
</p>
<img src="photo.jpg" alt="A photo" />
</article>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
A browser renders HTML into the visual page you see
HTML Crash Course
Cascading Style Sheets
CSS is what makes a webpage look like something. It controls colors, fonts, spacing, layout, and animation. Without CSS, every webpage looks like a plain text document.
Selectors
CSS targets HTML elements with selectors. p targets all paragraphs. .class-name targets elements by class. #id targets a specific element. Combine them for precision.
The box model
Every element is a box. Inside to outside: content → padding → border → margin. Padding adds space inside the element. Margin adds space outside. Understanding this is foundational to layout.
Flexbox and Grid
Flexbox arranges items in a row or column and handles alignment. Grid divides space into rows and columns for two-dimensional layout. Most modern layouts use a combination of both.
Responsive design
Media queries let you write different styles for different screen sizes: @media (max-width: 768px). Design mobile-first — start with the small screen and add complexity as screen size grows.
/* Target all paragraphs */
p {
color: #333;
font-size: 16px;
line-height: 1.6;
}
/* Target by class */
.card {
padding: 24px;
border: 1px solid #ddd;
border-radius: 8px;
}
/* Flexbox layout */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Grid layout */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
/* Responsive */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
CSS transforms bare HTML into designed interfaces
CSS Crash Course
The language of the web
JavaScript makes pages interactive. It runs in the browser, responds to clicks, fetches data, changes the DOM, and handles logic. It's the only language that runs natively in every browser — and it also runs on servers with Node.js.
Variables and data types
Use const for values that don't change, let for values that do. JavaScript has strings, numbers, booleans, arrays, objects, null, and undefined.
Functions
Functions are reusable blocks of logic. You define them once and call them anywhere. Arrow functions (() => {}) are the modern shorthand used in most current code.
DOM and events
The DOM is the browser's representation of your HTML. JavaScript can read it, change it, add to it, or remove from it. Events let you react to user actions: click, submit, keydown, scroll.
Async basics
When you fetch data from an API, it takes time. async/await lets you write that waiting code in a readable way, without callback hell. Most real JavaScript involves async operations.
// Variables
const name = "Sibah"
let count = 0
// Arrays and objects
const skills = ["JS", "Lua", "Java"]
const user = { name: "Sibah", age: 17 }
// Function
const greet = (person) => {
return `Hello, ${person.name}`
}
// Conditions
if (count > 0) {
console.log("Has items")
} else {
console.log("Empty")
}
// Loop
skills.forEach(skill => {
console.log(skill)
})
// DOM
const btn = document.querySelector("#btn")
btn.addEventListener("click", () => {
count++
btn.textContent = `Clicked ${count}x`
})
// Async
const fetchData = async () => {
const res = await fetch("/api/data")
const data = await res.json()
console.log(data)
}
JavaScript runs in every browser — no install needed
JavaScript Crash Course
Pick a language.
Start from basic
Choose a language from the platform and work through the fundamentals step by step.