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

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

  •      Mozilla Developer Network (mdn):
  •      LinkedIn Learning:

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

  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 (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