Kódujte své vlastní webové stránky

chtěli jste se někdy naučit, jak navrhovat webové stránky nebo vytvořit web online? Dnes vám ukážeme, jak vytvořit svůj vlastní osobní web! Podívejte se na výukové video a sledujte, jak vás Juni instruktor Maya provede každým krokem.

Přečtěte si další informace o důležitosti učení vývoje webu, průvodce krok za krokem, který doprovází video, a dozvíte se o nástrojích, které můžete použít k dalšímu zlepšení zkušeností s vývojem webu.

zapamatovat si:

  • webové stránky v tomto tutoriálu jsou pouze příkladem projektu pro výukové účely. Před zahájením, mějte na paměti, že nezletilí by neměli zveřejňovat osobní údaje online, jako je vaše celé jméno, adresa, nebo telefonní číslo! Při nahrávání osobních fotografií online buďte také opatrní.
  • pokud si nejste jisti, co je v pořádku Nahrát, vždy se poraďte s dospělým.

pro koho je to?

výsledky učení pro začátečníky HTML / CSS kódování projektu osobní webové stránky.
tyto informace o projektu a shrnutí výsledků učení vám pomohou rozhodnout, zda je tento projekt kódování HTML / CSS pro vás to pravé.

tento projekt spadá do naší třídy kódování JavaScript Level 1 pro děti. Tento začátečník HTML / CSS tutoriál je určen pro studenty, kteří chtějí středně náročný projekt, asi 121 řádků kódu dlouhé. Pomůže to mít základní znalosti o tom, jak HTML a CSS fungují předem, ale pokud jste úplně nový, vysvětlíme také další základy v tomto videu!

tento tutoriál je skvělý pro začátečníky v kódování, zejména pro zájemce o design nebo umění. Doporučujeme, aby studenti byli 12 let nebo starší, aby je následovali.

pro výsledky učení získáte spoustu praxe s div, seznamy, odkazy, pozicí, displejem, textem (h1/h2/p), fonty a obecným CSS. Odhaduje se, že tento projekt vám zabere asi 40 minut nebo déle, v závislosti na tom, jak kreativní jste, ale měli byste se pohybovat rychleji nebo pomaleji svým vlastním tempem!

Proč Se Učit Vývoj Webových Aplikací?

v těchto dnech nepotřebujete znát vývoj webu nebo kódování pro vytvoření webové stránky. Ke konci tohoto článku, Ukážeme vám několik tvůrců webových stránek drag-and-drop, díky nimž bude proces neuvěřitelně snadný. Tak proč byste se měli naučit vývoj webu? To je skvělá otázka.

neomezené přizpůsobení

Všechny snadné nástroje pro tvorbu webových stránek jsou ve skutečnosti omezené. Nabízejí vám sadu témat a pluginů, které jsou pro začátečníky velmi snadné – pokud je nemusíte upravovat.

když potřebujete upravit motiv nebo udělat něco více vlastní s vaší webové stránky, nicméně, budete potřebovat alespoň základní znalosti kódu pro vývoj webu. Jako příklad, s trochou znalostí JavaScriptu, můžete na svůj web integrovat téměř jakýkoli zdroj sociálních médií!

kódování kariéra & základy

pokud jste někdy uvažovali o kariéru v kódování, web design a vývoj webových znalostí bude také vám obrovský náskok. Vývoj webových aplikací pomáhá dětem a novým programátorům, kteří se zajímají o umění a design, prozkoumat jejich vášeň a zároveň se naučit základy kódování. Kariéra stranou, existuje také nespočet výhod životních dovedností pro učení kódování pro děti.

platí pro mnoho polí

a konečně, schopnost vytvářet vlastní webové stránky je cennou dovedností v dnešním digitálním věku. Blogeři chtějí, aby jim vývojáři vytvořili vlastní blogy. Internetové podniky hledají vývojáře, kteří by vytvářeli weby elektronického obchodu, místo aby zveřejňovali položky na Amazonu.

je to zlatý věk pro návrh a vývoj webových stránek a skvělý čas se naučit, jak vytvořit svůj vlastní web!

začněme!

budeme používat základní HTML a CSS, abychom se naučili, jak vytvořit jednoduchý osobní web.

demo projektu

než začnete psát kód, podívejte se, jak náš hotový projekt funguje. Podívejte se na video a podívejte se na všechny funkce našich webových stránek projektu.

můžete si také prohlédnout náš kód řešení projektu, pokud narazíte.

co je třeba mít na paměti, než začnete:

  • je zde záhlaví obrázku s textem. Text má různé velikosti a používá dvě různá písma. Má také bílý obrys.
  • bílá část pod ní má dvě části vedle sebe.
  • máme seznam hypertextových odkazů, které odkazují na jinou stránku. Když nad nimi najedete, změní se na modrou.
  • k dispozici je také sekce O mně s textem.
  • pod tím je sekce zkušeností s jiným barevným pozadím.

kroky pro kód projektu

Chcete-li vytvořit naše webové stránky, budeme postupovat podle tohoto pořadí kroků. Podívejte se na tutoriál, abyste viděli, jak instruktor Maya kóduje každou část, a postupujte podle níže uvedených vysvětlení.

  1. přidejte záhlaví obrázku & text, který na něm jde.
  2. Vytvořte seznam odkazů, které chcete sdílet.
  3. Vytvořte sekci O mně.
  4. Vytvořte sekci Zkušenosti.

krok za krokem tutoriál

Krok 1: Přidejte záhlaví obrázku & text, který na něm jde.

  • Vytvořte div s relativním umístěním, aby obsahoval obrázek a text.
  • Vytvořte div, který bude obsahovat text, a pomocí absolutní polohy jej umístěte na obrázek.
  • pro přidání textu použijte <h1> a <h3>.
  • použijte CSS k úpravě písma textu.
  • použijte CSS k odstranění dodatečného okraje & polstrování kolem obrázku.

Krok 2: Vytvořte seznam odkazů, které chcete sdílet.

  • Vytvořte div s relativním umístěním, abyste obsahovali sekci Odkazy a o mně.
  • přidejte do div polstrování.
  • Vytvořte div s inline blokovým displejem, který bude obsahovat seznam odkazů.
  • pro vytvoření seznamu použijte <ul>.
  • pro vytvoření odkazů použijte <li> a <a>.
  • použijte <i> a odkaz na úžasné písmo pro přidání ikon.
  • upravte CSS tak, aby vypadal jako originál.

Krok 3: Vytvořte sekci O mně.

  • Vytvořte div s inline blokovým displejem, který bude obsahovat sekci O mně.
  • pro přidání textu použijte <h3> a <p>.

Krok 4: Vytvořte sekci Zkušenosti.

  • Vytvořte div s relativním umístěním, aby obsahoval sekci Zkušenosti.
  • Vytvořte div pro první zkušenost a použijte <h4> a <p> pro přidání textu.
  • přidat další zkušenosti divs!

další kroky

skvělá práce! Nyní můžete na svůj web přidat další sekce. Některé nápady mohou zahrnovat sekci pro projekty, na kterých jste pracovali, nebo kluby, ve kterých jste. Nový web můžete také nahrát na web pomocí stránek Github a Github.

nástroje pro tvorbu webových stránek

několik lidí používá nástroj pro vytváření webových stránek k vytvoření webových stránek

jak jsme již zmínili, existuje několik tvůrců webových stránek. Většina nejlepších tvůrců webových stránek je vytvořena pro zefektivnění procesu tím, že vám poskytne šablony, rozhraní drag-and-drop a další funkce, které potřebujete k vytvoření bezplatného osobního webu.

jen proto, že máte základní znalosti o vývoji webu, neznamená, že byste měli na tyto nástroje zapomenout. Mohou vám pomoci hostit váš nový web, najít vlastní doménu (název a adresu vašeho webu) a nabídnout vám šablony, motivy a pluginy, které urychlí proces návrhu webu.

tím, že se staráte o základy, vám tyto nástroje dávají šanci zaměřit své nově nalezené kódovací dovednosti na přizpůsobení vašeho webu k dokonalosti! Nebo — i když chcete stavět vše od nuly-vám tyto nástroje mohou poskytnout několik skvělých nápadů, co postavit a jak je postavit.

zde jsou některé z nejpopulárnějších nástrojů pro tvorbu webových stránek:

  • Wix

Wix je jedním z nejjednodušších nástrojů pro tvorbu webových stránek. Jejich bezplatný plán je dostatečně kompletní, aby byl skvělou volbou pro tvůrce webových stránek pro děti, pokud jste v pořádku s tím, že vaše URL je subdoménou Wix (sitename.wixsite.com mají placené plány s rozumnou cenou, pokud přerostete bezplatnou úroveň.

  • WordPress

ačkoli to lidé znají jako bezplatný tvůrce webových stránek, Co WordPress je opravdu systém pro správu obsahu (CMS). V jednoduchém smyslu je rozdíl v tom, že tvůrce webových stránek je jednodušší, ale CMS nabízí více příležitostí k přizpůsobení. Přestože je WordPress sám o sobě zdarma, možná budete muset zaplatit za některá témata a pluginy nebo za hosting, pokud chcete svůj vlastní název domény.

  • Weebly

Weebly je tvůrce webových stránek, podobně jako Wix. Primární rozdíl je v tom, že Weebly nabízí mnohem menší přizpůsobitelnost, což z něj činí uživatelsky přívětivou možnost, která je skvělá pro kódování pro děti, ale je méně pravděpodobné, že s vámi poroste, jak se vaše dovednosti v budování webových stránek zlepší.Pokračujte v učení: Kurzy vývoje webových stránek pro Dětiblahopřejeme vám, nyní máte svůj vlastní web! Je to vzrušující krok, na který byste se měli cítit neuvěřitelně hrdí. Učení se tam také nemusí zastavit.

Keep Learning: vývoj webových kurzů pro děti

Juni Learning nabízí webové programovací kurzy pro děti, které vám poskytnou dovednosti, které potřebujete k přeplnění vašeho nového webu, nebo dokonce přejít na vytváření webových aplikací a portfolií. Mimo vývoj webových aplikací vyučujeme také kurzy kódování pro děti 8-18 v různých jazycích, jako je Scratch, Python, Java, C++ a další.

podívejte se na naše online kurzy pro děti nebo kontaktujte náš tým Juni Advisors a zjistěte, který kurz je pro vašeho studenta nejlepší!

Articles

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.