Bygg din egen portfolio

Del 1 – Rita upp det du vill ska finnas med på din webbsida

Nu är det dags för er att bygga på ert alldeles egna projekt. Målet med den här kursen är att ni alla ska bygga en egen hemsida som kommer att handla om något som ni själva väljer. Första uppgiften är alltså att tänka ut ett ämne, det kan vara vad som helst, en sida om dig själv, en sida om en sport du gillar eller kanske om en bok som du gillar.

När du bestämt vad du vill göra en hemsida om så behöver du ett papper och en penna för nu skall du rita upp alla olika sektioner som skall finnas med på sidan. När du ritat upp allting vill jag att du även lägger till vilka element alla olika sektioner på sidan är. Så t ex om du väljer att ha en rubrik på sidan så vill jag att du skriver <h1> bredvid, väljer du att ha en bild på sidan så märker du upp den med <img>. Om du är osäker på hur du ska göra kan du se exemplet med bilden till höger. Detta är ett sätt för er att strukturera upp projektet så att ni vet vad ni ska göra under de kommande veckorna. 

Del 2.0 – Börja programmera! 

Nu har du en tydlig bild på hur du vill ha din sida, då vill vi att du börjar att lägga in alla HTML-element först så att allt innehåll finns på sidan. Det som kommer att ta tid är all CSS du kommer att använda för att göra sidan så bra som bara du kan.

Del 3 – Lägg till saker som du inte testat innan

1 – Om du redan nu är färdig med din hemsida finns det massor att lägga till. TIPS nummer 1 – Vi vill gärna att du gör fler undersidor. Kolla på  t ex Spotify.se – det finns en meny – kan du också bygga en meny med länkar till flera undersidor?

2 – Nu ska ni få lära er något häftigt – det är placering av olika HTML element – bästa sättet för att lära sig det är att spela ett spel som heter flexbox froggy. Klicka in på spelet härLÄNK och efter att du gjort klart spelet vill du att du testar att lägga in koden på din egna hemsida.

Del 4 – Ladda upp din hemsida till Github Pages

Nu skall du ladda upp din hemsida till Github – om du glömt hur du gör klicka på knappen nedan!

Haja kod logo

OM OSS

HAJA KOD introducerar programmering och digitalt skapande för barn och vuxna.

KONTAKT

Ingenjörsgatan 9
411 19 Göteborg
[email protected]

Haja kod logo

© Copyright 2020