CSS ÖVNINGAR

Del 1 – Sätta upp din programmeringsmiljö för HTML och CSS
  • 1. Logga in på Codepen.io
  • 2. Dra ut kod fönstrena så att du kan se både din HTML och CSS kod.
Del 2 – Din första CSS kod
  • 1. Byt ut textfärgen på alla dina <p> element till röd.
  • 2. Byt bakgrundsfärgen till grön på alla dina <h1> element.
  • 3. Välj ett valfritt HTML-element och sätt bakgrundsfärgen till rosa och sätt texten till blå.
  • 4. Byt ut storleken på dina <p> gör dem till 30px.
  • 5. Testa att göra all din text <p> till stora bokstäver. Googla vilken kod du kommer behöva använda eller se hint längre ner på sidan.
  • 6. Centrera din kod! Om du inte vet hur du ska göra – Googla! Tips Googla på “center text css”.
  • 7. Byt ut typsnittet på dina olika HTML element. Här finns en länk du kan använda för att se vilka du kan använda utan att behöva lägga till extra kod.
  • 8. Testa att lägga till en border valfritt HTML element.
  • 9. Testa att använda margin, kan du se om det du adderar margin till flyttar sig på något sätt?
  • 10. På samma HTML-element som ovan testa att lägga till padding. Ser du någon skillnad? Om inte, testa att lägga till en border på samma element.
Del 2 – CSS fortsättning
  • 1. Centrera en bild! Det fungerar inte riktigt som med text. Testa att googla “center image css” och se om du kan komma fram till en lösning.
  • 2. Bygg din hemsida så som du skulle vilj att den skall se ut. Skall bilderna ligga bredvid varandra? Ska de ligga på rad? Vilka färger skall du använda? Låt bara fantasin sätta stopp!
  • 3. Googla “CSS attribute list” – då kommer du få upp massor av nya coola saker du kan göra med din kod – hittar du någon favorit?
  • 4. Allt handlar om placering på en webbsida, om du vill lära dig mer så gå in på Flexbox Froggy
Extra Övningar – Starta med inspektorn
  • 1. Börja med att ladda ner lektionsmaterialet nedan, och gå till sidan 24-27. Här kan man steg för steg följa hur man öppnar inspektorn i Google Chrome. Läs igenom och se om du kan öppna inspektorn i Chrome.
  • 2.Inspektorn är uppdelad i flera olika delar. Det finns en del där all HTML-kod finns, som ligger till vänster. Kan du lokalisera några av HTML taggarna vi jobbat med innan, isåfall vilka?
  • 3. Till höger i Inspektorn kan du se CSS-koden som finns – känner du igen några av de attributen som används? Kan du se om de finns några attribut som du inte använt innan?
  • 4. Gå till en valfri sida och öppna inspektorn. OM du nu väljer att trycka på knappen som ser ut som en Mobil och Ipad så kan du testa en hemsida i olika format, dvs t ex mobil, ipad och dator. Testa Mobil, Dator och Ipad, vad är skillnaderna på sidan, ser de olika ut beroende på skärmens storlek?
  • 4. Gör nu samma sak som i övning 3, med 2 nya sidor. Vad ser du för likheter och skillander på stora respektive mindre skärmar? Skriv ner!
Presentationen i PDF
Ledtråd övning 4
font-size: 20px;
 
Ledtråd övning 5
text-transform: uppercase;
 
Ledtråd övning 6
text-align: center;
Ledtråd övning Del 2 övning 1
img {
  display: block;
  margin: 0 auto;
}
Haja kod logo

OM OSS

HAJA KOD introducerar programmering och digitalt skapande för barn och vuxna.

KONTAKT

Ingenjörsgatan 9
411 19 Göteborg
[email protected]

Haja kod logo

© Copyright 2020