Kode Ditt Eget Nettsted

Har du noen gang ønsket å lære å designe nettsider eller lage et nettsted på nettet? I dag skal vi vise deg hvordan du bygger din egen personlige nettside! Sjekk ut opplæringsvideoen for å se Juni Instructor Maya gå deg gjennom hvert steg på veien.

Les videre for mer informasjon om viktigheten av å lære webutvikling, en trinnvis veiledning for å følge videoen, og for å lære om verktøy du kan bruke til å forbedre din webutviklingsopplevelse ytterligere.

HUSK:

  • nettstedet i denne opplæringen er bare et eksempelprosjekt for undervisningsformål. Før du starter, husk at mindreårige ikke skal legge inn personlig informasjon på nettet som ditt fulle navn, adresse eller telefonnummer! Vær også forsiktig når du laster opp personlige bilder på nettet.
  • hvis du er usikker på hva som er greit å laste opp, sjekk alltid med en voksen.

Hvem er dette for?

 læringsutbytte for nybegynner HTML/CSS koding prosjekt Personlig Nettside.
dette prosjektet info og læringsutbytte sammendrag vil hjelpe deg å avgjøre om DETTE HTML/CSS koding prosjektet er riktig for deg.

dette prosjektet faller inn under Vår JavaScript nivå 1 koding klasse for barn. Dette nybegynner HTML / CSS opplæringen er for studenter som ønsker en middels utfordring prosjekt, ca 121 linjer med kode lang. Det vil bidra til å ha en grunnleggende forståelse av HVORDAN HTML og CSS fungerer på forhånd, men hvis DU er helt ny, forklarer vi også mer grunnleggende i denne videoen!

denne opplæringen er flott for nybegynnere i koding, spesielt de som er interessert i design eller kunst. Vi anbefaler at studentene er 12 år eller eldre for å følge med.

for læringsutbytte får du mye øvelse med div, lister, lenker, posisjon, skjerm, tekst (h1/h2/p), skrifter og generell CSS. Dette prosjektet anslås å ta deg om 40 minutter eller lenger, avhengig av hvor kreativ du får, men du bør bevege deg raskere eller langsommere i ditt eget tempo!

Hvorfor Lære Webutvikling?

I Disse dager trenger Du ikke å vite webutvikling eller koding for å lage et nettsted. Mot slutten av denne artikkelen viser vi deg noen dra – og-slipp-nettstedskapere som vil gjøre prosessen utrolig enkel å gjøre. Så hvorfor bør du lære webutvikling? Det er et flott spørsmål.

Ubegrenset Tilpasning

Alle de enkle nettstedskapingsverktøyene er faktisk begrenset. De tilbyr deg et sett med temaer og plugins som er veldig enkle for nybegynnere å bruke – så lenge du ikke trenger å endre dem.

Når du trenger å endre et tema eller gjøre noe mer tilpasset med nettstedet ditt, trenger du imidlertid minst en grunnleggende forståelse av webutviklingskode. Som et eksempel, med Litt Javascript kunnskap, kan du integrere nesten alle sosiale medier feed på nettstedet ditt!

Coding Careers & Foundations

hvis du noen gang har vurdert en karriere innen koding, vil webdesign og webutvikling kunnskap også gi deg et stort forsprang. Webutvikling hjelper barn og nye kodere som er interessert i kunst og design til å utforske sin lidenskap samtidig som de lærer grunnleggende koding. Karriere til side, det er også utallige livsferdighetsfordeler for å lære koding for barn.

Gjelder For Mange Felt

Til Slutt, å kunne bygge ditt eget nettsted er en verdifull ferdighet i dagens digitale tidsalder. Bloggere vil at utviklere skal lage dem tilpassede blogger. Internett-bedrifter leter etter utviklere å bygge e-handelsnettsteder i stedet for bare å legge ut elementer På Amazon.

Det er en gullalder for webdesign og utvikling, og en flott tid å lære å bygge ditt eget nettsted!

La oss Komme i gang!

vi skal bruke grunnleggende HTML og CSS for å lære å lage en enkel personlig nettside.

Prosjektdemo

før du begynner å skrive kode, se hvordan vårt ferdige prosjekt fungerer for referanse. Se videoen for å sjekke ut alle våre prosjekt nettstedets funksjoner.

du kan også se vår prosjektløsningskode hvis du sitter fast.

hva du må huske på før du begynner:

  • Det er en bildeoverskrift med tekst på den. Teksten er forskjellige størrelser, og bruker to forskjellige skrifttyper. Den har også en hvit kontur.
  • den hvite delen under den har to deler side ved side.
  • Vi har en liste over hyperkoblinger, som lenker til en annen side. Når du svinger over dem, endres de til blå.
  • Det er også En Om Meg-seksjon med tekst.
  • Under Det er Det en opplevelsesseksjon med en annen fargebakgrunn.

Trinn For Å Kode Prosjektet

for å bygge nettstedet vårt, følger vi denne rekkefølgen av trinnene. Se veiledningen for å se Hvordan Instruktør Maya koder hver del,og følg med forklaringene nedenfor.

  1. Legg til bildeoverskriften & teksten som går på den.
  2. Opprett listen over koblinger du vil dele.
  3. Opprett Om Meg-delen.
  4. Opprett Opplevelsesdelen.

Trinnvis Veiledning

Trinn 1: Legg til bildeoverskriften & teksten som går på den.

  • Opprett en div med relativ posisjonering for å inneholde bildet og teksten.
  • Opprett en div for å inneholde teksten, og bruk absolutt posisjonering for å plassere den på bildet.
  • Bruk <h1> og <h3> for å legge til teksten.
  • Bruk CSS til å endre tekstfonten.
  • Bruk CSS til å fjerne den ekstra margen & polstring rundt bildet.

Trinn 2: Opprett listen over koblinger du vil dele.

  • Lag en div med relativ posisjonering for å inneholde koblingene og Om Meg-delen.
  • Legg til polstring i div.
  • Opprett en div med inline-block-skjerm for å inneholde lenkelisten.
  • Bruk <ul> for å opprette en liste.
  • Bruk <li> og <a> for å opprette koblingene.
  • Bruk <i> og en font-awesome link for å legge til ikoner.
  • Endre CSS slik at DEN ser ut som originalen.

Trinn 3: Opprett Om Meg-delen.

  • Opprett en div med inline-block-skjerm for å inneholde Om Meg-delen.
  • Bruk <h3> og <p> for å legge til tekst.

Trinn 4: Opprett Opplevelsesdelen.

  • Opprett en div med relativ posisjonering for å inneholde Opplevelsesdelen.
  • Opprett en div for den første opplevelsen, og bruk <h4> og <p> for å legge til tekst.
  • Legg til flere erfaringsdivs!

Neste trinn

Flott jobb! Nå er du velkommen til å legge til flere seksjoner på nettstedet ditt. Noen ideer kan inneholde en del for prosjekter du har jobbet med eller klubber du er i. Du kan også laste opp ditt nye nettsted til nettet ved Hjelp Av Github og Github sider.

Verktøy For Oppretting Av Nettsider

 flere personer bruker et verktøy for oppretting av nettsider til å bygge et nettsted

som vi nevnte tidligere, er det flere nettstedskapere der ute. De fleste av de beste nettstedbyggerne er laget for å strømlinjeforme prosessen ved å gi deg maler, dra-og-slipp-grensesnitt og andre funksjoner du trenger for å lage et gratis personlig nettsted.

Bare Fordi du har en grunnleggende forståelse av webutvikling betyr ikke at du bør glemme disse verktøyene. De kan hjelpe deg med å være vert for det nye nettstedet ditt, finne et tilpasset domene (navnet og adressen til nettstedet ditt), og tilby deg maler, temaer og plugins som vil øke hastigheten på webdesignprosessen.

ved å ta vare på det grunnleggende, gir disse verktøyene deg en sjanse til å fokusere dine nyvunne kodeferdigheter på å tilpasse nettstedet ditt til perfeksjon! Eller — selv om du ønsker å bygge alt fra bunnen av — disse verktøyene kan gi deg noen gode ideer for hva du skal bygge og hvordan å bygge den.

her er noen av de mest populære verktøyene for nettsideopprettelse:

  • Wix

Wix er en av de enkleste å bruke nettstedbyggere der ute. Deres gratis plan er komplett nok til å gjøre det til et flott alternativ for et barns nettstedbygger, så lenge DU er ok med AT NETTADRESSEN din er et underdomene Av Wix (sitename.wixsite.com). De har betalt planer med rimelige priser hvis du vokser ut av gratis tier.

  • WordPress

selv om Folk vet det som en gratis nettstedbygger, Hva WordPress egentlig Er et content management system (CMS). I en enkel forstand er forskjellen at en nettsidebygger er enklere å bruke, men ET CMS gir flere muligheter for tilpasning. Selv Om WordPress selv er gratis, må Du kanskje betale for noen temaer og plugins eller for hosting hvis du vil ha ditt eget domenenavn.

  • Weebly

Weebly er en nettsidebygger, mye som Wix. Den primære forskjellen Er At Weebly tilbyr mye mindre tilpassbarhet, noe som gjør Det til et brukervennlig alternativ som er flott for koding for barn, men mindre sannsynlig å vokse med deg etter hvert som byggeferdighetene dine på nettstedet forbedres.Fortsett Å Lære: Webutvikling Klasser For Barngratulerer, du har nå ditt eget nettsted! Dette er et spennende skritt som du burde føle deg utrolig stolt av. Læringen trenger heller ikke stoppe der.

Fortsett Å Lære: Webutviklingskurs For Barn

Juni Learning tilbyr Webprogrammeringskurs for barn som gir Deg de ferdighetene du trenger for å overbelaste ditt nye nettsted, eller til og med flytte inn for å bygge webapplikasjoner og porteføljer. Utenfor webutvikling lærer vi også kodingskurs for barn 8-18 på en rekke språk som Scratch, Python, Java, C++ og mer.

Sjekk ut våre online kurs for barn, eller kontakt Vårt Juni Advisors Team for å lære hvilket kurs som er best for din student!

Articles

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.