Click image to open full size
Web Development Fundamentals Cheat Sheet
A printable reference covering HTML structure, CSS selectors, JavaScript basics, responsive design, and web accessibility for grades 8-12.
Related Tools
Related Labs
Related Worksheets
Related Infographics
Web development fundamentals cover the core skills used to build websites: HTML for structure, CSS for style, and JavaScript for interactivity. Students need this cheat sheet to remember common tags, selector patterns, code syntax, and layout rules while creating web pages. It is designed as a quick binder reference for planning, debugging, and improving beginner to intermediate web projects. The most important ideas are separating content, presentation, and behavior so each part of a website has a clear role. HTML uses nested elements, CSS applies rules with selectors and properties, and JavaScript changes page behavior through variables, functions, events, and the DOM. Responsive and accessible design make websites usable on different devices and by people with different needs.
Key Facts
- A basic HTML page uses <!DOCTYPE html>, <html>, <head>, <title>, and <body> to define the document type, metadata, page title, and visible content.
- HTML elements usually follow the pattern <tag>content</tag>, while void elements such as <img>, <br>, and <input> do not need closing tags.
- A CSS rule follows the pattern selector { property: value; }, such as p { color: blue; font-size: 16px; }.
- CSS specificity generally ranks inline styles highest, then IDs, then classes and attributes, then element selectors.
- The CSS box model calculates total element width as content width + left padding + right padding + left border + right border + left margin + right margin.
- JavaScript variables can be declared with let for changeable values and const for values that should not be reassigned.
- A JavaScript function follows the pattern function name(parameter) { return value; } and is used to reuse a block of code.
- Responsive design often uses @media rules, flexible units such as %, rem, and vw, and layouts such as Flexbox or CSS Grid.
Vocabulary
- HTML
- HTML is the markup language used to structure headings, paragraphs, links, images, forms, and other content on a web page.
- CSS
- CSS is the stylesheet language used to control colors, fonts, spacing, layout, and visual design on a web page.
- JavaScript
- JavaScript is a programming language used to add interactivity, logic, events, and dynamic updates to web pages.
- DOM
- The DOM is the browser's tree-like representation of an HTML document that JavaScript can read and change.
- Selector
- A selector is the part of a CSS rule that chooses which HTML elements the style should apply to.
- Responsive Design
- Responsive design is the practice of making a website adapt to different screen sizes and devices.
Common Mistakes to Avoid
- Forgetting to close nested HTML tags, which is wrong because the browser may guess the structure incorrectly and cause layout or styling problems.
- Using an id for many elements, which is wrong because an id should be unique on a page and repeated styling should usually use a class.
- Writing CSS properties without units, such as width: 300 instead of width: 300px, which is wrong because most length values need a valid unit.
- Changing page content with JavaScript before the HTML has loaded, which is wrong because the element may not exist yet when the script runs.
- Relying only on color to communicate meaning, which is wrong because users with color vision differences or screen readers may miss the information.
Practice Questions
- 1 A CSS box has width: 200px, padding: 10px on each side, border: 2px on each side, and margin: 15px on each side. What is the total horizontal space it takes up?
- 2 Write a CSS rule that makes all elements with the class warning have orange text and bold font weight.
- 3 A page has three buttons, and each button should run the same JavaScript function when clicked. Should you use one shared class or three different ids for styling and event setup? Explain your choice.
- 4 Explain why separating HTML, CSS, and JavaScript usually makes a website easier to build, debug, and maintain.