oefeningen

Opgelet Deze oefeningen zijn deprecated, we verwijzen je graag door naar de oefeningen in de nieuwe oefeningen sectie

oefeningen

Deze oefeningen worden behandeld tijdens LW4 (UI&UX en CSS): Labo 8

oefening 1

Maak op basis van volgende screenshots oefening 1 na. De html-elementen zijn toegevoegd als bijlage.

Alles tot en met 575px is standaard (lijst-1)

Media-queries

• small devices: gsm, 576px en groter (lijst-2) • medium devices: tablets, 768px en groter (lijst-3) • large devices: desktops, 992px en groter (lijst-4) • x-large devices: grote desktops, 1200px en groter (lijst-5) • xx-large devices: heel grote desktops, 1400px en groter (lijst-6)

Tekstkleuren

gebruik de volgende kleuren voor de tekst

1. #0d6efd (blauw)

2. #198754 (groen)

3. #0dcaf0 (cyaan)

4. #ffc107 (geel)

5. #dc3545 (rood)

6. #ffffff (wit)

7. #cf04beb4 (achtergrondkleur xxl - paars)

lijst 1

lijst 2

lijst 3

lijst 4

lijst 5

lijst 6

assets oefening 1

2KB

oefening-01-HTML.txt

oefening 2

Maak wat je ziet in oefening-02.mp4 na.

• kleuren: red, white

• media-query op 1000px, waarbij richting flex verandert

• gebruik lettertype: Arial

5MB

oefening-02.mp4

assets oefening 2

99KB

oefening-02-width-999px.png

image

119KB

oefening-02-width-1200px.png

image

176B

oefening-02-HTML.txt

oefening 3

Vertrek vanuit labo 7 met oefening 4. Schrijf extra css met media-queries voor schermen tot max. 768px:

• in de body zorgt de grid-template ervoor dat header, nav, main, aside en footer onder elkaar komen staan

• main & aside hebben een padding van 2 rem

• main img heeft een padding van 0, behalve onderaan 1rem

• section portfolio toont flex-items onder elkaar met padding 0rem

• de afbeelding in de portfolio is 100% breed

• de figure heeft een marge onderaan van 3rem

vanaf 769px

max breedte 768px

oefening 4

Maak de volgende oefening na mbhv CSS Grid en Media Queries.

Vanaf 700px

Tussen 500 en 700px

kleiner dan 500px