Vi gick bland annat igenom
- size-units
- CSS backgrounds
- pseudo-classes
samt att vi kombinerade allting vi lärt oss hittils (inkl. flexbox) för att göra en komplett sajt-layout.
Missa inte vad ni ska läsa på till på torsdag längst ner!
Size-units
px
Pixels, alltid samma oavsett webbläsarens inställningar
%
Procent bredd/höjd av närmsta element som definierat en bredd/höjd
vw (viewport width)
Bredd på webbläsarens innehållsfönster. 1vw är 1% av bredden medan 100vw är 100% av bredden på fönstret. Obs, inte samma som innehållets bredd, som kan vara både mindre och större.
vh (viewport height)
Höjd på webbläsarens innehållsfönster. 1vh är 1% av höjden medan 100vh är 100% av höjden på fönstret. Obs, inte samma som innehållets höjd, som kan vara både mindre och större.
em
Relativ till font-storleken på elementet den används på (2em betyder 2 gånger storleken of the current font).
rem (root-em)
Relativ till font-size på root elementet.
CSS backgrounds
- background-image: url()
- background-size: cover
Läs mer om backgrounds på MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/background
Pseudo-classes
Vi pratade om
- :hover
- :focus
- :visited
samt
- :first-child
- :last-child
Läs mer om dem plus måååånga andra på MDN nedan.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Screencasts från dagen
Se spellista på YouTube: https://www.youtube.com/playlist?list=PLj-Kh_TdFr5B55keUREaYN7gXje1gVez2
Workshop
Fortsätt på dagens övning och skriv CSS-reglerna för att få vår doges-section att se ut som vi skissade på tavlan (klicka på bilden för att se den i större format).
Här är källkoden med HTML & CSS för vår header, hero och bara HTML för doges-section:
Till nästa lektion
Till på torsdag vill jag ni läser igenom https://internetingishard.com/html-and-css/forms/ och https://internetingishard.com/html-and-css/semantic-html/ (den här artikeln nämner fler HTML5-element än de vi använt hittills så missa inte att läsa denna också!)