Autor/Author: Clàudia Trigo Joaquin
Universitat/University: Universitat Oberta de Catalunya (UOC)
Any/Year: 2025
Curs/Course: Disseny Web (HTML i CSS)

---

🌐 Project Overview / Descripció del Projecte

This project presents a multi-page website, Descobrir (El món a través de la seva cuina), developed for the Web Design course, which is part of the Master's Degree in Website and Application Design (UOC). It focuses on exploring international gastronomy through articles, a workshop schedule, and a complex registration form, demonstrating advanced semantic HTML5 and pure CSS3 styling.

---

🧠 Structure

The website is divided into four main content pages and a centralized stylesheet:

🏠 index.html — Home

Landing page featuring the motto "El món a través de la seva cuina" (The world through its cuisine) and the main navigation.

📰 article-del-mes.html — Monthly Article

Detailed content focusing on El secret del ramen japonès (The secret of Japanese Ramen), including its history, culture, a recipe, and an embedded YouTube video.

📅 tallers.html — Workshops

Presents an accessible table with icons listing the program of 7 workshops scheduled for December 2025. Columns include Chef, Country, Level, and Date.

📝 inscripcio.html — Registration

A complex form divided into fieldsets (Personal Data, Registration Information, and New Workshop Proposal), featuring HTML5 validations and visual CSS feedback.

🎨 css/estils.css — Stylesheet

Contains all website styling, including layouts using Flexbox/Grid and responsive design for all elements (tables, forms, and navigation).

---

⚙️ Features

• Semantic HTML5 structure across all pages.
• Pure CSS3 design without external frameworks.
• Complex form validation using pattern, required, and CSS pseudo-classes (:valid, :invalid).
• Accessible table design using scope and pseudo-elements (::before) for enhanced clarity.
• Google Fonts used for typography (Noto Sans / Bricolage Grotesque).

---

🧩 Technologies Used

• 
  • Form Validation
• 
  • Grid & Flexbox

---

🔧 Key Skills Demonstrated

• Form Design & Accessibility: Creation of a complex form with excellent structure (<fieldset>, <legend>, <label>) and data validation.
• Table Structuring: Markup of a table (tallers.html) using <caption>, <thead>, <tbody>, <tfoot>, and CSS icons.
• Content Hierarchy: Coherent use of headings (<h1> to <h3>) and semantic elements (e.g., <article>, <blockquote>, <figure>).
• Design Consistency: Maintenance of a coherent color palette and an active navigation style (.active::after).
• Version Control: Project management using Git (commits, push).