3. Moment03 - Lite fördjupning på HTML & CSS

Nu har du troligtvis fått lite ordning på grunderna i html och css och vi skall jobba vidare med dessa teknikerna men vi skall också börja fundera på hur vi bygger upp en sida. Att kunna skriva kod är en sak, men att bygga bra sidor av det är svårare.

3.1 Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

3.1.1 Centralt innehåll

• Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
• Teckenkodning, begrepp, standarder och handhavande.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.

3.2 Undervisningsmaterial

Vi fortsätter jobba med Bro Code för att slutföra hans grundkurs. Precis som tidigare kommer jag lägga till lite eget material där jag känner att det behövs. Vissa delar av hans genomgångar kanske jag också lägger lite mindre vikt vid och då meddelar jag att denna delen är inte så aktuell eller användbar. Då bestämmer du själv om du vill göra det avsnittet eller inte. Det kanske finns något tillfälle då just du känner att just denna delen är användbar.

3.2.1 overflow

Detta är en del som jag inte tycker är så användbar. Här finns det risk att elever går bananas och skall skapa scroll i oändlighet för att gömma massa information. Det kommer bara ge dig problem senare. Träna på att bygga rena, tydliga och bra strukturerade webbsidor istället.

3.2.2 display property

En bra genomgång av hur vi olika element placeras ut på webbsidan. Genomgången berör block, inline och inline-block.

3.2.3 height and width

Han går igenom hur attributen höjd och bredd fungerar på element och leker sedan lite med positionering av div-element brevid varandra.

I den andra delen av avsnittet så jobbar han med height av hela webbsidan. Detta tycker jag är något vi skall använda oss sparsamt av då vi senare kommer kolla på hur vi bygger webbsidor med fokus på mobilens storlek. Utgångspunkten bör vara att det är innehållet som styr storleken på olika element och inte något vi tvingar fram. Det är trots allt skillnad att bygga design på en affisch, ett papper eller i en informationsbroschyr. Att i detalj designa en webbsida som kan visas på en liten mobiltelefon eller en stor skärm i ett köpcentrum är något helt annat.

3.2.4 positions

Här går han igenom de fem olika typerna av positionering som går att göra med våra element. Även här gäller det att inte överdesigna för det gör oftast mer skada än nytta.

3.2.5 background image

Här går han igenom hur du lägger in en bakgrundsbild på din webbsida. Här finns en bakgrundsbild från pexels som du kan använda. Den finns också i en mindre version om du vill testa som han gör i filmen.

3.2.6 combinators

Här går han igenom en sak som är väldigt användbar men som jag brukar presentera senare i kursen och då som lite överkurs. Att kunna detta kan hjälpa er att skriva kod med färre klass- och id-selektorer.

3.2.7 pseudo-classes

Här går han igenom pseudoklasser för CSS och hur de kan användas för att både påverka utseendet hela tiden men också när olika händelser inträffar, t.ex. att en muspekare markerar en länk.

3.2.8 pseudo-elements

Pseudo-element ger dig möjlighet att påverka delar av ett element t.ex. första bokstaven i en paragraf som kan bli större.

3.2.9 pagination

Pagination är ett sätt att hantera större mängder text, eller data, och då vi vill kunna bläddra mellan olika delar av en sida. Detta kan vara användbart vid olika tillfällen även om det kanske är ont om sådana tillfällen i just denna kursen. Däremot så är det en bra introduktion till de kommande filmerna.

3.2.10 dropdown menus

I denna film så bygger han en dropdown meny. Menyn är givetvis användbar men det är också en bra genomgång att det går att göra ganska mycket med bara CSS då HTML-strukturen är väldigt enkel.

3.2.11 navigation bar

I denna filmen går han igenom hur du bygger en navigation bar, detta är väldigt användbart när du bygger en webbplats som innehåller flera webbsidor som du vill nå.

3.2.12 website layout

I denna filmen tar han ett större grepp på hur du bygger upp en webbsidans layout. Han går också igenom de semtiska elementen som bygger upp html5 och berättar också hur han använder dessa delar och vad de betyder.

I filmen så berättar han varför han använder klasser, bl.a. när han skriver <nav class="navbar"> så förklarar han att class="navbar" är till för att beskriva att det är en navbar som skall göras. För mig så lever detta kvar från HTML4.01 där han istället hade skrivit <div class="navbar"> men i HTML5 när vi har de semantiska elementen så kommer ju <nav>-elementet själv beskriva att detta är en navigation bar. Så mitt förslag är att skapa klasser där det behövs men inte när de inte behövs. Bro Code jobbar genomgående så i hela sin kurs och det är inte fel, men det blir lite merarbete utan att det skapar ytterligare tydlighet.

Bro Code tar även i denna filmen upp universalselektorn * { } för att ge alla element ett visst värde. Han sätter i filmen värdet * { box-sizing: border-box; } men det skulle han kunna göra i de tre elementen aside, section och article och då skulle det gå snabbare. Det går ju också att skriva aside, section, article {box-sizing: border-box; } för att inte behöva skriva detta i varje element.

Ibland kan man bli sugen på att kunna nollställa t.ex. margin och padding för alla element men det finns ett problem med detta och det är att det tar lite för mycket tid att ge en, eller flera instruktioner, till alla element oavsett om vi skall använda dessa eller inte. Så använd detta kommando med förnuft.

I denna filmen så introducerar han @media .... { } vilket används för att bygga responsiv design vilket i korthet innebär att han skapar speciella instruktioner för att skapa mobilanpassning av sina webbsidor. Vi kommer ägna ett helt moment lite senare till just detta så vi behöver inte gå djupare än vad han gör i filmen i ämnet just nu.

3.2.13 image gallery

Dags att leka lite mer med bilder. Från Pexels har jag fixat tre bilder (burger.jpg, guacamole.jpg, pancakes.jpg) som du kan använda och för att det skall vara ännu enklare så har jag sett till att de har samma storlek och för detta använde jag Redketchup som har några olika onlineverktyg för bildbearbetning.

3.2.14 icons

I detta avsnitt så introducerar han ikoner från FontAwesome. Denna gången vill jag att ni skapar egna konton där för ikoner är något som ni kommer behöva använda senare under kursen.

Ibland gör han lite väl onödiga saker i sina filmer. Jämför css-koderna i mitt exempel nedan med de koder du har skrivit från filmen. Läs också mina kommentarer så skall jag visa några saker som jag tycker går att förenkla.

/* Detta är exempel tagna direkt från avsnitt #34 icons */

/* att slå ihop flera klasser med "." innebär att kombinationen av dessa klasser kan styras med css men det innebär också att alla dessa klasser måste finnas för att instruktionen skall slå igenom. */ 
.fa-solid.fa-house.fa-5x{
    color: hsl(0, 0%, 66%);
}

/* Att kombinera en cssinstruktion med samtliga klasser gör ju att varje element måste formatteras individuellt. Då kanske det är att föredra att endast ange en klass för att formattera alla element med den klassen på samma sätt. */
.fa-brands{
    color: hsl(240, 100%, 50%);
}

/* Sedan går det ju att ge individuell instruktion till en enskild klass. */
.fa-youtube{
    color: hsl(0, 100%, 50%);
}

3.2.15 flexbox

Här ger han en kort introduktion till flexbox som är en teknik som är användbar för att placera ut element i förhållande till varandra.Vi kommer kika vidare på flexbox lite senare i kursen då det är väldigt kraftfullt och ofta gör det enklare att bygga upp webbsidor jämfört med att köra float: left; och andra tekniker.

3.2.16 transformations

Less is more.....

3.2.17 animations

Och ännu mer less is more.....

3.3 Sida på beställning

Vi avslutar momentet med en inlämningsuppgift.

Inlämningsuppgift: Informationssida om MarkDown

Nu skall du få en uppgift att bygga en sida på beställning som är så lik orginalet som möjligt. En fil med text och instruktioner laddar du ner här och bilden som du skall använda på sidan laddar du ner bilden.

Bild på sidan du skall replikera

Krav på uppgiften

• Bygg sidan med en extern css-fil som du länkar in på ett korrekt sätt.
• Namnge samtliga filer på lämpligt sätt, lägg dem gärna i en egen mapp för denna uppgift.
• HTML- och CSS-kod skall vara korrekt och validerad innan den läggs upp på din domän.
• Testa din sida, se till att alla css-filer, bilder och länkar fungerar.
• Länka uppgiften från din landingpage.
• Skapa ett inlägg på din WordPress där du utvärderar ditt arbete och tycker till om uppgiften. Länka också direkt till uppgiften.

Extrauppgift

Om du tycker att designen ser ut som skrutt så bygg en ny version av samma uppgift med en helt egen design där du har fria händer att göra som du vill. Ingenting av texten får tas bort men det är helt ok att lägga till mer text, fler bilder osv.

När uppgiften är klar så följer du samma krav på denna uppgiften som den tidigare.

OBS: Detta är en ny version av den tidigare uppgiften, så du får inte välja att bara göra extrauppgiften utan då skall bägge redovisas.

Landing page

Om du får lite tid över och ändå skall uppdatera din landing page så passa på att testa någon ny teknik som du har lärt dig i detta moment. Låt din landing page spegla din utveckling genom kursen. Glöm heller inte att spara din gamla version för att senare i kursen kunna se tillbaka och följa din utveckling, det är alltid kul att se hur långt man har kommit.