Inlämningsuppgift 2

Betyg

Uppgiften bedöms IG/G/VG.

Inledning

Du gissade (förmodligen) rätt. I inlämningsuppgift 2 ska vi implementera layouten på designen från inlämningsuppgift 1 med CSS/Sass, så att när vi går från mobilläge till desktop-läge så anpassar sig innehållet.

I inlämningen ska du använda både grid och flex där det lämpar sig.

Fokus här ligger på just layout och responsivitet. Vill du "färglägga" designen så går det bra, men det är om du får tid och lust över.

Det går också bra att byta "text-tema" på sidan. Huvudsaken är att HTML-elementen och layouten följer riktlinjerna, då dessa ingår i de examinerade momenten. Texter och bilder kan du byta ut.

Att göra

Steg 1: Förbered uppgiften/planera

Bryt ner designen i CSS-uppgifter och tidsuppskatta dessa med storypoints. Infoga detta i din README i repot, på samma sätt som i inlämningsuppgift 1.
Gå igenom både mobil-design och desktop-design.

Steg 2: Kopiera HTML-koden

Kopiera HTML-koden från uppgift 1 och committa den till repot.

Här vill jag nämligen se hur din HTML-kod utvecklar sig under uppgiftens gång.

Steg 3: Koda CSS:en

Koda nu upp din sida med hjälp av CSS (för G) eller Sass (för VG)
Börja alltid med mobilversionen. Det är mycket lättare att flytta från en studentlägenhet till en villa, än tvärt om!
Det är helt okej om du behöver göra ändringar i HTML-strukturen för att få layouten att fungera.
För din egen skull: notera vad du behöver ändra (jag ser i versionshistoriken), och varför. Så lär du dig!
OBS! Det är absolut inte fel att behöva tänka om och tänka rätt när man väl implementerar CSS. Återigen - du är här för att lära dig, inte för att känna dig misslyckad! Om du vore ett proffs redan så skulle det vara helt meningslöst att läsa denna utbildning.

Steg 4: Bonus (frivillig)

Om du har tid och lust kan du "färglägga" designen utifrån tycke och smak. Designen i sig är "enkel" just nu (svartvit) för att fokusera på layout och responsivitet (det brukar vara dom svåra grejerna).

Steg 5: Inlämning

Committa och pusha koden till GitHub

Lämna in länken till ditt repo i inlämningsboxen på itslearning.

Bedömning

I uppgiften bedöms CSS/Sass.

G

Du har skrivit koden i CSS (ej Sass)
Du har använt grid
Du har använt flex
Sidan skalar OK mellan mobil och desktop
Redogöra för hur du har använt AI för att lösa uppgiften (OBS! Det är ej fusk, utan en resurs)

VG

Utöver kraven för G…
Det finns en bifogad tillgänglighetsrapport för CSS
Sass har använts
Sidan skalar sömlöst oberoende av skärmens dimensioner (höjd, bredd)

⚠️ Vanliga misstag

HTML

Du har glömt att kolla listan "Vanliga misstag" från HTML-delen 😉

Inkonsekvent formatering i dokumentet

Tänk på mellanslag, radbrytningar och namngivning. Exempelvis om du skriver alla selektorer såhär:

css

.main-menu {}

.super-heading {}

Dvs. med bindestreck och mellanslag mellan selektornamnet och måsvingen.

Så ska inte en annan selektor se ut såhär (med understreck/"camel case" och utan mellanslag/radbrytning):

css

.main_menu{}
.superHeading{}

Välj en stil och håll dig till den. Samma gäller språk och kolon!

scss

.some-selector{
  color:red; // inget mellanslag efter kolon
  font-weight: bold; // mellanslag efter kolon
}
.en-selektor {} // svenska helt plötsligt?!

Enhet på 0

Du behöver inte sätta en enhet efter ett värde, om dess värde är noll. Dvs. du kan utelämna px:

css

main {
   margin-bottom: 0;
}

Citattecken runt `url`

Sätt gärna citattecken runt url:en på bilder för att vara "på den säkra sidan".

css

body {
   background-image: url('adressen/till/bilden.jpg');
}

Versaler

Gör versaler i CSS. Blir "skrikigt" i HTML annars. Dvs. skriv inte <h1>TAHINI</h1> utan <h1 class="uppercase">Tahini</h1>.

Formatera (indentera) koden automatiskt i VSC

Se instruktioner här.

Import av fonter i CSS

Du ska absolut inte importera fonter i CSS, eller andra CSS-filer för den delen heller. Observera här att det är skillnad på import i Sass, och import i CSS! Teknisk förklaring finns här.

Menyknappen saknar textinnehåll

Om din menyknapp ser ut såhär:

html

<button>
   <span></span>
   <span></span>
   <span></span>
</button>

Tänk på att göra den tillgänglig för "assistive devices" genom att sätta ett aria-label på den, se info här.

.DS_Store

Om du har Mac, skapa en fil som heter .gitignore (med punkten framför filnamnet) och i den filen skriver du:

gitignore

.DS_Store

Så får du inte med denna "dolda systemfil" i versionshanteringen.

Om du redan har fått med .DS_Store i versionshantering (dvs. den finns på git), så kan du ta bort den genom att skriva följande i terminalen:

shell

git rm --cached '*.DS_Store'
git commit -m "Remove .DS_Store files"
git push origin main --force

Det som händer ovan är att den tar bort (rm = remove) den cachade (sparade) filen som heter .DS_Store, och efter det görs en commit med meddelanden (-m) "Remove .DS_Store files". Slutligen pushar du ändringen till servern (i detta fallet GitHub) till branchen main (som är default-branchen), och kommandot --force gör att versionshistoriken skrivs tvingas fram, om det skulle finnas en konflikt.

Du kan även lägga till .map-filen som genereras:

gitignore

*.css.map

Använd kommentarer

Du kan med fördel använda block-kommentarer i Sass för att dela upp din kod och göra det lättare att "skumma igenom" filen, exempelvis:

scss

/* 
----------------------------------------------
----------------------- HEADER ---------------
----------------------------------------------
 */

Eller är du riktigt kreativ kan du köra med någon ASCII-version:

scss

// ----------------8<-------------[ HEADER ]------------------

Använd ej ID som selektor

Även om du har nytta av ID t.ex. för ankarlänkar, använd alltid klasser som selektor för CSS, dvs. Kom ihåg att ID är som ett personnummer, du kan endast använda det en gång. Med klasser skapar du mer återanvändbar kod (och vi gör ju saker av vana, så lägg dig till med rätt vana).

html

<div id="section1" class="section1"></div>

Font-storlek i px

Du ska aldrig sätta font-storlek i px, utan använda rem eller em för att din sida ska vara tillgänglig och skalbar. Läs teknisk förklaring här

Tips, om du använder Sass och tycker det är svårt att tänka rem eller em, gör en hjälpfunktion:

scss

@function rem($size) {
   @return calc($size / 16) * 1rem;
}

h1 {
   font-size: rem(24); // Konverteras via funktionen till (24 / 16) => 1.5rem
}

Sökmotoroptimering

Tänk på hur sidan ser ut utan CSS. Det ska fortfarande finnas ett logiskt flöde, ungefär som om man läste en kapitelbok.

Så kommer sökmotor-crawlern att se sidan utan CSS (du kan simulera det i Firefox via View --> Page Style --> No Style).

Även om du visuellt kan uppfatta texten, så har en "dum robot" ingen möjlighet att tolka texten.

Se exempel i videon nedan. Här har vi skapat radbrytningar i HTML för texten "Tough Cookie" högst upp i dokumentet med hjälp av <br>. Då läses det upp som "Capital T", "Capital O", osv. Det begriper ju ingen. När den sedan läser upp "Tough Cookie" så är det mycket tydligare.

Hotlinking av bilder

Vad är hotlinking?

Tänk också på att när du länkar en bild från en annan källa, så har du ingen kontroll över bilder. I värsta fall kan bildinnehållet ersättas med någonting olämpligt.

Därutöver finns en rad andra problem med hotlinking, se t.ex. här.

Compressed i Sass

Glöm inte att ändra tillbaka till "compressed"-formatet i Sass innan slutinlämning, om du valt att köra med expanderat format under arbetets gång.

Google Fonts

Om du kopierar Google Fonts flera gånger, så riskerar du att få preconnect-taggarna dubbelt:

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Rensa bort ev. dubbletter i din HTML-fil. Kombinera också gärna Google Fonts-länken så att du har alla fonter i en och samma. Så istället för:

html

 <link
      href="https://fonts.googleapis.com/css2?family=Jockey+One&display=swap"
      rel="stylesheet"
    />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
    rel="stylesheet"

ska du ha:

html

<link href="https://fonts.googleapis.com/css2?family=Jockey+One&family=Roboto+Condensed&display=swap" rel="stylesheet">

Detta åstadkommer du genom att välja alla fonter direkt som du vill använda, så får du en kombinerad länk av Google, istället för att välja enstaka fonter flera gånger. Om ett typsnitt erbjuder flera tjocklekar, välj helst också bara dom som används så blir sidan mer snabbladdad än om alla tillgängliga tjocklekar laddas in.

Och när alla fonter laddas in gemensamt i en länk, så blir sidan snabbare.

Sidtitel h1

Sidans viktigaste titel (t.ex. ett företagsnamn) bör sättas som en <h1>-tagg.

Det ska bara finnas en <h1>-tagg på sidan.

Backup-font

Ha alltid en backup-font när du använder special-fonter, så att om det skulle bli något strul, så ser det hyfsat likt ut i alla fall. Bra backup-fonter är de generiska font-klasserna (sans-serif, serif, monospace).

css

h2 {
  font-family: 'Jockey One', sans-serif;
}

Height istället för min-height

Använd gärna min-height som måttenhet som "standard" när du behöver sätta höjd på någonting. Om upplösningen är "låg" (på höjden, alltså inte dålig i pixlar) och innehållet inte får plats på skärmen, då stretchar "containern" för att få plats med innehållet. Säg att man t.ex. tar upp inspektorn eller surfar i landskapsläge på en mobil - då kan innehållet flöda över och det blir fult.

Namngivning klasser

När du namnger saker i HTML/CSS, fundera på om designens innehåll kan ändras. Exempelvis kanske "kunden" väljer att byta ut en bild på en tomat till en potatis. Har du då döpt klassen till .tomato så blir det mindre logiskt när bilden är en potatis. Då kanske ett bättre klassnamn hade varit .food-image eller liknande. Försök att tänka generiskt och "framtidssäkra".

Validera

Glöm inte att validera din HTML. Även om validatorn inte är perfekt så hittar den många fel! Du kan klistra in länken till din live-sida, eller klistra in koden direkt.

Checklista saknas

Du har inte skrivit en checklista till dig själv på saker du ska dubbelkolla i ditt dokument! Viktigast är t.ex.:

Tillgänglighet och tillgänglighetsanalys
Validering
Formatering på koden

srcset

För plus i kanten (och om du kan bildbehandling sedan innan), använd gärna srcset på bilder.

Inlämningsuppgift 2 ​

Inledning ​

Att göra ​

Bedömning ​

G ​

VG ​

⚠️ Vanliga misstag ​

HTML ​

Inkonsekvent formatering i dokumentet ​

Enhet på 0 ​

Citattecken runt url ​

Versaler ​

Formatera (indentera) koden automatiskt i VSC ​

Import av fonter i CSS ​

Menyknappen saknar textinnehåll ​

.DS_Store ​

Använd kommentarer ​

Använd ej ID som selektor ​

Font-storlek i px ​

Sökmotoroptimering ​

Hotlinking av bilder ​

Compressed i Sass ​

Google Fonts ​

Sidtitel h1 ​

Backup-font ​

Height istället för min-height ​

Namngivning klasser ​

Validera ​

Checklista saknas ​

srcset ​

Inlämningsuppgift 2

Inledning

Att göra

Bedömning

G

VG

⚠️ Vanliga misstag

HTML

Inkonsekvent formatering i dokumentet

Enhet på 0

Citattecken runt `url`

Versaler

Formatera (indentera) koden automatiskt i VSC

Import av fonter i CSS

Menyknappen saknar textinnehåll

.DS_Store

Använd kommentarer

Använd ej ID som selektor

Font-storlek i px

Sökmotoroptimering

Hotlinking av bilder

Compressed i Sass

Google Fonts

Sidtitel h1

Backup-font

Height istället för min-height

Namngivning klasser

Validera

Checklista saknas

srcset