Školení Vibecoding webových stránek a aplikací

Náročnost kurzu: 3/5 – středníPokročilá práce s programem. Předpokládá jistotu v ovládání počítače a základní znalost daného programu z předchozího kurzu nebo praxe. | Délka skupinového kurzu: 12 h, délka individuálního školení: 8 h

Nejbližší termín otevřeného kurzu: termín připravujeme | Další formy: individuální školení · firemní školení

Školení Vibecoding webových stránek a aplikací je určené pro všechny, kdo chtějí rychle a prakticky vytvářet jednoduché webové stránky, landing page, mailingy, formuláře, drobné aplikace nebo pomocné skripty s využitím umělé inteligence. Kurz je vhodný pro marketingové pracovníky, správce webů, tvůrce obsahu, majitele webů, začínající webaře i všechny, kdo chtějí převádět nápady do funkčních prototypů bez zdlouhavého vývoje od nuly.

Na školení si vysvětlíme princip vibecodingu, tedy tvorby digitálních výstupů pomocí přirozeného zadávání požadavků AI nástrojům. Naučíte se správně popsat zadání, doplnit potřebný kontext, navrhnout strukturu stránky, vytvořit nebo upravit HTML, CSS a JavaScript, zadávat opravy, hledat chyby v kódu a postupně zpřesňovat výsledek tak, aby byl použitelný v praxi.

Součástí kurzu je také tvorba jednoduchých skriptů a automatizací pro každodenní práci, například pro úpravu dat, přípravu podkladů nebo zpracování opakujících se úkolů. Důraz je kladený na praktické ukázky, testování, kontrolu výstupů AI a pochopení limitů těchto nástrojů. Cílem není nahradit programátora, ale naučit se s pomocí AI rychle připravit funkční návrh, prototyp nebo pomocný nástroj a umět posoudit, kdy už je potřeba odbornější vývoj.

Co se naučíte

  • pochopit, co je vibecoding a kdy dává smysl ho využít,
  • zadávat požadavky AI tak, aby vznikl použitelný webový výstup,
  • připravit jednoduchou webovou stránku, landing page, formulář nebo mailing,
  • upravovat HTML, CSS a JavaScript pomocí AI nástrojů,
  • vytvořit jednoduchý skript nebo drobnou automatizaci pro opakující se práci,
  • převést nápad do funkčního prototypu,
  • testovat, opravovat a ladit výstupy vytvořené pomocí AI,
  • poznat nejčastější chyby při práci s AI nástroji a vyhnout se slepému používání nekontrolovaného kódu.

Osnova školení Vibecoding pro web

U individuálního a firemního školení je možné osnovu přizpůsobit.

    • Úvod do vibecodingu
      • co je vibecoding neboli vibe coding
      • pro koho je vhodný a kdy může zrychlit práci
      • rozdíl mezi klasickým programováním a tvorbou s pomocí AI
      • typické výstupy, například webová stránka, landing page, mailing, formulář nebo prototyp aplikace
      • možnosti a limity současných AI nástrojů
      • kdy stačí výstup z AI a kdy je vhodné zapojit vývojáře
    • Práce s AI nástroji
      • přehled dostupných AI nástrojů pro tvorbu kódu a prototypů
      • ChatGPT, Gemini, Claude a další nástroje v základním přehledu
      • jak správně formulovat zadání pro AI
      • práce s kontextem, cílem, omezeními a příklady vstupů
      • jak zadávat úpravy, opravy a doplňující požadavky
      • nejčastější chyby při promptování
      • kontrola, zda výstup odpovídá skutečnému zadání
    • Návrh jednoduchého webu nebo aplikace
      • upřesnění cíle webu, aplikace nebo prototypu
      • výběr vhodné technologie podle typu výstupu
      • návrh struktury stránky nebo jednoduché aplikace
      • rozvržení obsahu a základní uživatelský průchod
      • příprava zadání pro HTML, CSS a JavaScript
      • debugging, tedy hledání a oprava chyb
      • testování funkčnosti v prohlížeči
      • základní možnosti publikování nebo předání výstupu
    • Tvorba jednoduchých webových výstupů pomocí AI
      • vytvoření jednoduché webové stránky
      • návrh landing page pro reklamní kampaň
      • příprava jednoduchého mailingu nebo e-mailové šablony
      • tvorba kontaktního nebo poptávkového formuláře
      • úprava textů, tlačítek, bloků a rozložení stránky
      • přizpůsobení výstupu značce, cílové skupině a účelu stránky
    • Úpravy HTML, CSS a JavaScriptu pomocí AI
      • vysvětlení neznámého HTML, CSS nebo JavaScriptového kódu pomocí AI
      • úprava struktury stránky v HTML
      • úprava vzhledu pomocí CSS
      • doplnění jednoduchého chování pomocí JavaScriptu
      • oprava chyb ve zdrojovém kódu
      • ladění výstupu podle skutečného vzhledu a funkčnosti
      • rizika nekontrolovaného vkládání kódu do webu
    • Tvorba jednoduchých skriptů a automatizací
      • pomocné skripty pro každodenní práci
      • transformace dat mezi různými formáty
      • automatizace opakujících se úkolů
      • úprava textových nebo tabulkových podkladů
      • generování jednoduchých výstupů podle zadání
      • základní princip tvorby AI agentů a jejich praktické limity
      • kontrola výsledků automatizace před použitím v praxi
    • Testování, ladění a kontrola výstupů
      • jak ověřit, že webová stránka nebo skript funguje podle zadání
      • kontrola chyb v prohlížeči a základní práce s chybovými hlášeními
      • úprava promptu podle nalezené chyby
      • postupné zpřesňování výstupu
      • kontrola použitelnosti, čitelnosti a základní přístupnosti
      • bezpečnostní a praktická omezení výstupů vytvořených AI
    • Praktické cvičení a závěrečný prototyp
      • výběr vlastního nebo modelového zadání
      • návrh jednoduché stránky, aplikace nebo pomocného skriptu
      • postupná tvorba výstupu pomocí AI
      • úprava HTML, CSS, JavaScriptu nebo skriptu podle potřeby
      • testování, opravy a doladění výsledku
      • prezentace výstupu a společné vyhodnocení postupu

Předchozí znalosti a návazná školení

Před školením se předpokládají znalosti na úrovni školení:

Úvod do tvorby webových stránek

Před školením doporučujeme běžnou uživatelskou znalost internetu a základní orientaci v práci s webem. Výhodou je znalost na úrovni kurzu HTML a CSS nebo Úvod do tvorby webových stránek, ale není nutná pokročilá znalost programování.

Po absolvování školení můžete pokračovat:

Tvorba grafiky s AI pro každého

HTML a CSS

PHP

SEO/AEO – optimalizace pro vyhledávače a AI

Verze programu

U firemního a individuálního školení si verzi programu, na které bude školení probíhat, můžete zvolit.
Otevřené kurzy probíhají na aktuální verzi programu. Lektor po dohodě s účastníky upozorní na rozdíly starších verzí.