Scribd
Upload
9 views6 pages

Chapter 2

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views6 pages

Chapter 2

Uploaded by

faris.hakmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

### 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
(`https://example.com/page?search=term#section`).
- **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 `&amp;` 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/pic.jpg`).
- Absolute URLs (`https://example.com`).
- **Special Links**:
- `mailto:` links for email.
- `tel:` 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.

You might also like