Scribd
Upload
3 views59 pages

Web Developer Reference Guide

The document is a comprehensive guide for web developers covering HTML, CSS, and JavaScript. It includes detailed explanations of various tags, properties, and concepts essential for building and styling web pages. The guide is structured into three main parts focusing on the structure of the web, presentation layer, and interactivity, making it beginner-friendly and a useful reference for developers.

Uploaded by

Mormah Ejimepaul
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views59 pages

Web Developer Reference Guide

The document is a comprehensive guide for web developers covering HTML, CSS, and JavaScript. It includes detailed explanations of various tags, properties, and concepts essential for building and styling web pages. The guide is structured into three main parts focusing on the structure of the web, presentation layer, and interactivity, making it beginner-friendly and a useful reference for developers.

Uploaded by

Mormah Ejimepaul
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

THE WEB DEVELOPER'S

Complete Reference Guide


HTML Tags • CSS Properties • JavaScript Concepts
Learn the what, how, and why behind every building block of the web

Beginner-Friendly • Developer Reference • With Examples


Table of Contents

PART ONE HTML — The Structure of the Web


Chapter 1 What is HTML & How Browsers Read It
Chapter 2 Document Structure Tags
Chapter 3 Text & Heading Tags
Chapter 4 Link & Media Tags
Chapter 5 List Tags
Chapter 6 Form & Input Tags
Chapter 7 Semantic Layout Tags
Chapter 8 Table Tags
Chapter 9 HTML Attributes Reference

PART TWO CSS — The Presentation Layer


Chapter 10 What is CSS & How It Works
Chapter 11 Selectors & Specificity
Chapter 12 The Box Model
Chapter 13 Typography Properties
Chapter 14 Colour & Background Properties
Chapter 15 Layout — Flexbox
Chapter 16 Layout — CSS Grid
Chapter 17 Positioning
Chapter 18 Transitions & Animations
Chapter 19 Responsive Design & Media Queries
Chapter 20 CSS Variables & Functions

PART THREE JavaScript — Making It Come Alive


Chapter 21 What is JavaScript & How It Runs
Chapter 22 Variables, Data Types & Operators
Chapter 23 Functions
Chapter 24 The DOM — Selecting & Manipulating Elements
Chapter 25 Events & Event Listeners
Chapter 26 Conditions & Loops
Chapter 27 Arrays & Objects
Chapter 28 Timers & Async Concepts
Chapter 29 Intersection Observer API
Chapter 30 Useful Built-in JS Methods
PART ONE

HTML
The Structure of the Web
Chapter 1: What is HTML & How Browsers
Read It

HTML stands for HyperText Markup Language. It is the standard language used to create and
structure content on the web. Every website you have ever visited — from Google to Netflix — is built
on HTML at its foundation.
HTML uses tags to wrap and describe content. A tag is a keyword surrounded by angle brackets.
Most tags come in pairs: an opening tag and a closing tag with a forward slash.

<tagname>Content goes here</tagname>

<!-- Example: -->


<p>This is a paragraph of text.</p>
<h1>This is a main heading.</h1>

WHY IT MATTERS: The browser reads your HTML file from top to bottom, building a tree of elements
called the DOM (Document Object Model). This tree is what CSS styles and JavaScript manipulates.
Understanding that browsers read HTML as a tree — not a flat list — is the key mental model for all web
development.

Anatomy of an HTML Tag

<a href="[Link] class="link" target="_blank">Click Here</a>


^ ^ ^ ^ ^
| | | | |
tag attribute name attribute attribute content
with value name+value name+value

A tag can have attributes — extra information added inside the opening tag. Attributes always follow
the pattern name="value".

Self-Closing Tags
Some HTML elements do not wrap content — they stand alone. These are called void elements or
self-closing tags:

<img src="[Link]" alt="A description" />


<input type="text" placeholder="Enter name" />
<br /> <!-- line break -->
<hr /> <!-- horizontal rule / divider line -->
<meta charset="UTF-8" />
<link rel="stylesheet" href="[Link]" />

TIP: Always include alt text on images. It helps visually impaired users and improves your SEO ranking.
Chapter 2: Document Structure Tags

Every HTML file must follow a standard structure. These tags form the skeleton that wraps all other
content.

Tag What It Does Why It Is Needed


<!DOCTYPE html> Declares this is an HTML5 Without it, browsers enter quirks mode
document and render inconsistently

<html lang="en"> Root element wrapping the entire lang attribute helps screen readers and
page search engines

<head> Container for metadata — not Holds title, styles, fonts, SEO info
visible on the page

<meta charset="UTF- Sets character encoding Ensures special characters display


8"> correctly

<meta Controls layout on mobile devices Without it, mobile browsers zoom out
name="viewport"> and show a tiny desktop view

<title> Sets the browser tab text Also used by search engines as the
page headline

<link> Links external resources like CSS Connects your stylesheet to your HTML
files or fonts

<script> Links or contains JavaScript Use defer attribute so JS runs after


HTML is loaded

<body> Contains all visible page content Everything the user sees goes inside
body

<style> Embeds CSS directly in the HTML Use for quick tests; prefer external CSS
file files for real projects

The Complete Document Shell

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description for search engines" />
<title>Page Title — Site Name</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>

<!-- All visible content goes here -->

<script src="[Link]" defer></script>


</body>
</html>

TIP: The viewport meta tag is the single most important tag for mobile responsiveness.
content="width=device-width" makes the page width match the device screen. initial-scale=1.0 prevents
automatic zooming.
Chapter 3: Text & Heading Tags

Heading Tags — h1 to h6
HTML provides six levels of headings. They create visual hierarchy and tell search engines the
relative importance of your content.

<h1>Main Page Title — Only ONE per page</h1>


<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Minor Heading</h4>
<h5>Rarely used</h5>
<h6>Rarely used</h6>

WHY IT MATTERS: Search engines (Google) use heading tags to understand page structure. An H1
carries the most weight for SEO. Never use heading tags just to make text big — use CSS for sizing. Use
headings for their semantic meaning only.

Paragraph & Text Tags


Tag Purpose Example
<p> A paragraph of text. Adds <p>Hello world</p>
space above and below.

<span> Inline container for styling <span


part of a text class="highlight">word</span>

<strong> Bold text with semantic <strong>Warning:</strong> Read


importance this

<em> Italic text with emphasis This is <em>really</em> important

<b> Bold text — visual only, no <b>Bold text</b>


meaning

<i> Italic text — visual only, no <i>Italic text</i>


meaning

<br> Line break — forces new Line one<br>Line two


line within a block

<hr> Horizontal divider line <hr>

<blockquo A quoted block from <blockquote>Quote


te> another source here</blockquote>

<code> Inline code display Use the <code>display</code>


property

<pre> Preserves whitespace and <pre> formatted text </pre>


line breaks

<small> Smaller fine-print text <small>Terms apply</small>

<mark> Highlighted / marked text Find the <mark>keyword</mark>

<del> Strikethrough — deleted <del>Old price</del>


text

<sup> Superscript text E = mc<sup>2</sup>


Tag Purpose Example
<sub> Subscript text H<sub>2</sub>O

TIP: Always use <strong> and <em> instead of <b> and <i> when the emphasis is meaningful. Screen
readers announce <strong> as 'important', which helps visually impaired users understand your content.
Chapter 4: Link & Media Tags

The Anchor Tag — Links


<!-- Link to another page -->
<a href="[Link]">About Us</a>

<!-- Link to external site — opens in new tab -->


<a href="[Link] target="_blank" rel="noopener noreferrer">Google</a>

<!-- Link to section on same page -->


<a href="#contact">Go to Contact</a>

<!-- Email link -->


<a href="[Link] Me</a>

<!-- Phone link (mobile tappable) -->


<a href="[Link] Us</a>

<!-- Download link -->


<a href="[Link]" download>Download CV</a>

WHY IT MATTERS: rel="noopener noreferrer" on external links that open in a new tab is a security
measure. Without it, the opened page can access your page through the [Link] object — a
potential security vulnerability called reverse tabnapping.

The Image Tag


<img
src="images/[Link]"
alt="John Doe, Full Stack Developer"
width="400"
height="400"
loading="lazy"
/>

Attribute What It Does Best Practice


src Path to the image file Use relative paths for
local images

alt Text description of the image Always write descriptive


alt text — never leave it
empty

width / height Reserve space before image Always set both to


loads prevent layout shift

loading="lazy" Delays loading until image is Use on all images below


near viewport the hero section

Video & Audio Tags


<video src="demo.mp4" controls autoplay muted loop width="100%">
Your browser does not support video.
</video>

<audio src="podcast.mp3" controls>


Your browser does not support audio.
</audio>

TIP: Always include the muted attribute with autoplay. Browsers block autoplay with sound by default to
prevent jarring user experiences. Muted autoplay is allowed and works across all modern browsers.
Chapter 5: List Tags

Lists are one of the most used structures in web development — navigation menus, bullet points,
numbered steps, and dropdown items are all built with list tags.

Unordered List — Bullet Points


<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Ordered List — Numbered


<ol>
<li>Plan the project</li>
<li>Write the HTML structure</li>
<li>Add CSS styles</li>
<li>Add JavaScript interactivity</li>
</ol>

Description List — Term and Definition


<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the visual presentation layer</dd>
</dl>

WHY IT MATTERS: Navigation menus are built with <ul> and <li> tags because they are semantically a list
of links. CSS then removes the bullet points and makes them display horizontally. Using a <ul> for
navigation instead of plain <div> tags helps screen readers announce it as a navigation list, which is critical
for accessibility.

Navigation Menu Pattern

<nav>
<ul class="nav-list">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Chapter 6: Form & Input Tags

Forms are how users send data to your website — login, registration, contact, search, and checkout
are all built with form elements.

The Form Tag


<form action="/submit" method="POST" id="contact-form">
<!-- inputs go inside -->
</form>

Attribute Values What It Does


action URL or path Where the form data is sent when
submitted

method GET or POST GET appends data to URL (visible).


POST sends in body (secure)

id any name Used by JavaScript to reference the


form

novalidate (boolean) Disables browser validation — use


when handling validation yourself in
JS

Input Types Reference


Type HTML Use Case
text <input type="text"> Single line text entry

email <input type="email"> Email — validates @ format on


mobile

password <input type="password"> Hidden text entry for passwords

number <input type="number"> Numeric entry with up/down


arrows

tel <input type="tel"> Phone number — shows


number pad on mobile

url <input type="url"> Web address — validates URL


format

date <input type="date"> Date picker calendar

time <input type="time"> Time picker

checkbox <input type="checkbox"> Tick box for multiple selections

radio <input type="radio"> Single selection from a group

range <input type="range"> Slider for numeric range

file <input type="file"> File upload button

hidden <input type="hidden"> Invisible input for data tracking


Type HTML Use Case
submit <input type="submit"> Form submit button

color <input type="color"> Color picker

Other Form Elements


<!-- Multi-line text -->
<textarea name="message" rows="5" placeholder="Your message..."></textarea>

<!-- Dropdown select -->


<select name="country">
<option value="">-- Choose Country --</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
</select>

<!-- Label — always link labels to inputs via for/id -->


<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />

<!-- Button -->


<button type="submit">Send Message</button>
<button type="button" onclick="doSomething()">Click Me</button>
<button type="reset">Clear Form</button>

WHY IT MATTERS: Linking <label> to <input> using matching for and id attributes means clicking the label
also focuses the input. This doubles the clickable/tappable area and is a critical accessibility requirement.
The required attribute enables built-in browser validation — the form will not submit if the field is empty.
Chapter 7: Semantic Layout Tags

Semantic tags are HTML elements whose names describe their meaning and purpose. Using them
correctly transforms your code from a collection of boxes into a meaningful, accessible document that
browsers, search engines, and screen readers all understand.

Tag Meaning When to Use It


<header> Top section of a page or Site header with logo and
content block navigation

<nav> Navigation links Main menu, footer links,


breadcrumbs

<main> Primary page content Wraps everything except


header and footer. Only one
per page

<section> Thematic grouping of Each named section of a


content page (About, Skills, Contact)

<article> Self-contained, reusable Blog posts, news items,


content product cards

<aside> Content tangentially Sidebar, related links, ads


related to main content

<footer> Bottom section of page or Copyright, social links,


content block secondary nav

<figure> Self-contained media Images with captions, code


content blocks, charts

<figcaption> Caption for a <figure> Always inside <figure>,


element describes the media

<details> Expandable/collapsible FAQ accordions, read-more


content sections

<summary> The visible heading of a Always the first child of


<details> block <details>

<time> Represents a date or time Publish dates, event times

<address> Contact information block Author address, business


contact details

<div> Generic container with no Use when no semantic tag is


meaning appropriate

<span> Generic inline container Styling part of a text, no


semantic meaning

A Fully Semantic Page Layout

<body>
<header>
<nav> ... </nav>
</header>

<main>
<section id="hero"> ... </section>
<section id="about"> ... </section>

<section id="blog">
<article> ... </article>
<article> ... </article>
</section>

<aside>Related links</aside>
</main>

<footer> ... </footer>


</body>

WHY IT MATTERS: A page full of <div> tags is like a book with no chapter titles — the content is there but
there is no structure. Semantic HTML is the difference between a well-organised document and an
unmarked pile of text. Google rewards semantic structure with higher search rankings, and screen readers
use it to help visually impaired users navigate your pages.
Chapter 8: Table Tags

Tables are for displaying tabular data — comparisons, pricing, schedules, spreadsheet-style content.
They should never be used for page layout (use CSS Grid or Flexbox for that).

<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Developer</td>
<td>N400,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Designer</td>
<td>N350,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 employees</td>
</tr>
</tfoot>
</table>

Tag Purpose
<table> The outer container for the entire table

<thead> Groups the header rows — browsers and screen readers


treat this as the table header

<tbody> Groups the data rows

<tfoot> Groups the footer rows — summary, totals

<tr> A table row — contains td or th cells

<th> A header cell — bold by default. Use scope='col' or


scope='row' for accessibility

<td> A data cell — the actual content

colspan Makes a cell span multiple columns

rowspan Makes a cell span multiple rows


Chapter 9: HTML Attributes Reference

Attributes are extra properties added inside opening tags. Here are the most important global
attributes that work on almost any HTML element:

Attribute What It Does Example


id Unique identifier — one per id="hero"
page

class Reusable identifier for class="btn btn-primary"


CSS/JS

style Inline CSS (avoid in style="color: red;"


production)

data-* Custom data stored in HTML data-category="web"


for JS to read

href URL for links and stylesheets href="#section"

src Source path for images and src="[Link]"


scripts

alt Alternative text for images alt="Company logo"

title Tooltip text on hover title="Click to expand"

placeholder Ghost text inside empty placeholder="Enter


inputs email"

required Makes a form field mandatory required

disabled Makes an element disabled


unclickable

readonly Input visible but not editable readonly

target Where a link opens target="_blank"

rel Relationship for links rel="noopener


noreferrer"

type Input or button type type="email"

name Form field identifier sent to name="email"


server

value Default value of an input value="Submit"

aria-label Accessible label for screen aria-label="Close menu"


readers

tabindex Controls keyboard tab order tabindex="0"

hidden Hides an element from all hidden


users

download Makes a link trigger a file download


download

autofocus Focuses this input when page autofocus


loads
PART TWO

CSS
The Presentation Layer
Chapter 10: What is CSS & How It Works

CSS stands for Cascading Style Sheets. It is the language that controls the visual presentation of
your HTML — colours, fonts, spacing, layout, animations, and responsiveness.

Anatomy of a CSS Rule


selector {
property: value;
property: value;
}

/* Real Example: */
h1 {
color: #1a1a2e;
font-size: 2.5rem;
font-weight: 800;
}

The selector targets which HTML elements to style. The property is what you are changing. The value
is what you are changing it to.

The Cascade — Why CSS Has That Name


CSS is called 'Cascading' because when multiple rules target the same element, they cascade —
flowing down in order of priority. The browser decides which rule wins using three principles:
• Specificity — more specific selectors win (ID beats class, class beats tag)
• Source order — when specificity is equal, the rule written last wins
• Importance — !important overrides everything (use sparingly)

Three Ways to Add CSS


/* 1. External stylesheet (BEST — recommended) */
<link rel="stylesheet" href="[Link]" />

/* 2. Internal style block (good for single-page prototypes) */


<style>
body { font-family: Arial; }
</style>

/* 3. Inline style (avoid — hard to maintain and overrides everything) */


<p style="color: red; font-size: 20px;">Text</p>

WHY IT MATTERS: External stylesheets are best because they are cached by the browser — once
downloaded, they are reused on every page of your site. Internal and inline styles are re-parsed on every
page load, which is slower and harder to maintain.
Chapter 11: Selectors & Specificity

Selector Syntax What It Targets Specifi


city
Element p{} All <p> tags Low
(0,0,1)

Class .card { } All elements with Medium


class='card' (0,1,0)

ID #hero { } The element with id='hero' High


(1,0,0)

Universal *{} Every single element Zero


(0,0,0)

Attribute [type='text'] { } Inputs with type='text' Medium


(0,1,0)

Descendant .nav a { } All <a> inside .nav (any Adds


depth) together

Child .nav > li { } Direct <li> children of .nav Adds


only together

Adjacent h2 + p { } <p> immediately after Adds


<h2> together

Sibling h2 ~ p { } All <p> siblings after <h2> Adds


together

Pseudo-class a:hover { } Link when mouse is over Medium


it (0,1,0)

Pseudo- p::first-line { } First line of every <p> Low


element (0,0,1)

:not() :not(.active) { } Elements that do NOT Adds


have the class inside

Multiple h1, h2, h3 { } Applies rule to all three Separat


tags e rules

Common Pseudo-Classes
Pseudo-class When It Applies
:hover Mouse is over the element

:focus Element is focused (keyboard or click)

:active Element is being clicked

:visited Link has already been visited

:nth-child(n) Element is the nth child of its parent

:nth-child(odd) Every odd-numbered child

:nth-child(even) Every even-numbered child

:first-child The first child element

:last-child The last child element


Pseudo-class When It Applies
:not(selector) Elements that do not match the selector

:checked Checked checkboxes or radio buttons

:disabled Disabled form elements

:placeholder The placeholder text of an input

Pseudo-Elements
Pseudo-element What It Creates
::before A generated element inserted before the content of the
selected element

::after A generated element inserted after the content of the


selected element

::first-letter Targets just the first letter of a text block

::first-line Targets just the first line of a text block

::placeholder Styles the placeholder text of an input

::selection Styles text that the user has highlighted/selected


WHY IT MATTERS: ::before and ::after are among the most powerful tools in CSS. They create virtual
elements using only CSS — no extra HTML needed. They are commonly used for decorative lines, icons,
overlays, badges, and counters. They require content: '' to render (even an empty string), and can be
positioned absolutely relative to their parent.
Chapter 12: The Box Model

Every HTML element is a rectangular box. The CSS Box Model describes the layers that make up
that box, from the inside out:

+------------------------------------------+
| MARGIN (outside) |
| +--------------------------------------+ |
| | BORDER | |
| | +--------------------------------+ | |
| | | PADDING | | |
| | | +--------------------------+ | | |
| | | | CONTENT | | | |
| | | | (text, images, etc.) | | | |
| | | +--------------------------+ | | |
| | +--------------------------------+ | |
| +--------------------------------------+ |
+------------------------------------------+

Layer What It Is CSS Property


Content The actual text, image, or child width, height
elements

Padding Space between content and padding, padding-top,


border — inside the element etc.

Border A visible (or invisible) line around border, border-radius


the padding

Margin Space outside the border — margin, margin-top, etc.


between this and other elements
Outline Like border but outside the outline, outline-offset
margin, does not affect layout

box-sizing: border-box — The Most Important CSS Rule


/* DEFAULT (content-box) — width does NOT include padding/border */
.box {
width: 300px;
padding: 20px;
/* Actual rendered width = 300 + 20 + 20 = 340px — BREAKS LAYOUTS */
}

/* border-box — width INCLUDES padding and border */


* { box-sizing: border-box; }
.box {
width: 300px;
padding: 20px;
/* Actual rendered width = 300px — PREDICTABLE */
}
Margin, Padding & Border Shorthand
/* All four sides equal */
margin: 20px;

/* Top/bottom Left/right */
margin: 20px 40px;

/* Top Left/right Bottom */


margin: 10px 20px 30px;

/* Top Right Bottom Left (clockwise from top) */


margin: 10px 20px 30px 40px;

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* Same shorthand works for padding */


padding: 16px 24px;

/* Border shorthand: width style colour */


border: 2px solid #4f46e5;
border-radius: 8px;
border-radius: 50%; /* Perfect circle */
Chapter 13: Typography Properties

Property What It Controls Example Values


font-family The typeface 'Inter', sans-serif

font-size Text size 16px, 1rem,


clamp(1rem,3vw,2rem)

font-weight Thickness of text 400 (normal), 700


(bold), 800 (heavy)

font-style Normal or italic normal, italic

line-height Space between lines of 1.6, 1.8, 2 (unitless is


text best)

letter-spacing Space between individual 0, 1px, 2px, -0.5px


characters

word-spacing Space between words 0, 4px

text-align Horizontal alignment left, center, right,


justify

text-transform Capitalisation control uppercase, lowercase,


capitalize

text-decoration Underline, overline, none, underline, line-


strikethrough through

text-shadow Shadow behind text 2px 2px 4px


rgba(0,0,0,0.3)

color Text colour #333, rgba(0,0,0,0.7),


white

white-space How whitespace is handled normal, nowrap, pre

overflow What happens when text hidden, scroll, auto,


overflows visible

text-overflow Display when text is ellipsis (shows ...)


clipped

word-break Line breaking rules for long break-word, break-all


words

The rem vs px vs em Units Explained


Unit What It Means Best Used For
px Fixed pixel value. Never changes. Borders, fine-grained
shadows

rem Relative to the root font size Font sizes, padding, margin
(usually 16px). 1rem = 16px. — scales with user settings

em Relative to the parent element's Internal spacing like


font size. Compounds on nesting. padding/margin inside
components

% Relative to the parent element's Widths, responsive


width or height. containers
Unit What It Means Best Used For
vw 1% of the viewport (screen) width. Full-width sections, large
font sizes

vh 1% of the viewport (screen) Full-height sections (min-


height. height: 100vh)

clamp clamp(min, preferred, max) — Hero font sizes, container


responsive range without media widths
queries.
TIP: Use rem for font sizes across your site. It respects the user's browser font size setting, which is
important for accessibility. A user who has set their browser to 20px base size will get proportionally larger
text across your site automatically.
Chapter 14: Colour & Background Properties

Colour Formats
Format Syntax Notes
Named colour color: red 147 named colours in CSS.
Good for quick prototyping only

Hex color: #4f46e5 Most common. 6 characters:


RRGGBB in hexadecimal

Short hex color: #fff 3-character shorthand when


each pair repeats

RGB color: rgb(79, 70, 229) Red, Green, Blue — each 0 to


255

RGBA color: rgba(79, 70, 229, Adds Alpha (opacity) channel —


0.5) 0 transparent, 1 opaque
HSL color: hsl(243, 75%, Hue, Saturation, Lightness —
59%) easier to reason about

HSLA color: hsla(243, 75%, HSL with Alpha opacity channel


59%, 0.8)

Background Properties
Property What It Does Example
background-color Solid background colour background-color: #f8fafc

background-image Image or gradient background-image:


background url('[Link]')

background-size How the background cover, contain, 100%


image fits auto

background-position Where the background center, top right, 50%


image is anchored 50%

background-repeat Whether the image tiles no-repeat, repeat-x

background- Fixed or scrolls with fixed, scroll


attachment page

background All background See below


(shorthand) properties in one line

Gradients
/* Linear gradient */
background: linear-gradient(135deg, #1a1a2e, #4f46e5);

/* Linear with more stops */


background: linear-gradient(to right, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

/* Radial gradient */
background: radial-gradient(circle at center, #4f46e5, #1a1a2e);
/* Gradient with transparency — useful for overlays */
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));
Chapter 15: Layout — Flexbox

Flexbox is a one-dimensional layout system — it arranges items in either a row or a column. It is the
most used layout tool for components like navigation bars, cards, and any side-by-side arrangements.

Container Properties (applied to the parent)


Property Values What It Does
display: flex — Turns the element into
a flex container

flex-direction row, column, row-reverse, Direction items flow


column-reverse

justify-content flex-start, flex-end, center, Alignment along the


space-between, space- main axis (horizontal
around, space-evenly by default)

align-items flex-start, flex-end, center, Alignment on the cross


stretch, baseline axis (vertical by
default)

align-content Same as justify-content Alignment of multiple


rows when wrapping

flex-wrap nowrap, wrap, wrap-reverse Whether items wrap to


next line

gap 8px, 1rem, 2rem 4rem Space between flex


items — replaces
margin hacks

Item Properties (applied to the children)


Property Values What It Does
flex 1, 0 1 auto, 2 Shorthand for grow, shrink, basis.
flex: 1 fills available space equally

flex-grow 0, 1, 2 How much the item grows relative to


others. 0 = no grow

flex-shrink 0, 1 How much the item shrinks. 0 =


never shrink

flex-basis auto, 200px, 50% Default size before growing/shrinking

align-self auto, center, etc. Overrides the container's align-items


for this item only

order 0, 1, -1 Controls visual order regardless of


HTML order

Most Common Flexbox Patterns


/* Center anything horizontally and vertically */
.center {
display: flex;
justify-content: center;
align-items: center;
}

/* Header: logo left, nav right */


.header { display: flex; justify-content: space-between; align-items: center; }

/* Equal columns that fill available space */


.cols { display: flex; gap: 2rem; }
.col { flex: 1; }

/* Wrap cards responsively */


.cards { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.card { flex: 1 1 280px; /* minimum 280px, grows to fill */ }
Chapter 16: Layout — CSS Grid

CSS Grid is a two-dimensional layout system — it handles both rows and columns at the same time.
Use it for page-level layouts, card grids, and any design where items must align in both directions.

Container Properties
Property Example What It Does
display: grid display: grid Turns element into grid
container

grid-template-columns 1fr 1fr 1fr Defines number and size


of columns

grid-template-rows auto 1fr auto Defines number and size


of rows

gap / row-gap / column- gap: 2rem Space between grid cells


gap

grid-template-areas see example below Names areas for visual


layout mapping

justify-items start, end, center, Aligns items horizontally


stretch within their cell

align-items start, end, center, Aligns items vertically


stretch within their cell

place-items center / stretch Shorthand for align-items


and justify-items

The Most Powerful Pattern: auto-fit + minmax


/* Creates responsive columns with NO media queries */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
/* On wide screen: 4 columns. Tablet: 2. Mobile: 1. Automatic. */

Grid Template Areas — Visual Layout


.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 260px 1fr;
grid-template-rows: 70px 1fr 60px;
min-height: 100vh;
}

.header { grid-area: header; }


.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Item Properties
Property Example What It Does
grid-column 1 / 3 or 1 / span 2 Controls which columns the item
occupies

grid-row 1 / 3 or 1 / span 2 Controls which rows the item


occupies

grid-area header Places item in a named template


area

justify-self center Overrides justify-items for this item

align-self end Overrides align-items for this item


WHY IT MATTERS: Flexbox vs Grid: Use Flexbox when you have one row or one column of items
(navigation, card rows). Use Grid when you need items to align in both rows and columns simultaneously
(page layouts, image galleries, dashboard panels). In practice, professional developers use both — Grid for
the overall page layout, Flexbox for the components inside each grid cell.
Chapter 17: Positioning

The position property controls how elements are placed in the document. It is one of the most
powerful — and most misunderstood — CSS concepts.

Value Behaviour Common Use Case


static Default. Follows normal document Default — no special
flow. top/left/etc have no effect. positioning needed

relative Stays in normal flow but can be Slight adjustments;


nudged with top/left/right/bottom. parent for absolute
Creates a positioning context for children
absolute children.

absolute Removed from normal flow. Overlays, badges,


Positioned relative to its nearest tooltips, dropdowns
positioned ancestor (or the page if
none).
fixed Removed from flow. Positioned Sticky headers, floating
relative to the browser viewport — buttons, modal overlays
stays in place when scrolling.

sticky Acts like relative until it hits a scroll Section headers,


threshold, then acts like fixed. navigation bars that stick
on scroll

The Positioning Context Rule


position: absolute always positions relative to the nearest ancestor that has position: relative,
absolute, fixed, or sticky — not the page, not the body, not the screen. This is the most common
source of confusion in CSS layout.

.card {
position: relative; /* Creates the positioning context */
}

.badge {
position: absolute; /* Positioned relative to .card */
top: -10px;
right: -10px;
/* This badge will sit 10px above and 10px right of .card */
}

z-index — Stacking Order


z-index controls which elements appear on top when elements overlap. Higher numbers appear in
front. z-index only works on positioned elements (not static).

.header { position: sticky; z-index: 1000; } /* Always on top */


.modal { position: fixed; z-index: 2000; } /* Above header */
.tooltip { position: absolute; z-index: 500; }
.overlay { position: fixed; z-index: 999; }
TIP: Create a z-index scale at the top of your CSS file and stick to it. Arbitrary numbers like z-index: 99999
are a sign of poor architecture and cause confusing bugs later.
Chapter 18: Transitions & Animations

Transitions — Smooth State Changes


Transitions animate the change from one CSS state to another. They are triggered by events like
hover, focus, or adding a class with JavaScript.

.btn {
background: #4f46e5;
transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background: #3730a3;
transform: translateY(-3px);
}

/* transition shorthand: property duration timing-function delay */


transition: all 0.3s ease; /* All properties */
transition: background 0.3s ease; /* Specific property */
transition: opacity 0.5s ease 0.2s; /* With 0.2s delay */

Timing Function Feel


ease Starts fast, slows at end. Natural feeling. Default.

linear Constant speed. Good for spinners and progress bars.

ease-in Starts slow, ends fast. Good for elements leaving the
screen.

ease-out Starts fast, ends slow. Good for elements entering the
screen.

ease-in-out Slow at both ends. Good for back-and-forth animations.

cubic-bezier Custom curve. Use tools like [Link] to


generate.

@keyframes Animations
For animations that run on their own (not just on hover), use @keyframes to define the animation,
then apply it with the animation property.

/* Define the animation */


@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Apply the animation */


.hero-content {
animation: fadeInUp 0.8s ease forwards;
}
/* Animation shorthand: name duration timing fill-mode */
/* forwards = stays at final state after animation ends */

/* Blinking cursor */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cursor { animation: blink 1s step-end infinite; }

/* Spinning loader */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

WHY IT MATTERS: Always prefer animating transform and opacity over properties like width, height,
margin, or top/left. Transform and opacity animations are handled entirely by the GPU and do not trigger
layout recalculations. Animating margin or width forces the browser to recalculate the entire page layout on
every frame, causing poor performance and janky animations.
Chapter 19: Responsive Design & Media
Queries

Responsive design means your website adapts its layout to any screen size — from a 320px mobile
phone to a 2560px desktop monitor. Media queries are the CSS tool that makes this possible.

Media Query Syntax


/* Apply styles ONLY when screen is 768px or wider */
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}

/* Apply styles ONLY when screen is 768px or narrower */


@media (max-width: 768px) {
.nav-list { display: none; }
}

/* Range — between two sizes */


@media (min-width: 600px) and (max-width: 1024px) { }

/* Orientation */
@media (orientation: landscape) { }

/* Dark mode preference */


@media (prefers-color-scheme: dark) {
body { background: #0f0f23; color: white; }
}

/* Reduced motion preference — for accessibility */


@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}

Standard Breakpoints
Breakpoint Name Width Target Devices
Mobile (base) < 640px Phones in portrait mode

Small >= 640px Large phones, small tablets

Medium >= 768px Tablets

Large >= 1024px Laptops

Extra Large >= 1280px Desktops

2XL >= 1536px Wide monitors

Mobile First — The Professional Approach


Write your base CSS for mobile, then use min-width media queries to enhance for larger screens.
This is better than writing desktop CSS and overriding it for mobile, because smaller devices
download only the styles they need.

/* BASE (mobile) — one column */


.grid { grid-template-columns: 1fr; }

/* Tablet and up */
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop and up */
@media (min-width: 1024px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
Chapter 20: CSS Variables & Functions

CSS Custom Properties (Variables)


:root {
--color-primary: #4f46e5;
--font-size-lg: 1.25rem;
--space-md: 2rem;
}

.btn {
background: var(--color-primary);
font-size: var(--font-size-lg);
padding: var(--space-md);
}

/* With fallback value */


color: var(--color-accent, #4f46e5);

/* Variables can be overridden locally */


.dark-section {
--color-primary: #818cf8; /* Different shade in dark context */
}

CSS Functions Reference


Function What It Does Example
var() Uses a CSS custom color: var(--primary)
property

calc() Performs math — can width: calc(100% - 80px)


mix units

clamp() Responsive value font-size: clamp(1rem, 3vw,


between min and max 2rem)

min() Uses the smaller of width: min(600px, 100%)


two values

max() Uses the larger of two padding: max(1rem, 5%)


values

rgb() Defines a colour by color: rgb(79, 70, 229)


red, green, blue

rgba() RGB with background: rgba(0,0,0,0.5)


transparency

hsl() Colour by hue, color: hsl(243, 75%, 59%)


saturation, lightness

linear-gradient() Creates a gradient background: linear-


background gradient(135deg, #000, #fff)

url() References a file path background-image:


url('[Link]')

translate() Moves an element in transform: translate(10px, -


transform 20px)
Function What It Does Example
scale() Scales an element in transform: scale(1.05)
transform

rotate() Rotates an element in transform: rotate(45deg)


transform
PART THREE

JavaScript
Making It Come Alive
Chapter 21: What is JavaScript & How It Runs

JavaScript is the programming language of the web. While HTML creates structure and CSS controls
appearance, JavaScript adds behaviour — making things move, respond to clicks, fetch data, validate
forms, and animate elements.
JavaScript runs in the browser — it is interpreted and executed by the browser's JavaScript engine
(Chrome uses V8, Firefox uses SpiderMonkey). This means no installation is needed. Every browser
is already a JavaScript runtime.

Adding JavaScript to a Page


<!-- BEST: External file with defer */
<script src="[Link]" defer></script>

<!-- Internal script block */


<script>
[Link]('Hello from JS');
</script>

<!-- Inline (avoid) */


<button onclick="alert('clicked')">Click</button>

The Browser Console


The browser console is your best friend when learning JavaScript. Open it with F12 (or
Cmd+Option+J on Mac) and use [Link]() to print values and debug your code.

[Link]('Hello World'); // Prints text


[Link](myVariable); // Prints a variable's value
[Link]('Something broke'); // Prints in red
[Link]('Be careful'); // Prints in yellow
[Link](myArray); // Prints array as a table
Chapter 22: Variables, Data Types & Operators

Declaring Variables
// const — value cannot be reassigned (use by default)
const name = "John Doe";
const age = 25;

// let — value can change


let score = 0;
score = score + 10; // OK

// var — old way, avoid in modern JS


var oldStyle = "avoid this";

WHY IT MATTERS: Always use const by default. Use let only when you know the value will change. This
makes your code easier to understand — seeing const tells the reader this value is stable, seeing let
signals it will be updated. Never use var in modern JavaScript; it has confusing scoping rules that cause
bugs.

Data Types
Type Example Notes
String 'Hello' or "Hello" or Text. Backtick strings allow
`Hello` embedded expressions: `Hello $
{name}`

Number 42, 3.14, -10 Both integers and decimals are


the same type in JS

Boolean true or false Used in conditions and logic

Null null Intentional absence of a value

Undefined undefined Variable declared but not


assigned a value yet

Array [1, 2, 3] or ['a', 'b'] Ordered list of values

Object { name: 'John', age: 25 } Key-value pairs, like a dictionary

Function function greet() { } Reusable block of code

Operators
Operator Meaning Example
= Assignment — sets a let x = 10
value

== Loose equality — 5 == '5' is true — avoid


ignores type

=== Strict equality — checks 5 === '5' is false — use this


type too
Operator Meaning Example
!== Strict not equal 5 !== '5' is true

+ Addition or string 5 + 3 = 8, 'a' + 'b' = 'ab'


concatenation

- Subtraction 10 - 3 = 7

* Multiplication 4 * 3 = 12

/ Division 12 / 4 = 3

% Modulo — remainder 10 % 3 = 1
after division

&& Logical AND — both isLoggedIn && isAdmin


must be true

|| Logical OR — either can isAdmin || isModerator


be true

! Logical NOT — flips !isLoggedIn


boolean

++ Increment by 1 i++ is i = i + 1

-- Decrement by 1 i-- is i = i - 1

+= Add and assign score += 10

?: Ternary — inline if/else age >= 18 ? 'adult' : 'minor'


Chapter 23: Functions

A function is a reusable block of code that performs a specific task. Instead of writing the same code
over and over, you write it once in a function and call it whenever needed.

Four Ways to Write Functions


// 1. Function Declaration
function greet(name) {
return 'Hello, ' + name + '!';
}
[Link](greet('John')); // Hello, John!

// 2. Function Expression
const greet = function(name) {
return 'Hello, ' + name;
};

// 3. Arrow Function (modern — most common in 2024)


const greet = (name) => {
return 'Hello, ' + name;
};

// 4. Arrow Function (concise — single expression)


const greet = name => 'Hello, ' + name;

// With default parameter value


const greet = (name = 'Friend') => 'Hello, ' + name;
greet(); // Hello, Friend
greet('John'); // Hello, John

Real-World Function Examples


// Toggle a class on an element
const toggleMenu = () => {
[Link]('.nav').[Link]('open');
};

// Format a number as currency


const formatNaira = (amount) => {
return 'N' + [Link]();
};
[Link](formatNaira(50000)); // N50,000

// Check if a string is a valid email


const isValidEmail = (email) => {
return [Link]("@") && [Link](".");
};
Chapter 24: The DOM — Selecting &
Manipulating Elements

The DOM (Document Object Model) is a programming interface that represents your HTML as a tree
of objects that JavaScript can read, change, add to, or delete. When you use JS to change text, hide
an element, or add a class, you are manipulating the DOM.

Selecting Elements
// Select ONE element (returns the first match)
const hero = [Link]('.hero');
const heading = [Link]('h1');
const btn = [Link]('submit-btn');

// Select MULTIPLE elements (returns a NodeList)


const cards = [Link]('.card');
const buttons = [Link]('button');

// Loop through multiple elements


[Link](card => {
[Link]([Link]);
});

Manipulating Elements
const el = [Link]('.title');

// Read and change text content


[Link]([Link]);
[Link] = 'New Heading Text';

// Read and change HTML inside an element


[Link] = '<strong>Bold Heading</strong>';

// Change CSS styles directly


[Link] = '#4f46e5';
[Link] = '2rem';
[Link] = 'none'; // Hide
[Link] = 'block'; // Show

// Add, remove, or toggle a CSS class (PREFERRED over style)


[Link]('active');
[Link]('active');
[Link]('open');
[Link]('active'); // Returns true or false

// Read and set attributes


[Link]('href');
[Link]('href', '#contact');
[Link]('disabled');

// Read and write data attributes


[Link]; // Gets data-category attribute
[Link] = 'web';
Creating & Inserting New Elements
// Create a new element
const newCard = [Link]('div');
[Link]('card');
[Link] = 'New Card Content';

// Insert into the page


[Link]('.grid').appendChild(newCard); // At end
[Link]('.grid').prepend(newCard); // At start
[Link](newCard, referenceElement); // Before specific element

// Remove an element
[Link]();
Chapter 25: Events & Event Listeners

Events are actions that happen in the browser — a user clicking a button, typing in an input, scrolling
the page, or the page finishing its load. JavaScript listens for these events and runs code in response.

The addEventListener Method


// Syntax: [Link](eventType, callbackFunction)

const btn = [Link]('.btn');

[Link]('click', function() {
[Link]('Button was clicked!');
});

// Arrow function version (more common)


[Link]('click', () => {
[Link]('Button clicked');
});

// With the event object (gives info about the event)


[Link]('click', (event) => {
[Link]([Link]); // The clicked element
[Link]([Link]); // Its id
[Link](); // Stops default browser action
});

Common Event Types


Event When It Fires
click User clicks an element

dblclick User double-clicks

mouseover Mouse enters an element

mouseout Mouse leaves an element

mousemove Mouse moves over an element

keydown Any keyboard key is pressed

keyup Any keyboard key is released

keypress A key is pressed (deprecated — use keydown)

input Value of an input changes (every keystroke)

change Input value changes and loses focus

focus An input gains focus

blur An input loses focus

submit A form is submitted

scroll User scrolls the page


Event When It Fires
resize Browser window is resized

load Page or resource finishes loading

DOMContentLoaded HTML is parsed and DOM is ready (no images yet)

contextmenu User right-clicks

touchstart Finger touches screen (mobile)

touchend Finger lifts from screen (mobile)


Chapter 26: Conditions & Loops

Conditions
// if / else if / else
const score = 85;

if (score >= 90) {


[Link]('A');
} else if (score >= 80) {
[Link]('B');
} else if (score >= 70) {
[Link]('C');
} else {
[Link]('F');
}

// Ternary operator — inline if/else


const label = score >= 50 ? 'Pass' : 'Fail';

// Switch statement
switch (day) {
case 'Monday': [Link]('Start of week'); break;
case 'Friday': [Link]('End of week'); break;
default: [Link]('Midweek');
}

Loops
// for loop — classic, use when you know the count
for (let i = 0; i < 5; i++) {
[Link](i); // 0, 1, 2, 3, 4
}

// forEach — cleanest way to loop over arrays


const skills = ['HTML', 'CSS', 'JavaScript'];
[Link](skill => {
[Link](skill);
});

// for...of — loop over array values


for (const skill of skills) {
[Link](skill);
}

// while loop — runs while condition is true


let count = 0;
while (count < 3) {
[Link](count);
count++;
}

// Loop over NodeList from querySelectorAll


[Link]('.card').forEach(card => {
[Link]('visible');
});
Chapter 27: Arrays & Objects

Arrays — Ordered Lists


const colours = ['red', 'green', 'blue'];

// Access by index (starts at 0)


colours[0]; // "red"
[Link]; // 3

// Add and remove


[Link]('yellow'); // Add to end
[Link](); // Remove from end
[Link]('white'); // Add to start
[Link](); // Remove from start

// Find and filter


[Link]('red'); // true
[Link]('green'); // 1
const warm = [Link](c => c !== 'blue');
const upper = [Link](c => [Link]());
const found = [Link](c => c === 'red');

Objects — Key-Value Data


const person = {
name: 'John Doe',
age: 25,
city: 'Lagos',
skills: ["HTML", "CSS", "JavaScript"],
greet: function() {
return 'Hi, I am ' + [Link];
}
};

// Access properties
[Link]; // "John Doe" — dot notation
person["age"]; // 25 — bracket notation
[Link](); // 'Hi, I am John Doe'

// Add or update property


[Link] = 'john@[Link]';
[Link] = 26;

// Destructuring — extract into variables cleanly


const { name, age, city } = person;
[Link](name); // 'John Doe'

// Spread operator — copy or merge


const updated = { ...person, age: 26 };
Chapter 28: Timers & Async Concepts

setTimeout — Run Once After a Delay


// Run after 2000 milliseconds (2 seconds)
setTimeout(() => {
[Link]('Runs once after 2 seconds');
}, 2000);

// Cancel a timeout
const timer = setTimeout(myFunction, 3000);
clearTimeout(timer);

setInterval — Run Repeatedly


// Runs every 1000ms (1 second)
const interval = setInterval(() => {
[Link]('Tick');
}, 1000);

// Stop it
clearInterval(interval);

Fetch — Getting Data from APIs


// Modern way to request data from a server or API
fetch('[Link]
.then(response => [Link]())
.then(data => {
[Link](data);
})
.catch(error => {
[Link]('Error:', error);
});

// Cleaner version using async/await


const loadUsers = async () => {
try {
const response = await fetch('[Link]
const data = await [Link]();
[Link](data);
} catch (error) {
[Link]('Failed to load:', error);
}
};
loadUsers();

WHY IT MATTERS: fetch() is asynchronous — it does not block the rest of your code while waiting for a
response. The .then() chain (or async/await) lets you handle the data once it arrives. async/await is the
modern, cleaner syntax. Always wrap async code in try/catch to handle network errors gracefully.
Chapter 29: Intersection Observer API

The Intersection Observer API watches elements and fires a callback when they enter or leave the
viewport (the visible area of the screen). It is the modern, performant way to trigger scroll animations
— far better than listening to the scroll event.

Basic Usage
// Create the observer
const observer = new IntersectionObserver((entries) => {
[Link](entry => {
if ([Link]) {
// Element is now visible on screen
[Link]('visible');
[Link]([Link]); // Stop watching — animation done
}
});
}, {
threshold: 0.2, // Fires when 20% of element is visible
rootMargin: '0px' // No offset
});

// Watch all elements with class 'reveal'


[Link]('.reveal').forEach(el => [Link](el));

Options Explained
Option Values What It Does
threshold 0 to 1 (or array like [0, 0 = fires as soon as any pixel is
0.5, 1]) visible. 1 = fires only when fully
visible. 0.2 = fires when 20%
visible.

rootMargin CSS margin string e.g. Shrinks or grows the


'0px 0px -100px 0px' observation area. Negative
bottom margin triggers earlier.

root An element or null The viewport to observe against.


null means the browser
viewport.

The CSS that pairs with it


.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}

.[Link] {
opacity: 1;
transform: translateY(0);
}

/* Stagger children with delay */


.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
Chapter 30: Useful Built-in JavaScript Methods

String Methods
Method What It Does Example
toUpperCase() Converts to all caps 'hello'.toUpperCase() →
'HELLO'

toLowerCase() Converts to lowercase 'HELLO'.toLowerCase() →


'hello'

trim() Removes ' hi '.trim() → 'hi'


leading/trailing spaces

includes() Checks if string 'hello'.includes('ell') → true


contains value

startsWith() Checks beginning of 'hello'.startsWith('he') → true


string
endsWith() Checks end of string 'hello'.endsWith('lo') → true

replace() Replaces a substring 'hi Bob'.replace('Bob','John')


→ 'hi John'

split() Splits into an array 'a,b,c'.split(',') → ['a','b','c']

slice() Extracts part of a 'hello'.slice(1,3) → 'el'


string

length Number of characters 'hello'.length →5

template literals Embed values in `Hello ${name}!`


strings

Array Methods
Method What It Does Returns
forEach(fn) Runs function on each item undefined
— no return value

map(fn) Creates new array with New array


transformed items

filter(fn) Creates new array with New array


items that pass test

find(fn) Returns the first item that One item or undefined


passes test

findIndex(fn) Returns index of first Number or -1


matching item

includes(val) Checks if array contains Boolean


value

indexOf(val) Returns index of first Number or -1


occurrence

push(val) Adds item to end New length

pop() Removes and returns last Removed item


Method What It Does Returns
item

shift() Removes and returns first Removed item


item

unshift(val) Adds item to start New length

splice(i,n) Removes n items starting Removed items


at index i

slice(s,e) Returns a portion of the New array


array (no mutation)

join(sep) Joins array into a string String

sort(fn) Sorts the array (mutates Sorted array


original)

reverse() Reverses order (mutates Reversed array


original)

reduce(fn,init) Reduces array to a single Any value


value

some(fn) Returns true if any item Boolean


passes test

every(fn) Returns true if all items Boolean


pass test

flat() Flattens nested arrays one New array


level

concat(arr) Merges two arrays New array

Number Methods
[Link](4.6); // 5 — rounds to nearest integer
[Link](4.9); // 4 — always rounds down
[Link](4.1); // 5 — always rounds up
[Link](-10); // 10 — absolute value
[Link](1, 5, 3); // 5 — largest number
[Link](1, 5, 3); // 1 — smallest number
[Link](); // random number 0 to 0.999...
[Link]() * 100; // random 0 to 99.9
[Link]([Link]() * 10); // random integer 0 to 9
[Link](2); // '3.14' — rounds to 2 decimal places
parseInt('42px'); // 42 — extracts integer from string
parseFloat('3.14rem'); // 3.14 — extracts float
isNaN('hello'); // true — checks if value is Not a Number

This reference is your companion for every project you build.


HTML gives it structure. CSS gives it beauty. JavaScript gives it life.

You might also like