Unit 1: Document Structure
An html element contains head information and the visible page body.
- doctype
- html tag
- head
- body
- title
- page skeleton
QuizWebcode made fun
Browse lessons and examples by difficulty.
An html element contains head information and the visible page body.
Use headings to organize content, paragraphs for text, and lists to group related items.
The a tag links to other pages, websites, email addresses, or phone numbers. The href attribute sets the destination.
Use src for a media location, alt to describe an image, and controls to let people play audio or video.
Semantic elements describe what each part of a page does, helping people and search engines understand its structure.
A div groups block content; a span groups inline content. Add class or id names to identify elements for styling.
Selectors target elements by tag, class, or ID. Group selectors with commas; more specific selectors generally take priority.
CSS can live in an external stylesheet, a style element, or an element's style attribute. The cascade resolves competing rules.
Pseudo-classes select an element's state or position; pseudo-elements style or add a part of an element.
An element's box is made of content, padding, border, and margin. Adjacent vertical margins can collapse into one.
Set an element's width and height, and limit its size with min-width or max-width. border-box includes padding and border in the set size.
Set colors with hex, rgb, or hsl. Backgrounds can use a color, image, or gradient; opacity controls transparency.
Control the font, size, weight, alignment, line spacing, and letter spacing. rem scales from the root size; px is fixed.
Block elements start on a new line; inline elements flow with text. Positioning controls how an element sits in the page.
Flexbox arranges items along a main axis and aligns them across the main axis.
Variables store values. Use let when a value changes and const when its binding stays the same. JavaScript values have different types.
Operators perform calculations, compare values, and combine conditions. Prefer strict equality (===) to avoid automatic type conversion.
Conditionals choose which code runs. Values such as 0, an empty string, null, and undefined are falsy.
Loops repeat code. Use break to exit a loop and continue to skip to its next iteration.
A function declaration names reusable code. Parameters are its named inputs; arguments are the values passed when calling it.
Functions can be stored in variables. Arrow functions offer a shorter syntax, including an implicit return for a single expression.
Backticks create template literals. Insert values with ${...} and write multi-line strings directly.
Destructuring pulls values into variables. Spread expands values; rest gathers remaining values.
Arrays store ordered values. Indexes start at zero; length counts items. push adds to the end and pop removes the last item.
These methods accept a function to process array items. map transforms items, filter keeps matches, and forEach runs an action.
Objects store named properties. Read and update them with dot or bracket notation; properties can contain other objects.
Flex items can wrap, grow, or shrink. Combine nested flex containers and gap to build common layouts.
Grid lays out items in rows and columns. Use it for two-dimensional layouts; Flexbox is often simpler for one direction.
Responsive styles adapt to available space. Start with a mobile-first base and add breakpoints with media queries.
Transitions animate a property change over time. Choose a duration, timing function, and optional delay.
Define animation steps with keyframes, then configure its duration, repetition, and direction.
The DOM is a tree representation of a page. Select one matching element or a collection of matches.
Update text, classes, and styles, or create and append new elements. Use textContent for plain text.
Listen for user actions with addEventListener. The event object provides details; preventDefault stops a browser's default action.
JSON is a text format for exchanging data. Convert a JavaScript value to JSON text or parse JSON text back into a value.
fetch makes a GET request by default and returns a promise. Use then or async/await to handle the response.
Fetch data, then use it to create and render dynamic page content.