In deze les zitten 12 slides, met interactieve quiz en tekstslides.
Onderdelen in deze les
Responsive designs
Slide 1 - Tekstslide
Wat weet je al over responsive design
Slide 2 - Woordweb
Inhoud
Wat is responsive design
Breakpoints & media queries
Opdracht
Slide 3 - Tekstslide
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 - Tekstslide
Mobile first
Ontwerp patronen
SVG (scalable vector graphics)
breakpoints
Minimalistisch
Toegankelijkheid
Slide 5 - Tekstslide
Breakpoints
Queri
Slide 6 - Tekstslide
Slide 7 - Tekstslide
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 - Tekstslide
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 - Tekstslide
@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 - Tekstslide
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
Slide 11 - Tekstslide
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.
