instructions

• start server with php, and browser-sync for auto reload :
  • npm run dev
• setup instructions :
  • install apps : sudo apt update && sudo apt install php-cli nodejs npm
  • verify : php -v & node -v & npm -v
  • install dependencies : npm ci
• -> only for info, at project creation setup :
  • run : npm init -y && npm install --save-dev browser-sync
  • add in package.jsons > scripts : php -S localhost:8000 & browser-sync start --proxy localhost:8000 --files "**/*.php,**/*.css,**/*.js" --port 3000
    • php -S localhost:8000 → starts PHP built-in server
    • & → runs PHP server in the background (Linux/macOS)
    • browser-sync start --proxy localhost:8000 → proxies PHP server
    • --files "**/*.php,**/*.css,**/*.js" → watches files for changes
    • --port 3000 → BrowserSync UI accessible at http://localhost:3000

---

ressources

html validator : https://validator.w3.org/nu

---

difficulties

• accessibility with ascii art titles
  • I finally decided to go with a structure like this :

    <h1 aria-label="hugo lamy">
      <span aria-hidden="true" class="pre"> hugo (ascii) </span>
      <span aria-hidden="true" class="pre"> lamy (ascii) </span>
    </h1>
    

• links accessibility
• accessibility gone wild
• don't use title attribute
• I thought title text improved accessibility. I was wrong.
• Things I learned by pretending to be blind for a week
• create the full screen hero section with the navbar under the title