Portfolio Challenge
1 Persoonlijke website – HTML & vormgeving
🎯 Leerdoelen
- Je kunt een persoonlijke website opbouwen met HTML en CSS.
- Je maakt meerdere pagina’s die met elkaar verbonden zijn via een werkend menu.
- Je past opmaak toe met een externe stylesheet.
🛠️ Bouw jouw website
Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.
De opdracht:
- De website moet bestaan uit een homepage en 3 vervolgpagina's.
voorbeeld home pages:
Elke pagina bevat:
- Een header met jouw logo, naam en een menu naar alle pagina’s.
- Een footer met een copyrightregel.
- Opmaak via een externe
style.cssbestand met classes. - Elke pagina moet een header blok hebben met jouw logo , jouw naam en een menu waar alle menu-items in staan.
Let op, het menu moet werken! - Elke pagina moet een footer hebben waar een copyright in staat.
voorbeeld footer: - Alle pagina's moeten worden vormgegeven met css classes , maak gebruik van een externe stylesheet .
- De website heeft de volgende pagina's / menu-items:
- Home (homepage) (index.html)
Je homepagina is je etalage, een homepagina moet bezoekers nieuwsgierig maken naar de rest van de website.
Zorg dat je homepage er aantrekkelijk uitziet en dat de bezoeker in een oogopslag kan zien welke informatie er op de website te vinden is.
Gebruik op de home page afbeeldingen en links naar de vervolgpagina's - Mijn profiel (1e vervolgpagina) (profiel.html)
Hierin plaats je een foto met een klein verhaaltje over jezelf.
De exacte inhoud staat in de volgende opdracht,
- Over mij (2e vervolgpagina) (overmij.html)
Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)
- Mijn visie (3e vervolgpagina) (mijnvisie.html)
Voorlopig nog leeg, deze wordt pas vele later gevuld.
- Home (homepage) (index.html)
🛠️ Opdracht
- Bouw een pagina voor de homepage (index .html ).
- Bouw een pagina voor je profiel (profiel.html).
- Bouw een pagina voor je overmij (overmij.html).
- Bouw een pagina voor je visie ( visie .html).
Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!
Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze.
Leef je uit en gebruik de technieken die je hebt geleerd!
🧠 Reflectie
- Wat maakt een homepage aantrekkelijk voor een bezoeker?
- Wat is het voordeel van een apart CSS-bestand gebruiken voor styling?
- Wat vond je lastig bij het koppelen van menu's tussen meerdere pagina’s?
📤 Inleveren
- De 4 HTML-bestanden:
index.html,profiel.html,overmij.html,visie.html. - Een externe
style.cssbestand. - Screenshot van alle 4 pagina's in de browser (inclusief menu en footer zichtbaar).
- De reflectie; beantwoord de drie vragen i jouw eigen woorden en lever dit in (txt-bestand of pdf-bestand)
Je hebt in totaal dus 9 bestanden ingeleverd.
2 Persoonlijke website – content
Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.
De vervolgpagina's vul je met onderstaande
Vervolgpagina Mijn profiel (profiel.html)
- Plaats hier een foto van jezelf
Schrijf hier je naam, leeftijd, de stad waar je woont
Vervolgpagina Over mij (overmij.html)
- Plaats hier de 6 lesopdrachten van persoonlijk profileren
- tijdlijn
- normen &waarden
- DISC
- Kernkwadranten
- SWOT analyse
- 360 graden feedback
Vervolgpagina Mijn visie (visie.html)
- Deze laat je (nog) leeg
📤 Inleveren
- Screenshot van alle 4 pagina's in de browser. Zorg dat ale content goed leesbaar is. Evnetueel maak je extra screenshots zodat alles leesbaar is.
--
Extra: Design & Veilig werken
(Optionele verdieping om je project naar een hoger niveau te tillen)
🎨 Pimp je design
Je PHP-code werkt nu, maar de kans is groot dat je pagina er nog wat "kaal" uitziet (witte achtergrond, zwarte tekst). Om je website er professioneel uit te laten zien, gebruiken developers vaak CSS Frameworks.
Wat zijn CSS Frameworks?
Je kunt alle CSS zelf schrijven, maar dat kost veel tijd. Een framework is als een doos met LEGO-steentjes die al klaar liggen. Je hoeft alleen de juiste "class" aan je HTML-element te geven en het ziet er direct goed uit.
- Bootstrap: De klassieker. Heel handig voor beginners. Je kopieert een stukje code in je
<head>en je hebt direct toegang tot kant-en-klare knoppen, navigatiebalken en formulieren.
Kenmerk: Je gebruikt componenten (bijv. een 'card' of 'navbar'). - Tailwind CSS: Modern en populair. Hierbij heb je heel veel kleine classes (zoals
text-center,bg-blue-500,p-4) waarmee je zelf je ontwerp "bouwt" in de HTML.
Kenmerk: Je hebt volledige vrijheid, maar je HTML krijgt wel veel classes.
🤖 Hulp vragen aan AI voor design
Je hoeft geen designer te zijn. Je kunt AI vragen om de CSS of de classes voor je te schrijven. Hier zijn goede prompts die je kunt gebruiken:
- "Ik gebruik Bootstrap 5 via een CDN. Kun je een mooie responsive navigatiebalk maken met links naar Home, Over Mij en Contact?"
- "Ik heb een HTML tabel met scores. Kun je deze stylen met Tailwind CSS zodat de rijen om-en-om grijs zijn en de header donkerblauw?"
- "Maak een simpel CSS bestand voor mijn formulier. Zorg dat de inputs ronde hoeken hebben en de verzendknop groen wordt als je er met de muis overheen gaat."
Wat is een CDN?
🚀 De basis
CDN staat voor Content Delivery Network. Het klinkt heel ingewikkeld, maar eigenlijk is het een slimme truc om websites sneller te laten laden voor gebruikers, waar ze ook zijn.
Je kunt een CSS framework op twee manieren toevoegen aan jouw website.
Manier 1, downloaden
Je downloadt de bestanden (bootstrap.css) en zet ze in je eigen mapje op je computer. Je linkt ernaar in je HTML:
<link rel="stylesheet" href="css/bootstrap.min.css">Manier 2, via CDN
Je downloadt niets. Je zet gewoon een linkje in je code naar een server van het CDN. De browser van de gebruiker haalt het bestand daar vandaan.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">- Snelheid: Het CDN is vaak sneller dan jouw eigen server.
- Cache: Veel mensen hebben Bootstrap al eens geladen op een andere website. De browser heeft het bestand dan al opgeslagen ("in de cache"). Jouw site laadt dan direct!
- Gemak: Je hoeft geen bestanden te downloaden en in mapjes te slepen. Kopiëren, plakken, klaar.
- Nadeel: Als de server(s) waar de CDN staat niet werken of niet bereikbaar zijn dan werkt jouw website niet meer.
🛡️ Veilig werken met Git & VS Code
Tijdens het programmeren (zeker als je AI code laat genereren!) gaat er wel eens iets stuk. Je wilt dan eigenlijk een "Ctrl+Z" doen, maar dan voor je hele project. Daarvoor gebruiken we VCS.
Wat is VCS en Git?
VCS staat voor Version Control System. Het is een systeem dat wijzigingen in bestanden bijhoudt. De bekendste versie daarvan heet Git.
Zie Git als een tijdmachine of het maken van een "Savegame" in een spel. Voordat je een moeilijke missie gaat doen (grote code wijziging), sla je het spel op. Als je 'game over' gaat, laad je gewoon je oude savegame weer in.
Wat is VSC?
VSC is gewoon de afkorting voor Visual Studio Code, de editor waarin je typt. Het mooie is: Git zit ingebouwd in VSC!
Wat is een Commit?
In Git-termen noem je het opslaan van je werk een Commit.
Een commit is een momentopname van al je bestanden op dat moment. Je geeft elke commit een bericht mee, bijvoorbeeld: "Inlogformulier werkt nu" of "Navigatiebalk toegevoegd".
🚀 Waarom is dit handig met AI?
Stel, je vraagt ChatGPT: "Herschrijf mijn hele PHP-code zodat het veiliger is." Je plakt de nieuwe code en... BOEM. Niets werkt meer. Error meldingen overal.
- Zonder Git: Paniek! Je moet met Ctrl+Z proberen terug te gaan of hopen dat je nog een backup had.
- Met Git: Geen probleem. Je klikt op "Ongedaan maken" (Discard changes) in VS Code en je bent direct terug bij je laatste Commit (je laatste savepoint).
Pro Tip: Maak altijd een commit voordat je een groot stuk code van AI kopieert en plakt!
--