Opdracht Codecademy: Snelle Herhaling HTML & CSS

Welkom bij de opfriscursus HTML en CSS! Om snel aan de slag te kunnen met creatieve en uitdagende webdesignprojecten binnen onze richting, gaan we eerst onze basiskennis van HTML en CSS aanscherpen.

Het doel van deze opdracht is eenvoudig: in zo min mogelijk tijd alle basisprincipes herhalen. Hierdoor laten we de theorie snel achter ons en kunnen we aan het échte werk beginnen: het bouwen van toffe websites!

Instromers in VISO: Ben je een nieuwe leerling die pas instroomt? Geen zorgen! Dit online leerpad geeft je direct alle nodige kennis mee om meteen gelijk te lopen met de rest van de groep.

---

⏱️ Tijdsplanning & Organisatie

De totale studiebelasting voor deze opdracht is 6 uur, verspreid over 2 weken:

• In de les: 4 uur (2 uur per week).
• Thuis: Ongeveer 9 minuten per dag.

Belangrijk over de deadline:

In de deadline is ruimschoots rekening gehouden met onverwachte omstandigheden (9 minuten per dag is voor iedereen haalbaar!). Naast ziekte is er dus geen excuus voor het niet of te laat indienen van deze opdracht. Te laat indienen betekent dat je meteen achterloopt op de rest van de groep.

---

🛠️ Stap-voor-stap: Aan de slag met Codecademy

1. Account aanmaken

1. Surf naar de Codecademy HTML & CSS Catalogus.
2. Maak een gratis account aan. Je mag hiervoor je school-e-mailadres óf je privé-e-mailadres gebruiken.

Tip (Taal): Vind je het Engels lastig? Klik met je rechtermuisknop op de pagina in Google Chrome en kies voor 'Vertalen in het Nederlands' (of gebruik een vertaalextensie).

2. De cursussen doorlopen

Klik op onderstaande links en doorloop de drie aangeduide modules:

1. Learn HTML: Fundamentals

Herhaal de opbouw van HTML-documenten, koppen, alinea's en elementen (100% voltooien).

1. Learn CSS: Introduction

Fris je kennis op over selectors, kleuren, lettertypen en het koppelen van CSS aan HTML (100% voltooien).

1. Learn CSS: Box Model and Layout

⚠️ Let op: Je hoeft deze cursus niet 100% af te ronden! Voltooi enkel alles onder het onderdeel 'The Box Model' (margins, paddings, borders en dimensions). Het onderdeel 'Display' hoef je momenteel nog niet te kennen.

---

💻 Wat ga je herhalen?

Tijdens de interactieve oefeningen schrijf en test je code direct in de browser. Je werkt onder andere met HTML-structuren:

<div class="project-card">
    <h2>Mijn Webdesign Project</h2>
    <p>Klaar om de basis snel te herhalen en mooie dingen te maken!</p>
</div>

En je past CSS-styling toe:

.project-card {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
}

---

❓ Wat doe je als je vastzit? (Het 3-stappenplan)

Heb je een vraag of kom je ergens niet uit? Volg altijd de strikte volgorde van dit 3-stappenplan:

1. Gebruik ChatGPT of Gemini: Vraag de AI om uitleg over het concept dat je niet begrijpt.

(Gebruik AI enkel voor vragen en uitleg, níét voor kant-en-klare oplossingen. Hier leer je anders niets mee!)

1. Vraag het aan een klasgenoot: Soms kan een medeleerling het op een andere manier uitleggen.
2. Spreek de docent aan: Mail mij of spreek mij aan in de gangen.

---

📋 Inleveren op Google Classroom

Wanneer je alle vereiste onderdelen hebt afgerond:

1. Ga naar je Codecademy account/dashboard.
2. Maak een duidelijke screenshot (schermafbeelding) waarop jouw accountnaam én het voortgangspercentage per cursus goed zichtbaar zijn.
3. Dien deze screenshot in via de bijbehorende opdracht op Google Classroom.

---

🏁 Verwachte Output

• Een duidelijke schermafbeelding (PNG of JPG) van je voortgang ingediend op Google Classroom.
• Duidelijk zichtbare voortgang voor de 3 cursussen:
• Learn HTML: Fundamentals (100%)
• Learn CSS: Introduction (100%)
• Learn CSS: Box Model and Layout (alle onderdelen binnen 'The Box Model' voltooid)

---

📊 Evaluatiecriteria