================================================================
LAB 1 — HTML5 + CSS3: Build Your Personal Portfolio
================================================================
Course:    Web Technologies (BSc CS, Semester II 2025/2026)
Topic:     Lectures 1–3 (Web Foundations, Design+Agile, HTML/CSS)
Time:      2 hours in lab + ~3 hours self-study
Submit:    Public GitHub repo URL on Moodle by start of next lab

----------------------------------------------------------------
LEARNING GOALS
----------------------------------------------------------------
- Set up a development environment (Git, VS Code, browser dev tools)
- Use semantic HTML5 elements appropriately
- Style a page with modern CSS (Flexbox + Grid)
- Make the page responsive with media queries
- Push a project to GitHub and host it on GitHub Pages

----------------------------------------------------------------
PRE-LAB CHECKLIST
----------------------------------------------------------------
1. Install Git, VS Code (with Live Server extension), Chrome/Firefox
2. Create a GitHub account if you don't have one
3. Configure Git: git config --global user.name / user.email

----------------------------------------------------------------
TASKS
----------------------------------------------------------------

TASK 1 — Project setup (15 min)
  - Create a new public GitHub repo: portfolio
  - Clone to your machine
  - Add a README.md describing the project
  - Create files: index.html, styles.css, app.js (empty for now)
  - Commit and push

TASK 2 — Semantic structure (30 min)
  Build the following sections, each using the right semantic tag:
  - <header> with site title and navigation
  - <nav> with links to: About, Projects, Contact
  - <main> containing:
      <section id="about">    short bio + photo
      <section id="projects"> grid of project cards
      <section id="contact">  contact form + email
  - <footer> with copyright and social links

  Use proper headings (h1, h2, h3 — one h1 per page).

TASK 3 — Style with Flexbox + Grid (45 min)
  - Header/nav: Flexbox row with space-between
  - Projects: CSS Grid, responsive: 1 col mobile, 2 col tablet, 3 col desktop
  - Contact form: stacked Flexbox column
  - Define CSS variables for colours (--primary, --bg, --text)
  - Use rem units, not px, for font sizes

TASK 4 — Responsive design (30 min)
  - Mobile-first: write base styles for small screens first
  - Add media queries at min-width 768px and 1024px
  - Test at three sizes using browser dev tools (Cmd+Opt+I)

TASK 5 — Publish (15 min)
  - In repo settings, enable GitHub Pages from main branch
  - Confirm your portfolio is live at:
      https://<username>.github.io/portfolio/
  - Add the live URL to your README

----------------------------------------------------------------
DELIVERABLES
----------------------------------------------------------------
- Public GitHub repo URL
- Live GitHub Pages URL (in README)
- At least 5 commits with meaningful messages

----------------------------------------------------------------
GRADING (10 marks)
----------------------------------------------------------------
Semantic HTML correctness ......... 2
CSS quality (Flexbox, Grid, vars).. 3
Responsive at 3 breakpoints ....... 2
Live on GitHub Pages .............. 2
Commit history quality ............ 1

----------------------------------------------------------------
EXTENSIONS (optional)
----------------------------------------------------------------
- Add a dark-mode toggle (CSS var swap)
- Animate the nav with CSS transitions
- Add an SVG icon set (Heroicons or Feather)