Code Your Own Website

Have you ever wanted to learn how to design web pages or make a site online? Tänään, aiomme näyttää, miten rakentaa oman henkilökohtaisen sivuston! Tutustu opetusohjelma video katsella Juni ohjaaja Maya opastaa sinut läpi joka askeleella.

Lue lisää web-kehityksen oppimisen tärkeydestä, vaiheittainen opas videon mukana, ja tutustu työkaluihin, joilla voit parantaa web-kehityskokemustasi.

muista:

  • tämän opetusohjelman sivusto on vain esimerkkiprojekti opetustarkoituksiin. Ennen kuin aloitat, muista, että alaikäisten ei pitäisi lähettää henkilökohtaisia tietoja verkossa, kuten koko nimesi, osoitteesi tai puhelinnumerosi! Ole myös varovainen, kun lataat henkilökohtaisia kuvia verkossa.
  • jos et ole varma, mitä on OK ladata, Kysy aina aikuiselta.

kenelle tämä on?

the learning outcomes for beginner HTML/CSS coding project Personal Website.
tämä projektin info-ja oppimistulosten yhteenveto auttaa sinua päättämään, sopiiko tämä HTML/CSS-koodausprojekti sinulle.

tämä projekti kuuluu JavaScript-tason 1 koodausluokkaan lapsille. Tämä aloittelija HTML / CSS opetusohjelma on opiskelijoille, jotka haluavat keskipitkän haaste projekti, noin 121 riviä koodia pitkä. Se auttaa saada perustiedot siitä, miten HTML ja CSS toimivat etukäteen, mutta jos olet täysin uusi, selitämme myös enemmän perusasioita tässä videossa!

tämä opetusohjelma sopii erinomaisesti koodauksen aloittelijoille, erityisesti muotoilusta tai taiteesta kiinnostuneille. Suosittelemme, että opiskelijat ovat 12-vuotiaita tai vanhempia seuraamaan mukana.

oppimistuloksia varten saat paljon harjoitusta div: n, listojen, linkkien, sijainnin, näytön, tekstin (h1/h2/p), fonttien ja yleisen CSS: n avulla. Tämän projektin arvioidaan kestävän noin 40 minuuttia tai kauemmin riippuen siitä, kuinka luova olet, mutta sinun pitäisi liikkua nopeammin tai hitaammin omaan tahtiisi!

Miksi Opetella Web-Kehitystä?

nykyään ei tarvitse osata web-kehitystä tai koodausta luodakseen verkkosivuston. Loppupuolella tämän artikkelin, näytämme muutamia vedä ja pudota verkkosivuilla luojat, jotka tekevät prosessin uskomattoman helppo tehdä. Joten miksi sinun pitäisi oppia web development? Hyvä kysymys.

rajoittamaton räätälöinti

kaikki helpot verkkosivujen luontityökalut ovat itse asiassa rajallisia. Ne tarjoavat sinulle joukon teemoja ja plugins, jotka ovat erittäin helppo aloittelijoille käyttää – kunhan sinun ei tarvitse muokata niitä.

kun sinun täytyy muokata jotain teemaa tai tehdä jotain mukautetumpaa verkkosivustosi kanssa, tarvitset kuitenkin vähintään perustiedot web-kehityskoodista. Esimerkiksi, kanssa hieman Javascript tietoa, voit integroida lähes kaikki sosiaalisen median syötteen sivustoosi!

Koodausurat & perustukset

jos olet joskus harkinnut uraa koodauksen parissa, web-suunnittelun ja web-kehityksen tietämys antaa sinulle myös valtavan etumatkan. Web development auttaa taiteesta ja muotoilusta kiinnostuneita lapsia ja uusia koodareita tutustumaan intohimoonsa ja samalla opettelemaan koodauksen perusteita. Ura syrjään, on myös lukemattomia elämän taito etuja oppimisen koodaus lapsille.

soveltuu monille aloille

lopuksi, oman verkkosivuston rakentaminen on arvokas taito nykypäivän digitaaliaikana. Bloggaajat haluavat Kehittäjät tehdä niistä mukautettuja blogeja. Internet-yritykset etsivät kehittäjiä rakentaa verkkokaupan sivustoja sen sijaan, että vain lähettämistä kohteita Amazon.

on verkkosivujen suunnittelun ja kehittämisen kulta-aika, ja hyvä aika oppia rakentamaan oma sivusto!

aloitetaan!

käytämme perus HTML: ää ja CSS: ää oppiaksemme tekemään yksinkertaisen henkilökohtaisen verkkosivuston.

projektin Demo

ennen kuin alat kirjoittaa koodia, katso miten valmis projektimme toimii referenssiä varten. Katso video tarkistaa kaikki projektimme verkkosivuilla ominaisuuksia.

voit myös tarkastella projektiratkaisumme koodia, jos jäät jumiin.

mitä pitää mielessä ennen kuin aloitat:

  • on kuvan otsikko, jossa on tekstiä. Teksti on erikokoista ja käyttää kahta eri fonttia. Siinä on myös valkoinen ääriviivat.
  • sen alapuolella olevassa valkoisessa osassa on kaksi osaa vierekkäin.
  • meillä on luettelo hyperlinkeistä, jotka linkittävät toiselle sivulle. Kun leijut niiden yllä, ne muuttuvat sinisiksi.
  • mukana on myös About Me-osio, jossa on tekstiä.
  • sen alapuolella on elämysosa, jossa on erivärinen Tausta.

Steps to Code the Project

to build our website, we ’ ll follow this order of steps. Katso opetusohjelma nähdä, miten ohjaaja Maya koodit kunkin osan, ja seuraa yhdessä selitykset alla.

  1. lisää kuvan otsakkeeseen & siihen liittyvä teksti.
  2. Luo lista linkeistä, jotka haluat jakaa.
  3. Create the About Me-osio.
  4. luo kokemusosa.

Step-by-Step Tutorial

Step 1: lisää kuvan otsakkeeseen & teksti, joka siihen menee.

  • Luo div suhteellisella sijainnilla, joka sisältää kuvan ja tekstin.
  • Luo div, joka sisältää tekstin, ja aseta se absoluuttisella sijainnilla kuvaan.
  • Käytä tekstiä <h1> ja <h3>.
  • käytä CSS: ää tekstifontin muokkaamiseen.
  • käytä CSS: ää poistaaksesi ylimääräisen marginaalin & pehmusteen kuvan ympäriltä.

Vaihe 2: Luo lista linkeistä, jotka haluat jakaa.

  • Luo div suhteellisella sijainnilla sisältämään linkit ja tietoja minusta-osio.
  • lisää pehmusteet div: hen.
  • luo linkkiluettelon sisältävä div, jossa on inline-block-näyttö.
  • käytä <ul> luettelon laatimiseen.
  • käytä linkkejä <li> ja <a>.
  • käytä <i> ja fonttimaista linkkiä kuvakkeiden lisäämiseen.
  • muokkaa CSS: ää niin, että se näyttää alkuperäiseltä.

Vaihe 3: Luo tietoja minusta-osio.

  • Luo div inline-block-näytöllä, joka sisältää tietoja minusta-osion.
  • Käytä tekstiä <h3> ja <p>.

Vaihe 4: Luo kokemusosa.

  • Luo div suhteellisella sijainnilla, joka sisältää Kokemusosion.
  • Luo div ensimmäistä kokemusta varten ja käytä <h4> ja <p> tekstin lisäämiseen.
  • lisää kokemusta divs!

seuraavat askeleet

hienoa työtä! Nyt, voit vapaasti lisätä osioita sivustoosi. Jotkut ideat voivat sisältää osio hankkeita, jotka olet työskennellyt tai klubeja, että olet. Voit myös ladata uuden verkkosivustosi verkkoon käyttämällä Github-ja Github-sivuja.

verkkosivun luontityökalut

useat ihmiset käyttävät verkkosivun luontityökalua rakentaakseen verkkosivuston

kuten aiemmin mainittiin, on olemassa useita verkkosivujen luojia. Useimmat parhaista verkkosivustojen rakentajista on tehty virtaviivaistamaan prosessia tarjoamalla sinulle malleja, vedä ja pudota-rajapintoja ja muita toimintoja, joita tarvitset luodaksesi ilmaisen henkilökohtaisen verkkosivuston.

vain siksi, että sinulla on perustiedot web-kehityksestä, ei tarkoita, että sinun pitäisi unohtaa nämä työkalut. Ne voivat auttaa sinua isännöimään uutta verkkosivustoasi, löytämään mukautetun verkkotunnuksen (verkkosivustosi nimi ja osoite) ja tarjoamaan sinulle malleja, teemoja ja laajennuksia, jotka nopeuttavat web-suunnitteluprosessiasi.

huolehtimalla perusasioista, nämä työkalut antavat sinulle mahdollisuuden keskittää uudet koodaustaitosi sivustosi muokkaamiseen täydelliseksi! Tai-vaikka haluat rakentaa kaiken tyhjästä – nämä työkalut voivat antaa sinulle hienoja ideoita siitä, mitä rakentaa ja miten rakentaa.

Tässä muutamia suosituimpia työkaluja verkkosivujen luomiseen:

  • Wix

Wix on yksi helpoimmista käyttää sivuston rakentajat siellä. Heidän ilmainen suunnitelma on tarpeeksi täydellinen, jotta se on hyvä vaihtoehto lapsen verkkosivuilla rakentaja, kunhan olet kunnossa URL on aliverkkotunnus Wix (sitename.wixsite.com). heillä ei ole maksettu suunnitelmia kohtuulliseen hintaan, jos outgrow vapaa taso.

  • WordPress

vaikka ihmiset tietävät sen ilmaiseksi verkkosivuilla rakentaja, mitä WordPress todella on sisällönhallintajärjestelmä (CMS). Yksinkertaisessa mielessä ero on, että sivuston rakentaja on helpompi käyttää, mutta CMS tarjoaa enemmän mahdollisuuksia räätälöinnin. Vaikka WordPress itsessään on ilmainen, saatat joutua maksamaan joitakin teemoja ja plugins tai hosting, jos haluat oman verkkotunnuksen.

  • Weebly

Weebly on sivuston rakentaja, aivan kuten Wix. Ensisijainen ero on, että Weebly tarjoaa paljon vähemmän muokattavuutta, joten se on käyttäjäystävällinen vaihtoehto, joka on hyvä koodaus lapsille, mutta vähemmän todennäköisesti kasvaa kanssasi, kun sivuston rakentamisen taitoja parantaa.Opi jatkuvasti: Web Development luokat KidsCongratulations, sinulla on nyt oma sivusto! Tämä on jännittävä askel, josta sinun pitäisi tuntea uskomattoman ylpeä. Oppimisen ei tarvitse loppua siihenkään.

Keep Learning: Web Development Courses for Kids

Juni Learning tarjoaa lapsille Web-ohjelmointikursseja, jotka antavat sinulle tarvittavat taidot uuden sivuston lataamiseen tai jopa web-sovellusten ja portfolioiden rakentamiseen. Web-kehityksen ulkopuolella opetamme myös koodauskursseja lapsille 8-18 eri kielillä, kuten Scratch, Python, Java, C++ ja paljon muuta.

Tutustu lapsille suunnattuihin verkkokursseihimme tai ota yhteyttä Juni Advisors-tiimiimme saadaksesi selville, mikä kurssi sopii parhaiten oppilaallesi!

Articles

Vastaa

Sähköpostiosoitettasi ei julkaista.