Cette leçon contient 12 diapositives, avec quiz interactif et diapositives de texte.
Éléments de cette leçon
Responsive designs
Slide 1 - Diapositive
Wat weet je al over responsive design
Slide 2 - Carte mentale
Inhoud
Wat is responsive design
Breakpoints & media queries
Opdracht
Slide 3 - Diapositive
Responsive design
"Responsief design is een benadering van webontwerp waarbij de interface zich aanpast aan de lay-out van het apparaat, waardoor gebruiksvriendelijkheid, navigatie en het zoeken naar informatie worden vergemakkelijkt."
Slide 4 - Diapositive
Mobile first
Ontwerp patronen
SVG (scalable vector graphics)
breakpoints
Minimalistisch
Toegankelijkheid
Slide 5 - Diapositive
Breakpoints
Queri
Slide 6 - Diapositive
Slide 7 - Diapositive
Breakpoints
Verwijst naar specifieke schermgroottes waarbij de lay-out van een website wordt aangepast om een optimale gebruikerservaring te bieden op verschillende apparaten
Slide 8 - Diapositive
Media queries
Door middel van media queries kunnen ontwikkelaars verschillende stijlregels toepassen op verschillende apparaten, waardoor responsieve en gebruikersvriendelijke websites kunnen worden gecreëerd die zich aanpassen aan verschillende schermformaten
Slide 9 - Diapositive
@media screen and (min-width: 480px) { Layout vanaf 480px na boven hier tussen}
@media screen and (min-width: 480px) and (max-width:580px) { Layout vanaf 480px tot en met 580px hier tussen}
Slide 10 - Diapositive
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
Slide 11 - Diapositive
Wat:Maak drie verschillende layouts voor je Index.html pagina
Hoe:
Maak gebruik van media queries
voeg 3 breakpoints toe aan je pagina
Hulp: Kijk op W3schools onder het kopje media queries.
