Simple Web Development

Cheatsheet Content

### HTML Basics HTML (HyperText Markup Language) provides the structure of a web page. - **Elements:** Building blocks of HTML, e.g., ` `, ` `, ` `. - Most elements have an opening tag and a closing tag: ` This is a paragraph. ` - Some are self-closing: ` ` - **Attributes:** Provide additional information about an element, e.g., `href` for ` `, `src` and `alt` for ` `. - **Document Structure:** ```html Page Title Welcome This is the main content. © 2023 My Website ``` - **Common Tags:** - ` ` to ` `: Headings - ` `: Paragraph - ` `: Anchor (link), `href` attribute for destination - ` `: Image, `src` for source, `alt` for alternative text - ` `, ` `, ` `: Unordered, Ordered Lists, List Item - ` `, ` `: Generic container elements (block-level and inline, respectively) - ` `, ` `, ` `: Form elements ### CSS Fundamentals CSS (Cascading Style Sheets) controls the presentation and layout of web pages. - **Syntax:** ```css selector { property: value; property: value; } ``` - **Selectors:** Target HTML elements to style. - **Element Selector:** `p { color: blue; }` (styles all ` ` tags) - **Class Selector:** `.my-class { font-size: 16px; }` (styles elements with `class="my-class"`) - **ID Selector:** `#my-id { background-color: lightgray; }` (styles element with `id="my-id"`) - **Descendant Selector:** `div p { margin-bottom: 10px; }` (styles ` ` inside a ` `) - **Box Model:** Every HTML element is a box. - **Content:** The actual content (text, image). - **Padding:** Space between content and border. - **Border:** The border around the content and padding. - **Margin:** Space outside the border. ``` +---------------------+ | Margin | | +-----------------+ | | | Border | | | | +-------------+ | | | | | Padding | | | | | | +---------+ | | | | | | | Content | | | | | | | +---------+ | | | | | +-------------+ | | | +-----------------+ | +---------------------+ ``` - **Common Properties:** - `color`: Text color - `background-color`: Background color - `font-family`, `font-size`, `font-weight`: Text styling - `text-align`: Horizontal alignment (`left`, `center`, `right`) - `display`: How an element is rendered (`block`, `inline`, `inline-block`, `flex`, `grid`) - `width`, `height`: Dimensions - `margin`, `padding`, `border`: Box model properties ### JavaScript Essentials JavaScript adds interactivity and dynamic behavior to web pages. - **Variables:** - `let name = "Alice";` (mutable, block-scoped) - `const age = 30;` (immutable, block-scoped) - `var oldVar = "Legacy";` (mutable, function-scoped - avoid in new code) - **Data Types:** `string`, `number`, `boolean`, `null`, `undefined`, `object`, `symbol`, `bigint`. - **Operators:** `+`, `-`, `*`, `/`, `%` (arithmetic), `==`, `===` (comparison), `&&`, `||`, `!` (logical). - **Functions:** Reusable blocks of code. ```javascript function greet(name) { return `Hello, ${name}!`; } const sayHi = (name) => `Hi, ${name}!`; // Arrow function ``` - **Conditional Statements:** ```javascript if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); } ``` - **Loops:** ```javascript for (let i = 0; i { /* do something */ });` ### Basic Web Concepts - **Client-Server Model:** - **Client:** Your web browser (e.g., Chrome, Firefox) that requests resources. - **Server:** A computer that stores web resources (HTML, CSS, JS, images) and responds to client requests. - **HTTP (Hypertext Transfer Protocol):** The protocol used for communication between client and server. - **Request Methods:** - `GET`: Retrieve data (e.g., loading a page). - `POST`: Send data to be processed (e.g., submitting a form). - **Status Codes:** - `200 OK`: Request successful. - `404 Not Found`: Resource not found. - `500 Internal Server Error`: Server-side error. - **URL (Uniform Resource Locator):** Web address, e.g., `https://www.example.com/path/to/page.html` - `https://`: Protocol - `www.example.com`: Domain name (server address) - `/path/to/page.html`: Path to resource ### Developer Tools Most modern browsers include powerful developer tools. - **Access:** Right-click on a web page and select "Inspect" or press `F12` (Windows/Linux) / `Cmd+Option+I` (Mac). - **Key Panels:** - **Elements:** View and edit HTML and CSS in real-time. - **Console:** Execute JavaScript, view `console.log()` messages, and see errors. - **Sources:** Debug JavaScript code with breakpoints. - **Network:** Monitor network requests (HTTP requests, load times). - **Application:** Inspect local storage, session storage, cookies.