Web ontwikkeling voor Mobile, Tablets en Desktop

De module HTML en CSS Responsive speelt in op online presentatie en bereikbaarheid, momenteel een van de belangrijkste speerpunten van een bedrijf. Deze presentatie overal en altijd optimaal te laten zijn is de belangrijkste taak voor de webdesigner. Er moet rekening gehouden worden met een grote diversiteit aan apparaten waarop de inhoud kan worden getoond. Echter ook de omstandigheden waarin deze kan worden afgenomen kunnen erg verschillend zijn.  De schermgrootte van een mobile telefoon is bijvoorbeeld een flink stuk kleiner dan die van een desktop, tevens bevind een mobieltje zich vaker buiten de deur, in de regen of felle zonneschijn, wordt bediend al fietsend of in grote haast, terwijl een desktop daarentegen meestal voorzien is van een groot scherm, een snelle internetverbinding,  en de web inhoud daarop kan bijvoorbeeld onder het genot van een kopje koffie bekeken worden.

De inhoud en vormgeving van een te bouwen website kan afgestemd worden op de verschillende schermgrootten en gebruikstoepassingen van verschillende apparaten. In deze cursus maak je een bestaande statische website responsive met behulp van Media Queries en CSS. Op deze wijze krijg je een goed inzicht hoe Media Queries zijn in te zetten om je layout en soms zelfs ook de inhoud van je website dynamisch aan te passen aan verschillende schermen en devices. We bekijken ook de werking van een eenvoudig grid systeem evenals het populaire framework Bootstrap, waarin een grid systeem samenwerkt met een uitgebreide bibliotheek aan responsive elementen, Media Queries en javascript. Ook gaan we in op het gebruik van Flex-box en Grid layout in websites. De twee allernieuwste methoden voor het opbouwen van een  responsive webpagina.

Programma HTML en CSS Responsive

  • Wat is Responsive Design
  • Layout voor Mobile
  • Layout voor Tablet
  • Layout voor Desktop
  • Wat zijn Media Queries
  • Media Querie vanaf de basis
  • Meerdere schermen formaten
  • Orientatie veranderingen
  • CSS manipulatie
  • Bootstrap Framework
  • Flexbox en Grid-Layout
  • Responsive images

Subsidies?

Kijk voor subsidie mogelijkheden op onze pagina: subsidies.