koda din egen hemsida

har du någonsin velat lära dig att designa webbsidor eller skapa en webbplats online? Idag ska vi visa dig hur du bygger din egen personliga webbplats! Kolla in handledningsvideoen för att se Juni Instructor Maya gå igenom varje steg på vägen.

läs vidare för mer information om vikten av att lära sig webbutveckling, en steg-för-steg-guide för att följa videon och för att lära dig om verktyg du kan använda för att ytterligare förbättra din webbutvecklingsupplevelse.

kom ihåg:

  • webbplatsen i denna handledning är bara ett exempelprojekt för undervisningsändamål. Innan du börjar, kom ihåg att minderåriga inte ska publicera personlig information online som ditt fullständiga namn, adress, eller telefonnummer! Var också försiktig när du laddar upp personliga foton online.
  • om du är osäker på vad som är okej att ladda upp, Kontrollera alltid med en vuxen.

Vem är det här för?

lärandemålen för nybörjare HTML/CSS-kodning projekt personlig webbplats.
denna projektinformation och sammanfattning av lärandemål hjälper dig att avgöra om detta HTML/CSS-kodningsprojekt är rätt för dig.

detta projekt faller under vår JavaScript Nivå 1 kodning klass för barn. Denna nybörjare HTML / CSS handledning är för studenter som vill ha ett medium utmaning projekt, ca 121 rader kod lång. Det kommer att hjälpa till att ha en grundläggande förståelse för hur HTML och CSS fungerar i förväg, men om du är helt ny förklarar vi också mer grunder i den här videon!

denna handledning är utmärkt för nybörjare i kodning, särskilt de som är intresserade av design eller konst. Vi rekommenderar att eleverna är 12 år eller äldre för att följa med.

för lärandemål får du mycket övning med div, listor, länkar, position, display, text (h1/h2/p), teckensnitt och allmän CSS. Detta projekt beräknas ta dig cirka 40 minuter eller längre, beroende på hur kreativ du får, men du bör gå snabbare eller långsammare i din egen takt!

Varför Lära Sig Webbutveckling?

dessa dagar behöver du inte veta webbutveckling eller kodning för att skapa en webbplats. Mot slutet av den här artikeln visar vi dig några dra-och-släpp-webbplatsskapare som gör processen otroligt lätt att göra. Så varför ska du lära dig webbutveckling? Det är en bra fråga.

obegränsad anpassning

alla enkla verktyg för att skapa webbplatser är faktiskt begränsade. De erbjuder dig en uppsättning teman och plugins som är mycket enkla för nybörjare att använda – så länge du inte behöver ändra dem.

när du behöver ändra ett tema eller göra något mer anpassat med din webbplats behöver du dock åtminstone en grundläggande förståelse för webbutvecklingskod. Som ett exempel, med lite Javascript-kunskap, kan du integrera nästan alla sociala medier på din webbplats!

kodning karriärer & stiftelser

om du någonsin har övervägt en karriär inom kodning, webbdesign och webbutveckling kunskap kommer också att ge dig ett stort försprång. Webbutveckling hjälper barn och nya kodare intresserade av konst och design att utforska sin passion samtidigt lära kodning grunderna. Karriär åt sidan, det finns också otaliga livskunskapsfördelar för att lära sig kodning för barn.

gäller för många områden

slutligen, att kunna bygga din egen webbplats är en värdefull färdighet i dagens digitala tidsålder. Bloggare vill att utvecklare ska göra dem anpassade bloggar. Internetföretag letar efter utvecklare för att bygga e-handelswebbplatser istället för att bara publicera artiklar på Amazon.

det är en guldålder för webbdesign och utveckling, och en bra tid att lära sig att bygga din egen webbplats!

Låt oss komma igång!

vi kommer att använda grundläggande HTML och CSS för att lära sig att göra en enkel personlig hemsida.

Projektdemo

innan du börjar skriva kod, se hur vårt färdiga projekt fungerar som referens. Titta på videon för att kolla in alla funktioner på vår Projektwebbplats.

du kan också se vår projektlösningskod om du fastnar.

vad du ska tänka på innan du börjar:

  • det finns en bildrubrik med text på den. Texten har olika storlekar och använder två olika teckensnitt. Den har också en vit kontur.
  • den vita sektionen under den har två delar sida vid sida.
  • vi har en lista med hyperlänkar, som länkar till en annan sida. När du svävar över dem ändras de till blått.
  • det finns också en om mig sektion med text.
  • under det finns en upplevelsesektion med en annan färgbakgrund.

steg för att koda projektet

för att bygga vår webbplats följer vi denna stegordning. Titta på handledningen för att se hur Instructor Maya kodar varje del och följ med förklaringarna nedan.

  1. Lägg till bildhuvudet & texten som går på den.
  2. skapa listan med länkar du vill dela.
  3. skapa avsnittet Om mig.
  4. skapa avsnittet Erfarenhet.

steg-för-steg-handledning

Steg 1: Lägg till bildhuvudet & texten som går på den.

  • skapa en div med relativ positionering för att innehålla bilden och texten.
  • skapa en div för att innehålla texten och använd absolut positionering för att placera den på bilden.
  • använd <h1> och <h3> för att lägga till texten.
  • använd CSS för att ändra teckensnitt.
  • använd CSS för att ta bort extra marginal & stoppning runt bilden.

steg 2: Skapa listan över länkar du vill dela.

  • skapa en div med relativ positionering för att innehålla avsnittet Länkar och om mig.
  • Lägg stoppning till div.
  • skapa en div med inline-block display för att innehålla länklistan.
  • använd <ul> för att skapa en lista.
  • använd <li> och <a> för att skapa länkarna.
  • använd <i> och en font-awesome länk för att lägga till ikoner.
  • ändra CSS så att det ser ut som originalet.

steg 3: Skapa avsnittet Om mig.

  • skapa en div med inline-block display för att innehålla avsnittet Om mig.
  • använd <h3> och <p> för att lägga till text.

steg 4: Skapa avsnittet Erfarenhet.

  • skapa en div med relativ positionering för att innehålla avsnittet Erfarenhet.
  • skapa en div för den första upplevelsen och använd <h4> och <p> för att lägga till text.
  • Lägg till mer erfarenhet divs!

nästa steg

bra jobb! Lägg nu gärna till fler avsnitt på din webbplats. Några förslag kan innehålla en sektion för projekt som du har arbetat med eller klubbar som du är i. Du kan också ladda upp din nya webbplats till webben med hjälp av GitHub och Github sidor.

verktyg för att skapa webbsidor

flera personer använder ett verktyg för att skapa webbsidor för att bygga en webbplats

som vi nämnde tidigare finns det flera webbplatsskapare där ute. De flesta av de bästa webbplatsbyggarna är gjorda för att effektivisera processen genom att förse dig med mallar, dra-och-släpp-gränssnitt och andra funktioner som du behöver för att skapa en gratis personlig webbplats.

bara för att du har en grundläggande förståelse för webbutveckling betyder inte att du bör glömma dessa verktyg. De kan hjälpa dig att vara värd för din nya webbplats, hitta en anpassad domän (namn och adress på din webbplats) och erbjuda dig mallar, teman och plugins som kommer att påskynda din webbdesignprocess.

genom att ta hand om grunderna, dessa verktyg ger dig en chans att fokusera dina nyfunna kodning färdigheter på att anpassa din webbplats till perfektion! Eller — även om du vill bygga allt från grunden-kan dessa verktyg ge dig några bra ideer för vad du ska bygga och hur du bygger det.

här är några av de mest populära verktygen för att skapa webbsidor:

  • Wix

Wix är en av de enklaste att använda webbplatsbyggare där ute. Deras gratis plan är tillräckligt komplett för att göra det till ett bra alternativ för ett barns webbplatsbyggare, så länge du är okej med att din URL är en underdomän till Wix (sitename.wixsite.com). de har betalat planer med rimlig prissättning om du växer upp den fria nivån.

  • WordPress

även om folk vet det som en gratis webbplatsbyggare, vad WordPress verkligen är ett content management system (CMS). I en enkel mening är skillnaden att en webbplatsbyggare är lättare att använda, men ett CMS erbjuder fler möjligheter till anpassning. Även om WordPress själv är gratis kan du behöva betala för vissa teman och plugins eller för värd om du vill ha ditt eget domännamn.

  • Weebly

Weebly är en webbplatsbyggare, ungefär som Wix. Den främsta skillnaden är att Weebly erbjuder mycket mindre anpassningsbarhet, vilket gör det till ett användarvänligt alternativ som är bra för kodning för barn, men mindre sannolikt att växa med dig när din webbplatsbyggnadskunskap förbättras.Fortsätt lära dig: Webbutvecklingskurser för Barngrattis, du har nu din egen hemsida! Detta är ett spännande steg som du borde känna dig otroligt stolt över. Lärandet behöver inte sluta där heller.

fortsätt lära: Webbutvecklingskurser för barn

Juni Learning erbjuder Webbprogrammeringskurser för barn som ger dig de färdigheter du behöver för att överbelasta din nya webbplats eller till och med flytta till för att bygga webbapplikationer och portföljer. Utanför webbutveckling undervisar vi också kodningskurser för barn 8-18 på olika språk som Scratch, Python, Java, C++ och mer.

kolla in våra onlinekurser för barn, eller kontakta vårt Juni Advisors-Team för att lära dig vilken kurs som är bäst för din student!

Articles

Lämna ett svar

Din e-postadress kommer inte publiceras.