WEB TECHNOLOGIES

HTML Essentials

The building blocks of every web page — structure, elements & attributes.

1 BASIC STRUCTURE

<!-- Every page starts here -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    ...content...
  </body>
</html>

2 HELLO WORLD

<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
  <a href="#">Learn more</a>
</body>

3 COMMON ELEMENTS

Element	Description	Example
`<h1>–<h6>`	Headings, largest to smallest	`<h1>Title</h1>`
`<p>`	Paragraph of text	`<p>Hello</p>`
`<a>`	Hyperlink to another page	`<a href="#">Link</a>`
`<img>`	Embeds an image	`<img src="x.jpg" alt="">`
`<ul>/<li>`	Unordered (bullet) list	`<ul><li>Item</li></ul>`
`<div>`	Generic block container	`<div>...</div>`
`<form>`	Collects user input	`<form>...</form>`
`<button>`	Clickable button	`<button>Go</button>`

4 DOCUMENT

htmlheadbodyheaderfooternav

5 TEXT

h1–h6pspanstrongembr

6 MEDIA

aimgvideoaudioiframe

7 LISTS

ulollidldtdd

8 TABLES

tabletrthtdthead

9 FORMS

forminputlabelselectbutton

10 COMMON ATTRIBUTES

idclasssrchrefalttypevalueplaceholdernametargetdisabledrequired

WEB TECHNOLOGIES

CSS Selectors

Target the right HTML elements and style them with confidence.

1 BASIC SYNTAX

selector {
  property: value;
}

/* example */
h1 {
  color: blue;
  font-size: 32px;
}

2 SPECIFICITY

Type	Weight
Inline style	`1000`
ID selector	`100`
Class / attribute / pseudo-class	`10`
Element / pseudo-element	`1`

3 UNIVERSAL

* { color: blue; }

Selects every element.

4 ELEMENT

p { color: green; }

All <p> elements.

5 CLASS

.title { color: purple; }

class="title"

6 ID

#header { background: lightblue; }

id="header"

7 GROUP

h1, h2, h3 { color: navy; }

Same style, many selectors.

8 DESCENDANT

div p { color: orange; }

<p> anywhere inside <div>.

9 CHILD

ul > li { color: brown; }

Direct children only.

10 ADJACENT

h2 + p { color: teal; }

<p> right after <h2>.

11 SIBLING

h2 ~ p { color: crimson; }

All <p> after <h2>.

12 PSEUDO

:hover:focus:first-child:last-child:nth-child(n):not()::before::after

13 ATTRIBUTES

[type="text"] { }
[required] { }
[href^="https"] { }
[class*="btn"] { }

WEB TECHNOLOGIES

CSS Cheat Sheet

Quick reference for everyday styling — from colors to grid.

1 COLORS

color: red;
color: #ff0000;
color: rgb(255,0,0);
color: rgba(255,0,0,.5);

2 TEXT

font-sizefont-weightfont-familyline-heighttext-aligntext-decorationtext-transform

3 BOX MODEL

margin

border

padding

content

4 DISPLAY

blockinlineinline-blockflexgridnone

5 POSITION

staticrelativeabsolutefixedsticky

Use with top / right / bottom / left.

6 FLEXBOX

display: flex;
justify-content: center;
align-items: center;
gap: 12px;

7 GRID

display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;

8 BACKGROUND

background-colorbackground-imagebackground-sizebackground-position

9 GRADIENTS

background: linear-gradient(90deg, #13bae4, #173860);
background: radial-gradient(circle, #fff, #046690);

10 BORDER & SHADOW

border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);

11 TRANSFORM

translate()rotate()scale()skew()

12 TRANSITION

transition: all 0.3s ease;

13 UNITS

px%emremvwvh

14 RESPONSIVE

@media (max-width: 768px) {
  .box { width: 100%; }
}

15 VARIABLES

:root { --accent: #13bae4; }
.btn { color: var(--accent); }

WEB TECHNOLOGIES

Flexbox Cheat Sheet

Build powerful one-dimensional layouts — see it, then code it.

1 WHAT IS FLEXBOX?

A layout model for aligning items in a row or column.

Main axis Cross

1

2

3

2 STARTER

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

3 CONTAINER

Property	Values
`display`	`flex`
`flex-direction`	row · column · *-reverse
`justify-content`	start · center · space-between
`align-items`	stretch · center · flex-end
`flex-wrap`	nowrap · wrap
`gap`	e.g. `12px`

4 ITEMS

Property	Description
`order`	Visual order
`flex-grow`	Grow factor
`flex-shrink`	Shrink factor
`flex-basis`	Initial size
`flex`	grow shrink basis
`align-self`	Override align

5 VISUAL EXAMPLES

flex-direction: row

1

2

3

flex-direction: column

1

2

3

justify-content: center

1

2

3

justify-content: space-between

1

2

3

justify-content: space-around

1

2

3

align-items: center

1

2

3

flex-wrap: wrap

1

2

3

4

5

gap: 8px

1

2

3

WEB TECHNOLOGIES

CSS3 Keyframes

Create powerful animations and bring your UI to life.

1 BASIC SYNTAX

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fadeIn 1s ease infinite;
}

2 PROPERTIES

Property	Role
`animation-name`	Which @keyframes
`animation-duration`	How long (e.g. 1s)
`animation-timing-function`	ease · linear · ease-in
`animation-delay`	Wait before start
`animation-iteration-count`	number or infinite
`animation-direction`	normal · alternate

3 MOVE

@keyframes move {
  to { transform: translateX(100px); }
}

4 FADE

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

5 ROTATE

@keyframes spin {
  to { transform: rotate(360deg); }
}

6 BOUNCE

@keyframes bounce {
  50% { transform: translateY(-20px); }
}

7 PULSE

@keyframes pulse {
  50% { transform: scale(1.1); }
}

8 SHORTHAND

animation: name duration timing delay iteration direction;
/* e.g. */
animation: bounce .6s ease infinite alternate;

WEB TECHNOLOGIES

JS Array Methods

Ten methods every developer should master — cleaner code, faster solutions.

↦

map()

1

Transforms each element → new array.

const doubled = arr.map(x => x * 2);

▽

filter()

2

Keeps elements that match a condition.

const adults = users.filter(u => u.age >= 18);

Σ

reduce()

3

Combines all values into one result.

const sum = arr.reduce((a, b) => a + b, 0);

⌕

find()

4

Returns the first matching element.

const user = users.find(u => u.id === 1);

∃

some()

5

true if at least one element matches.

arr.some(x => x > 10);

∀

every()

6

true if all elements match.

arr.every(x => x > 0);

∈

includes()

7

Checks if a value exists in the array.

arr.includes("React");

⇅

sort()

8

Sorts array elements (mutates).

arr.sort((a, b) => a - b);

✂

slice()

9

Copies part of an array (no mutate).

arr.slice(1, 4);

⟷

splice()

10

Adds or removes elements (mutates).

arr.splice(2, 1);

WEB TECHNOLOGIES

JS String Methods

Quick look-ups for everyday string operations.

"Hello".charAt(4)→"o"

"Hello".concat("", " world")→"Hello world"

"Hello".startsWith("H")→true

"Hello".endsWith("o")→true

"Hello".includes("x")→false

"Hello".indexOf("l")→2

"Hello".lastIndexOf("l")→3

"Hello".padStart(6, "?")→"?Hello"

"Hello".padEnd(6, "?")→"Hello?"

"Hello".repeat(3)→"HelloHelloHello"

"Hello".replace("llo", "y")→"Hey"

"Hello".slice(1, 3)→"el"

"Hello".split("")→['H','e','l','l','o']

"Hello".substring(2, 4)→"ll"

"Hello".toLowerCase()→"hello"

"Hello".toUpperCase()→"HELLO"

" Hello ".trim()→"Hello"

WEB TECHNOLOGIES

JS DOM & Events

Make your pages interactive and dynamic.

1 SELECTORS

document.getElementById('title')
document.querySelector('.btn')
document.querySelectorAll('.item')
document.getElementsByClassName('item')
document.getElementsByTagName('p')

2 EVENTS

btn.addEventListener('click', () => {
  alert('Hi!');
});

input.addEventListener('input', e => {
  console.log(e.target.value);
});

clickinputsubmitmouseoverkeydownchange

3 FORM CHECK

form.addEventListener('submit', e => {
  e.preventDefault();
  if (!email.value.includes('@')) {
    alert('Invalid email');
  }
});

Validate on submit · clear errors · block bad data.

4 PRACTICE: CALCULATOR

Basic opsClear / backspaceResponsive UI

5 PRACTICE: TO-DO LIST

Add tasksMark doneDelete tasks

WEB TECHNOLOGIES

Sync vs Async

Blocking vs non-blocking execution in JavaScript — a simple comparison.

SYNCHRONOUS (Blocking)

One thing at a time. Waits for completion.

1 · Read file

2 · Process data

3 · Update UI

console.log('Start');
console.log('Middle');
console.log('End');
// Start → Middle → End

Main thread is blocked. Can freeze the UI.

ASYNCHRONOUS (Non-Blocking)

Multiple things at once. Doesn't wait.

Main · Render page

Async · API call

Async · Timer

console.log('Start');
setTimeout(() => console.log('Async'), 1000);
console.log('End');
// Start → End → Async

Work runs in the background. App stays responsive.

Key takeaway: Synchronous is simple and sequential. Asynchronous is essential for performance — network requests, timers, and I/O without blocking the UI.

WEB TECHNOLOGIES

Web Development

Building websites and web applications that power the internet.

1 FRONTEND

What users see and interact with.

HTMLCSSJavaScript

2 BACKEND

Server-side logic and data.

Node.jsPythonPHP

3 DATABASE

Stores and manages data.

MySQLPostgreSQLMongoDB

4 HOW IT WORKS

1 · Browser

→

2 · Request

→

3 · Server + DB

→

4 · Response

5 HTML / CSS / JS

Structure, style & interactivity.

6 LOGIC

Write code and solve problems.

7 DATA

Store, organize & retrieve data.

8 RESPONSIVE

Works on all devices.

9 DEPLOY

Publish and keep sites online.

WEB TECHNOLOGIES

Frontend Roadmap

Step-by-step guide for beginners — learn, build, get hired.

01

HTML

Learn the building blocks of web pages.

02

CSS

Style and layout your content (Flexbox, Grid, responsive).

03

JavaScript

Make pages interactive with the core language.

04

Git & GitHub

Version history and collaborate on projects.

05

React

Build dynamic UIs with a popular library.

06

Responsive Design

Designs that work on every device.

07

API Basics

Connect apps to external data and services.

08

Portfolio Projects

Build real-world projects to showcase your skills.

WEB TECHNOLOGIES

JavaScript Roadmap

Learn step-by-step. Build real projects.

01

Variables

Foundation of every program.

letconstdata types

02

Functions

Reusable blocks of logic.

declarationsparametersreturn

03

DOM

Interactive websites.

querySelectoreventsforms

04

Async JavaScript

Real apps that talk to servers.

promisesasync/awaitfetch()

05

APIs

Project building with live data.

JSONweather appsmovie apps

06

Frameworks

Job-ready UI libraries.

ReactNext.jsVue

Quick reference for the languages you'll actually use.