Du ska nu ge dig in på webbutvecklingens långa, roliga, bana, man kan aldrig bli fulllärd eller klar man blir bara ständigt bättre och bättre. Denna vecka så ska vi hålla på med grunden i html, vi kommer köra ren html idag, alltså inte så vackert men funktionellt!
Titta på genomgång och kör igång med uppgifterna nedan.
Ps. Ladda ner sublimetext för att underlätta skapandet av sidor.
Vi ska börja med att återskapa index.html från denna mapp, vi kommer ta det stegvis och gå igenom varje del lugnt och metodiskt.
Börja med att skriva in <html och klicka enter så får du en gratis grund att stå på.
Börja i din <head> tag, vi vill att det ska stå vilken sida det är vi är inne på våran navigeringsmeny i webbläsaren.
För nuläget så nöjer vi oss där i <head> vi går vidare till <body> taggen, vi börjar med att skapa en rubrik där ni kan välkomna besökarna till sidan skapa sedan en <article> </article> mellan dessa article taggar så ska majoriteten av vår kod ligga.
Högst upp i articlen så vill vi skapa en navbar där ska vi lägga en <a> som länkar till denna sida, detta är i förebyggande syfte då vår navbar kommer populeras med fler sidor under kursen.
Återskapa innehållet i <article> använd taggarna <p>,<b>,<ul>,<ol>,<li>. Vet du inte vad det betyder? Fråga här
Lägg sist in en bild du tycker är passande längst ner i articlen.
Under article ska vi skapa en <footer> inuti footern så ska vi beskriva för användaren vem som har gjort sidan och när.
Nu är vi klara med vår startsida, vi gör nu en kopia på sidan som vi skapat så vi använder samma struktur, denna sida ska vi döpa till Cognitio, på denna sida så skapar vi en h1 inuti articlen som heter lektion 1, som vi senare kommer besvara frågor under. Kom ihåg att lägga till Cognitio till navbaren så att vi kan navigera mellan startsidan och Cognitio.
Beskriv skillnaden mellan <ul> och <ol> skriv ner ditt svar under lektion 1 på Cognitio sidan.
Lägg till <meta charset=”utf-8”> i <head> objektetVad händer? Beskriv i Cognitio varför och hur.
Förklara skillnaden mellan huvud och kropp(I en webbsida då vill säga).
Denna vecka så ska vi ge oss in på CSS och försöka sätta lite färg och liv till våran sida.
CSS är väldigt brett och man kan göra allt från att sätta färg på bakgrunder till att ändra knapparnas storlek om man hovrar på dem och mycket mer.
Titta på genomgång och kör igång med uppgifterna nedan.
Börja lektionen med att göra en kopia på lektion 1 mappen och döp om den till lektion 2, denna mappen kommer vi utgå ifrån i med dessa uppgifter.
Vi ska börja med att “måla” på våran sida o göra den lite roligare,du behöver inte ha samma färger eller former som jag, vi kommer ta det stegvis och gå igenom varje del lugnt och metodiskt.
Det första vi vill göra är att skapa en css fil, förslagsvis “style.css” är ett bra namn för den.
Börja i din <head> tag, det första vi vill göra är att länka ihop våran cssfil med våran html fil, kika på <link> i htmlen.
För att se om denna ihoplänkning har fungerat så kan du skriva i din cssfil body{background-color: green;} fungerar det som det ska så borde bakgrundsfärgen vara grön.
Försök sätta färg på sidan på liknande sätt som jag har gjort i exempelt och var kreativ och testa mycket, här finns mycket tips och trix med hur man använder css.
Lägg till en class på ett object och ett id på ett annat, tänk på att klasser i css skrivs med en .framför och det är # för idn. T.ex “ #id “ ,” .klass”.
Kom ihåg att ändra om länken i navbaren så vi har en som går till förra veckans lektion och en till denna.För att iterera uppåt en mapp så skriver man “./” och för att gå in till en undermapp så lägger man på “../” så t.ex “./../Joakimsmapp/mingamlasida.html”, fråga om det är svårt!
Vi ska nu testa på lite CSS animering lägg till “:hover” efter ett object i CSSen och se vad skillnaden blir(skriv dit det sedan i din Cognitio), gör sedan så att vår footer har en annan bakgrundsfärg när man hovrar över den.
Testa ha en klass och ett id på ett objekt(t.ex ‘a’,’p’), ge varje del en separat css där den ändrar bakgrunden, objektet ska ha blå bakgrund, klasen röd och id:et brun, vilken bakgrund blir det och varför ? Skriv ditt svar i Cognitio.
Om man har flera sidor kan man ha samma css till alla dem eller måste man ha en separat CSS för varje? Förklara och motivera varför och hur du tänker.
Vilken färg har apan som bakgrund och på texten, berätta varför i din Coginito.
Console.log(“Wohoo Javascript!”); Eller som vi säger på svenska, “jättekul att komma igång med javascript!”.
Denna vecka kommer vi kika på grunderna i Javascript och då med mest inriktning på grunderna såsom Consolen och eventhandlers som gör det möjligt för häftiga saker när vi gör knapptryckningar.
alert(“tuta och kör!”);
Innan vi kör igång så ladda ner Visual studio Code.
För mer info om javascript så kan man kika här!
Använd detta som grund i ditt javascript:
(function () {
"use strict";
//kod
}());
Uppgiftens flip
Uppgifter
Vi ska nu piffa till våran index sida med lite Javascript, kika igenom exemplet och se om du hittar några javascript där.
Jag antar att du hittade någon Javascripts kodsnutt på sidan, vi ska börja med att öppna ett console fönster, det gör vi lättast genom att klicka f12(alt. fn+f12), väl i consolefönstret så ska du se meddelandet "hej", under hej skriver vi in följande och trycker Enter
Sidoskaparen = {Namn: "Joakim", Ålder: 22,Katter: true,Hobbys: ["Koda","Klappa katt"]};
console.dir(Sidoskaparen);
console.log(Sidoskaparen.Hobbys);
typeof(Sidoskaparen);
typeof(Sidoskaparen.Ålder);
Fundera ut och förklara svaren i Cognitio.
Det gick ju bra! Vi nöjer oss där med consolerutan för nuet och ger oss in i VisualStudio Code och skapar en script.js fil som vi länkar ihop med index.html. Det första vi vill göra är att förklara för användaren att han är på denna sida om han klickar på den i navbaren, dagens ledtrådar är “getElementById(“idetsnamn”)” och “addEventListener(‘click’,function(){});”
Behöver du mer tips så Binga eller kolla på videon tillhörande denna lektion.
Om uppgift b gick vägen så har vi nu en EventListener i form av en klickbar länk.Nästa steg i våran utveckling är att vi vill få ut dagens datum på sidan, det vi vill göra då är att använda ett Date object, testa få ut årtalet i med hjälp av console.log , får du det att fungera så kan vi gå vidare, det vi vill göra nu är att vi vill lägga detta i ett nytt element så vi skapar ett sådant och sedan en textnode som ska innehålla dagens datum, nu vill vi appenda textnoden på elementet och sedan vill vi få ut objektet på skärmen, helst på samma plats
Nu kommer vi till bossen på denna nivå i kursen, bossuppgiften är att göra så vår bild ska ändras till någon annan bild när vi klickar på den, för att klara denna uppgift så behöver vi en array där du lägger de olika bildernas sökvägar i och att använda “this” , du kan antingen köra att den ger en random bild(titta upp random) eller köra med att den kör i en vald ordning.
Testa,kolla upp och beskriv skillnaden på appendChild() och insertBefore(), skriv dina resultat i Cognitio.
Vad är skillnaden mellan querySelector() och querySelectorAll() skriv ner ditt svar i Cognitio.
Förklara Sidoskapare och dess innehåll, förklara även typeof(), console.log() och console.dir()
Förklara hur addEventListener fungerar och ge ett annat exempel än “click”
“Validering (av engelskans validation) är när man officiellt godkänner ett dokument och bekräftar att det som står i dokumentet är korrekt. Ofta består dokumentet av ett förslag och valideringen går då ut på att se till att förslaget verkligen stämmer med förslagsställarens önskemål.” - Wikipedia
Då kör vi!
Ladda ner Filezilla Client innan denna lektion.
Uppgiftens flip
Uppgifter
Vi vill börja med att få upp våra sidor på nätet, följ instruktionerna på videon och logga in på ditt privata elevkonto och ladda upp dem.
Det första vi vill göra är att skapa en css fil, förslagsvis “style.css” är ett bra namn för den.
Vi vill börja med validatorerna, länka ihop en html validator med vår sida ta bort eventuella fel.
Gör samma med en css validator
Vi ska nu dela upp sidan så vi får lite olika spalter, ta hjälp av float för att dela upp article i tre olika dividers,den längst till vänster ska vara ⅓ av article, den i mitten ½ och den till vänster resten.
Vi vill nu dela upp våran mitten div i två ytterliggare kolumner som är ½ mitten diven var. Ta en printscreen och lägg i Cognitio.
Nu har vi blivit mästare på floats och vill återskapa sidan så som den ser ut på exemplet(Bara två divar).
Förklara meningen med validatorer i Cognitio.
Finns det några nackdelar med float, vilka i så fall?
Finns det något annat sätt än float för att strukturera upp saker i olika spalter?Förr i tiden använda man table för hela sidorna, vad är bäst/snyggast? table eller float?
Testa lägga in din javascriptskod i en javascripts validator ? Ger den några varningar? Varför i sånt fall tror du ?
Skärmstorlekar är alltid ett krångel när man håller på med webbutveckling och övrig gränssnittsdesign, vi kommer försöka göra detta mindre krångligt genom att skapa en specifik css fil för varje typ av enhet vi vill optimera för, i våra fall mobiler och paddor.
Uppgiftens flip
Uppgifter
Vi har nu kollat på videon och skapat 3 olika css-filer , det vi vill börja med nu är att vi vill istället för att bara ändra färg på sidan när storlek ändras så vill vi anpassa den mer, ni vill göra om så inga texter blir ihop tryckta, inga bilder går ut över annat osv.
EXTRA!
Nu när vi följt videon så har vi fått en smak på vad anpassning är, jag vill nu att ni återskapar sidan på länken,först den till vänster och sedan gör om den till den högra.
När vi är klar med detta så vill vi börja sammanställa allt vi har gjort, vi ser till att det är snyggt och prydligt.Alla länkar ska fungera, alla sidor ska vara klara och alla Cognito frågor ska vara besvarade.
Nästkommande vecka kommer vi ha checkpoint så förbered er på det med att kolla in gamla uppgifter och videos. Efter det kör vi igång med moment B.
