HTML Cheatsheet
Basic Structure
<!DOCTYPE html> → Defines document typeJavaScript
Cheatsheet
Variables
o let x = 5;
o const y = 10;
o var z = 15;
Data Types
o string, number, boolean, object, array, null, undefined
Operators
o + - * / % ** → Arithmetic
o == === != !== → Equality
o > < >= <= → Comparison
o && || ! → Logical
Functions
o function greet(){...}
o const greet = () => {...}
Conditionals
o if (x > 5) {...} else {...}
o switch(value){case 1: ... break;}
Loops
o for (let i=0; i<5; i++) {...}
o while (condition) {...}
o for (let item of array) {...}
o for (let key in object) {...}
Arrays
o let arr = [1,2,3];
o [Link](4);
o [Link]();
o [Link](); [Link](0);
o [Link](fn);
o [Link](fn);
o [Link](fn, initial);
Objects
o let person = {name: "John", age: 30};
o [Link]; person["age"];
DOM Manipulation
o [Link]("id");
o [Link](".class");
o [Link] = "Hello";
o [Link] = "red";
o [Link]("click", fn);
Events
o onclick, onmouseover, onkeydown, etc.
JSON
o [Link](obj);
o [Link](str);
ES6+ Features
o Template Literals → `Hello ${name}`
o Destructuring → const {a,b} = obj;
o Spread → [...arr]
o Promises → new Promise((resolve,reject)=>{})
o Async/Await → async function(){await fetch(...);}
o
o <html>...</html> → Root element
o <head>...</head> → Metadata, title, links
o <body>...</body> → Page content
Text
o <h1> to <h6> → Headings
o <p> → Paragraph
o <br> → Line break
o <strong> / <b> → Bold
o <em> / <i> → Italic
Links & Media
o <a href="url"> → Hyperlink
o <img src="[Link]" alt="desc"> → Image
o <video controls> → Video
o <audio controls> → Audio
o <iframe src="..."> → Embed content
Lists
o <ul> → Unordered list
o <ol> → Ordered list
o <li> → List item
Tables
o <table> → Table wrapper
o <tr> → Row
o <td> → Cell
o <th> → Header cell
Forms
o <form> → Form wrapper
o <input type="text"> → Text input
o <input type="password"> → Password
o <input type="checkbox"> → Checkbox
o <input type="radio"> → Radio
o <input type="submit"> → Submit button
o <textarea> → Multi-line input
o <select><option> → Dropdown
o <label> → Form label
Semantic Tags
o <header> → Header section
o <nav> → Navigation
o <main> → Main content
o <section> → Section of content
o <article> → Independent content
o <footer> → Footer
Meta
o <meta charset="UTF-8"> → Encoding
o <meta name="viewport" content="width=device-width, initial-scale=1.0"> →
Responsive
CSS Cheatsheet
Selectors
o * → Universal
o .class → Class
o #id → ID
o element → Tag
o element1, element2 → Multiple
o parent child → Descendant
o element:hover → Pseudo-class
Colors & Background
o color: red; → Text color
o background-color: blue;
o background-image: url("[Link]");
Text
o font-family: Arial, sans-serif;
o font-size: 16px;
o font-weight: bold;
o text-align: center;
o text-decoration: none;
Box Model
o margin: 10px;
o padding: 20px;
o border: 1px solid black;
o width: 100px;
o height: 50px;
Positioning
o position: static | relative | absolute | fixed | sticky;
o top, right, bottom, left
o z-index: 10;
Flexbox
o display: flex;
o justify-content: center;
o align-items: center;
o flex-direction: row | column;
o flex-wrap: wrap;
Grid
o display: grid;
o grid-template-columns: repeat(3, 1fr);
o grid-gap: 10px;
Other Useful
o overflow: hidden | scroll | auto;
o cursor: pointer;
o opacity: 0.5;
o transition: all 0.3s;
o transform: rotate(45deg);
JavaScript Cheatsheet
Variables
o let x = 5;
o const y = 10;
o var z = 15;
Data Types
o string, number, boolean, object, array, null, undefined
Operators
o + - * / % ** → Arithmetic
o == === != !== → Equality
o > < >= <= → Comparison
o && || ! → Logical
Functions
o function greet(){...}
o const greet = () => {...}
Conditionals
o if (x > 5) {...} else {...}
o switch(value){case 1: ... break;}
Loops
o for (let i=0; i<5; i++) {...}
o while (condition) {...}
o for (let item of array) {...}
o for (let key in object) {...}
Arrays
o let arr = [1,2,3];
o [Link](4);
o [Link]();
o [Link](); [Link](0);
o [Link](fn);
o [Link](fn);
o [Link](fn, initial);
Objects
o let person = {name: "John", age: 30};
o [Link]; person["age"];
DOM Manipulation
o [Link]("id");
o [Link](".class");
o [Link] = "Hello";
o [Link] = "red";
o [Link]("click", fn);
Events
o onclick, onmouseover, onkeydown, etc.
JSON
o [Link](obj);
o [Link](str);
ES6+ Features
o Template Literals → `Hello ${name}`
o Destructuring → const {a,b} = obj;
o Spread → [...arr]
o Promises → new Promise((resolve,reject)=>{})
o Async/Await → async function(){await fetch(...);}