Praktisch

Docenten

Dieter Peirs

Sjouwke Van Parys

Jannes Lambrecht

Linde Raats

Marc Nuijten

Anne Geerkens

ECTS

• Periode 1 en 2 = 13 weken les + 2 x evaluatieweek
• 🏫 Les​
  • ​4u/week
  • Fysiek op de campus
  • Theorie, demo's en oefeningen
• ✍️ Taken & zelfstudie
  • Wekelijkse opdracht (40%)
  • Grote periode opdracht, opgesplitst in 2 deadlines (60%)
  • Elke les herhaal je via tutorials & documentatie die je op Canvas terugvindt

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
• 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.

Aanwezigheid

• 🥳 Verplicht 
• 🤒 Gewettigd afwezig?
  1. Laat dit vóór de start van de les via Teams weten
  2. Upload afwezigheidsattest op SVS
  3. Neem zelfstandig de theorie, demo's en oefeningen door tegen volgende les
  4. Maak de weekopdracht thuis tegen volgende les
  5. Lijst eventuele vragen op tegen volgende les

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
    • ​🔗 Overzicht video's

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, browsers en GitHub
• Je publiceert je eerste site online 🥳

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

We studeren toch Digitale Vormgeving? Waarom moeten we leren coderen?

🤔

Design vs. development

Vroeger waren beiden onderdelen duidelijk afgebakend:

• UI designer zorgt voor een mooi visueel design
• Web developer zet het design om in werkende code

Design vs. development

Maar we zien steeds meer verschuivingen:

• Designen wordt steeds technischer
  (Auto layout, componenten, design systems, variabelen...)
• Developen wordt steeds visueler
  (Drag & drop, low code/no code, vibe coding...)

 → Design en development groeien naar elkaar toe

Met andere woorden, leren coderen maakt van jou een betere designer

• Je leert denken in blokken en secties 
• Je maakt logischere designs
• Je stelt betere design files op
• Je werkt beter samen met de developers
• ...

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.

• Download en Installeer VS Code

VS Code

We verkennen de interface

1. Menu: files, zoeken, extensies...
2. File explorer: Overzicht van de geopende files
3. Text editor: Hier schrijf je je code

1

2

3

VS Code

Installeer de volgende extensies

• vscode-icons
• Live Server
• SVG-preview
• W3C Web Validator
• CSSTree Validator
• Auto Rename Tag
• Image Preview

VS Code

VS Code