Web Technologies — Teaching · Cristian Augusto

Theory

Unit 1: Introduction to the Web

What is the World Wide Web?

Invented by Tim Berners-Lee at CERN (1989)
A system of interlinked hypertext documents accessed via the Internet
Key enabling technologies: HTTP, HTML, CSS, JavaScript

The HTTP Protocol

HTTP follows a request-response model between client and server. Every interaction begins with a client request and ends with a server response.

GET /index.html HTTP/1.1
Host: www.example.com
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

URLs & Resources

A URL (Uniform Resource Locator) identifies a resource on the Web.

Scheme: https://
Host: www.example.com
Path: /products/item
Query: ?id=42

Theory

Unit 2: HTML5 & Semantic Markup

HTML Document Structure

Every HTML document follows a defined structure with a DOCTYPE, a <head> (metadata) and a <body> (visible content).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Semantic Elements

Semantic HTML conveys meaning about the content:

<header> — introductory content or navigation
<nav> — navigation links
<main> — dominant content of the page
<article> — self-contained composition
<section> — thematic grouping
<footer> — footer for its nearest ancestor

Labs

Lab 1: HTML Basics

View on GitHub

Objectives

In this lab you will:

Create your first HTML document from scratch
Use semantic HTML5 elements correctly
Validate your markup using the W3C Validator

Prerequisites

You need a text editor and a modern web browser. We recommend VS Code with the Live Server extension for real-time preview.

Starter template — save as index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 1</title>
  </head>
  <body>
    <header>
      <h1>My First Page</h1>
    </header>
    <main>
      <p>Edit this file and refresh your browser to see changes.</p>
    </main>
    <footer>
      <p>Web Technologies Lab 1</p>
    </footer>
  </body>
</html>

Exercise 1.1 — Personal Profile Page

Build an HTML page that includes all of the following:

A heading (<h1>) with your name
A short paragraph describing yourself
An unordered list (<ul>) of at least three hobbies
An image using <img> (use a placeholder URL if needed)
A hyperlink (<a>) to your GitHub or LinkedIn profile

Validate your page at validator.w3.org — fix any errors.

Labs

Lab 2: CSS Layout & Responsive Design

View on GitHub

Introduction

CSS controls the visual presentation of HTML. In this lab you will apply:

The Box Model (margin, border, padding, content)
Flexbox for one-dimensional layouts
CSS Grid for two-dimensional layouts
Media queries for responsive breakpoints

CSS Grid — responsive card layout

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 2px 2px 0 #ccc;
}

Exercise 2.1 — Responsive Portfolio Grid

Using CSS Grid, create a card layout that:

Displays 3 columns on desktop (≥ 900px)
Collapses to 2 columns on tablet (600px – 899px)
Shows 1 column on mobile (under 600px)

Each card should contain a title, a short description, and a “View Project” link.

Exercise 2.2 — Dark Mode Toggle

Add a light/dark theme toggle to your page using CSS custom properties:

Define --color-bg and --color-text in :root
Override them under a [data-theme="dark"] selector
Use JavaScript to toggle the data-theme attribute on <html>

Seminars

Seminar 1: HTTP & REST APIs

HTTP Methods

REST uses standard HTTP methods to perform operations:

GET — retrieve a resource (safe, idempotent)
POST — create a new resource
PUT — replace a resource entirely
PATCH — partially update a resource
DELETE — remove a resource

REST Principles

A RESTful API follows six constraints:

Stateless — each request is self-contained
Client–Server — UI is decoupled from data storage
Uniform Interface — consistent resource identification
Layered System — client cannot tell which layer it talks to
Cacheable — responses declare their cacheability

Fetching data from a public REST API

async function getUserRepos(username) {
  const res = await fetch(
    `https://api.github.com/users/${username}/repos?sort=stars`
  );
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const repos = await res.json();
  return repos.map(r => ({
    name:  r.full_name,
    stars: r.stargazers_count,
    url:   r.html_url,
  }));
}

getUserRepos('giis-uniovi').then(repos => {
  repos.forEach(r => console.log(`${r.name} ★${r.stars}`));
});

Hands-on: Explore a Public API

Pick any public API from public-apis.io that requires no authentication.

Write a JavaScript function that:

Fetches data from the API using fetch()
Parses the JSON response
Renders the results as an HTML list on your page
Handles loading state and errors gracefully