Antons Index


Tjena! välkommen till min indexsida för webutveckling 1!
Här så kan man hitta de olika övningar jag gjort under kursens gång.
Välj en av flikarna över denna text för att komma till respektive kategori.

Övningar under kursen webutveckling 1

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.
Första hemsidan
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.
Andra hemsidan
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 1
Övning 2 Övning 3
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 4
Ö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 5
Ö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 6
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 Flex
Övning Grid handlade om att lära os CSS grids, ungefär likadant som flexbox men css istället!
Övning Grid
Övning 9 skulle lära oss om en praktisk användning för grids. I detta fall en simpel faktasida med reklam.
Övning 9
Detta är en fortsättning på övning 9, den har annorlunda menyer, lite fancy sådär
Övning 9 Övning 9
Denna övning handlade om att lära oss form elementet, resultatet blev en vacker meny för att skicka läxor!
Form 1
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...
Form 2
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.
Quiz
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!
ResponsiveWeb
Oj oj oj! Nu händer det grejer! Javascript och jquery används i denna sida för att skapa några fantastiska effekter!
Javascript sida
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å b versionen av sidan får du ytligare en funktion! Håll över "(test)" knappen vid respektive färg för att den ska blinka!
Javascript 1a sida Javascript 1b sida
...
Javascript sida
Bonussidor!
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å. Av någon anledning har den helt pajat.
Gamla Indexsidan
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.
Bakgrundsövning