kode din egen hjemmeside

har du nogensinde ønsket at lære at designe hjemmesider eller lave en hjemmeside online? I dag vil vi vise dig, hvordan du opbygger din egen personlige hjemmeside! Tjek tutorial video for at se Juni instruktør Maya lede dig gennem hvert skridt på vejen.

læs videre for at få flere oplysninger om vigtigheden af at lære internetudvikling, en trinvis vejledning til at ledsage videoen og for at lære om værktøjer, du kan bruge til yderligere at forbedre din internetudviklingsoplevelse.

husk:

  • hjemmesiden i denne tutorial er blot et eksempel projekt til undervisningsformål. Før du starter, husk, at mindreårige ikke skal sende personlige oplysninger online som dit fulde navn, adresse, eller telefonnummer! Vær også forsigtig, når du uploader personlige fotos online.
  • hvis du er usikker på, hvad der er okay at uploade, skal du altid tjekke med en voksen.

Hvem er dette til?

 læringsresultater for begyndere HTML/CSS kodning projekt personlige hjemmeside.
denne oversigt over projektoplysninger og læringsresultater hjælper dig med at beslutte, om dette HTML/CSS-kodningsprojekt er det rigtige for dig.

dette projekt falder ind under vores JavaScript niveau 1 kodning klasse for børn. Denne nybegynder HTML / CSS tutorial er for studerende, der ønsker en medium udfordring projekt, omkring 121 linjer kode lang. Det vil hjælpe med at få en grundlæggende forståelse af, hvordan HTML og CSS fungerer på forhånd, men hvis du er helt ny, forklarer vi også flere grundlæggende i denne video!

denne tutorial er fantastisk til begyndere inden for kodning, især dem, der er interesseret i design eller kunst. Vi anbefaler, at eleverne er 12 år eller ældre for at følge med.

for læringsresultater får du en masse øvelse med div, lister, links, position, display, tekst (h1/h2/p), skrifttyper og generel CSS. Dette projekt anslås at tage dig cirka 40 minutter eller længere, afhængigt af hvor kreativ du bliver, men du skal bevæge dig hurtigere eller langsommere i dit eget tempo!

Hvorfor Lære At Udvikle Internettet?

i disse dage behøver du ikke at kende internetudvikling eller kodning for at oprette en hjemmeside. Mod slutningen af denne artikel, vil vi vise dig et par træk-og-slip hjemmeside skabere, der vil gøre processen utrolig let at gøre. Hvorfor skal du lære at udvikle Internettet? Det er et godt spørgsmål.

ubegrænset tilpasning

alle de nemme værktøjer til oprettelse af hjemmesider er faktisk begrænsede. De tilbyder dig et sæt temaer og plugins, der er meget lette for begyndere at bruge – så længe du ikke behøver at ændre dem.

når du har brug for at ændre et tema eller gøre noget mere brugerdefineret med din hjemmeside, skal du dog mindst have en grundlæggende forståelse af netudviklingskode. Som et eksempel, med en smule Javascript-viden, kan du integrere næsten ethvert socialt mediefeed på din hjemmeside!

Coding Careers& Foundations

hvis du nogensinde har overvejet en karriere inden for kodning, vil internetdesign og internetudviklingsviden også give dig et stort forspring. Udvikling hjælper børn og nye kodere interesseret i kunst og design til at udforske deres passion og samtidig lære kodning basics. Karriere til side, der er også utallige fordele ved livsfærdigheder ved at lære kodning for børn.

gælder for mange felter

endelig er det en værdifuld færdighed i dagens digitale tidsalder at kunne opbygge din egen hjemmeside. Bloggere vil have udviklere til at gøre dem til brugerdefinerede blogs. Internetvirksomheder er på udkig efter udviklere til at opbygge e-handelssider i stedet for bare at sende varer på .

det er en guldalder for hjemmeside design og udvikling, og en stor tid til at lære at bygge din egen hjemmeside!

lad os komme i gang!

vi skal bruge grundlæggende HTML og CSS til at lære at lave en simpel personlig hjemmeside.

Projektdemo

før du begynder at skrive kode, se hvordan vores færdige projekt fungerer som reference. Se videoen for at tjekke alle vores projekt hjemmeside funktioner.

du kan også se vores projektløsningskode, hvis du sidder fast.

hvad skal du huske på, før du starter:

  • der er en billedoverskrift med tekst på den. Teksten har forskellige størrelser og bruger to forskellige skrifttyper. Det har også en hvid kontur.
  • Det Hvide afsnit under det har to dele side om side.
  • vi har en liste over hyperlinks, der linker til en anden side. Når du svæver over dem, skifter de til blå.
  • der er også en Om mig sektion med tekst.
  • under det er der et oplevelsesafsnit med en anden farvebaggrund.

trin til kode projektet

for at opbygge vores hjemmeside følger vi denne rækkefølge af trin. Se vejledningen for at se, hvordan instruktør Maya koder hver del, og følg med forklaringerne nedenfor.

  1. Tilføj billedoverskriften & den tekst, der går på den.
  2. Opret listen over links, du gerne vil dele.
  3. Opret afsnittet Om mig.
  4. Opret Oplevelsesafsnittet.

trin-for-trin Tutorial

Trin 1: Tilføj billedoverskriften & den tekst, der går på den.

  • Opret en div med relativ positionering for at indeholde billedet og teksten.
  • Opret en div til at indeholde teksten, og brug absolut positionering til at placere den på billedet.
  • brug <h1> og <h3> til at tilføje teksten.
  • brug CSS til at ændre tekstskrifttypen.
  • brug CSS til at fjerne den ekstra margen & polstring omkring billedet.

Trin 2: Opret listen over links, du gerne vil dele.

  • Opret en div med relativ positionering for at indeholde afsnittet links og om mig.
  • Tilføj polstring til div.
  • Opret en div med inline-block display til at indeholde listen links.
  • brug <ul> til at oprette en liste.
  • brug <li> og <a> til at oprette linkene.
  • brug <i> og et font-fantastisk link til at tilføje ikoner.
  • Rediger CSS for at få det til at ligne originalen.

Trin 3: Opret afsnittet Om mig.

  • Opret en div med inline-block display til at indeholde afsnittet Om mig.
  • brug <h3> og <p> til at tilføje tekst.

Trin 4: Opret Oplevelsesafsnittet.

  • Opret en div med relativ positionering for at indeholde Oplevelsesafsnittet.
  • Opret en div til den første oplevelse, og brug <h4> og <p> til at tilføje tekst.
  • Tilføj flere oplevelses divs!

næste trin

godt stykke arbejde! Nu er du velkommen til at tilføje flere sektioner til din hjemmeside. Nogle ideer kan omfatte en sektion for projekter, som du har arbejdet på eller klubber, som du er i. Du kan også uploade din nye hjemmeside til internettet ved hjælp af GitHub og Github sider.

værktøjer til oprettelse af hjemmesider

flere mennesker bruger et værktøj til oprettelse af hjemmesider til at opbygge en hjemmeside

som vi nævnte tidligere, er der flere hjemmesideskabere derude. De fleste af de bedste hjemmesidebyggere er lavet til at strømline processen ved at give dig skabeloner, træk-og-slip-grænseflader og andre funktioner, som du har brug for for at oprette en gratis personlig hjemmeside.

bare fordi du har en grundlæggende forståelse af internetudvikling, betyder det ikke, at du skal glemme disse værktøjer. De kan hjælpe dig med at hoste din nye hjemmeside, finde et brugerdefineret domæne (navn og adresse på din hjemmeside) og tilbyde dig skabeloner, temaer og plugins, der vil fremskynde din designproces.

ved at tage sig af det grundlæggende, disse værktøjer giver dig en chance for at fokusere dine nyfundne kodning færdigheder på at tilpasse din hjemmeside til perfektion! Eller — selvom du vil bygge alt fra bunden-kan disse værktøjer give dig nogle gode ideer til, hvad du skal bygge, og hvordan du bygger det.

her er nogle af de mest populære værktøjer til oprettelse af hjemmesider:

  • vi

vi er en af de nemmeste at bruge Hjemmeside bygherrer derude. Deres Gratis plan er komplet nok til at gøre det til en god mulighed for et barns hjemmesidebygger, så længe du er okay med, at din URL er et underdomæne (sitename.wixsite.com). de har betalt planer med rimelig prisfastsættelse, hvis du vokser ud af det gratis niveau.

  • e-mail: info (at)

selvom folk kender det som en gratis hjemmesidebygger, er det et content management system (CMS). I en simpel forstand er forskellen, at en hjemmesidebygger er lettere at bruge, men et CMS giver flere muligheder for tilpasning. Selvom det er gratis, skal du muligvis betale for nogle temaer og plugins eller for hosting, hvis du vil have dit eget domænenavn.

  • Vibly

vi er en hjemmesidebygger, ligesom vi er. Den primære forskel er, at vi tilbyder meget mindre tilpasningsevne, hvilket gør det til en brugervenlig mulighed, der er fantastisk til kodning for børn, men mindre tilbøjelige til at vokse med dig, når dine hjemmesideopbygningsevner forbedres.Bliv ved med at lære: Udviklingsundervisning for Børntillykke, du har nu din egen hjemmeside! Dette er et spændende skridt, som du skal føle dig utrolig stolt af. Læringen behøver heller ikke at stoppe der.

Bliv ved med at lære: udviklingskurser for børn

Juni Learning tilbyder programmeringskurser for børn, der giver dig de færdigheder, du har brug for til at overbelaste din nye hjemmeside eller endda gå videre til at opbygge applikationer og porteføljer. Vi underviser også i kodningskurser for børn 8-18 på forskellige sprog som Scratch, Python, Java, C++ og meget mere.

tjek vores online kurser for børn, eller kontakt vores Juni Advisors Team for at lære, hvilket kursus der er bedst for din studerende!

Articles

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.