Vždy je vzrušující, když se poprvé snažíte naučit nové dovednosti. Zvláště pak kódování.
Jestliže však nemáte žádnou praxi, většinu toho, co se naučíte, zapomenete. Proto si v určitém okamžiku uvědomíte, že to, co jste se naučili, musíte procvičovat. Jinak to všechno zapomenete.
Tady přicházejí na řadu projekty. Projekty jsou dobrým způsobem, jak si procvičit to, co jste se naučili. A věřte mi, že na některých projektech pracovat chcete. Pomocí projektů můžete předvést, na čem jste pracovali.
Jako nováček můžete být při výběru projektů, které odpovídají vaší současné úrovni znalostí, sklíčeni. Možná si vyberete projekt. Pak se projekt stane příliš velkým na to, abyste ho mohli realizovat s vaším současným know-how. Alespoň tím jsem si na této cestě za poznáním prošel já.
Připravil jsem pro vás kurátorské projekty, které jsem našel a které jsou vhodné, i když se vaše znalosti omezují pouze na HTML a CSS. Tyto projekty jsou k dispozici na populárních výukových webových stránkách, kde najdete další informace o tom, co budete řešit.
1. Stránka pocty
Napište poctu někomu, koho obdivujete, a zveřejněte ji jako webovou stránku. Tento projekt bude zahrnovat práci s přidáváním obrázků, odkazů, seznamů a odstavců. Tento projekt bude k vytvoření vyžadovat znalost jazyka HTML. Můžete však použít trochu CSS, aby projekt vypadal lépe.
2. Formulář pro průzkum
Formuláře jsou užitečné při sběru dat na internetu. Tento projekt bude především testovat vaše dovednosti na všech druzích vstupů. Prověří vaše znalosti o formulářích a strukturování webové stránky. Formulář nemusí odesílat žádná data.
Je to sestavení z holdovací stránky. Tento projekt bude k vytvoření vyžadovat znalosti html/html5.
3. Vytvořte úvodní stránku produktu
Tento projekt prověří vaše znalosti HTML i CSS. Budete si muset procvičit vytváření sloupců a zarovnávání položek ve sloupcích. Budete také muset provést základní úpravy obrázků, např. oříznutí a změnu velikosti, abyste vytvořili dokonalé obrázky pro webovou stránku.
Budete potřebovat solidní znalost HTML/CSS.
4. Vyzkoušejte si, jak se pracuje s obrázky. Vytvoření stránky s technickou dokumentací
To bude vyžadovat určité znalosti HTML CSS a bootstrapu nebo JavaScriptu. Základní myšlenka je: když kliknete na libovolné téma vlevo, načte se tento obsah vpravo.
V současné době se o tento projekt pokouším a jakmile bude hotový, zveřejním jeho finální podobu.
5. Vytvoření osobního portfolia webových stránek
Procvičíte si všechny dovednosti, které jste se naučili v HTML a CSS. Budete také muset umět ořezávat a měnit velikost obrázků. Pokud nemáte možnosti, použijte Gimp. Je zdarma, má otevřený zdrojový kód a je k dispozici pro Windows i Linux .
Pokud na vytvoření portfolia spěcháte, můžete si přečíst Brianův článek o vytvoření online portfolia pomocí hotového tématu/šablony.
6. Stránka Google.com
Ano, to už jste viděli mnohokrát. Ale dokážete ji zopakovat. Jednoduchá stránka google.com s ikonami, logem Google, textovým polem a dvěma tlačítky. Můžete si vytvořit vzhledově podobnou stránku google.com. V tomto projektu ji děláte tak, aby vypadala jako google.com, ne aby fungovala jako google.com.
Potřebujete znát HTML i CSS.
7. google.com Stránka s výsledky vyhledávání
Vytvoříte stránku ve formátu výsledku vyhledávání google. Vaše stránka by měla mít normálních 10 výsledků a dole navigaci na další stránky.
Jedná se o vylepšení výše uvedené základní stránky google.com. Měli byste však být schopni znovu použít některé části kódu tohoto projektu.
Také, aby stránka poněkud vypadala, ale funkčnost by vás nyní neměla zajímat.
Závěr
Pokud se chcete naučit základy jazyka HTML, můžete se podívat na mou krátkou úvodní lekci jazyka HTML.
Vytvořili jste základní projekt, když jste se učili HTML a CSS? Pokud ano, podělte se o ně níže a pomozte ostatním žákům najít „jednoduché“, ale náročné nápady k vyzkoušení.