Goede volgorde

De routes staan goed op volgorde! Dit is fijn omdat je dan een mooie flow hebt in je code.

Hoe moet het zo met POST?

Als je straks je POST methodes toe gaat voegen, probeer dan om deze goed te groeperen met de desbetreffende routes. Zo staat alles mooi bij elkaar gegroepeerd. Handig!

Unused server.js
Jij gebruikt voor jouw server/app het bestandje app.js, echter heb je ook nog een server.js ongebruikt in je repo staan!

Link naar de file
https://github.com/annelinderaadsheer/user-experience-enhanced-website/blob/main/server.js

Hoe los je dit op?
Check of je het inderdaad niet nodig hebt, en als dat zo is... VERWIJDEREN DIE HANDEL!

Bron
C'est moi <3

PageSpeed

1. Layout shift
   De layout shift moet nog gedaan worden. Dit doe je met in de get van je app.js en in je HTML met image.height en image.width

2. Loading optimalization
   Er is nog geen lazy loading en een skeleton loader toegepast.

3. Responsive images
   Je had nog geen gebruik gemaakt van responsive images (avif/webp).

Als je de button wilt submaten moet je er een form omheen zetten, en dan kun je een action erin zetten.

Er staat dubbele code in de app.js, haal deze regel weg

Zorg dat de generieke CSS bovenaan staat.

Je CSS is op zich best netjes, je begint met de root variables, dat is goed. Daarna heb je de styling van je menu. En daarna komen de styling van main elementen zoals h1, h2, body, p, etc.

Je kunt het beter op deze volgorde doen:

1. Imports (fonts bv) & :root
2. Elementen (body, main, h1, h2, ul etc)
3. Classes op volgorde van de pagina (.menu, .main-container .footerlinks bvb)

Voorbeeld?!
Deze code moet veeel meer naar boven!! Boven de classes.

https://github.com/annelinderaadsheer/user-experience-enhanced-website/blob/b3b87d49681b3f153609c9227efce33184c5fccf/public/style.css#L138C1-L150C2
PS: Permalink laadt nog steeds niet, rip.

BRON?
Bij MDN docs kun je er nog wat over lezen! :D

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

De HTML elementen zijn goed gerangschikt
Je ziet heel duidelijk dat je de elementen goed op voorbeeld gezet hebt, en dat alles goed gerangschikt is. Zo is je code fijn overzichtelijk.

Hoe ziet dat er uit dan?!
PS: De permalink wilde niet laden for some reason dus hier is de code die ik wilde linken:

<div class="cta">
  <div class="wrapper">
    <h2>Zelf een initiatief aanmelden?</h2>
    <!-- Link naar initiatief aanmelden -->
    <a href="/opdracht" class="btn">Klik hier</a>
  </div>
</div>