{"id":65,"date":"2025-11-17T22:50:25","date_gmt":"2025-11-17T22:50:25","guid":{"rendered":"https:\/\/wp.als081224ol.hemsida.eu\/?page_id=65"},"modified":"2026-04-20T10:09:38","modified_gmt":"2026-04-20T10:09:38","slug":"school","status":"publish","type":"page","link":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/school\/","title":{"rendered":"School"},"content":{"rendered":"\n

Mina skolprojekt<\/h1>\n\n\n\n
\n

Landing page – Moment 1 och 2<\/h2>\n<\/div>\n\n\n\n
\n

Jag har skapat en Landing Page<\/strong> d\u00e4r jag samlar mina uppgifter och moment i kursen Webbutveckling. Jag har anv\u00e4nt HTML och CSS<\/strong> f\u00f6r att bygga sidan p\u00e5 ett strukturerat s\u00e4tt och sett till att den ser snygg och anv\u00e4ndarv\u00e4nlig ut.<\/p>\n<\/div>\n\n\n\n

\n
Landing PAge<\/a><\/div>\n\n\n\n
M02u01<\/a><\/div>\n<\/div>\n\n\n\n
\n

Det sv\u00e5ra tycker jag var CSS-koden, s\u00e4rskilt n\u00e4r man skulle f\u00e5 till avst\u00e5nden mellan de olika rubrikerna och l\u00e4nkarna, och se till att l\u00e4nkarna b\u00e5de s\u00e5g bra ut och var tydliga att klicka p\u00e5 samt att man f\u00f6rstod vad varje l\u00e4nk betydde. Men jag tycker \u00e4nd\u00e5 att sidan blev bra och det var roligt att se resultatet, \u00e4ven om det var ganska jobbigt att g\u00f6ra.<\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n\n

MarkDown – Moment 3<\/h2>\n\n\n\n
\n

Jag har skapat en sida p\u00e5 best\u00e4llning d\u00e4r m\u00e5let var att \u00e5terskapa originalet s\u00e5 noggrant som m\u00f6jligt. Sidan inneh\u00e5ller instruktioner om hur man anv\u00e4nder Markdown, och jag har f\u00f6rs\u00f6kt f\u00f6lja strukturen, designen och inneh\u00e5llet fr\u00e5n f\u00f6rlagan. Fokus har legat p\u00e5 att f\u00e5 b\u00e5de layout och funktioner att st\u00e4mma \u00f6verens med originalet.<\/p>\n<\/div>\n\n\n\n

\n
MARKDOWN UPPGIFTEN<\/a><\/div>\n<\/div>\n\n\n\n
\n

Det som var sv\u00e5rast i den h\u00e4r uppgiften var att f\u00e5 till listan med alla kommandon. Jag har inte jobbat s\u00e5 mycket med table<\/em> tidigare, s\u00e5 det tog lite tid att f\u00f6rst\u00e5 hur jag skulle bygga upp den p\u00e5 r\u00e4tt s\u00e4tt. Men efter att jag testat mig fram och \u00e4ndrat n\u00e5gra g\u00e5nger fick jag det att funka till slut.<\/p>\n<\/div>\n\n\n\n

\n\n\n\n

Burgerbase – Moment 4<\/h2>\n\n\n\n

Jag har f\u00f6ljt en tutorial d\u00e4r jag byggde en hamburgarsida som inneh\u00f6ll HTML, CSS och lite JavaScript. Jag f\u00f6ljde instruktionerna noggrant och anv\u00e4nde CSS-koden fr\u00e5n tutorialen. Jag f\u00f6rs\u00f6kte ocks\u00e5 f\u00f6rst\u00e5 hur CSS:en fungerade genom att analysera och testa vad han hade gjort.<\/p>\n\n\n\n

Jag tyckte inte den h\u00e4r uppgiften var s\u00e5 sv\u00e5r och ganska tr\u00e5kig eftersom vi bara skulle f\u00f6lja en tutorial. Men han visade \u00e4nd\u00e5 nya saker som att anv\u00e4nda javascript f\u00f6r att scrolla p\u00e5 sidan.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
\n
Burgerbase<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n

Burgerbase (Olika sidor) – Moment 4 (extra)<\/h2>\n\n\n\n

Denna uppgift \u00e4r samma som f\u00f6rra, men ist\u00e4llet f\u00f6r att det bara var en sida s\u00e5 var det flera sidor. P\u00e5 den uppgiften f\u00f6ljde jag n\u00e4stan ocks\u00e5 tutorialen eller anv\u00e4nde samma kod. Men jag fick \u00e4ndra lite f\u00f6r att det skulle fungera med olika sidor.<\/p>\n\n\n\n

S\u00e5 p\u00e5 denna uppgiften var det lite mer att g\u00f6ra, men den var fortfarande inte s\u00e5 sv\u00e5r och fortfarande ganska tr\u00e5kig.<\/p>\n\n\n\n

\n\n\n\n

Teori – Moment 5<\/h2>\n\n\n\n

I detta moment \u00e4r det m\u00e5nga olika uppgifter, det skulle ta en stor del av denna sidan om jag lade upp allt h\u00e4r s\u00e5 jag har tv\u00e5 l\u00e4nkar nedan som har de olika uppgifterna i sig.<\/p>\n\n\n\n

\n
Historia<\/a><\/div>\n\n\n\n
Teori<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n

Responsiv Design – Moment 6<\/h2>\n\n\n\n

Jag har valt att visa metoderna media queries<\/strong> och ramverk<\/strong> f\u00f6r att g\u00f6ra sidorna mobilv\u00e4nliga.<\/p>\n\n\n\n

Jag b\u00f6rjar med media queries, som jag anv\u00e4nde f\u00f6r att anpassa en tidigare uppgift, Markdown, som fr\u00e5n b\u00f6rjan inte var mobilv\u00e4nlig. Genom att anv\u00e4nda media queries kunde jag justera layouten s\u00e5 att den fungerar b\u00e4ttre p\u00e5 mindre sk\u00e4rmar. Nedan kan du se hur sidans mobilv\u00e4nlighet var innan, och sedan hur den nya versionen ser ut i olika storlekar och om den \u00e4r mobilv\u00e4nlig:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Jag anpassade sidan f\u00f6r olika storlekar. N\u00e4r sidan visas i mobilstorlek \u00e4ndras den bl\u00e5a grundf\u00e4rgen till gr\u00f6n. F\u00f6r surfplattor (t.ex. iPad) \u00e4ndras f\u00e4rgen ist\u00e4llet till r\u00f6d. I originalkoden hade containern “.ruta” en “min-width” p\u00e5 800px, vilket gjorde att sidan inte kunde bli mindre \u00e4n s\u00e5 och d\u00e4rf\u00f6r skapades en horisontell scroll p\u00e5 mobil. Genom att i media queries \u00e4ndra “min-width” till 0 kunde sidan anpassa sig efter sk\u00e4rmens storlek och d\u00e4rmed undvika “overflow”.<\/p>\n\n\n\n

Sedan kommer vi till ramverk. H\u00e4r valde jag att skapa en helt ny sida ist\u00e4llet f\u00f6r att bygga om en tidigare. Med hj\u00e4lp av Bootstrap kunde jag enkelt g\u00f6ra sidan anpassad f\u00f6r olika sk\u00e4rmstorlekar.<\/p>\n\n\n\n

Nedan visas hur sidan ser ut i olika storlekar, samt hur layouten f\u00f6r\u00e4ndras f\u00f6r att fungera p\u00e5 b\u00e5de mobil och dator.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Det jag har gjort h\u00e4r \u00e4r att jag har lagt till marginaler p\u00e5 v\u00e4nster och h\u00f6ger sida av inneh\u00e5llet, men endast f\u00f6r st\u00f6rre sk\u00e4rmar. P\u00e5 mobil visas inneh\u00e5llet ist\u00e4llet \u00f6ver hela bredden av sidan f\u00f6r att utnyttja sk\u00e4rmytan b\u00e4ttre.<\/p>\n\n\n\n

F\u00f6r att \u00e5stadkomma detta anv\u00e4nde jag Bootstrap-klasserna “ms-lg-5” och “me-lg-5”. Dessa g\u00f6r att marginalerna endast aktiveras n\u00e4r sk\u00e4rmen \u00e4r i st\u00f6rre storlek (desktop), men inte p\u00e5 mobil. Detta bidrar till att sidan blir mer mobilv\u00e4nlig eftersom inneh\u00e5llet inte k\u00e4nns inst\u00e4ngt p\u00e5 mindre sk\u00e4rmar.<\/p>\n\n\n\n

Jag har \u00e4ven anv\u00e4nt Bootstrap-grid med klasser som col-12 och col-lg-6, vilket g\u00f6r att inneh\u00e5llet staplas p\u00e5 mobil men visas i tv\u00e5 kolumner p\u00e5 st\u00f6rre sk\u00e4rmar. Detta g\u00f6r layouten mer anpassad efter olika enheter.<\/p>\n\n\n\n

\n
Ramverk<\/a><\/div>\n\n\n\n
Markdown b\u00e4ttre<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n

Teknik, Lagar och Projekt – Moment 7<\/h2>\n\n\n\n

S\u00e4kra l\u00f6senord<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

I mitt f\u00f6rsta “f\u00f6rs\u00f6k” s\u00e5 valde jag ett l\u00f6senord som ses ganska halvbra. Den har sm\u00e5 bokst\u00e4ver och siffor som g\u00f6r den hyfsat s\u00e4ker (41%). Men l\u00f6senordet \u00e4r inte s\u00e5 praktiskt eftersom jag g\u00f6r den enkla sifferordningen 1, 2 och 3 som \u00e4r det som kommer testas f\u00f6rst om n\u00e5gon f\u00f6rs\u00f6ker lista ut det. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I n\u00e4sta “f\u00f6rs\u00f6k” kan man se att jag gjorde n\u00e5gra \u00e4ndringar i l\u00f6senordet. De \u00e4ndringar jag gjorde var att \u00e4ndra ett l, o:et och g:et till stora bokst\u00e4ver ist\u00e4llet f\u00f6r sm\u00e5. Detta gjorde l\u00f6senordet n\u00e4stan dubbelt s\u00e5 starkt. Det kr\u00e4vs allts\u00e5 inte s\u00e5 stora \u00e4ndringar f\u00f6r att enkelt f\u00f6rst\u00e4rka sitt l\u00f6senord.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I sista bilden kan vi se att det \u00e4r 100 % s\u00e4kerhet. Det jag \u00e4ndrade och lade till var ett snabel-a (@) ist\u00e4llet f\u00f6r det vanliga a:et. Sedan \u00e4ndrade jag o:et till en nolla och lade till ett utropstecken i slutet av l\u00f6senordet.<\/p>\n\n\n\n

Tankar om L\u00f6senordshanterare<\/strong><\/h4>\n\n\n\n

Den enda l\u00f6senordshanteraren jag har anv\u00e4nt och fortfarande anv\u00e4nder \u00e4r Googles. Jag tycker att det \u00e4r en bra sak eftersom jag inte beh\u00f6ver ha lika bra koll p\u00e5 alla mina l\u00f6senord (\u00e4ven om det fortfarande \u00e4r bra att ha koll). Tj\u00e4nsten kan dessutom f\u00f6resl\u00e5 starka l\u00f6senord om man inte vill skapa egna, vilket g\u00f6r att l\u00f6senorden blir sv\u00e5rare att gissa och d\u00e4rmed s\u00e4krare.<\/p>\n\n\n\n

Samtidigt kan det finnas nackdelar, till exempel att man blir beroende av en enda tj\u00e4nst. Om n\u00e5gon skulle f\u00e5 tillg\u00e5ng till ens Google-konto kan det inneb\u00e4ra att alla sparade l\u00f6senord blir utsatta.<\/p>\n\n\n\n

Sammanfattningsvis tycker jag att l\u00f6senordshanterare \u00e4r bra, men det \u00e4r ocks\u00e5 viktigt att ha egen koll.<\/p>\n\n\n\n

Lagar<\/h3>\n\n\n\n

Jag tycker att GDPR \u00e4r bra eftersom det skyddar m\u00e4nniskors och f\u00f6retags personliga information. Samtidigt kan det g\u00f6ra det sv\u00e5rare att till exempel skapa webbsidor, eftersom det inte alltid finns s\u00e5 m\u00e5nga bilder och annat material man f\u00e5r anv\u00e4nda. Man m\u00e5ste allts\u00e5 vara noggrann och ha tydligt samtycke n\u00e4r man samlar in material fr\u00e5n n\u00e4tet.<\/p>\n\n\n\n

Jag tycker att Creative Commons \u00e4r bra eftersom det g\u00f6r det m\u00f6jligt att anv\u00e4nda andras material lagligt, s\u00e5 l\u00e4nge man f\u00f6ljer reglerna. Det ger fler m\u00f6jligheter att till exempel skapa b\u00e4ttre webbsidor, samtidigt som det fortfarande gynnar de som \u00e4ger materialet.<\/p>\n\n\n\n

P\u00e5 mina sidor finns det vissa bilder som \u00e4r direkt tagna fr\u00e5n Google, vilket kan bryta mot reglerna. Dessa finns i moment 1 och projekt 1, d\u00e4r jag har anv\u00e4nt bilder utan att kontrollera om de \u00e4r till\u00e5tna, ist\u00e4llet f\u00f6r att anv\u00e4nda lagliga sidor som till exempel Pexels. <\/p>\n\n\n\n

Detta fixade jag genom att ta bilder fr\u00e5n den lagliga sidan Pexels som har gratis bilder, ist\u00e4llet f\u00f6r bilder rakt tagna fr\u00e5n Google.<\/p>\n\n\n\n

Till\u00e4mpningar<\/h3>\n\n\n\n

Jag kontrollerade SSL\/TLS status i cPanel. Alla relevanta dom\u00e4ner hade AutoSSL Domain Validated<\/strong> aktivt (gr\u00f6nt h\u00e4ngl\u00e5s). Jag har \u00e4ven kontrollerat dom\u00e4nerna under Domains<\/strong> och aktiverat Force HTTPS Redirect<\/strong> s\u00e5 att webbplatsen anv\u00e4nder HTTPS.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Jobba i projekt<\/h3>\n\n\n\n

Anv\u00e4ndarv\u00e4nligheten beh\u00f6ver f\u00f6rb\u00e4ttras, och jag vill g\u00f6ra sidan b\u00e4ttre f\u00f6r personer som bes\u00f6ker min sida oavsett f\u00f6rm\u00e5ga. En viktig del \u00e4r tillg\u00e4nglighet, till exempel tydligare struktur med rubriker, b\u00e4ttre kontraster, alt-texter p\u00e5 bilder och enklare navigation. Det skulle g\u00f6ra webbplatsen l\u00e4ttare att anv\u00e4nda f\u00f6r alla bes\u00f6kare.<\/p>\n\n\n\n

En av de viktigaste sakerna att fixa \u00e4r mobilanpassningen, eftersom den \u00e4r v\u00e4ldigt d\u00e5lig just nu. Sidan beh\u00f6ver anpassas f\u00f6r att fungera bra p\u00e5 alla olika sk\u00e4rmar. Verktygen jag t\u00e4nker anv\u00e4nda mig av f\u00f6r att mobilanpassa sidan \u00e4r exempelvis media query eller flexbox och grid.<\/p>\n\n\n\n

N\u00e4r det g\u00e4ller projektplanering tycker jag det \u00e4r viktigt att f\u00f6rst planera vilka f\u00f6rb\u00e4ttringar som ska g\u00f6ras, i vilken ordning de ska g\u00f6ras och dokumentera \u00e4ndringar under arbetets g\u00e5ng. Det g\u00f6r det l\u00e4ttare att h\u00e5lla struktur i projektet och f\u00f6lja upp vad som fungerar och vad som beh\u00f6ver f\u00f6rb\u00e4ttras. Jag t\u00e4nker anv\u00e4nda detta i arbetet med Paolos Webb 2.0 f\u00f6r att arbeta mer genomt\u00e4nkt och organiserat \u00e4n i f\u00f6rsta versionen.<\/p>\n\n\n\n

Paolos Webb – Projekt 1<\/h2>\n\n\n\n

Den h\u00e4r uppgiften tyckte jag var rolig, och det fanns flera detaljer som gjorde den intressant, till exempel att man absolut inte fick anv\u00e4nda f\u00e4rgen r\u00f6d eller liknande f\u00e4rger. Det fanns ocks\u00e5 delar som var lite sv\u00e5rare. En sak var att g\u00f6ra rutorna med f\u00f6rklaringar och f\u00e5 allt att se snyggt ut, speciellt att f\u00e5 bilderna att ligga bra. Den f\u00f6rsta sidan blev jag inte helt n\u00f6jd med, men jag valde att l\u00e5ta den vara eftersom jag inte ville g\u00f6ra den f\u00f6r komplicerad och riskera att den s\u00e5g konstig ut.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Mina skolprojekt Landing page – Moment 1 och 2 Jag har skapat en Landing Page d\u00e4r jag samlar mina uppgifter och moment i kursen Webbutveckling. Jag har anv\u00e4nt HTML och CSS f\u00f6r att bygga sidan p\u00e5 ett strukturerat s\u00e4tt och sett till att den ser snygg och anv\u00e4ndarv\u00e4nlig ut. Det sv\u00e5ra tycker jag var CSS-koden, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":18,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions"}],"predecessor-version":[{"id":205,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions\/205"}],"wp:attachment":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}