Skip to content
STI Frontend
CSS
HTML
Javascript (Js)
Sammankopplande
Resurser
Tentamen
LektionsPDF
Hemside-input
Hemuppgifter
Schema
More
Share
Explore
Hemuppgifter

icon picker
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.)
⁠
https://codepen.io/francisco-antonio-oscar-padilla/pen/xxLrXWq
⁠
⁠
⁠
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.)
⁠
https://codepen.io/francisco-antonio-oscar-padilla/pen/KKvqXGK
⁠
⁠
Här finns även en generator som skapar CSS för exakt den gradient ni vill ha:
⁠
https://cssgradient.io/
⁠
⁠

⁠
bild.png
⁠
⁠
⁠
bild.png
⁠
⁠
bild.png
⁠
⁠
Här är 2 stycken labbar att testa och öva på under dagen!
Testa att träna på att göra ett Twitter eller Facebook-inlägg Liknande det nedan:
2. Testa att träna på att göra miniräknare Liknande någon av de nedan:
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.