Front-End Development Overview

Now we'll dive into the building blocks of web development: HTML5 for structure and CSS for styling. These are the fundamental technologies that create the visual foundation of every website.

Learning Objectives

By the end of this part, you will be able to:

  • Create well-structured HTML5 documents with semantic markup
  • Apply CSS styling to control layout, colors, and typography
  • Build responsive web pages that work on all devices
  • Understand the relationship between HTML structure and CSS presentation
  • Use modern CSS features like Flexbox and Grid for layouts

HTML5 Structure and Tags

What is HTML5?

HTML5 (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a webpage, defining elements like headings, paragraphs, images, links, and forms.

HTML Tag Structure

HTML uses tags to define elements. Every HTML element consists of an opening tag, content, and a closing tag:

Basic Tag Structure

<opening-tag>content goes here</closing-tag>

Tag Examples

Opening and Closing Tags

<p>This is a paragraph</p>

<h1>This is a heading</h1>

<div>This is a div container</div>

Self-Closing Tags (Void Elements)

<img src="image.jpg" alt="description"> - No closing tag needed

<br> - Line break (no closing tag)

<input type="text"> - Form input (no closing tag)

Tag Rules

  • Opening tags: Start with < and end with >
  • Closing tags: Start with </ and end with >
  • Nesting: Tags must be properly nested (last opened, first closed)
  • Self-closing: Some elements like <img>, <br>, <input> don't need closing tags
  • Case sensitivity: HTML tags are not case-sensitive, but lowercase is recommended

Common Mistakes to Avoid

  • Missing closing tags: <p>This paragraph<p> (missing /)
  • Wrong nesting order: <div><p>Text</div></p> (wrong order)
  • Extra closing tags: <p>Text</p></p> (extra closing tag)
  • Unclosed tags: <p>Text (missing closing tag)

Basic HTML5 Document Structure

Every HTML5 document follows a standard structure with essential elements:

Basic HTML5 Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Code Explanation

  • <!DOCTYPE html>: Document type declaration that tells the browser this is an HTML5 document
  • <html lang="en">: Root element with language attribute set to English
  • <head>: Contains metadata about the document (not visible on the page)
  • <meta charset="UTF-8">: Specifies character encoding for proper text display
  • <meta name="viewport"...>: Makes the page responsive for mobile devices
  • <title>: Sets the page title shown in browser tabs and bookmarks
  • <body>: Contains all visible content that appears on the webpage

Structure Best Practices

  • Always start with DOCTYPE: Ensures proper HTML5 rendering
  • Include language attribute: Helps with accessibility and SEO
  • Use proper indentation: Makes code readable and maintainable
  • Close all tags: Maintains valid HTML structure
  • Organize head content: Meta tags first, then title, then other elements

Essential HTML5 Tags

HTML5 provides a rich set of semantic tags for creating well-structured content:

<header>

Defines the header section of a document or section

<nav>

Defines navigation links

<main>

Specifies the main content of a document

<section>

Defines a section in a document

<article>

Defines an independent, self-contained content

<aside>

Defines content aside from the main content

<footer>

Defines a footer for a document or section

<figure>

Specifies self-contained content like images

HTML Attributes

HTML attributes provide additional information about HTML elements and modify their behavior. They are always specified in the opening tag and usually come in name/value pairs.

Basic Attribute Syntax

<tag attribute="value">content</tag>
Global Attributes

Attributes that can be used on any HTML element

Element-Specific

Attributes unique to specific HTML elements

Event Attributes

Attributes that respond to user interactions

Data Attributes

Custom attributes for storing extra information

Common HTML Attributes Examples

Global Attributes Demo

This paragraph has multiple global attributes: id, class, style, and title.

Element-Specific Attributes Demo

Link with href, target, and rel attributes
Placeholder image

Form Attributes Demo

Essential Global Attributes

  • id: Unique identifier for an element (use only once per page)
  • class: CSS class names for styling (can be used multiple times)
  • style: Inline CSS styles (use sparingly, prefer external CSS)
  • title: Tooltip text that appears on hover
  • lang: Language of the element content
  • data-*: Custom data attributes for JavaScript

Common Element-Specific Attributes

  • <a>: href, target, rel, download
  • <img>: src, alt, width, height, loading
  • <form>: action, method, enctype, novalidate
  • <input>: type, name, value, placeholder, required, pattern
  • <table>: border, cellpadding, cellspacing, width
  • <meta>: charset, name, content, http-equiv

Element-Specific Attributes Code Examples

/* Anchor tag with multiple attributes */
<a href="https://example.com" target="_blank" rel="noopener noreferrer" download="document.pdf">Download PDF</a>

/* Image tag with various attributes */
<img src="images/photo.jpg" alt="Beautiful landscape photo" width="800" height="600" loading="lazy">

/* Form tag with method and action */
<form action="/submit-form" method="post" enctype="multipart/form-data" novalidate>
    Form content goes here
</form>

/* Input tag with validation attributes */
<input type="email" name="user_email" value="user@example.com" placeholder="Enter your email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

/* Table tag with styling attributes */
<table border="1" cellpadding="10" cellspacing="2" width="100%">
    Table content goes here
</table>

/* Meta tag with various attributes */
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">

Best Practices for Attributes

  • Always quote attribute values: Use quotes around all attribute values
  • Use semantic attributes: Choose attributes that provide meaning, not just styling
  • Validate attributes: Ensure attributes are valid for their elements
  • Accessibility: Include alt text for images, labels for form elements
  • Performance: Use loading="lazy" for images below the fold

Text and Content Tags

HTML5 provides various tags for structuring text content:

Text and Content Tags Code

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<p>This is a <strong>paragraph</strong> with <em>emphasized text</em> and a <a href="#">link</a>.</p>

<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
    <li>Unordered list item 3</li>
</ul>

<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
    <li>Ordered list item 3</li>
</ol>

<blockquote>This is a blockquote that stands out from the rest of the content.</blockquote>

Text Tags Demo

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is a paragraph with emphasized text and a link.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
This is a blockquote that stands out from the rest of the content.

Text Tag Best Practices

  • Heading hierarchy: Use h1 for main title, h2-h6 for subsections in order
  • Semantic meaning: Use <strong> for importance, <em> for emphasis
  • List structure: Use <ul> for unordered lists, <ol> for ordered lists
  • Blockquotes: Use <blockquote> for quoted content from external sources
  • Accessibility: Ensure proper heading structure for screen readers

HTML5 Tables

Tables are used to display data in rows and columns. HTML5 provides semantic table elements for creating structured, accessible data tables:

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Table Demo

Name Email Role Department
John Doe john@example.com Developer Engineering
Jane Smith jane@example.com Designer Design
Mike Johnson mike@example.com Manager Product

Table Best Practices

  • Use semantic elements: <thead>, <tbody>, <tfoot> for structure
  • Include headers: Use <th> for column and row headers
  • Add captions: Use <caption> to describe table content
  • Consider accessibility: Use scope attributes and associate headers with data cells
  • Responsive design: Make tables mobile-friendly with CSS

HTML5 Forms and Inputs

Forms are essential for collecting user input. HTML5 introduces new input types and attributes that make forms more user-friendly and accessible:

Complete Form Structure

<form action="/submit" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        <div class="form-group">
            <label for="name">Full Name:</label>
            <input type="text" id="name" name="name" required placeholder="Enter your full name">
        </div>
    </fieldset>
    <button type="submit">Submit</button>
</form>

Interactive Form Demo

Contact Information
Preferences

Modern HTML5 Input Types

  • Text inputs: text, email, tel, url, password, search
  • Numeric inputs: number, range, date, time, datetime-local
  • Selection inputs: checkbox, radio, select, datalist
  • File inputs: file, image, color
  • Special inputs: hidden, submit, reset, button

Form Validation Attributes

  • required: Field must be filled before submission
  • pattern: Custom regex validation pattern
  • min/max: Minimum and maximum values for numbers/dates
  • placeholder: Hint text displayed in empty fields
  • autocomplete: Browser autocomplete suggestions
  • novalidate: Disable browser validation (use with JavaScript)

CSS Styling and Layouts

What is CSS?

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It controls colors, fonts, spacing, positioning, and responsive behavior, transforming plain HTML into visually appealing websites.

CSS Syntax and Selectors

CSS uses a simple syntax with selectors and declaration blocks. Understanding selectors is crucial for targeting the right elements and applying styles effectively.

CSS Syntax Structure

selector {
    property: value;
    property: value;
}

CSS Rule Components

  • Selector: Targets HTML elements to style (e.g., h1, .class, #id)
  • Declaration Block: Contains one or more property-value pairs
  • Property: The CSS property you want to change (e.g., color, font-size)
  • Value: The value for the property (e.g., #333, 2rem)
  • Semicolon: Separates multiple declarations (required except for last one)

Basic Element Selector

h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

What This Rule Does

  • h1: Selects all h1 heading elements on the page
  • color: #333: Sets the text color to dark gray
  • font-size: 2rem: Makes the text size 2 times the root element size
  • margin-bottom: 1rem: Adds space below the heading

CSS Selector Types

CSS provides various types of selectors to target elements with different levels of specificity:

Element Selectors

Target elements by their tag name

Class Selectors

Target elements with specific class names

ID Selectors

Target a unique element by its ID

Attribute Selectors

Target elements by their attributes

Pseudo-classes

Target elements in specific states

Combinators

Combine selectors for complex targeting

Common Selector Examples

/* Element selector - targets all p elements */
p {
    margin-bottom: 1rem;
}

/* Class selector - targets elements with class="highlight" */
.highlight {
    background-color: yellow;
}

/* ID selector - targets element with id="header" */
#header {
    background-color: #333;
}

/* Attribute selector - targets input elements with type="text" */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Pseudo-class - targets links on hover */
a:hover {
    color: red;
}

/* Combinator - targets p elements inside div elements */
div p {
    color: blue;
}

Selector Specificity Rules

  • Inline styles: Highest priority (style="color: red;")
  • ID selectors: Very high priority (#id)
  • Class selectors: Medium priority (.class)
  • Element selectors: Lower priority (p, h1, div)
  • Universal selector: Lowest priority (*)

Ways to Add CSS Styles

CSS can be added to HTML documents in three different ways, each with its own advantages:

Inline CSS

Styles added directly to HTML elements

Internal CSS

Styles defined in the <style> tag

External CSS

Styles in separate .css files

1. Inline CSS (Not Recommended)

<p style="color: blue; font-size: 18px;">This text is blue and 18px</p>

2. Internal CSS (In <head> section)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

3. External CSS (Recommended)

<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css file */
p {
    color: blue;
    font-size: 18px;
}

Best Practices for CSS Organization

  • Use external CSS files: Better for maintenance and reusability
  • Avoid inline styles: Makes HTML messy and hard to maintain
  • Organize by component: Group related styles together
  • Use meaningful class names: Makes code self-documenting
  • Follow a naming convention: BEM, SMACSS, or similar methodology

CSS Formatting Properties

CSS provides a wide range of properties to control the visual appearance of elements. Understanding these formatting properties is essential for creating attractive and well-designed web pages.

Text Formatting

Control font appearance and text styling

Background & Borders

Style element backgrounds and borders

Layout & Spacing

Control element positioning and spacing

Transforms & Effects

Add visual effects and animations

Text Formatting Properties

/* Typography and text styling */
.text-styling {
    font-family: 'Arial', sans-serif; /* Sets the font type */
    font-size: 16px; /* Controls text size */
    font-weight: bold; /* Makes text bold */
    font-style: italic; /* Makes text italic */
    text-align: center; /* Centers text horizontally */
    text-decoration: underline; /* Adds underline to text */
    line-height: 1.6; /* Controls spacing between lines */
    letter-spacing: 2px; /* Adds space between letters */
    text-transform: uppercase; /* Converts text to uppercase */
}

Text Property Value Explanations

  • font-family: 'Arial', sans-serif: First tries Arial, falls back to any sans-serif font if Arial isn't available
  • font-size: 16px: Sets text size to 16 pixels (common base size for web)
  • font-weight: bold: Makes text thicker (normal = 400, bold = 700, light = 300)
  • font-style: italic: Slants text to the right (normal = upright text)
  • text-align: center: Centers text horizontally (left, center, right, justify)
  • text-decoration: underline: Adds line under text (none, underline, overline, line-through)
  • line-height: 1.6: Sets spacing between lines (1.0 = normal, 1.6 = 60% more space)
  • letter-spacing: 2px: Adds 2px space between each letter (0 = normal spacing)
  • text-transform: uppercase: Converts all text to capital letters (none, uppercase, lowercase, capitalize)

Text Formatting Demo

This text demonstrates all the text formatting properties from the CSS code above!
This is normal text for comparison. Notice the differences in font, size, weight, style, alignment, decoration, line height, letter spacing, and text transform.

Background and Border Properties

/* Background and border styling */
.background-styling {
    background-color: #f0f0f0; /* Sets solid background color */
    background-image: url('image.jpg'); /* Adds background image */
    background-size: cover; /* Scales image to cover entire element */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents image from repeating */
    border: 2px solid #333; /* Creates a 2px solid dark border */
    border-radius: 10px; /* Rounds the corners by 10px */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds subtle shadow effect */
}

CSS Property Value Explanations

  • box-shadow: 0 4px 8px rgba(0,0,0,0.1):
    • 0: Horizontal offset (0 = no left/right shadow)
    • 4px: Vertical offset (4px down = shadow below element)
    • 8px: Blur radius (8px = soft, blurred shadow edge)
    • rgba(0,0,0,0.1): Shadow color (black with 10% opacity)
  • border: 2px solid #333:
    • 2px: Border width (thickness)
    • solid: Border style (solid line, not dashed or dotted)
    • #333: Border color (dark gray)
  • background-size: cover: Scales image to completely cover the element, may crop parts of the image
  • background-position: center: Centers the background image within the element

Background and Border Demo

This element demonstrates background and border properties:
• Checkered background pattern
• 2px solid dark border
• 10px rounded corners
• Subtle drop shadow
This element shows:
• Gradient background
• Dashed white border
• Larger border radius
• Stronger shadow effect

Layout and Spacing Properties

/* Layout and spacing control */
.layout-styling {
    width: 300px; /* Sets element width to 300px */
    height: 200px; /* Sets element height to 200px */
    margin: 20px; /* Adds 20px space around element */
    padding: 15px; /* Adds 15px space inside element */
    position: relative; /* Enables positioning relative to normal flow */
    top: 10px; /* Moves element 10px down from its position */
    left: 20px; /* Moves element 20px right from its position */
    z-index: 1; /* Controls stacking order of elements */
    overflow: hidden; /* Hides content that exceeds element bounds */
}

Layout Property Value Explanations

  • margin: 20px: Creates 20px space on all sides (top, right, bottom, left)
  • padding: 15px: Creates 15px space inside the element on all sides
  • position: relative: Element stays in normal flow but can be moved with top/left/right/bottom
  • top: 10px: Moves element 10px down from its normal position
  • left: 20px: Moves element 20px right from its normal position
  • z-index: 1: Higher numbers appear on top of lower numbers (default is 0)
  • overflow: hidden: Hides any content that extends beyond the element's boundaries

Layout and Spacing Demo

This element demonstrates layout properties:
• 300px × 200px dimensions
• 20px margin around it
• 15px padding inside
• Positioned 10px down, 20px right
• Blue border and background
This element shows:
• Different dimensions
• Smaller margin, larger padding
• Positioned differently
• Higher z-index (appears on top)
• Purple theme

Transforms and Effects Properties

/* Visual effects and animations */
.effects-styling {
    opacity: 0.8; /* Makes element 80% transparent */
    transform: rotate(45deg) scale(1.2); /* Rotates 45° and scales to 120% */
    transition: all 0.3s ease; /* Smooth transition for all changes */
    filter: blur(2px) brightness(1.2); /* Applies blur and brightness effects */
    backdrop-filter: blur(10px); /* Blurs content behind the element */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Clips element to rectangular shape */
}

Effects Property Value Explanations

  • opacity: 0.8: 0 = completely transparent, 1 = completely opaque, 0.8 = 80% visible
  • transform: rotate(45deg) scale(1.2):
    • rotate(45deg): Rotates element 45 degrees clockwise
    • scale(1.2): Makes element 20% larger (1.0 = normal size, 2.0 = double size)
  • transition: all 0.3s ease:
    • all: Applies to all changing properties
    • 0.3s: Duration of the transition (0.3 seconds)
    • ease: Timing function (starts slow, speeds up, slows down)
  • filter: blur(2px) brightness(1.2):
    • blur(2px): Applies 2px blur effect (higher = more blurry)
    • brightness(1.2): Makes 20% brighter (1.0 = normal, 2.0 = twice as bright)
  • backdrop-filter: blur(10px): Blurs the content behind the element by 10px
  • clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%): Creates a rectangular clipping mask using 4 corner points

Transforms and Effects Demo

Hover over me!
• 80% opacity
• Rotated 45°
• Scaled 120%
• Blurred & brightened
• Smooth transitions
Another effects demo:
• Full opacity
• Negative rotation
• Scaled down
• Color shift
• Enhanced contrast

CSS Property Categories

  • Text Properties: font-family, font-size, font-weight, text-align, line-height
  • Background Properties: background-color, background-image, background-size, background-position
  • Border Properties: border, border-radius, border-style, border-width, border-color
  • Layout Properties: width, height, margin, padding, position, display
  • Effect Properties: box-shadow, text-shadow, opacity, transform, filter

Advanced CSS Features

  • CSS Variables: Use custom properties for consistent theming
  • CSS Grid & Flexbox: Modern layout systems for complex designs
  • CSS Animations: Create smooth transitions and keyframe animations
  • CSS Filters: Apply visual effects like blur, brightness, and contrast
  • CSS Custom Properties: Define reusable values for colors, spacing, and more

CSS Layout Examples

Here are some practical examples of CSS layout techniques:

Colors and Typography

CSS provides extensive control over colors, fonts, and text styling:

Color and Typography Examples

body {
    color: #333;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

h1 {
    color: #2563eb;
    font-weight: bold;
}

Box Model and Spacing

Understanding the CSS box model is crucial for layout control:

Box Model Properties

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 2px solid #ccc;
}

Layout with Flexbox

Flexbox provides powerful layout capabilities:

Flexbox Layout

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

CSS Grid Layout

CSS Grid creates complex two-dimensional layouts:

Grid Layout

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

CSS Selector Demo

This is a regular paragraph with default styling.

This paragraph has the "highlight" class applied.

This paragraph has the "special" ID applied.

This paragraph has both class and ID.

This paragraph is inside a div (descendant selector).

Hover over this link to see pseudo-class in action!

Building Responsive Web Pages

What is Responsive Design?

Responsive design ensures that web pages look and function well on all devices, from desktop computers to mobile phones. It uses flexible layouts, images, and CSS media queries to adapt to different screen sizes.

CSS Media Queries

Media queries allow you to apply different styles based on device characteristics:

Media Query Examples

/* Mobile devices */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
}

Responsive Layout Demo

This grid automatically adjusts based on screen size:

Box 1
Box 2
Box 3
Box 4

Try resizing your browser window to see how the layout adapts!

Responsive Design Best Practices

Follow these principles for effective responsive design:

  • Mobile-First: Design for mobile devices first, then enhance for larger screens
  • Flexible Images: Use relative units and max-width for images
  • Breakpoints: Set logical breakpoints at common device widths
  • Touch-Friendly: Ensure buttons and links are large enough for touch
  • Performance: Optimize images and CSS for mobile devices

Ready to Practice?

Now that you understand HTML5 and CSS fundamentals, let's put your knowledge to work!

Start Exercises Next: JavaScript & Interactivity