Hemuppgifter

Till Fredag 29 okt

Här är 2 stycken labbar att testa och öva på under dagen!
Vi kommer första timmen (som vanligt) av lektionen att gå igenom 1-2 exempel från klassen.
Dessa är övningsmoment som går att lösa med den HTML & CSS vi gått igenom.
Skickar även med 2 stycken code-pen för de som är sugna på att träna på 2 stycken frivilliga extra-moment
(mask 6 gradient)
Testa att träna på att göra ett Twitter eller Facebook-inlägg Liknande det nedan:

Tips:
Använd display: inline-block; display:inline; float eller “flex”

Använd
color: ; för att sätta egen textfärg.
background-color: ; för att sätta egen bakgrundsfärg.
font-family: ; för att ange ett typsnitt/textutseende.
Skickar även med er en CodePen för er som helt med CSS vill få till “runda bilder”. Annars går det såklart att bara ta en rund bild från Google.
( Är bara object-fit: cover; som är nytt. ej med på tentan utan en copy-paste-snippet ni kan använda för de som vill.)
bild.png
bild.png
2. Testa att träna på att göra miniräknare Liknande någon av de nedan:

Tips:
Använd display: inline-block; display:inline; float eller “flex”
Använd border: 1px solid white;
Avnänd font-size: ; font-weight: ; och text-align: ;

Här är en enkel codepen som visar upp en gradient (färgövergång) i CSS:
( Är bara background-image: linear-gradient( FÄRG1 , FÄRG2 ); som är nytt. ej med på tentan utan en copy-paste-snippet ni kan använda för de som vill.)
Här finns även en generator som skapar CSS för exakt den gradient ni vill ha:

bild.png
bild.png
bild.png
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.