Unit 1 - Notes

INT219 6 min read

Unit 1: HTML5 and CSS3 Foundations

1. HTML Document Structure

HTML (HyperText Markup Language) provides the skeletal structure of a web page. HTML5 is the latest evolution of the standard.

Basic Boilerplate

Every valid HTML5 document must follow a specific structure to be interpreted correctly by browsers.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html lang="en">: The root element. The lang attribute is crucial for accessibility (screen readers) and SEO.
<head>: Contains meta-information not visible to users (metadata, title, CSS links).
<meta charset="UTF-8">: Sets character encoding to standard UTF-8 (covers almost all characters and symbols).
<meta name="viewport">: Essential for responsive design; ensures the page renders correctly on mobile devices.
<body>: Contains the visible content of the page.

2. Semantic HTML Elements

Semantic HTML introduces tags that clearly describe their meaning to both the browser and the developer. This improves SEO and Accessibility (a11y).

Tag	Description
`<header>`	Introductory content, logos, or navigation links.
`<nav>`	A section of navigation links.
`<main>`	The dominant content of the `<body>`. Should be unique per page.
`<article>`	Self-contained content (e.g., a blog post, news story).
`<section>`	A thematic grouping of content, typically with a heading.
`<aside>`	Content tangentially related to the main content (sidebars).
`<footer>`	Copyright info, contact details, sitemap links.

Example:

HTML

<article>
    <header>
        <h2>Blog Post Title</h2>
        <p>Published on <time datetime="2023-10-01">Oct 1, 2023</time></p>
    </header>
    <p>This is the main content of the article.</p>
</article>

3. Forms and Input Controls

Forms allow users to send data to a server.

The `<form>` Element

action: The URL where form data is sent.
method: HTTP method (GET appends data to URL; POST sends data in the HTTP body).

Input Types and Attributes

HTML5 introduced specific input types for better mobile keyboards and validation.

HTML

<form action="/submit" method="POST">
    <!-- Label connects to input via 'for' and 'id' for accessibility -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required placeholder="Enter name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="pwd" minlength="8">

    <!-- Radio buttons (group by name) -->
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>

    <!-- Dropdown -->
    <select name="country">
        <option value="usa">USA</option>
        <option value="can">Canada</option>
    </select>

    <button type="submit">Register</button>
</form>

4. Multimedia Elements

Native support for audio and video without plugins.

Images

<img>: Self-closing tag.
alt: Alternative text (Mandatory for accessibility).
src: Source path.

Audio and Video

Both support the controls attribute to show play/pause buttons.

HTML

<!-- Video -->
<video controls width="250" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

5. CSS Fundamentals

CSS (Cascading Style Sheets) controls the presentation/visuals of the HTML.

Syntax

CSS

selector {
    property: value;
}

Inclusion Methods

Inline: <h1 style="color: blue;"> (Avoid—hard to maintain).
Internal: <style> tag in <head>.
External: <link rel="stylesheet" href="style.css"> (Best practice).

6. Selectors and Specificity

Browsers decide which styles to apply based on specificity weight.

Common Selectors

Universal: * (Selects everything).
Type/Tag: h1, p, div.
Class: .classname (Reusable).
ID: #idname (Unique per page).
Descendant: div p (All <p> inside <div>).
Child: div > p (Direct children only).
Pseudo-classes: :hover, :focus, :nth-child(2).

Specificity Hierarchy (The "Cascade")

If two rules conflict, the one with higher specificity wins.

!important (Overrides everything—use sparingly).
Inline Styles: (1,0,0,0)
IDs: (0,1,0,0)
Classes, Attributes, Pseudo-classes: (0,0,1,0)
Elements/Tags: (0,0,0,1)

Example: #header p (1 ID + 1 Tag) is more specific than .text (1 Class).

7. The Box Model

Every element in HTML is a rectangular box. Understanding this is crucial for layout.

Components (Inside Out)

Content: The actual text or image.
Padding: Transparent space inside the border (pushes border away from content).
Border: The line surrounding the padding.
Margin: Transparent space outside the border (pushes other elements away).

Box Sizing

By default, width + padding + border = Total rendered width. This causes layout math headaches.

Best Practice: Use border-box.

CSS

* {
    box-sizing: border-box;
}

With border-box, padding and border are included within the specified width.

8. Positioning and Display Properties

Display Property

Controls how an element behaves in the flow.

block: Takes full width, starts on a new line (e.g., div, p).
inline: Takes only necessary width, no new line, cannot set width/height (e.g., span, a).
inline-block: Flows like text but allows width/height/padding setting.
none: Removes element from the DOM flow entirely (vs visibility: hidden which hides it but keeps the space).

Position Property

static: Default. follows normal document flow.
relative: Positioned relative to its normal position. Useful as a parent for absolute elements.
absolute: Removed from flow; positioned relative to the nearest positioned ancestor.
fixed: Positioned relative to the viewport (stays while scrolling).
sticky: Toggles between relative and fixed based on scroll position.

9. Flexbox and Grid Basics

Modern Layout Systems replacing float-based layouts.

Flexbox (One-Dimensional)

Good for rows or columns (navbars, centering items).

Parent: display: flex;
Axes: Main Axis (row default) vs Cross Axis.
Properties:
- justify-content: Aligns along main axis (e.g., center, space-between).
- align-items: Aligns along cross axis (e.g., center, stretch).
- flex-direction: row or column.

CSS Grid (Two-Dimensional)

Good for complex layouts (rows and columns simultaneously).

Parent: display: grid;

Defining Structure:

CSS

    .container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* 3 columns, middle is widest */
        grid-template-rows: 100px auto;
        gap: 10px;
    }

Key Unit: fr (Fraction of available space).

10. Responsive Design Principles

Creating sites that work on all screen sizes.

The Viewport Meta Tag

(See HTML Structure). Without this, phones render desktop versions zoomed out.

Media Queries

Conditional CSS based on device characteristics.

CSS

/* Mobile First Approach: Default styles are for mobile */
body {
    font-size: 16px;
}

/* Tablet styles */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

Fluid Units

%: Relative to parent.
vw / vh: Percentage of Viewport Width/Height.
rem: Relative to root HTML font-size (accessible).
em: Relative to current element font-size.

11. Introduction to Modern CSS Workflows

Writing raw CSS scales poorly in large projects.

CSS Preprocessors (Sass/SCSS): Adds programming features to CSS like variables, nesting, and mixins.
- Example: $primary-color: #333;
CSS Variables (Custom Properties): Native variables.
- Usage: --main-color: blue; accessed via var(--main-color).
Methodologies:
- BEM (Block Element Modifier): Naming convention to prevent style leaks (e.g., .card__button--active).
Frameworks: Bootstrap, Tailwind CSS (Utility-first).

12. Version Control Fundamentals (Git & GitHub)

Concepts

Version Control: System to track changes to code over time.
Git: The software installed on your computer (local).
GitHub: A cloud hosting service for Git repositories (remote).

The Workflow

Repository (Repo): The project folder.
Staging Area: Preparing specific files to be saved.
Commit: Taking a snapshot of the staged files.

Essential Commands

git init: Initialize a new git repo in the current folder.
git clone [url]: Copy a repo from GitHub to your computer.
git status: Check which files have changed.
git add [file]: Add file to staging area (git add . for all).
git commit -m "Message": Save snapshot with a descriptive message.
git push: Upload local commits to GitHub.
git pull: Download changes from GitHub to local.
git branch: List branches.
git checkout -b [branch-name]: Create and switch to a new branch (safe workspace).

Unit 2

Unit 1 - Notes

Table of Contents

Unit 1: HTML5 and CSS3 Foundations

1. HTML Document Structure

Basic Boilerplate

2. Semantic HTML Elements

3. Forms and Input Controls

The <form> Element

Input Types and Attributes

4. Multimedia Elements

Images

Audio and Video

5. CSS Fundamentals

Syntax

Inclusion Methods

6. Selectors and Specificity

Common Selectors

Specificity Hierarchy (The "Cascade")

7. The Box Model

Components (Inside Out)

Box Sizing

8. Positioning and Display Properties

Display Property

Position Property

9. Flexbox and Grid Basics

Flexbox (One-Dimensional)

CSS Grid (Two-Dimensional)

10. Responsive Design Principles

The Viewport Meta Tag

Media Queries

Fluid Units

11. Introduction to Modern CSS Workflows

12. Version Control Fundamentals (Git & GitHub)

Concepts

The Workflow

Essential Commands

The `<form>` Element