What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
Webdesign (6: CSS Grid)
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 15
next
Slide 1:
Slide
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
This lesson contains
15 slides
, with
text slides
.
Lesson duration is:
30 min
Start lesson
Save
Share
Print lesson
Items in this lesson
Webdesign: CSS Grid
Antje Roestenburg
a.roestenburg@minkema.nl
Slide 1 - Slide
Van ontwerp naar HTML & CSS
Slide 2 - Slide
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt
Wireframe
Ontwerp
Slide 3 - Slide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
Je hebt je layout,
maar hoe begin je nou?
In (ongeveer) 4 stappen:
Juiste html schrijven
Header styling
Content en navigatie styling
Footer styling
Slide 4 - Slide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<div>
<footer>
<header>
...
</header>
<div>...
</div>
<footer>...
</footer>
Grove blokken
Slide 5 - Slide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<article>
<footer>
<nav>
<aside>
<div>
Waar nodig
opbreken in
kleinere blokken
<header>
...
</header>
<nav>...
</nav>
<article>...</article>
<aside>...</aside>
<footer>...
</footer>
Slide 6 - Slide
Hoe werkt CSS?
Een stylesheet maak je in een
eigen bestand
.
Je slaat het bestand op met de naam
style.css
.
Je
verwijst in al je HTML-pagina's
naar de stylesheet.
(zie ook
w3schools.com/css
)
Slide 7 - Slide
Herhaling: Hoe werkt CSS?
Slide 8 - Slide
Herhaling: Opmaak definiëren met selectors
Tag selector (HTML tag)
h2
{
color: blue;
font-style: italic;
}
ID selector (een per pagina)
#footer {
color: red;
}
Class
selector (meerdere)
.article {
background-color: #cccccc;
}
Slide 9 - Slide
Pagina opbouw
Bij het ontwerpen van een website moet je vaak denken in de vorm van tabellen.
Als je een ruwe schets maakt van een website dan bestaat een website vaak uit verschillende basiselementen.
Slide 10 - Slide
Layout
Slide 11 - Slide
HTML
CSS
<div id="grid-container">
<div id="kop">
De kop
</div>
<div id="midden">
Het midden
</div>
<div id="voet">
De voet
</div>
</div>
#kop {
grid-area: kop;
}
#midden {
grid-area: midden;
}
#voet {
grid-area: voet;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop
'
'
midden
'
'voet';
}
Slide 12 - Slide
Grid areas
Grid container
#kop {
grid-area:
kop
;
}
#kopafbeelding {
grid-area:
kopafbeelding
;
}
#midden {
grid-area:
midden
;
}
#middenlinks {
grid-area:
links
;
}
#middenrechts {
grid-area:
rechts
;
}
#voet {
grid-area:
voet
;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop kop
kopafbeelding
'
'
links
midden
rechts
'
'
voet voet voet
';
}
kop
kop
kopafbeelding
links
midden
rechts
voet
voet
voet
Slide 13 - Slide
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 14 - Slide
Aan de slag:
Kijk t/m video
4
Maak t/m opdracht
24
in WebDesign met HTML & CSS
v 0.4
(stel evtl vragen in het Q&A document)
Verzamel ideen (teksten en plaatjes) voor je Website
Slide 15 - Slide
More lessons like this
6 HTML: Lay-outs
January 2024
- Lesson with
18 slides
Webdesign - Les 3 (23/24): CSS
September 2023
- Lesson with
24 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
August 2023
- Lesson with
41 slides
Informatica
WO
Studiejaar 4
html/css - van ontwerp naar website
October 2022
- Lesson with
15 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - van ontwerp naar website
September 2022
- Lesson with
14 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS: Blokkendoos
11 days ago
- Lesson with
34 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
HTML + CSS les 5: ontwerp website + Trello + devtools + PO
August 2023
- Lesson with
22 slides
Informatica
WO
Studiejaar 4
04 - CSS - selectoren
October 2023
- Lesson with
15 slides
ICT
MBO
Studiejaar 1,2