Moje cesta ke kódu
Jak vznikaly tyto stránky
O tvorbu webových stránek jsem se pokoušela už dlouho. Zkusila jsem si vyrobit pár stránek ve Webnode, z nichž většina z nich už ani neexistuje. To mi ale přišlo dost málo. Pomalu se mi dařilo pronikat do tajů SEO, sociálních sítí a marketingu. Dokonce se mi naskytla příležitost nějakou dobu v marketingu pracovat. Pořád mě ale myšlenka na vlastní web neopouštěla. Poté co jsem začala pracovat v IT firmě jsem nastalo mé definitivní rozhodnutí. Udělám to. Prostě jsem si jednoho dne sedla k počítači, pustila si na YouTube tutoriál od Davida Šetka a začala psát kód.
První krůčky s HTML a CSS
Úplně na začátku jsem byla ráda, když se mi do poznámkového bloku podařilo napsat „head“ a „body“. Bylo ale obrovské štěstí, že se mi hned na začátku podařilo najít skvělé zdroje jako například Jak psát web a již zmíněný kurz na YouTube. Poměrně rychle jsem tak začala chápat, jak HTML funguje.
Mimo jiné jsem se naučila například to:
- Jak strukturovat obsah stránky.
- Vytvořit jednoduchou patičku s Copyrightem a odkazy na sociální sítě.
- Použít Grid, což mi pomohlo lépe rozvrhnout obsah.
Nezbytnou součástí celého procesu bylo také neustálé upravování, ladění, opravování a znovu upravování struktury HTML. Nakonec jsem ještě odstranila všechny zbytečné komentáře, abych co nejvíc urychlila načítání stránek.
Když vzhled rozhoduje: CSS
Společně s HTML jsem se pochopitelně učila také CSS. Po maličkých krůčcích se tak začínala rýsovat podoba tohoto webu.
- Nejprve bylo nutné vybrat správné barvy a zvolit ten pravý font.
- Pyšná jsem například na „zářící“ ikonky, které ožijí při najetí myší díky efektům hover a transition.
- Díky dalšímu videu jsem se naučila trik, jak si nastylovat vlastní scrollbar, který perfektně ladí s celkovým vzhledem stránek.
- V konzoli jsem zdlouhavě testovala a upravovala jednotlivé styly tak, aby fungovaly na všech možných zařízeních.
- Nakonec bylo třeba celý CSS soubor optimalizovat pomocí nástroje CSS Minifier. To už ale trochu předbíhám.
Abych se vyhnula problému s cashováním a viděla změny na své stránce ihned, naučila jsem se do kódu přidávat „?v=xxx“ při odkazování na CSS v HTML, což mi ušetřilo spoustu času.
Interaktivita s JavaScriptem
Chtěla jsem stránky ještě trochu oživit, tak jsem přidala pár drobností z JavaScriptu:
- Burger menu – to bylo nutné přidat hlavně kvůli mobilní navigaci.
- Cookies lišta - aby měly stránky všechny své náležitosti, nesmělo chybět ani upozornění o cookies.
- FAQ sekce - pro zvídavé je tu sekce FAQ s rozbalovacími panely díky accordion efektu.
- Lightbox - aby si mohli návštěvníci zvětšit některé fotky, využila jsem také Lightbox šablonu.
Tímto způsobem stránky nejen ožily, ale také se staly přívětivějšími pro všechny, kdo na ně zabloudí.
Bez obrázků by to nebylo ono
Obrázky k webu prostě patří. Proto jsem se vrhla na zdlouhavé, několikadenní procházení fotobanky. Mým zdrojem byly dvě fotobanky, a to konkrétně Freepik a Adobe Stock. Pochopitelně jsem přidala i své vlastní fotografie, na které jsem si jen tak pro zábavu vytvořila stylovou slideshov a doladila několik dalších detailů.
- Převedla všechny fotografie na moderní formát webp.
- Zmenšila velikosti obrázků pomocí Tiny PNG.
- Vytvořila jsem si originální logo přes Looka a sadu favicon pomocí Favicon.io.
Každý detail jsem doladila tak, aby web vypadal nejen profesionálně, ale také ani moc nezpomaloval web.
SEO a rychlost načítání
Poté, co jsem s námahou vytvořila svůj první web, jsem pochopitelně chtěla, aby ho také někdo našel. Mimo jiné například:
- Přidala meta tagy, jako například titulky a popisky, ve správné délce.
- Vložila alternativní texty (alt) ke všem obrázkům.
- Testovala a testovala například pomocí nástrojů jako PageSpeed a SEO Test Online.
Odstranění zbytečných prvků, jako byl iframe, a přidání lazy loading mi také výrazně pomohly vylepšit rychlost stránek.
Technické výzvy
Nejvíce jsem se natrápila s nastavováním .htaccess, abych si vytvořila „hezké“ URL. Po dlouhých dnech či týdnech testování, úprav, odstraňování chyb a nekonečně dlouhých nočních diskusí s Chat GPTse mi nakonec podařilo přijít na to, že problém je ve statických URL jednotlivých stránek URL ve všech souborech. Jejich ruční přepisování ve všech souborech tak už pro mě bylo v porovnání s předešlým „trápením“ jen maličkost.
Poté jsem ještě dodělala pár drobostí:
- Vytvořila vlastní originální chybovou stránku.
- Přesměrovala web na verzi bez „www“.
- Přidala Open Graph tagy a JSON-LD pro lepší sdílení na sociálních sítích.
Velkou součástí a zároveň výzvou byl pochopitelně také neustálý debugging. S chybami v kódu mi ale trochu pomohl online validátor.
Mobilní verze
V dnešní době musí web fungovat na všech zařízeních. Proto jsem se vrhla i do vytváření mobilní verze. Mimo jiné třeba:
- Přidala viewport a vytvořila mobilní verze obrázků.
- Otestovala stránky na různých zařízeních a přizpůsobila je pomocí queries.css.
„Závěrečná“ optimalizace
Na závěr jsem:
- Přidala Google Analytics, protože mám ráda přehled o návštěvnosti.
- Vytvořila soubory sitemap.xml a robots.txt.
- Pro rychlejší načítání stránky jsem ještě nahradila iframe s mapou statickým obrázkem s odkazem.
Co mi tato cesta přinesla
Tvorba těchto stránek byla neuvěřitelnou zkušeností. Naučilo mě to nejen technické dovednosti, ale také to, jak řešit problémy a hledat nové přístupy. Navíc jsem si i slušně zopakovala některé dovednosti z marketingu. I nadále však budu pracovat na jejich vylepšení. Vlastně nevím, jestli pro mě bude web někdy hotový. Pořád nacházím další a další věci, které je možné přidat, upravit nebo vylepšit. Pokud vás moje cesta za vlastním webem zaujala, budu ráda, když se na těchto stránkách budete cítit jako doma! 😊
A třeba se ke mně můžete i někdo připojit. 😉
Další mini projekty
V současné době se také pomaličku začínám seznamovat s javascriptem a učím se vytvářet první hry a miniaplikace. Zde je několik mých minini projektů.
Nová hra
Když doma najdete rozbitou hru z 80. let,🎮 nejlepší způsob, jak ji „opravit“, je zkusit celou hru naprogramovat znovu. Pokud se chcete podívat, jestli se mi to povedlo, můžete si zahrát.
Hrát hru