Skip to content

STI Frontend

Javascript (Js)

Sammankopplande

More

Share

Explore

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.)

⁠

https://codepen.io/francisco-antonio-oscar-padilla/pen/xxLrXWq⁠

⁠

⁠

⁠

⁠

⁠

⁠

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/⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

⁠

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.