HTML Module 3 t.b.v. studenten MBO Rijnland Applicatie en Mediaontwikkeling Leiden

1. Terugblik Module 3
HTML module 33.7 Terugblik module3

2. Terugblik
HTML module 33.7 Terugblik module3

3. HTML module 3
Indelen in submappen
3.7 Terugblik module3
Gebruikt juiste bestandsnamen
1e pagina altijd index.html of
index.php

4. HTML module 3
Basispagina html met juiste indeling
3.7 Terugblik module3

5. HTML module 33.7 Terugblik module3
Hoe werkt Flexbox
property
Display: flex
Parent
=
Flex Container
Childeren
=
Flex Items
flex-flow
justify-content
align-content
align-items

6. HTML module 33.7 Terugblik module3
Childeren
=
Flex Items
property
order:
flex:
align-self
direction:

7. HTML module 33.7 Terugblik module3
Flex-container maken!

8. HTML module 33.7 Terugblik module3
Flex toevoegen aan css

9. HTML module 33.7 Terugblik module3
Flexdirection Row
flex-direction:
row
row-reverse

10. HTML module 33.7 Terugblik module3
Flexdirection Column
flex-direction:
column Column-reverse

11. HTML module 33.7 Terugblik module3
Breedte flex child-element
door flex laten bepalen.
flex:
1 t/m …..

12. HTML module 33.7 Terugblik module3
Flex: verschillende breedtes
Flexbox berekent zelf het geheel door 7 en bepaalt de breedte
d.m.v. het getal achter flex:

13. HTML module 3
Flex-wrap
flex-wrap:
wrap
wrap-reverse
3.7 Terugblik module3
no-wrap (default)
no-wrap (default)

14. HTML module 3
Flex-wrap
flex-wrap:
wrap
wrap-reverse
3.7 Terugblik module3
no-wrap (default)
wrap
Bij het verkleinen van het scherm gaan
de flex-items automatisch naar de volgende rij

15. HTML module 3
Flex-wrap
flex-wrap:
wrap
wrap-reverse
3.7 Terugblik module3
no-wrap (default)
wrap-reverse
Bij het verkleinen van het scherm gaan de
flex-items reverse automatisch naar de
volgende rij

16. HTML module 3
order
order:
1 t/m ..
3.7 Terugblik module3
Met order kun je bepalen
waar je een item wil plaatsen in een row/column

17. HTML module 33.7 Terugblik module3

18. HTML module 33.7 Terugblik module3
align-items:
flex-start(default)
flex-end
center
stretch
align-items
Dit definieert hoe flex-items geplaatst
worden op cross-axis
baseline

19. HTML module 3
align-items Column
3.7 Terugblik module3

20. HTML module 33.7 Terugblik module3
justify-content:
flex-start(default)
flex-end
center
space-between
justify-content
Dit definieert hoe flex-items geplaatst
worden op de main-axis
space-around
space-evenly

21. HTML module 33.7 Terugblik module3
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content

22. HTML module 33.7 Terugblik module3

23. HTML module 33.7 Terugblik module3

24. flex-basis
flex-grow
flex-shrink
3.7 Terugblik module3
Eigenschappen toepassen op flex-items
Voor meer controle op flex-items kunnen deze d.m.v.
de volgende 3 eigenschappen direct targetten.

25. HTML module 3
Eigenschappen toepassen op flex-items
3.7 Terugblik module3

26. Eigenschappen toepassen op flex-items
flex-grow flex-shrinkflex-basis
3.7 Terugblik module3

27. 3.7 Terugblik module3
flex-basis
Flex-basis houdt de breedte van de items
op 100px als het scherm onder de 300px
komt gaat de laatste naar de volgende
rij.

28. Eigenschappen toepassen op flex-items
flex-grow flex-shrinkflex-basis
3.7 Terugblik module3

29. HTML module 33.7 Terugblik module3
flex-grow

30. 3.7 Terugblik module3
flex-grow flex-shrinkflex-basis

31. HTML module 33.7 Terugblik module3
flex-shrink

32. HTML module 33.7 Terugblik module3
flex-shrink

33. 3.7 Terugblik module3
flex-grow flex-shrinkflex-basis
Shorthand

34. HTML module 3
property
display: grid
grid-template-columns
grid-template-rows
css-grid
3.7 Terugblik module3

35. HTML module 33.7 Terugblik module3
Columns Grid eenheden
Te gebruiken eenheden voor columns
• fr (flex grootte)
• Percentage
• VW
• PX
• Points
• En andere

36. HTML module 33.7 Terugblik module3
repeat();
Repeat kan gecombineerd worden!

37. HTML module 33.7 Terugblik module3
rows toevoegen Grid
grid-template-rows
rij1
rij2

38. HTML module 33.7 Terugblik module3
Te gebruiken eenheden voor rows
• fr (flex grootte)
• Percentage
• VW
• PX
• Points
• En andere
rows eenheden

39. HTML module 33.7 Terugblik module3
Column/row start-end
grid-column-start
grid-column-end
grid-row-start
grid-row-end

40. HTML module 33.7 Terugblik module3 Column start-end
grid-column-start grid-column-end
Start met grid van 5 columns en
4 rijen verdeeld over het scherm!

41. HTML module 33.7 Terugblik module3 Column start-end
grid-column-start grid-column-end

42. HTML module 33.7 Terugblik module3 row start-end
grid-row-start grid-row-end

43. HTML module 33.7 Terugblik module3 row start-end
grid-row-start grid-row-end
Cols en rows een naam geven
en gebruiken!

44. HTML module 33.7 Terugblik module3
justify-self:
start
end
stretch
center
justify-self

45. HTML module 33.7 Terugblik module3
align-self:
start
end
stretch
center
align-self

46. HTML module 33.7 Terugblik module3
column-gap row-gap

47. HTML module 3
justify-items start
end
center
stretch
Wordt verwerkt in gehele grid!
3.7 Terugblik module3

48. HTML module 3
justify-items
start
end
center
stretch
3.7 Terugblik module3

49. HTML module 3
align-items start
end
center
stretch
Wordt verwerkt in gehele grid!
3.7 Terugblik module3

50. HTML module 3
align-items
start
end
center
stretch
3.7 Terugblik module3

51. Eindcase t.b.v. cijfer blok3
HTML module 3
Maak met behulp van de stof uit blok3 een (responsive)
webapplicatie over 1 van de volgende onderwerpen.
(als je mij wilt verbazen maak dan je eigen CMS d.m.v.
php/mysql) en javascript t.b.v. interactie)
• Hulpmiddelen t.b.v. online onderwijs
• Jouw eigen portfolio
• Het corona virus
• Games
Lever het geheel als zip/rar bestand in bij de opdracht
van deze les in teams.
Inleveren uiterlijk dinsdag 6 april 2020
3.7 Terugblik module3