HTML5, CSS and responsive page structure notes — Unit 1

The World Wide Web (WWW) is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs), which may be interlinked by hypertext, and are accessible over the Internet.

⇒1.1 Client-Server Architecture

The web operates on a client-server architecture. The client (usually a web browser) sends an HTTP request to the server, and the server responds with an HTTP response containing the requested resource (like an HTML document, image, or stylesheet).

⇒1.2 Core Technologies

• HTML (HyperText Markup Language): Provides the structural foundation and content of a web page.
• CSS (Cascading Style Sheets): Dictates the visual presentation, layout, and styling of the HTML content.
• JavaScript: Adds interactivity, logic, and dynamic behavior to the otherwise static HTML/CSS.

HTML is a markup language, not a programming language. It uses 'tags' to annotate text so that the browser knows how to structure it.

⇒2.1 The Standard HTML5 Boilerplate

⇒2.2 Understanding the Tags

• `<!DOCTYPE html>`: Tells the browser to render the page in standard HTML5 mode, avoiding 'quirks mode'.
• `<head>`: Contains metadata (data about data), stylesheets, and scripts. Nothing here is visible on the page itself (except the `<title>`).
• `<body>`: Contains the actual visible content of the page.

Before HTML5, developers heavily relied on generic `<div>` and `<span>` tags to structure pages. This was difficult for search engines and screen readers to understand. HTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer.

⇒3.1 Key Semantic Tags

• `<header>`: Contains introductory content or navigational links. Typically contains the logo and main menu.
• `<nav>`: Specifically wraps the major navigation blocks of the site.
• `<main>`: Encapsulates the dominant content of the `<body>`. There should only be one `<main>` per page.
• `<article>`: Represents a self-contained composition that could be independently distributed (e.g., a blog post or news article).
• `<section>`: A thematic grouping of content, typically with a heading.
• `<aside>`: Content loosely related to the main content (e.g., sidebars, call-out boxes).
• `<footer>`: Contains copyright data, links to terms of service, and author information.

⇒3.2 Why Semantics Matter

Semantic HTML is crucial for Accessibility (a11y), allowing visually impaired users' screen readers to navigate the page logically. It is also critical for SEO (Search Engine Optimization), helping Google understand which parts of your page are the most important.

Forms are the primary method of gathering data from the user and sending it to a server.

⇒4.1 The `<form>` Element

A form requires two critical attributes:

• `action`: The URL of the server-side script that will process the data.
• `method`: The HTTP method used to send the data (typically `GET` for fetching data or `POST` for sensitive/large data submissions).

⇒4.2 HTML5 Input Enhancements

HTML5 introduced several new `type` attributes for the `<input>` element. These automatically provide built-in validation and trigger specific mobile keyboards.

Before HTML5, playing audio and video required third-party plugins like Adobe Flash. HTML5 introduced native `<audio>` and `<video>` tags.

⇒5.1 The `<video>` Element

Providing multiple `<source>` tags allows the browser to choose the format it supports (e.g., MP4 for Safari, WebM for Chrome). The `controls` attribute adds play/pause buttons.

⇒5.2 The `<canvas>` Element

The `<canvas>` element provides a blank drawing board that can be manipulated using JavaScript. It is used to draw 2D graphics, create animations, and build complex web games directly in the browser without plugins.

CSS handles the visual presentation of HTML. The word 'Cascading' means that styles can fall (cascade) from one stylesheet to another, enabling multiple stylesheets to be used on one HTML document.

⇒6.1 CSS Syntax

A CSS rule consists of a Selector and a Declaration Block.

⇒6.2 Ways to include CSS

• Inline: Using the `style` attribute directly on an HTML tag. (Highly discouraged due to poor maintainability).
• Internal: Using a `<style>` tag within the HTML `<head>`. (Useful for single-page templates).
• External (Best Practice): Linking to a separate `.css` file using `<link rel="stylesheet" href="styles.css">` in the `<head>`. Allows the stylesheet to be cached and reused across many pages.

Selectors define which HTML elements the CSS rules apply to.

⇒7.1 Common Selectors

⇒7.2 The Cascade and Specificity

When two rules conflict (e.g., one rule says paragraphs are red, another says they are blue), the browser uses a scoring system called Specificity to determine the winner.

• Inline styles win over everything.
• IDs score higher than Classes.
• Classes score higher than Element tags.
• If specificity scores are identical, the rule defined last in the stylesheet wins (the cascade).
• Using `!important` overrides everything, but is considered bad practice because it makes debugging difficult.

The Box Model is the absolute foundation of CSS layout. Every single element in HTML is considered to be a rectangular box.

⇒8.1 Layers of the Box Model

From the inside out, the box consists of:

• Content: The actual text or image.
• Padding: Transparent space inside the box, between the content and the border. The background color fills the padding.
• Border: A line surrounding the padding (can be visible or invisible).
• Margin: Transparent space outside the border, pushing other elements away.

⇒8.2 `box-sizing: border-box`

By default, if you set a width of 100px, and a padding of 20px, the total visual width becomes 140px (100 + 20 left + 20 right). This makes layouts math-heavy. Setting `box-sizing: border-box` forces the padding and border to be absorbed into the declared width, so the box remains exactly 100px wide. This is considered a universal best practice.

⇒9.1 The `display` Property

• `display: block`: The element takes up the full width available and forces a line break before and after (e.g., `<div>`, `<h1>`, `<p>`).
• `display: inline`: The element only takes up as much width as necessary, and does not force line breaks. You cannot set width or height on inline elements (e.g., `<span>`, `<a>`).
• `display: inline-block`: Behaves like inline (no line breaks), but respects width and height properties.
• `display: none`: completely removes the element from the document flow.

⇒9.2 The `position` Property

• `static`: Default flow.
• `relative`: Positioned relative to its normal static position. Leaves a 'ghost' space where it used to be.
• `absolute`: Removed from normal flow. Positioned relative to its closest positioned ancestor (any parent not static).
• `fixed`: Removed from flow. Positioned relative to the browser viewport (stays put when scrolling).
• `sticky`: Toggles between relative and fixed depending on scroll position.

Before Flexbox, layouts were hacked together using floats and tables. Flexbox (CSS3) is a one-dimensional layout model designed to distribute space dynamically and align items beautifully.

⇒10.1 The Flex Container

To use flexbox, you declare `display: flex` on a parent element. This turns its direct children into 'flex items'.

• `flex-direction`: Defines the main axis (`row` (default), `column`, `row-reverse`, `column-reverse`).
• `justify-content`: Aligns items along the main axis (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`).
• `align-items`: Aligns items along the cross axis (`stretch`, `center`, `flex-start`, `flex-end`).
• `flex-wrap`: Allows items to wrap onto multiple lines if they run out of space instead of shrinking.

⇒10.2 Flex Items

Children can be controlled individually using properties like `flex-grow` (how much it can expand), `flex-shrink` (how much it can shrink), and `order` (changing the visual order without touching HTML).

While Flexbox is one-dimensional (handles rows OR columns), CSS Grid is a two-dimensional layout system (handles rows AND columns simultaneously). It is the most powerful layout system available in CSS.

⇒11.1 Defining a Grid

The `fr` (fraction) unit is unique to Grid. `1fr` means 'one part of the available remaining space'. In the example above, the second column takes 1/3 of the remaining space, and the third takes 2/3.

⇒11.2 Grid Template Areas

A highly visual way to define layouts by naming grid areas and arranging them like ascii art:

RWD is the practice of building a website so that it automatically adapts its layout and content to fit the screen size of any device (desktop, tablet, mobile).

⇒12.1 The Viewport Meta Tag

The foundation of RWD is the viewport tag in the HTML `<head>`:

This prevents mobile browsers from 'faking' a desktop width and zooming way out, making text unreadable.

⇒12.2 Fluid Layouts

Instead of hardcoding widths in pixels (`width: 500px`), RWD relies on relative units like percentages (`width: 50%`) or viewport units (`vw`, `vh`). This allows boxes to stretch and squeeze as the window resizes.

Fluid layouts alone aren't enough. A 3-column layout that looks great on a desktop will be unreadable on a phone, even if it uses percentages. Media Queries allow you to apply completely different CSS rules based on the screen width.

⇒13.1 Syntax

⇒13.2 Mobile-First Approach

Modern best practice dictates writing the default CSS for mobile screens first, and then using `min-width` media queries to add complexity as the screen gets wider. This prevents mobile devices from having to download and override heavy desktop CSS rules.

⇒14.1 Responsive Images

Images with a fixed width will overflow their containers on small screens. The golden rule for responsive images is:

This ensures the image never scales larger than its original size (preventing pixelation), but will shrink dynamically to fit inside any container.

⇒14.2 `rem` vs `em` Typography

• `px` (Pixels): Hardcoded. Doesn't scale if the user changes browser default font sizes.
• `em`: Relative to the font-size of the direct parent element. Can cause compounding math nightmares if nested deeply.
• `rem` (Root em): Relative to the font-size of the root `<html>` element. This is the modern standard for typography. If you change the root font size in a media query, all `rem` based text across the entire site scales perfectly in unison.

Before CSS variables, developers had to use preprocessors like SASS or LESS to store reusable values (like brand colors). CSS3 introduced native variables.

⇒15.1 Declaration and Usage

Variables are usually declared in the `:root` pseudo-class so they are available globally. They must start with two dashes `--`.

⇒15.2 Why use variables?

They make maintaining large stylesheets trivial. If the brand color changes, you only update it in one place. Furthermore, unlike SASS variables which compile to static CSS, native CSS variables exist at runtime, allowing them to be dynamically manipulated by JavaScript (essential for Dark Mode toggles).

CSS allows you to animate property changes smoothly, improving the user experience without requiring JavaScript.

⇒16.1 Transitions

Transitions interpolate a change from one state to another (e.g., changing color on hover).

⇒16.2 Keyframe Animations

For complex, multi-step animations, `@keyframes` are used. They define specific styles at specific percentages of the animation duration.

Writing raw CSS for large projects can quickly lead to unmaintainable 'spaghetti code'. Frameworks and architectural methodologies help structure CSS.

⇒17.1 Utility-First CSS (Tailwind)

Instead of writing custom classes like `.card`, frameworks like Tailwind CSS provide thousands of single-purpose utility classes (e.g., `flex`, `pt-4`, `text-center`, `text-red-500`). You build components directly in the HTML by composing these classes. It leads to highly maintainable, rapidly built UIs without ever leaving the HTML file.

⇒17.2 Component-Based Frameworks (Bootstrap)

Frameworks like Bootstrap provide pre-designed, ready-to-use components like Modals, Navbars, and Buttons. They are excellent for fast prototyping, but often result in websites that all look generically similar unless heavily customized.

⇒17.3 BEM (Block Element Modifier)

A naming convention for writing pure CSS. It ensures classes are highly specific and don't clash. Syntax: `.block__element--modifier`. (e.g., `.card__title--large`).

Web accessibility ensures that websites and tools are designed so that people with disabilities (visual, auditory, motor, cognitive) can use them.

⇒18.1 WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) dictate standards. Key principles (POUR):

• Perceivable: Information must be presentable to users in ways they can perceive (e.g., Alt text on all images for screen readers).
• Operable: UI components must be operable (e.g., the entire site must be navigable using only the Tab key, with visible focus states).
• Understandable: Information and operation must be understandable.
• Robust: Content must be robust enough to be interpreted reliably by assistive technologies.

⇒18.2 Color Contrast

Text must have a sufficient contrast ratio against its background to be readable by users with color blindness or low vision (minimum ratio of 4.5:1 for normal text).

CSS preprocessors are scripting languages that extend CSS, allowing developers to write code in one language and compile it into standard CSS.

⇒19.1 Features of SASS

SASS (Syntactically Awesome Style Sheets) provides features that standard CSS lacks (or lacked until recently):

• Nesting: You can nest CSS selectors inside each other, mirroring the HTML structure. This makes code vastly more readable.
• Mixins: Reusable blocks of CSS. You can write a block of code (like vendor prefixes for a specific CSS3 feature) and 'include' it anywhere, even passing variables into it like a function.
• Functions & Math: Perform complex math operations (`100px / 3`) directly in the stylesheet.
• Partials: Break stylesheets into dozens of tiny, manageable files (e.g., `_buttons.scss`, `_header.scss`) and compile them into a single `main.css` file for production.

⇒20.1 Subgrid

A relatively new CSS Grid feature. Normally, grid tracks are isolated to the immediate children of the grid container. `subgrid` allows nested elements to participate in the sizing of their parent's grid, allowing for perfect alignment of nested components across different containers.

⇒20.2 CSS Performance: Repaints and Reflows

Animating certain CSS properties forces the browser to recalculate the layout of the entire page (Reflow) or redraw the pixels (Repaint), which tanks performance and causes stuttering.

• Bad to Animate: `width`, `height`, `margin`, `top`, `left`. (Triggers Reflows).
• Safe to Animate: `transform` (translate, scale, rotate) and `opacity`. These are handed off to the GPU (Hardware Acceleration) and do not trigger layout calculations, resulting in silky smooth 60fps animations.