Web Design

4.

Foundational Technologies for Web Design

4.1.

HyperText Markup Language (HTML)

4.1.1.

HTML Purpose and Structure

4.1.1.1.

Document Structure

4.1.1.2.

Content Semantics

4.1.1.3.

Accessibility Foundation

4.1.2.

Document Structure

4.1.2.1.

DOCTYPE Declaration

4.1.2.2.

4.1.2.3.

4.1.2.4.

4.1.2.5.

4.1.3.

Semantic HTML Elements

4.1.3.1.

4.1.3.2.

Navigation Element

4.1.3.3.

4.1.3.4.

Section Element

4.1.3.5.

Article Element

4.1.3.6.

4.1.3.7.

4.1.4.

Text Content Elements

4.1.4.1.

Headings (H1-H6)

4.1.4.2.

4.1.4.3.

Emphasis and Strong

4.1.4.4.

4.1.4.5.

4.1.5.

Links and Media

4.1.5.1.

4.1.5.2.

Link Attributes

4.1.5.3.

4.1.5.4.

Image Attributes

4.1.5.5.

Figure and Figcaption

4.1.6.

Lists and Tables

4.1.6.1.

4.1.6.2.

Unordered Lists

4.1.6.3.

Definition Lists

4.1.6.4.

Table Structure

4.1.6.5.

4.1.6.6.

Table Accessibility

4.1.7.

Forms and Input Elements

4.1.7.1.

4.1.7.2.

4.1.7.3.

Labels and Accessibility

4.1.7.4.

Fieldsets and Legends

4.1.7.5.

Form Validation

4.2.

Cascading Style Sheets (CSS)

4.2.1.

CSS Purpose and Syntax

4.2.1.1.

Styling Content

4.2.1.2.

CSS Syntax Rules

4.2.1.3.

Comments in CSS

4.2.2.

Selectors and Targeting

4.2.2.1.

4.2.2.2.

Class Selectors

4.2.2.3.

4.2.2.4.

Attribute Selectors

4.2.2.5.

4.2.2.6.

Pseudo-elements

4.2.2.7.

Combinator Selectors

4.2.3.

CSS Fundamentals

4.2.3.1.

4.2.3.2.

Specificity Rules

4.2.3.3.

4.2.3.4.

CSS Custom Properties

4.2.4.

4.2.4.1.

4.2.4.2.

4.2.4.3.

4.2.4.4.

4.2.4.5.

Box-sizing Property

4.2.5.

Layout Techniques

4.2.5.1.

4.2.5.2.

4.2.5.2.1.

Flex Container Properties

4.2.5.2.2.

Flex Item Properties

4.2.5.2.3.

Alignment and Justification

4.2.5.3.

CSS Grid Layout

4.2.5.3.1.

Grid Container Setup

4.2.5.3.2.

Grid Item Placement

4.2.5.3.3.

Grid Areas and Lines

4.2.5.3.4.

Responsive Grid Patterns

4.2.5.4.

4.2.5.4.1.

Static Positioning

4.2.5.4.2.

Relative Positioning

4.2.5.4.3.

Absolute Positioning

4.2.5.4.4.

Fixed Positioning

4.2.5.4.5.

Sticky Positioning

4.2.6.

Typography and Text Styling

4.2.6.1.

Font Properties

4.2.6.2.

4.2.6.3.

Text Decoration

4.2.6.4.

4.2.6.5.

Line Height and Letter Spacing

4.2.7.

Colors and Backgrounds

4.2.7.1.

Color Properties

4.2.7.2.

Background Colors

4.2.7.3.

Background Images

4.2.7.4.

4.2.7.5.

Multiple Backgrounds

4.2.8.

Transitions and Animations

4.2.8.1.

CSS Transitions

4.2.8.2.

Transition Properties

4.2.8.3.

4.2.8.4.

Keyframe Animations

4.2.8.5.

Animation Performance

4.2.9.

CSS Preprocessors

4.2.9.1.

4.2.9.1.1.

4.2.9.1.2.

4.2.9.1.3.

4.2.9.1.4.

Partials and Imports

4.2.9.2.

4.2.9.2.1.

4.2.9.2.2.

4.2.9.2.3.

4.3.

Introduction to JavaScript for Designers

4.3.1.

JavaScript Role in Web Design

4.3.1.1.

Adding Interactivity

4.3.1.2.

Enhancing User Experience

4.3.1.3.

Progressive Enhancement

4.3.2.

DOM Manipulation Basics

4.3.2.1.

Selecting Elements

4.3.2.2.

Changing Content

4.3.2.3.

Modifying Styles

4.3.2.4.

Adding and Removing Classes

4.3.3.

4.3.3.1.

4.3.3.2.

4.3.3.3.

4.3.3.4.

Keyboard Events

4.3.3.5.

4.3.4.

Basic UI Enhancements

4.3.4.1.

Show and Hide Elements

4.3.4.2.

Toggle Functionality

4.3.4.3.

Simple Animations

4.3.4.4.

Form Validation

4.3.4.5.

Image Galleries

4.3.5.

JavaScript Libraries and Frameworks

4.3.5.1.

4.3.5.2.

Modern Framework Overview

4.3.5.3.

When to Use JavaScript

Previous

3. Core Principles of User Interface (UI) Design

Go to top

Next

5. Responsive and Adaptive Design