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.
Understanding Web Development Fundamentals
A browser does more than place words and pictures on a screen. It reads the HTML as a tree of related elements. A heading inside a main section has a different meaning from bold-looking text inside a generic container.
This is why semantic elements matter. Use header, nav, main, section, article, footer, button, and label when they describe the job of the content. Good structure helps screen readers describe the page.
It helps search tools understand it. It makes your own code easier to edit months later. A page made mostly from unnamed containers can look correct while being difficult to use or maintain.
CSS works through a cascade. Several rules may try to style the same element, and the browser must choose one. Specificity is part of that decision, but order matters too when competing rules have equal strength.
Later rules can replace earlier ones. Inherited properties can pass from a parent element to its children, while properties such as margin usually do not. Browser developer tools are essential here.
Inspect an element, view its applied rules, and notice which declarations are crossed out. That view often reveals the real problem faster than guessing. When layouts seem too wide or have unexpected gaps, inspect the box model before changing random values.
JavaScript runs after the browser loads or while a person interacts with the page. An event, such as a click, key press, or form submission, can trigger a function. That function can read a value, make a decision, then update part of the document.
The DOM is the browser's in-memory model of the page. JavaScript can select an element from that model, change its text, add a class, or create new content. Keep this work focused.
A small function with one clear task is easier to test. Form code needs special care. Check user input before using it, show clear error messages, and never trust input simply because it came from a form.
Responsive design is not just shrinking a desktop page. Small screens change how people read, tap, and move through content. A row of links may need to become a stacked menu.
A multi-column layout may need one column so text remains readable. Test by narrowing the browser window, then test on an actual phone when possible. Accessibility belongs in every stage of this work.
Images need useful alternative text when they convey information. Form controls need visible labels. Keyboard users need a clear focus indicator and a logical tab order.
Color alone should not communicate an error or status. Strong contrast, readable text size, and buttons with enough tap space help nearly everyone, including people using a device outdoors or with one hand.