Učit se kódovat je vždy vzrušující a zábavné pro každého, a pokud jde o vstup do světa programování, většina lidí začíná s nejjednodušší věcí HTML a CSS. Cesta každého začátečníka v oblasti kódování frontendů začíná těmito dvěma základními stavebními kameny a při navrhování krásné aplikace je třeba být kreativní.
Zpočátku začátečníky baví vytvářet tlačítka, přidávat odkazy, přidávat obrázky, pracovat s rozvržením a spoustou skvělých věcí v oblasti webdesignu, ale když dojde na tvorbu projektu pouze pomocí HTML a CSS, zaseknou se a jsou zmatení z toho, co by měli vytvořit, aby si všechny tyto věci procvičili. Vždyť jejich znalosti se omezují pouze na HTML a CSS. Bez ohledu na to, že po naučení se všeho si v určitém okamžiku uvědomíte, že vytvoření projektu je důležité pro procvičení dovedností HTML a CSS. Musíte si vyzkoušet, jak HTML a CSS spolupracují, abyste mohli navrhnout krásnou frontendovou aplikaci. Otázkou tedy je, jaké projekty vhodné pro začátečníky můžete vytvořit, abyste si procvičili vše, co jste se naučili… Pojďme to probrat.
Stránka pocty
Nejjednodušší webová stránka, kterou můžete vytvořit jako začátečník, je stránka pocty někomu, koho v životě obdivujete. Vyžaduje pouze základní znalosti HTML a CSS. Vytvořte webovou stránku, kde o dané osobě napíšete a přidáte její obrázek. V horní části stránky přidejte obrázek a jméno dané osoby a pod tím dejte rozvržení ostatním údajům. Můžete použít odstavce, seznamy, odkazy, obrázky s CSS, aby stránka vypadala důstojně. Na webovou stránku přidejte vhodnou barvu pozadí a styl písma. Většinu částí můžete vytvořit pomocí HTML, ale pro lepší vzhled použijte trochu CSS. Vezměte si na pomoc níže uvedený odkaz.
- Moje stránka pocty
- Stránka pocty Stevu Jobsovi
- Stránka pocty Albertu Einsteinovi
Stránka obsahující formulář
Formuláře jsou vždy nezbytnou součástí každého projektu a ve většině aplikací budete pracovat se spoustou formulářů, tak proč si to neprocvičit dříve a neotestovat své znalosti. Jakmile se seznámíte se vstupním polem nebo základními značkami v HTML pro vytvoření formuláře, vytvořte projekt s použitím všech těchto značek. Jak používat textové pole, zaškrtávací políčko, rádiové tlačítko, datum a další důležité prvky v jednom formuláři. Naučíte se, jak dát webové stránce správnou strukturu při vytváření formuláře. Znalost jazyka HTML/HTML5 je dostačující, ale můžete použít trochu CSS, aby projekt vypadal lépe. Vezměte si na pomoc níže uvedené odkazy.
- Výběrový formulář
- Formulář pro dobrou náladu
- Výběrový formulář
Paralaxní webová stránka
Paralaxní webová stránka obsahuje pevné obrázky na pozadí, které můžete nechat na místě, a můžete se posouvat po stránce dolů a vidět různé části obrázku. Se základními znalostmi HTML a CSS můžete webové stránce dodat paralaxní efekt. Použití paralaxního efektu při tvorbě webových stránek je opravdu populární a dodává webové stránce krásný vzhled. Vyzkoušejte jej a rozdělte celou stránku na tři až čtyři různé části. Nastavte 3-4 obrázky na pozadí, zarovnejte text pro různé sekce, nastavte margin a padding, přidejte background-position a další prvky a vlastnosti CSS pro vytvoření paralaxního efektu. Můžete si vzít na pomoc Parallax Website.
Landing Page
Landing Page je další dobrý projekt, který můžete vytvořit pomocí HTML a CSS, ale vyžaduje solidní znalost těchto dvou stavebních prvků. Při tvorbě vstupní stránky budete používat spoustu kreativity. Procvičíte si, jak přidat patičku a záhlaví, vytvořit sloupce, zarovnat položky, rozdělit sekce a spoustu dalších věcí. Budete muset pečlivě používat CSS a mít na paměti, aby se různé prvky navzájem nepřekrývaly. Budete se také starat o kombinace barev, padding, margin, mezeru mezi sekcemi, odstavci a rámečky. Barevné kombinace by k sobě měly dobře ladit u různých sekcí nebo pozadí. Můžete si vzít na pomoc níže uvedený odkaz.
- Přistávací stránka na celou obrazovku
- Přistávací stránka
Webová stránka restaurace
Předveďte své solidní znalosti HTML a CSS při vytváření krásné webové stránky pro restauraci. Vytvoření layoutu pro restauraci bude o něco složitější než předchozí příklady projektů. Budete zarovnávat různé položky jídel a nápojů pomocí mřížky rozvržení CSS. Budete přidávat ceny, obrázky a musíte tomu dát také krásný vzhled pomocí správné kombinace barev, stylu písma a obrázků. Můžete přidat galerii obrázků pro různé položky potravin, můžete také přidat posuvné obrázky pro lepší vzhled. Přidejte odkazy pro přesměrování na interní stránky. Udělejte ji responzivní s nastavením viewportu, pomocí dotazů na média a mřížky. Můžete si vzít na pomoc webové stránky restaurace.
Webová stránka události nebo konference
Můžete vytvořit statickou stránku pořádající událost nebo konferenci. Lidem, kteří mají zájem o účast na konferenci, vytvořte tlačítko pro registraci. V horní části záhlaví zmiňte různé odkazy na řečníky, místo konání a program. Popište účel konference nebo kategorii lidí, kteří mohou mít z této konference užitek. Na webovou stránku přidejte úvod a obrázky řečníka, detail místa konání a hlavní účel konference. Rozdělte stránku do sekcí, přidejte záhlaví a zápatí prezentující nabídku. Pro různé sekce použijte vhodnou barvu pozadí, která se k sobě může hodit. Zvolte decentní styl a barvu písma, které odpovídají tématu vaší webové stránky. To vyžaduje hluboké znalosti HTML/HTML5 a CSS. Můžete si vzít na pomoc Konferenci stylů.
Stránka obchodu s hudbou
Jste-li milovníkem hudby, můžete pro ni vytvořit webovou stránku. Vyžaduje to znalosti HTML5/CSS3. Přidejte vhodný obrázek na pozadí popisující účel nebo o čem stránka je. Do části záhlaví přidejte různá menu. Přidejte tlačítka, odkazy, obrázky a nějaký popis o sbírce dostupných skladeb. Ve spodní části zmiňte odkazy na nákup, obchod, kariéru nebo kontaktní údaje. Na stránky můžete přidat i další funkce, například možnost vyzkoušení, dárkové karty nebo předplatné. Udělejte ji responzivní nastavením viewportu nebo pomocí dotazů na média a mřížky. Můžete si vzít na pomoc myTunes.
Fotografický web
Pokud máte hluboké znalosti HTML5 a CSS3, můžete vytvořit jednostránkový responzivní fotografický web. Pro responzivitu použijte flexbox a media queries. Přidejte název společnosti s obrázkem (souvisejícím s fotografováním) v horní části (vstupní stránka). Pod ním představte svou práci přidáním několika obrázků. Ve spodní části (patička) uveďte kontaktní údaje fotografa. Přidejte tlačítko pro zobrazení vaší práce. Toto tlačítko vás přímo přenese dolů do sekce s obrázky. Musíte se postarat o okraje, padding, kombinaci barev, velikost písma, styl písma, velikost obrázku a stylování tlačítka. Můžete si vzít na pomoc Acme Photography.
Osobní portfolio
Se znalostí HTML5 a CSS3 můžete také vytvořit své portfolio. Prezentujte ve svém portfoliu ukázky své práce a dovedností s uvedením svého jména a obrázků. Můžete tam také přidat svůj životopis a hostovat své kompletní portfolio na účtu GitHub. V sekci záhlaví uveďte několik nabídek, jako je o vás, kontakt, práce nebo služby. Nahoru přidejte jeden ze svých obrázků a představte se tam. Pod něj přidejte několik ukázek práce a nakonec (v patičce) přidejte kontaktní informace nebo účet na sociálních sítích. Můžete si vzít na pomoc Osobní portfolio.
Technická dokumentace
Pokud máte trochu znalostí Javascriptu, můžete vytvořit webovou stránku technické dokumentace. Vyžaduje to znalost jazyka HTML, CSS a základní znalosti javascriptu. Celou webovou stránku rozdělte na dvě části. V levé části vytvořte menu se všemi tématy seřazenými shora dolů. Na pravé straně je třeba uvést dokumentaci nebo popis k jednotlivým tématům. Myšlenka je taková, že jakmile kliknete na jedno z témat v levé části, měl by se načíst obsah v pravé části. Pro kliknutí můžete použít buď javascript, nebo možnost záložek CSS. Nemusíte to dělat příliš efektně, stačí tomu dát jednoduchý a decentní vzhled, který vypadá dobře pro technickou dokumentaci. Nápovědu si můžete vzít z technické dokumentace.
Pomocný odkaz: 10 tipů pro efektivní tvorbu webových stránek v roce 2019
