### Chapter 2: How the Web Works
- **HTTP/HTTPS**: Know the request-response cycle (client, server, and status codes
like 200 and 404).
- **Web Page Components**:
- **HTML**: Structure.
- **CSS**: Style.
- **JavaScript**: Interactivity.
- **URL Anatomy**: Protocol, domain, path, query strings, and fragments
(`[Link]
- **Web Browsers and Servers**: Understand how browsers render web pages and
how servers respond to requests.
- **DNS (Domain Name System)**: Converts domain names into IP addresses.
---
### Chapter 3: Big Concepts
- **Responsive Design Principles**: Fluid grids, flexible images, media queries.
- **Progressive Enhancement**: Layering technologies to enhance user experience
in modern browsers.
- **Graceful Degradation**: Ensures older browsers can still access basic
functionality.
- **Accessibility (WCAG Guidelines)**:
- Alt text, keyboard navigation, and semantic tags.
- ARIA roles for dynamic content.
- **Performance Optimization**:
- Reduce file sizes (images, CSS, and JavaScript).
- Minimize HTTP requests (e.g., use CSS sprites).
---
### Chapter 4: Creating a Simple Page
- **HTML Basics**:
- Tags and attributes: `<html>`, `<head>`, `<body>`, `<title>`.
- Nesting rules: Proper opening and closing of tags.
- **Semantic HTML**:
- Tags like `<header>`, `<footer>`, `<main>`, `<nav>`, `<article>`, `<aside>`.
- Why semantic HTML improves accessibility and SEO.
- **Validation**: How to debug HTML issues using validation tools like W3C Validator.
---
### Chapter 5: Marking Up Text
- **Paragraphs and Headings**: Proper use of `<p>` and `<h1>`–`<h6>` for
document structure.
- **Lists**:
- `<ul>` (unordered) and `<ol>` (ordered).
- Nested lists and `<dl>` for definitions.
- **Inline Elements**:
- `<em>` vs. `<strong>` for emphasis.
- `<code>` for displaying code snippets.
- **Generic Containers**: When and why to use `<div>` and `<span>`.
- **Character Escapes**: Symbols like `&` for `&`.
---
### Chapter 6: Adding Links
- **Anchor Tag Anatomy**:
- `href` for the link destination.
- `target="_blank"` for opening links in a new tab.
- **Relative vs. Absolute Links**:
- Relative paths (`../images/[Link]`).
- Absolute URLs (`[Link]
- **Special Links**:
- `[Link] links for email.
- `[Link] links for phone numbers.
---
### Chapter 7: Adding Images
- **Image Formats**:
- **JPEG**: Best for photos.
- **PNG**: Transparency.
- **SVG**: Vector graphics.
- **Image Tag Anatomy**:
- `<img src="path" alt="description">`.
- Importance of `alt` for accessibility.
- **Responsive Images**:
- `srcset` and `<picture>` for high-DPI and mobile-optimized images.
- Attributes like `sizes` to define layout behavior.
---
### Chapter 11: Introducing CSS
- **CSS Basics**:
- Syntax: `selector { property: value; }`.
- External CSS (`<link>`), Internal CSS (`<style>`), and Inline CSS (within a tag).
- **Cascade and Specificity**:
- Inline styles > ID selectors > Class selectors > Element selectors.
- Use `!important` sparingly to override rules.
- **Box Model Concept**: Content, padding, border, margin.
---
### Chapter 12: Formatting Text
- **Font Properties**:
- Font stack: `font-family: "Arial", sans-serif;`.
- Units: `px`, `em`, `rem`.
- **Text Styling**:
- `text-align: center|left|right|justify`.
- `text-transform: uppercase|lowercase`.
- **Decorations**:
- `text-decoration: none|underline`.
- Shadow: `text-shadow: 2px 2px 4px #000;`.
---
### Chapter 13: Colors and Backgrounds
- **Color Systems**:
- Hexadecimal: `#FFFFFF`.
- RGB: `rgb(255, 255, 255)`.
- HSL: `hsl(0, 100%, 50%)`.
- **Backgrounds**:
- `background-color` and `background-image`.
- Use `background-size` for scaling (`cover` or `contain`).
---
### Chapter 14: Thinking Inside the Box
- **Box Model Components**:
- `content`, `padding`, `border`, and `margin`.
- **Dimension Properties**:
- `width`, `height`, `max-width`, `min-height`.
- **Overflow**: Controls content spilling out of the box (`visible|hidden|scroll|auto`).
---
### Chapter 15: Floating and Positioning
- **Floats**:
- Use `float: left|right` for wrapping content.
- Clear floats using `clear: both`.
- **Positioning**:
- `relative`: Offset relative to normal position.
- `absolute`: Positioned within the nearest relative ancestor.
- `fixed`: Stays in place relative to the viewport.
- `z-index`: Stacks elements.
---
### Chapter 16: CSS Layout with Flexbox and Grid
- **Flexbox**:
- Use `display: flex` to create flexible layouts.
- Control alignment: `justify-content`, `align-items`, `flex-wrap`.
- **Grid**:
- `display: grid` for two-dimensional layouts.
- Properties:
- `grid-template-columns`: Define column sizes (e.g., `1fr 2fr`).
- `grid-gap`: Add space between grid items.
---
### Chapter 17: Responsive Web Design
- **Media Queries**:
- Syntax: `@media (max-width: 768px) { styles }`.
- Use for different breakpoints.
- **Flexible Units**:
- Percentages (`width: 50%`).
- `em` and `rem` for font scalability.
- **Viewport Meta Tag**:
- `<meta name="viewport" content="width=device-width, initial-scale=1">`.
- **Mobile Testing**: Test on actual devices and use developer tools.
