Po absolvování mých kurzů: Čím pokračovat a co se naučit

🔁 Dokončili jste moje kurzy HTML, CSS, JavaScriptu a Gitu? Skvělá práce! 🎉 Právě jste položili pevný základ – a teď je čas stavět dál. Možná přemýšlíte, co má smysl se učit jako další krok. Proto jsem pro vás připravil přehled technologií, kterými dává smysl navázat hned po kurzech.

Všechny vychází z toho, co už znáte, a postupně vás posunou k modernímu frontend vývoji – od jednodušších rozšíření až po profesionální nástroje, které používají vývojáři v reálných firmách.

🟦 1. Bootstrap – rychlý design bez psaní vlastního CSS

Bootstrap je knihovna plná připravených CSS tříd, které můžete jednoduše používat v HTML. Umožňuje rychle stavět responzivní weby bez toho, abyste si museli psát každý CSS styl od nuly.

✔️ Co si procvičíte:

• HTML značky a jejich kombinace
• Třídy pro layout (grid, flexbox)
• Formuláře, tlačítka, alerty a další komponenty

📌 Ukázka:

<button class="btn btn-primary">Klikni na mě</button>

<button class="btn btn-primary">Klikni na mě</button>

Bootstrap používá třeba i tento web. :)

➡️ W3Schools: Bootstrap 5 Tutoriál (v angličtině)

🎨 2. SASS – chytřejší způsob psaní stylů

SASS je „nadstavba“ CSS. Píšete v něm podobně jako v běžného CSS, ale můžete navíc používat proměnné, zanořování a funkce. Výsledkem je přehlednější a opakovatelný kód.

✔️ Co získáte:

• Možnost psát DRY (Don’t Repeat Yourself) styly
• Snadné úpravy vzhledu přes proměnné
• Lepší organizaci kódu
• Procvičíte si CSS

📌 Ukázka:

$barva: #3498db;

.tlacitko {
  background-color: $barva;
  color: white;
}

$barva: #3498db;

.tlacitko {
  background-color: $barva;
  color: white;
}

➡️ W3Schools: SASS Tutoriál (v angličtině)

📦 3. npm – nejpoužívanější správce balíčků pro JavaScript

npm (Node Package Manager) umožňuje pracovat s hotovými, připravenými knihovnami jako React, Axios, Lodash a dalšími. Pomocí jednoho příkazu je nainstalujete do svého projektu a můžete je ihned používat.

✔️ Co se naučíte:

• Inicializovat projekt (npm init)
• Instalovat balíčky (npm install react)
• Spouštět příkazy (npm run dev)

➡️ W3Schools: NPM Tutoriál (v angličtině)

⚛️ 4. React – komponentový frontend profesionálů

React je celosvětově nejpoužívanější knihovna pro tvorbu frontendových aplikací. Spojuje HTML, CSS a JavaScript v samostatné komponenty. Každá komponenta řeší jednu věc – např. tlačítko, formulář nebo seznam.

✔️ Co si procvičíte:

• Znalosti z HTML, CSS i JS
• Práci s komponentami, props a stavem (state)
• Tvorbu dynamických rozhraní

📌 Ukázka:

function Tlacitko() {
  return <button>Klikni na mě</button>;
}

function Tlacitko() {
  return <button>Klikni na mě</button>;
}

➡️ W3Schools: React Tutoriál (v angličtině)

🧪 5. React Testing Library – testování (pro pokročilé)

React Testing Library je nástroj pro testování React komponent z pohledu uživatele. Neřeší implementaci, ale chování. Naučíte se psát testy, které ověří, že vaše komponenty dělají to, co mají.

✔️ Proč je to důležité:

• Testy zvyšují kvalitu kódu
• Pomáhají zachytit chyby před nasazením
• Jsou užitečné v týmu i u pohovorů

➡️ React Testing Library – Dokumentace (v angličtině)

🔷 6. TypeScript – bezpečnější JavaScript (pro pokročilé)

TypeScript je JavaScript s typy. Každé proměnné můžete určit typ (číslo, text, pole…). Díky tomu vás upozorní na chyby už při psaní – a to dřív, než spustíte kód.

✔️ Co získáte:

• Méně chyb, víc jistoty
• Čitelnější a předvídatelnější kód
• Vhodné pro větší aplikace

📌 Ukázka:

let cislo: number = 5;
// cislo = "text"; // Chyba!

let cislo: number = 5;
// cislo = "text"; // Chyba!

➡️ W3Schools: TypeScript Tutorial (v angličtině)

✅ Shrnutí: Kam se vydat dál?

Nemusíte se učit vše najednou. Ale pokud vás programování baví a chcete v něm pokračovat, doporučuji:

1. Bootstrap + SASS – pro lepší stylování a rychlejší tvorbu uživatelského rozhraní
2. npm – pro práci s knihovnami
3. React – pro tvorbu reálných aplikací
4. React Testing Library + TypeScript (pro pokročilé) – až budete chtít psát stabilní, udržitelný a profesionální kód

🎯 Tip: Začněte postupně od první technologie (Bootstrap) a věnujte se jí třeba jen 30 minut denně. Uvidíte, jak rychle se posunete.

🔍 Tip 2: Googlete. Třeba najdete další tutoriály, které vám budou vyhovovat více.

📣 Zaujalo vás některé z témat? Dejte mi vědět e-mailem nebo na Instagramu — rád vám doporučím, jak se v dané oblasti dál rozvíjet.