Praktisch

Docenten

Dieter Peirs

Sjouwke Van Parys

Linde Raats

ECTS

• Semester 1 = 12 weken les
• 🏫 Les​
  • ​3u/week
  • Fysiek op de campus
  • Theorie, demo's en oefeningen
• ✍️ Evaluatie
  • Opdracht 1 & 2 (60%)
  • Examen (40%)

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

Algemene afspraken

• Kom op tijd. Te laat door vertragingen of iets anders? Laat iets weten via Teams
• Ik ben altijd online bereikbaar, tussen 9 en 5
• Tijdens theorie of uitleg blijft de laptop gesloten
• Gsm laat je in de rugzak of broekzak

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 codeert je eerste eigen site van kop tot teen 🥳

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.

• 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
• Open in browser
• W3C Web Validator
• CSSTree Validator
• Auto Rename Tag
• Image Preview

VS Code

VS Code