Skip to content

Ontwerp en maak een website voor een opdrachtgever waarbij je de website verrijkt volgens het principe van progressive enhancement

License

Notifications You must be signed in to change notification settings

zoepje/user-experience-enhanced-website

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

Redpers

Red pers is een toegankelijk en inclusief opleidingsplatform dat is bedoeld voor jonge, aspirerende journalisten.

Inhoudsopgave

Beschrijving

Redpers is een nieuwsplatform waar gebruikers artikelen kunnen lezen, artikelen kunnen bekijken op basis van 8 categorieën en meer te weten kunnen komen over de auteurs van de artikelen. Deze sprint stond in het teken van het implementeren van een pop-up die verschijnt wanneer je over de naam van de auteur hovert. Daarnaast heb ik de deelknop verbeterd met client-side scripting, waardoor gebruikers gemakkelijk artikelen kunnen delen.

Home 📸

Desktop

Desktop Home

Mobile

Mobile Home Mobile Menu

Categorie 📸

Desktop

Desktop Categorie

Mobile

Mobile Categorie

Artikel 📸

Desktop

Desktop Artikel

Mobile

Mobile Artikel

Auteur hover 📸

Screen.Recording.2024-05-01.at.8.17.38.PM.mov

Je kunt hier de website bezoeken🌐 https://red-pers-user-experience.onrender.com/

Gebruik

Ik heb mij deze sprint gefocust op deze userstories:

  1. fdnd-agency/red-pers#1. Dit heb ik gedaan door een popup te maken voor als je over de auteur hovert.
  2. fdnd-agency/red-pers#4. Ik ben begonnen met een design voor de auteurpagina maar deze heb ik nog niet kunnen implementeren.

Kenmerken

Bij het ontwikkelen van deze website heb ik gebruikgemaakt van EJS, CSS, JavaScript en Node.js. In mijn EJS-templates heb ik zowel de HTML-structuur als dynamische data uit de API geïntegreerd. Met CSS heb ik de visuele opmaak van de website gemaakt. Ik heb met client-side scripting de deel-konp geenhanced. Ik heb HTML en CSS gebruikt om de popup te bouwen.

Voor meer details over hoe ik dit specifiek heb gebouwd, kun je terecht in mijn Wiki.

Installatie

Als je aan deze website wilt werken kun je de reposertory forken:

  1. Open deze repository in jouw editor.
  2. Ga naar de terminal en voer het commando npm install uit. Hiermee installeer je Express en alle benodigde afhankelijkheden via NPM.
  3. Start de server met het commando npm start.
  4. Pas alles naar eigen wens aan.

Bronnen

  1. MDN
  2. W3Schools

Licentie

This project is licensed under the terms of the MIT license.

About

Ontwerp en maak een website voor een opdrachtgever waarbij je de website verrijkt volgens het principe van progressive enhancement

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 36.0%
  • JavaScript 32.3%
  • EJS 31.7%