

Introductie
WEB 1: ESSENTIALS
Praktisch
Docenten
Dieter Peirs

Karel De Smet

Marc Nuijten

ECTS
- Periode 1 = 6 weken les + evaluatieweek
- 🏫 Les
- 6u/week
- Fysiek op de campus
- Theorie, demo's en oefeningen
- ✍️ Taken & zelfstudie
- Wekelijkse opdrachten (30%)
- Grote periode opdracht, opgesplitst in 2 deadlines (70%)
- Elke les herhaal je via tutorials & documentatie die je op Canvas terugvindt
Lesverloop
De lessen verlopen in een vaste structuur. We starten met een stuk uitleg, daarna oefenen we. Ik herhaal daarna nog even en beantwoord vragen. We sluiten de les telkens af met de weekopdracht.

Klastaken
- Indienen tegen het einde van de les
- Niet klaar? Als je een eerste versie indiende, mag
je verder afwerken tegen de start van volgende les
- Niet klaar? Als je een eerste versie indiende, mag
-
Gewettigd afwezig?
- Maak de taak thuis tegen volgende les
- Uitstel vragen aan de docent kan enkel op het moment dat je je afwezigheid meldt
⚠️ Onwettig afwezig, niet aan het einde van de les ingediend of afwezigheid niet tijdig gemeld = 0 voor de klasoefening van die week.
Feedback
Via feedbackrooster.
Extra feedback nodig?
Kom even bij me tijdens de les of contacteer me via Teams.

Copyright en plagiaat
Het geheel of gedeeltelijk overnemen van eigen of andermans werk zonder de markering dat het om een citaat gaat en/of zonder passende bronvermelding pleeg je plagiaat.
AI gebruik
In het kader van de opdrachten is het gebruik van AI niet toegestaan voor het genereren van code of het schrijven van volledige oplossingen. Wel kan je AI gebruiken om:
- Concepten uit te leggen,
- Theorie te verduidelijken,
- Feedback te geven op je eigen werk
Bij twijfel over wat wel en niet mag, vraag dan om verduidelijking bij de docent.
Aanwezigheid
- 🥳 Verplicht
- 🤒 Gewettigd afwezig?
- Laat dit vóór de start van de les via Teams weten
- Upload afwezigheidsattest op SVS
- Neem zelfstandig de theorie, demo's en oefeningen door tegen volgende les
- Maak de weekopdracht thuis tegen volgende les
- Lijst eventuele vragen op tegen volgende les
Afspraken
-
Te laat?
- Als de deur toe is mag je binnen tijdens de eerste pauze.
-
Pauzes
- Tijdens de les zijn er 2 pauzes
- Tijdens de oefeningen kan je een korte pauze nemen wanneer je wil.
- Laat je smartphone in je rugzak en haal die pas uit wanneer nodig of tijdens een pauze
Leerstof & oefeningen
-
Canvas
- Theorie, oefeningen & taken
- 🔗 Canvas cursuslink
-
📚 Digitale Syllabus
- Uitgebreide theorie
-
🔗 Syllabuslink
- ▶️ Video Tutorials
- Uitgelegd door docenten
- 🔗 Overzicht video's
-
Mozilla Developer Network (mdn):
- Uitgebreide open source documentatie over HTML, CSS & JS
- 🔗 developer.mozilla.org
-
LinkedIn Learning:
- Extra tutorials en uitleg



Wat leren we in dit vak
Lesinhoud
We ontdekken stap voor stap hoe het web écht werkt
- Je leert zelf websites bouwen met HTML en CSS
- Je maakt kennis met handige ontwikkeltools en browsers
- Je leert een design omzetten in code
- Je leert correcte code schrijven
- Je gaat responsive websites bouwen
- Je maakt je websites toegankelijk voor iedereen

Een kleine preview...
Surf naar www.vrt.be
- Klik je linkermuisknop in en kies voor "inspect" of "inspecteren"
- Er opent zich een scherm vol met code
- Dit lijkt nu nog Chinees, maar doorheen deze lessen krijg je meer inzicht in deze code en in hoe het web is opgebouwd
Wat heb je nodig?
Browser
Google Chrome
Firefox Developer Edition


We werken voorlopig niet met browsers zoals Safari of Opera, zorg dus dat je zeker één van de bovenstaande browsers hebt geïnstalleerd
Code Editor
Visual Studio Code (VS Code) is een gratis,
krachtige code-editor die populair is bij developers.

VS Code
We verkennen de interface
- Menu: files, zoeken, extensies...
- File explorer: Overzicht van de geopende files
- Text editor: Hier schrijf je je code

1
2
3
VS Code
Installeer de volgende extensies
- vscode-icons
- Open in browser (of live server)
- SVG-preview
- W3C Web Validator
- CSSTree Validator
- Auto Rename Tag
- Image Preview








VS Code
We zetten nog enkele instellingen goed
- Zorg ervoor dat autosave op "onFocusChange" staat


VS Code
We zetten nog enkele instellingen goed
- Zorg ervoor dat compact folders
niet aangevinkt staat


0. Introductie (PGM)
By Lecturer GDM
0. Introductie (PGM)
Voorstellingsrondje, benodigde software & cursus
- 121