Mina Övningar

Sigma. Alpha. Upprepa

Övning 1

I övning 1 lärde jag mig grunderna om internet och webben, inklusive hur webbsidor var uppbyggda med HTML och vilka taggar som användes. Jag upplevde utmaningen att förstå kopplingarna och den tekniska bakgrunden till webben, vilket gav mig en stabil grund för vidare studier i webbutveckling.

Övning 1 screenshot

Övning 2

I övning 2 fördjupade jag mig i webbens struktur och använde färger och textformatering i HTML för att förbättra sidornas tydlighet och organisation. Jag lärde mig vikten av att balansera design och innehåll för att uppnå en funktionell och estetisk webbsida.

Övning 2 screenshot

Övning 3

I övning 3 fick jag en klarare förståelse för hur HTML, CSS och HTTP samarbetade för att skapa och visa webbsidor. Jag lärde mig att skilja mellan dokumentets struktur och presentation, vilket var avgörande för att kunna göra mer avancerade och flexibla layouter.

Övning 3 screenshot

Superhjälte Övning

I denna övning fick jag en förberedd mall, där jag fick lära mig om fördelningar som <header>, <main> och <footer>. Jag fick även lära mig hur man importerar fonts från google fonts. Jag fick också jobba mycket med CSS, eftersom det skulle vara en hover effekt på olika element

Superhjälte screenshot

Övning 4

I övning 4 arbetade jag med att skapa och styla HTML-tabeller för att strukturera information i rader och kolumner. Jag stötte på utmaningar med att kombinera text och bilder på ett snyggt sätt och att använda CSS för att skapa en bra layout och läsbarhet.

Övning 4 screenshot

Övning 6a

I övning 6a förstod jag hur lager och överlappning fungerade i webbdesign. Jag övade på att bestämma vilka element som skulle ligga ovanpå andra, vilket hjälpte mig att skapa mer visuellt tilltalande och funktionella websidor.

Övning 6a screenshot

Övning 6b

I övning 6b tränade jag på absolut och relativ positionering i CSS. Jag lärde mig att absolut positionerade element tas ur det normala flödet, vilket krävde noggrann kontroll för att placera dem korrekt i förhållande till omgivande element. Denna övning visade mig också fallgropar där positionering kan gå fel, vilket stärkte min förståelse för layout och precision.

Övning 6b screenshot

Övning Flexbox

I övningen om Flexbox lärde jag mig att använda flexibla layouter för att skapa responsiva och anpassningsbara webbsidor. Jag fick öva på att arrangera element horisontellt och vertikalt, samt att justera deras storlek och placering med hjälp av olika flex-egenskaper.

Flexbox screenshot

Övning 8

I övning 8 fick jag lära mig mycket om CSS grids och hur dem fungerar. Jag fick jobba med templates för att göra det enkelt att omformatera, det var mycket bättre än html templates. Jag fick även lära mig om bildformat och deras fördelar/nackdelar.

Övning 8 screenshot

Övning 9

Detta var en fortsättning på grid övningen där vi fick se hur den kan användas i riktiga sammanhang, då fick jag göra en fakta hemsida med olika frukter. Dessutom gick vi igenom semantiska element, som beskriver mer om vad elementet innehåller. Jag använde mig av nav, header, footer, aside, article osv.

Jag gjorde dessutom extra uppgiften som du kan se här

Övning 9 Extra
{övning9-preview}