Skip to content

README.md

Latest commit

 

History

History
133 lines (99 loc) · 3.71 KB

README.md

File metadata and controls

133 lines (99 loc) · 3.71 KB

🌐 Augusto Mate — Web Development V2 Final

📄 Overview

Responsive, accessible, and production-ready multipage website built as the final assignment for the Web Development V2 Module.
Built with semantic HTML5, modular CSS, and progressive JavaScript — optimized for clarity, performance, and accessibility.

🚀 Live Demo

✨ Features

  • ✅ Semantic HTML5 with landmarks and ARIA roles
  • 📱 Responsive layout with fluid typography and grid system
  • 🎛️ Interactive components: menu toggle, theme switch, slider, lightbox, counters
  • 🧑‍🦽 Accessible form with inline validation and conditional logic
  • 🎯 Presentation mode: press H to highlight cursor focus
  • 🔍 SEO and Open Graph metadata for rich previews
  • 🎨 Polished UI with system font stack and dark/light theme toggle

🧱 Architecture

  • HTML: Semantic structure with minimal ARIA
  • CSS: Custom properties, responsive grid/flex, fluid type
  • JavaScript: Progressive enhancement, IntersectionObserver, localStorage
  • Pages: Home, About, Services, Gallery, Contact, Credits

♿ Accessibility

  • 🔗 Skip link to main content
  • ⌨️ Full keyboard navigation
  • 🧠 ARIA roles and labels where needed
  • 👁️ Visible focus states and focus return
  • 📣 Live regions for form feedback

⚙️ Performance

  • 🖼️ Optimized hero image (WebP/JPG) with explicit dimensions
  • 🧩 SVG icons and illustrations
  • 🧵 Single CSS file and minimal JS
  • 💤 Lazy loading for non-critical images

🧪 Validation & QA

  • ✅ HTML Validator
  • ✅ CSS Validator
  • ✅ Accessibility: axe DevTools, Lighthouse
  • ✅ Browsers tested: Chrome, Edge, Firefox (desktop & mobile)

📂 Project Structure

/
├── augusto-mate_web-development-final_v5.0.0/
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   ├── images/
│   │   ├── favicon.svg
│   │   ├── logo.svg
│   │   ├── hero-photo.jpg
│   │   ├── hero-photo.webp
│   │   ├── hero-bg.svg
│   │   ├── about-photo.webp
│   │   ├── about-bg.svg
│   │   ├── contact-bg.svg
│   │   ├── gallery-bg.svg
│   │   ├── slide-1.svg
│   │   ├── slide-2.svg
│   │   └── slide-3.svg
│   ├── pages/
│   │   ├── about.html
│   │   ├── services.html
│   │   ├── gallery.html
│   │   ├── contact.html
│   │   └── credits.html
├── README.md
├── LICENSE.md
├── SITE_PLAN.md
└── CHANGELOG.md

🛠 Getting Started

  • 🔧 Option 1: Open index.html directly in your browser
  • 🔧 Option 2: Serve locally
    • Python: python -m http.server 8080
    • Node: npx http-server -p 8080
    • Visit: http://localhost:8080

📦 Deployment

  • 🐙 GitHub Pages: root directory, main branch
  • ⚡ Netlify: drag-and-drop or Git integration
  • 🧭 Vercel: import repo, framework “Other (Static)”, output at root

📜 License

This project is licensed under the MIT License.
See LICENSE.md for full terms.

👤 Author

  • Name: Augusto Mate
  • Location: Matola, Mozambique
  • Module: Web Development V2
  • Submission: Final Assignment — August 2025