kódolja saját webhelyét

szeretett volna már megtanulni, hogyan tervezzen weboldalakat vagy készítsen webhelyet online? Ma megmutatjuk, hogyan építheti fel saját személyes weboldalát! Nézze meg a bemutató videót nézni Juni oktató Maya végigvezeti minden lépését az utat.

olvassa el a webfejlesztés tanulásának fontosságáról szóló további információkat, a videót kísérő lépésről lépésre szóló útmutatót, valamint a webfejlesztési élmény további fokozására használható eszközök megismerését.

emlékezz:

  • az ebben az oktatóanyagban található webhely csak egy oktatási célú példaprojekt. Mielőtt elkezdené, ne feledje, hogy a kiskorúak nem tehetnek közzé online személyes adatokat, például a teljes nevét, címét vagy telefonszámát! Legyen óvatos, amikor személyes fényképeket tölt fel online.
  • ha nem vagy biztos benne, hogy mit érdemes feltölteni, mindig kérdezze meg egy felnőttet.

kinek szól ez?

 a tanulási eredmények kezdő HTML/CSS kódolás projekt személyes honlapján.
ez a projektinformáció és a tanulási eredmények összefoglalása segít eldönteni, hogy ez a HTML/CSS kódolási projekt megfelelő-e az Ön számára.

ez a projekt alá tartozik a JavaScript Level 1 kódolási osztály gyerekeknek. Ez a kezdő HTML / CSS bemutató a diákok, hogy szeretne egy közepes kihívás projekt, körülbelül 121 sornyi kódot hosszú. Ez segít, hogy egy alapvető ismereteket, hogyan HTML és CSS működik előre, de ha teljesen új, mi is magyarázza több alapokat ebben a videóban!

ez az oktatóanyag kiválóan alkalmas kezdőknek a kódolásban, különösen a tervezés vagy a művészet iránt érdeklődőknek. Javasoljuk, hogy a diákok legyenek 12 éves vagy annál idősebb követni.

a tanulási eredményekhez sok gyakorlatot kap a div, listák, linkek, pozíció, kijelző, szöveg (h1/h2/p), betűtípusok és általános CSS. A becslések szerint ez a projekt körülbelül 40 percet vagy annál hosszabb időt vesz igénybe, attól függően, hogy mennyire kreatív, de gyorsabban vagy lassabban kell haladnia a saját tempójában!

Miért Tanuljon Webfejlesztést?

manapság nem kell ismernie a webfejlesztést vagy a kódolást a weboldal létrehozásához. A cikk vége felé megmutatunk néhány drag-and-drop weboldal készítőt, amelyek hihetetlenül megkönnyítik a folyamatot. Miért érdemes megtanulni a webfejlesztést? Ez egy nagyszerű kérdés.

korlátlan testreszabás

az összes egyszerű weboldal-létrehozó eszköz valójában korlátozott. Olyan témákat és bővítményeket kínálnak, amelyeket a kezdők nagyon könnyen használhatnak – mindaddig, amíg nem kell módosítania őket.

ha módosítania kell egy témát, vagy valami szokásosabbat kell tennie a webhelyén, akkor legalább a webfejlesztési kód alapvető ismeretére lesz szüksége. Például egy kis Javascript ismerettel szinte bármilyen közösségi média hírcsatornát integrálhat webhelyére!

Coding karrier & alapítványok

ha valaha is úgy a karrier kódolás, web design és web fejlesztési ismeretek is kapsz egy hatalmas előnyt. A webfejlesztés segít a művészet és a design iránt érdeklődő gyerekeknek és új kódolóknak, hogy felfedezzék szenvedélyüket, miközben megtanulják a kódolás alapjait. Karrier félre, vannak is számtalan élet készség előnyeit tanulás kódolás gyerekeknek.

alkalmazható számos területen

végül, hogy képes építeni a saját honlapján egy értékes készség a mai digitális korban. A bloggerek azt akarják, hogy a fejlesztők egyedi blogokká tegyék őket. Az internetes vállalkozások fejlesztőket keresnek e-kereskedelmi webhelyek építésére, ahelyett, hogy csak elemeket tennének közzé az Amazonon.

ez egy aranykor website design és fejlesztés, és egy nagyszerű alkalom, hogy megtanulják, hogyan kell építeni a saját helyén!

kezdjük!

az alapvető HTML és CSS használatával megtanuljuk, hogyan készítsünk egy egyszerű személyes weboldalt.

projekt Demo

mielőtt elkezdené írni a kódot, nézze meg, hogyan működik a kész projekt referenciaként. Nézze meg a videót, hogy megnézze a projekt weboldalának összes funkcióját.

akkor is megtekintheti a projekt megoldás kódot, ha elakad.

mit kell szem előtt tartani, mielőtt elkezdené:

  • van egy képfejléc szöveggel. A szöveg különböző méretű, és két különböző betűtípust használ. Fehér körvonala is van.
  • az alatta lévő fehér rész két részből áll.
  • van egy listánk a hiperhivatkozásokról, amelyek egy másik oldalra mutatnak. Amikor az egérmutatót fölé viszi, kékre változik.
  • van még egy rólam rész szöveggel.
  • ez alatt van egy élmény rész, más színű háttérrel.

a projekt kódolásának lépései

weboldalunk felépítéséhez a következő lépéseket követjük. Nézze meg az oktatóanyagot, hogy megtudja, hogyan kódolja Maya oktató az egyes részeket, és kövesse az alábbi magyarázatokat.

  1. adja hozzá a kép fejlécét & a rajta lévő szöveg.
  2. hozza létre a megosztani kívánt linkek listáját.
  3. hozza létre a Rólam részt.
  4. hozza létre az élmény részt.

lépésről-lépésre bemutató

1.lépés: Adja hozzá a kép fejlécét & a rajta lévő szöveget.

  • hozzon létre egy div-t relatív pozícionálással, hogy tartalmazza a képet és a szöveget.
  • hozzon létre egy div-t, amely tartalmazza a szöveget, és használja az abszolút pozícionálást a képre.
  • a szöveg hozzáadásához használja a <h1> és <h3> elemeket.
  • a szöveg betűtípusának módosításához használja a CSS-t.
  • a CSS használatával távolítsa el a kép körüli & extra margót.

2.lépés: hozza létre a megosztani kívánt linkek listáját.

  • hozzon létre egy div-t relatív pozicionálással, hogy tartalmazza a linkek és Rólam részt.
  • adjon hozzá párnázást a div-hez.
  • hozzon létre egy div inline-block kijelzővel, hogy tartalmazza a linkek listáját.
  • a <ul> használatával hozzon létre egy listát.
  • használja a <li> és <a> hivatkozásokat.
  • használja a <i> és a font-awesome linket ikonok hozzáadásához.
  • módosítsa a CSS-t, hogy úgy nézzen ki, mint az eredeti.

3.lépés: hozza létre a Rólam részt.

  • hozzon létre egy div inline-block kijelzővel, amely tartalmazza a Rólam részt.
  • szöveg hozzáadásához használja a <h3> és <p> elemeket.

4.lépés: hozza létre az élmény részt.

  • hozzon létre egy div-t relatív pozicionálással, hogy tartalmazza az élmény részt.
  • hozzon létre egy div-t az első élményhez, és használja a <h4> és <p> szöveget.
  • Add több élmény divs!

következő lépések

nagyszerű munka! Most nyugodtan adjon hozzá további szakaszokat a webhelyéhez. Néhány ötlet tartalmazhat egy szakaszt azoknak a projekteknek, amelyeken dolgozott, vagy kluboknak, amelyekben részt vesz. Az új webhelyet a GitHub és a Github oldalak segítségével is feltöltheti az internetre.

weboldalkészítő eszközök

több ember használ weboldalkészítő eszközt weboldal készítéséhez

mint korábban említettük, számos weboldalkészítő létezik. A legtöbb legjobb weboldal-készítő azért készült, hogy egyszerűsítse a folyamatot azáltal, hogy sablonokat, drag-and-drop interfészeket és egyéb funkciókat biztosít Önnek, amelyekre szüksége van egy ingyenes személyes weboldal létrehozásához.

csak azért, mert alapvető ismeretekkel rendelkezik a webfejlesztésről, nem jelenti azt, hogy el kell felejtenie ezeket az eszközöket. Segíthetnek az új webhely tárolásában, egyéni domain megtalálásában (a webhely neve és címe), és sablonokat, témákat és bővítményeket kínálnak, amelyek felgyorsítják a webdesign folyamatát.

az alapok gondozásával ezek az eszközök lehetőséget adnak arra, hogy újdonsült kódolási készségeit a webhely tökéletes testreszabására összpontosítsa! Vagy — még akkor is, ha mindent a semmiből akar építeni-ezek az eszközök remek ötleteket adhatnak arra, hogy mit és hogyan építsen.

Íme néhány a legnépszerűbb eszközök weboldal létrehozása:

  • Wix

a Wix az egyik legkönnyebben használható weboldal-készítő. Ingyenes tervük elég teljes ahhoz, hogy nagyszerű lehetőség legyen egy gyerek weboldal-készítő számára, mindaddig, amíg rendben van azzal, hogy URL-je a Wix aldomainje (sitename.wixsite.com). fizetett terveik vannak ésszerű árképzéssel, ha kinövi az ingyenes szintet.

  • WordPress

bár az emberek ingyenes weboldal-készítőként ismerik, a WordPress valójában egy tartalomkezelő rendszer (CMS). Egyszerű értelemben a különbség az, hogy a weboldal-készítő könnyebben használható, de a CMS több lehetőséget kínál a testreszabásra. Bár maga a WordPress ingyenes, előfordulhat, hogy fizetnie kell néhány témáért és bővítményért, vagy a tárhelyért, ha saját domain nevet szeretne.

  • Weebly

a Weebly egy weboldal készítő, hasonlóan a Wix-hez. Az elsődleges különbség az, hogy a Weebly sokkal kevésbé testreszabható, így felhasználóbarát lehetőség, amely kiválóan alkalmas a gyerekek kódolására, de kevésbé valószínű, hogy veled együtt növekszik, ahogy a webhelyépítési készségek javulnak.Tanulj tovább: Webfejlesztő osztályok a gyerekek számáragratulálok, most már saját weboldalad van! Ez egy izgalmas lépés, amelyre hihetetlenül büszke lehet. A tanulásnak itt sem kell megállnia.

Keep Learning: Webfejlesztő tanfolyamok gyerekeknek

a Juni Learning webes programozási tanfolyamokat kínál gyerekeknek, amelyek megadják azokat a készségeket, amelyekre szüksége van az új webhely feltöltéséhez, vagy akár webes alkalmazások és portfóliók készítéséhez. A webfejlesztésen kívül kódolási tanfolyamokat is tanítunk 8-18 éves gyerekeknek különböző nyelveken, mint a Scratch, Python, Java, C++ és így tovább.

nézze meg online tanfolyamainkat gyerekeknek, vagy vegye fel a kapcsolatot a Juni Advisors csapatunkkal, hogy megtudja, melyik tanfolyam a legjobb a hallgató számára!

Articles

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.