HTML
1. Standard Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. Basic HTML elements
Headings (<h1> to <h6>) Button (<button>) Horizontal Rule (<hr>)
<h1>Heading</h1> <button>Click Me</button> <hr>
Line Break (<br>) Unordered List (<ul>) Ordered List (<ol>)
Hello<br>World <ul> <ol>
<li>Item 1</li> <li>First</li>
<li>Item 2</li> <li>Second</li>
</ul> </ol>
Paragraph (<p>) A tag(<a>)
<p>This is a paragraph.</p> <a href="[Link]">Home</a>
3. Semantic tags/ Container tags
Div tag<div> Header tag<header> Navbar<nav>
<div> <header> <nav>
<p>This text is inside a div.</p> <h1>My Website</h1> <a href="[Link]">Home</a>
</div> </header> <a href="[Link]">About</a>
</nav>
4. Metadata & SEO
Metadata is data (information) about data. For example:
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5. Best practices
Adding Comments: <!—Comment-->
CSS
1. Syntax
tag name / .classname / #id
property: property-value;
p{
color: blue;
font-size: 20px;
}
3. CSS properties
Text color Text align Images
color: blue; text-align: center; object-fit: cover;
Width & Height Text
width: 300px; font-size: 18px;
height: 200px; font-weight: bold;
font-family: Arial, sans-serif;
Padding Margin 1 value = All sides
padding: 15px; margin: 20px; 2 values = (Top + Bottom)
(Left + Right)
4 Values = Top Right Bottom
Left
Background image Background size
background-image: url("[Link]"); Background-size: cover;
Grid Flexbox Display
display: grid; display: flex; Layout system
grid-template-columns: 1fr 1fr 1fr; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
4. Box model
5. CSS is linked to HTML
<head>
<link rel="stylesheet" href="[Link]">
</head>
Javascript
1. Data types
A string is used to store let name = "John"; An object stores let person = {
text. Strings are written let city = 'Johannesburg'; multiple values in key- name: "John",
inside quotes ("" or ''). value pairs. age: 30
};
Used to store numbers. let age = 25; An array stores multiple let colors = ["red", "blue",
Integers & Decimals let price = 19.99; values in a list. "green"];
A Boolean represents let isStudent = true; A symbol is a unique let id = Symbol("userID");
true or false. let isLoggedIn = false; identifier.
Undefined: A variable let x; BigInt: Used for very let bigNumber =
that is declared but has large numbers that 12345678901234567890n;
no value. JavaScript cannot
normally handle.
Null: Represents an let data = null;
intentional empty value.
2. Key Concept
A variable is used to store data
or values that can be used later let const var
in a program.
Used for variables that Used for variables that An older way to
can change. cannot change. declare variables.
let age = 25; const pi = 3.14; var name = "John";
age = 30;
A loop is used to repeat code Used when you know Repeats while a Runs the code at least
multiple times. how many times to condition is true. once, then checks the
repeat. condition.
let i = 0;
for (let i = 0; i < 5; i++) let i = 0;
{ while (i < 5) {
[Link](i); [Link](i); do {
} i++; [Link](i);
} i++;
} while (i < 5);
A class is a blueprint used to class Person { constructor creates
create objects with properties constructor(name, age) { the object
and methods. [Link] = name;
[Link] = age; this refers to the
Classes help organize code. } current object
greet() {
[Link]("Hello my name is " + [Link]); greet() is a method
} (function inside a
} class)
Creating a new object using the class created.
let person1 = new Person("John", 25);
[Link]();
A function is a block of code Function Example Functions can take A function can return a
that performs a specific task. inputs (parameters). result.
function greet() {
Functions help reuse code [Link]("Hello function greet(name) { function add(a, b) {
instead of writing the same World"); [Link]("Hello " + return a + b;
code many times. } name); }
}
To run the function, let result = add(5, 3);
you must call it: Call the function: [Link](result);
greet(); greet("John");
The DOM is a programming HTML
interface that allows <p id="text">Hello</p>
JavaScript to access and
modify HTML elements on a Access an Element
webpage. [Link]("text");
Changing Text with DOM
[Link]("text").innerHTML = "Hello World";
Changing Style of DOM
[Link]("text").[Link] = "blue";
An event listener waits for a HTML
user action (event) and then <p id="message">Welcome</p>
runs a function. <button id="colorBtn">Change Color</button>
Examples of events: Changing color
click
let btn = [Link]("colorBtn");
mouseover [Link]("click", function() {
keydown [Link]("message").[Link] = "red";
submit });
The method used is: Mouse event
[Link]("event", let text = [Link]("message");
function); [Link]("mouseover", function() {
[Link] = "30px";
});