Övning 0

Den första hemsida jag skapade. Inte mycket att se, mest för att lära mig hur allt funkade. Denna hemsida var helt programmerad i anteckningar appen i windows.

Övning 00

Den andra hemsidan jag gjorde. Också programmerad i anteckningar. Man fick träda lite mer på egen hand, jag valde att lägga till en snygg bakgrund till rubriken. Det ska finnas en bild på mig på sidan, tyvärr använde den absolut källa (C:/Users/osv, ska använda ../Ovningar/källa) så bilden finns ej.

Övning 1, 2 och 3

Dessa hemsidor bygger på varandra så jag valde att ta med allihop på en och samma gång. I dessa övningar så fick vi lära oss olika funktioner i HTML och CSS för att kunna förbättra våra egna hemisdor. Dessa övningar vxar gjorda när vi fick börja använda vsc (visual studio code) för att skapa våra hemisor. I skapandet av dessa hemsidor fick vi lära oss att använda listor, använda bakgrunder (både text och hela sidan) byta teckensnitt och att använda div elementet.

Övning 4

I övning 4 låg tables i fokus. Ett table fungerar på ungefär samma sätt som i excel, ett rutnät gjort av lådor. Enda skillnaden är att här så måste man göra lådorna själv. Vi fick lära oss olika sätt att använda dessa på, t.ex att man kan ha bild i en ruta på samma sätt som text eller att man kan få en ruta att sträcka sig över flera kolumner/rader.

Övning 5

Övning 5 är en fortsättning på övning 4 och handlade också om tables och gav bara några ytligare utmaningar för dem som ville.

Övning 6

Övning 6 handlade om absolute och relative positionering samt z-lager. Jag tyckte det var ganska svårt att förstå i början, men efter att ha användt det för bla den här sidan så har jag blivit mer van och förstår syftet samt användningsområderna mycket bättre.

Övning 7

I övning 7, flexboxövningen, skulle vi lära oss flexbox. Det är praktiskt taget samma sak som tables fast mer modernt, fungerar bättre och har fler funktioner.

Övning 8

Övning Grid handlade om att lära os CSS grids, ungefär likadant som flexbox men css istället!

Övning 9

Övning 9 skulle lära oss om en praktisk användning för grids. I detta fall en simpel faktasida med reklam. Alla dessa är också i princip samma sak med någon liten skillnad.

Övning 10

Denna övning handlade om att lära oss form elementet, resultatet blev en vacker meny för att skicka läxor!

Övning 11

Här skulle vi göra en undersökning, du får gärna ta den. Resultaten kommer ej att läsas då vi aldrig fick lära oss hur vi faktiskt skickar dem...

Övning 12

Den sista övningen gällande form elementet bad oss göra: "...Ett litet quiz ... där du också vill ha information om användaren". Så här finns ett quiz på några snabba frågor, se om du kan få alla rätt!
Observera att alla frågor inte är faktabaserade, vissa frågor kan ha flera möjliga svar, vissa frågors svar är beroende på individen själv, svar kommer ej att granskas, svar kommer ej att läsas, svar kommer ej ha någon betydelse för framtida val i livet.

Övning 13

Här är ytligare en version av fruksidan, denna gången är den uppdaterad till att fungera oavsett skärmstorlek. Testa att öppna sidan på mobilen och se om du märker något annorlunda!

Övning 14

Oj oj oj! Nu händer det grejer! Javascript och jquery används i denna sida för att skapa några fantastiska effekter!

Övning 15

Trafikljus! Vad betyder de? Om detta är något du undrar så är denna sida just för dig! Med funktioner som: Information om de olika färgerna och en bild på ett trafikljus! Men vänta! Det finns mer! Om du klickar på den andra versionen av sidan får du ytligare en funktion! Håll över "(test)" knappen vid respektive färg för att den ska blinka!

Bonussidor

Första index-sidan

Detta var min första indexsida, påbörjad någonstans mellan övning 2 och 3. Denna sida var till för att just vara ett index för alla mina sidor som jag gjort. Det gav mig även chans att få testa olika andra saker och experimentera med olika element i html och css. Jag tyckte denna sida var bra men den var ganska kaosig. Saker bara ligger slängda hit och dit för att jag skulle kunna testa saker. Men den riktiga anledningen till att jag valde att göra en ny var för att jag tänkte att jag skulle kunna göra en mer proffsig sida. Jag ville dock inte att allt jag gjort skulle försvinna, så jag sparade den och gjorde istället en ny sida från grunden, vilket nog var det jag skulle behöva gjort ändå. Knapparna fungerar inte längre men jag orkar inte fixa det.

Bakgrunds-molejox

Denna hemsida gjorde jag för att jag precis lärt mig använda coniac-gradients för att skapa coola mönster. Då kände jag att jag ville prova olika designer och då behövde jag givetvis en sida att göra det på, BAM! En fantastisk bakgrundssida med olika designer.

Min andra index-sida

Detta var den andra index-sidan jag gjorde. Som beskrivet i beskrivningen av min första index-sida så skapade jag denna för att jag ville göra en bättre och mer proffsig index-sida. Det behövdes inte göras men jag tyckte det var kul så det var därför jag skapade den.

När man började årskurs 2 så behövde man däremot göra en ny index-sida och jag behövde därför säga hejdå till denna. Den nya (den nuvarande) index-sidan är gjord mest för att vara unik och rolig mer än proffsig. Däremot har jag förbättrat många aspekter som den förra sidan gjorde dåligt.

Huvudsakligen har jag sett till att sidan är responsiv. Dvs. att den fungerar på alla skärmstorlekar. Att allting ligger på en kub gjorde detta väldigt lätt eftersom det i principp bara är att ändra storlek på kuben och så löser det sig. Det är även intuitivt att skrolla kuben genom att swipea vilket är något jag verkligen gillar med denna nya sida.

JS start

A B C D E F G H I J K L

Några små övningar för att lära sig basic JavaScript och dess syntax. Något som jag redan kunde efter mitt BurkRoulette projekt

JS grunder

A B C D E F G H

Lite fler grundläggande JavaScript övningar. Inte något super-häftigt än.

JS villkor

A B C D E F

Övningar för att lära sig använda villkor i JavaScript. Väldigt roliga små utmaningar att ta sig ann. Jag tyckte personligen att övning E var den roligaste.

JS while

A B C D E F G H I

Övningar för att lära sig loopar, i detta fall while-loopar. Inte särkilt svårt, väldigt användbart!

JS For

A B C D E F G H

Exakt samma som med while-loopar, men med for-loopar. Övning h är annorlunda.

JS Timers

A B C D E F G H

Övning för att lära sig hur setTimeout och setInterval funktionerna fungerar. Vi skapade några timers och några stoppur.

JS Arrays

A B C D E F

Några övningar för att lära sig hur man använder arrays i JavaScript. Många av dessa var roliga att göra! Några höjdpunkter är c, där man skulle göra sin egen sorteringsalgorim. Och f, där man skulle hitta och skriva ut de 100 första primtalen.

JS Funktioner

A B C D E F G H I J

Övningar för att lära sig funktioner. Känns lite sent att göra det nu eftersom man typ redan använt funktioner till de andra övningarna. Ingen var så super-interresant.