CSS Selectors
/* Tag */ p { }
/* ID */ #myId { }
/* Class */ .myClass { }
/* Attribute */ [type="text"] { }
/* Descendant */ div p { }
/* Child */ div > p { }
/* Multiple */ h1, h2, h3 { }
/* Pseudo */ a:hover { }
/* Pseudo-element */ p::first-line { }
HTML Form Elements
<form action="url" method="POST">
<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="pwd">
<textarea name="msg"></textarea>
<select name="cat">
<option>Option 1</option>
</select>
<button type="submit">Submit</button>
</form>
CSS Box Model
margin (outer space)
border
padding (inner space)
content (width, height)
/* Shorthand */
margin: 10px; /* all 4 sides */
margin: 10px 20px; /* top-bottom, left-right */
margin: 10px 20px 15px 25px; /* top, right, bottom, left */
Flexbox Quick Reference
.flex-container {
display: flex;
flex-direction: row; /* or column */
justify-content: center; /* horizontal */
align-items: center; /* vertical */
flex-wrap: wrap;
gap: 10px;
}
JavaScript Variables
const name = "John"; /* immutable */
let age = 25; /* block scope */
var x = 100; /* function scope */
/* Template Literal */
console.log(`Hello ${name}`);
/* Array Methods */
arr.push(item); /* add to end */
arr.pop(); /* remove from end */
arr.map(x => x*2); /* transform */
arr.filter(x => x>5); /* filter */
DOM Selection & Manipulation
/* Select Elements */
const el = document.querySelector('#id');
const els = document.querySelectorAll('.class');
/* Modify Content */
el.innerHTML = '<strong>text</strong>';
el.innerText = 'plain text';
el.textContent = 'text only';
/* Modify Attributes */
el.setAttribute('id', 'newId');
el.getAttribute('id');
el.removeAttribute('id');
/* Modify Classes */
el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
JavaScript Events
/* Listen for Events */
element.addEventListener('click', (e) => {
console.log(e.target); /* element clicked */
console.log(e.type); /* event type */
console.log(e.key); /* for keyboard */
e.preventDefault(); /* stop default */
});
/* Common Events */
click, dblclick, mouseover, mouseout,
keydown, keyup, input, submit,
load, scroll, resize, change, focus
Bootstrap Grid
<div class="container">
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
/* Breakpoints */
col-sm-* /* ≥576px */
col-md-* /* ≥768px */
col-lg-* /* ≥992px */
col-xl-* /* ≥1200px */
/* Spacing */
m-2, p-3, mt-4, mb-1, ml-auto
Promises & Async/Await
/* Promise Based */
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err))
.finally(() => console.log('done'));
/* Async/Await */
async function getData() {
try {
const res = await fetch('/api/data');
const data = await res.json();
console.log(data);
} catch(error) {
console.error(error);
}
}
CSS Animations
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
.box {
animation-name: slide;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Form Validation
/* HTML5 Validation */
<input required type="email"
minlength="5" maxlength="20">
/* JavaScript Validation */
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
/* Form Submit */
form.addEventListener('submit', (e) => {
e.preventDefault();
/* validate then submit */
});
Web Storage
/* localStorage - Persistent */
localStorage.setItem('key', 'value');
const val = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();
/* Save Objects */
const obj = {name: 'John', age: 25};
localStorage.setItem('user',
JSON.stringify(obj));
const user = JSON.parse(
localStorage.getItem('user'));
Responsive Media Queries
/* Mobile First */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 992px) {
.container { width: 970px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}
SVG Basics
<svg width="200" height="200">
<rect x="10" y="10" width="100"
height="100" fill="blue">
<circle cx="100" cy="100" r="50"
fill="red">
<line x1="0" y1="0" x2="100" y2="100"
stroke="black">
<polygon points="100,10 40,198 190,78"
fill="green">
</svg>
Button Click Handler
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
// Do something
console.log('Clicked!');
});
Get Form Values
const form = document.getElementById('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = form.name.value;
const email = form.email.value;
console.log(name, email);
});
Change CSS Dynamically
const el = document.querySelector('.box');
// Method 1: Inline styles
el.style.backgroundColor = 'red';
el.style.fontSize = '20px';
// Method 2: Classes (Preferred)
el.classList.add('active');
el.classList.toggle('highlight');
Create & Add Element
const newDiv = document.createElement('div');
newDiv.textContent = 'New Element';
newDiv.className = 'box';
document.body.appendChild(newDiv);
Fetch Data from API
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Array Filter & Map
const numbers = [1, 2, 3, 4, 5];
// Filter
const even = numbers.filter(n => n % 2 === 0);
// [2, 4]
// Map
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]