De basis.
Inoefenen van de basis-tags van HTML5
Vertalen van een gegeven tekst naar een html-structuur met behulp van de basis-tags van HTML5
webLAB.
waar design en development samenkomen
Welkom bij het vak WEBLAB, een essentieel onderdeel van onze richting Crossmedia! In dit vak nemen we je mee in de fascinerende wereld van webtechnologie en digitale communicatie. Dit betekent dat je niet alleen technisch vaardig wordt, maar ook leert hoe je verschillende disciplines kunt samenbrengen om krachtige en expressieve beeldtaal te ontwikkelen. Of het nu gaat om het ontwerpen van websites, het bouwen van interactieve toepassingen of het bedenken van creatieve digitale oplossingen, bij ons krijg je de ruimte om je grafisch denken, voelen en handelen te ontplooien.
5CMPortfolio.
Tekstvormgeving.
Teksten vormgeven met CSS
Tekstvormgeving van een gegeven ontwerp nabouwen met behulp van CSS-eigenschappen.
Hero-image.
Inoefenen van de background-eigenschappen
De leerlingen ontwerpen een hero-image in XD om deze vervolgens uit te werken in html. Door middel van CSS-eigenschappen voorzien ze de div van een achtgrondafbeelding en zorgen we voor de vormgeving van de teksten.
Grid-layout.
Inoefenen van de eigenschap position absolute en kennismaking met een grid-layout.
De leerlingen ontwerpen in XD een grid-layout van 12 kolommen. Ze kiezen hiervoor een eigen thema, en verzorgen beeldmateriaal en content voor hun layout. Ze werken dit ontwerp uit in html en CSS en gebruiken daarbij de techniek position absolute.
Layout met flexbox.
Efficient layouten met flexbox
De leerlingen bouwen een opgegeven layout na en maken daarbij gebruik van de aangeleerde flexbox eigenschappen.
Project: Portfolio.
Een one-page website
De leerlingen ontwerpen hun persoonlijke portfolio om hun taken van webdesign in te verzamelen. Ze maken hiervoor gebruik van de aangeleerde technieken en eigenschappen.
6MMPortfolio.
CSS grid.
De leerlingen leren webpagina's layouten door het gebruik van CSS grid.
Responsive webdesign.
De leerlingen maken responsive designs passend voor verschillende schermformaten.