This lesson contains 12 slides, with interactive quiz and text slides.
Items in this lesson
Responsive designs
Slide 1 - Slide
Wat weet je al over responsive design
Slide 2 - Mind map
Inhoud
Wat is responsive design
Breakpoints & media queries
Opdracht
Slide 3 - Slide
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 - Slide
Mobile first
Ontwerp patronen
SVG (scalable vector graphics)
breakpoints
Minimalistisch
Toegankelijkheid
Slide 5 - Slide
Breakpoints
Queri
Slide 6 - Slide
Slide 7 - Slide
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 - Slide
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 - Slide
@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 - Slide
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
Slide 11 - Slide
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.
