Kurz Webflow

Lekce 1 • Nastavení vašeho účtu Webflow

Provede vás vytvořením účtu, výběrem plánu a konfigurací pracovního prostoru. Vytvoří prostředí, které budete používat v celém kurzu.

Lekce 2 • Stránky, složky a struktura projektu

Vysvětluje, jak vytvářet a organizovat stránky, nastavovat jejich vlastnosti a plánovat architekturu webu. Správná struktura zabraňuje předělávání, když se projekty v dalších kapitolách rozrůstají.

Lekce 3 • Pochopení Box Modelu ve Webflow

Učí, jak Webflow vizuálně zobrazuje okraje, vnitřní okraje, rámečky a velikost. Přímo podkládá každé rozhodnutí o rozvržení a rozestupech v dalších kapitolách.

Lekce 4 • Navigace v rozhraní Designeru

Mapuje každý panel, panel nástrojů a oblast plátna v Designeru. Studenti získají prostorovou plynulost potřebnou pro efektivní práci ve všech následujících kapitolách.

Lekce 1 • Vytváření typografické škály

Učí vytvářet harmonickou hierarchii velikostí nadpisů a těla textu pomocí stylů na úrovni značek ve Webflow. Definovaná typografická škála urychluje konzistentní stylování napříč všemi stránkami.

Lekce 2 • Globální barevný systém Webflow

Představuje výběr barvy, panel vzorků a globální barevné proměnné. Globální barvy umožňují aktualizaci značky na celém webu jedním kliknutím.

Lekce 3 • Stylování textových prvků na plátně

Aplikuje znalosti písma a barev na nadpisy, odstavce, odkazy a bloky formátovaného textu. Propojuje abstraktní nastavení s reálnými komponentami stránky, které budou studenti znovu používat.

Lekce 1 • Vytváření rozvržení celé stránky

Aplikuje Flexbox, Grid a pozicování společně pro sestavení kompletní vícestranné stránky. Tato vrcholná sekce sjednocuje všechny dovednosti pro rozvržení před přechodem k responzivitě.

Lekce 2 • Rozvržení Flexbox ve Webflow

Pokrývá povolení Flexboxu na Div Bloku a ovládání směru, zarovnání, zalamování a mezer. Flexbox je primárním nástrojem pro jednorozměrná rozvržení komponent.

Lekce 3 • Div Bloky a Kontejnery

Vysvětluje Div Block jako primární strukturální prvek Webflow a Container jako obal s maximální šířkou. Toto jsou stavební kameny pro každou následující techniku rozvržení.

Lekce 4 • Pozicování: Relativní, Absolutní a Fixní

Vysvětluje režimy CSS pozicování tak, jak je Webflow zobrazuje, a kdy je použít. Pozicování umožňuje překrývající se prvky, lepivé hlavičky a plovoucí UI komponenty.

Lekce 1 • Optimalizace pro mobilní zařízení

Učí úpravy pro mobilní zařízení na šířku a na výšku, včetně skládaných rozvržení, větších dotykových cílů a škálování písma. Mobilní optimalizace je kritická pro uživatelský zážitek a hodnocení ve vyhledávání.

Lekce 2 • Fluidní typografie a rozestupy

Představuje jednotky relativní k viewportu a fluidní velikost založenou na funkci clamp pro písmo a rozestupy. Fluidní hodnoty snižují počet potřebných přepsání breakpointů v projektu.

Lekce 3 • Přizpůsobení rozvržení pro tablet

Pokrývá přepnutí na breakpoint tabletu a úpravu směru Flexboxu, sloupců mřížky a rozestupů. Tablet je často nejsložitější breakpoint kvůli středním šířkám obrazovky.

Lekce 4 • Testování a ladění responzivity

Pokrývá použití změny velikosti plátna Webflow, vývojářských nástrojů prohlížeče a testování na reálných zařízeních k odhalení problémů s rozvržením. Systematické testování zabraňuje regresím při aktualizaci stylů.

Lekce 1 • Vysvětlení systému tříd Webflow

Pokrývá, jak třídy, značky a selektor všech prvků interagují v panelu stylů Webflow. Pevná strategie tříd je základem každého udržovatelného projektu Webflow.

Lekce 2 • Vytváření znovupoužitelných tříd komponent

Učí vytvářet třídy tlačítek, karet a odznaků, které lze aplikovat napříč webem. Znovupoužitelné třídy snižují redundantní stylování a prosazují vizuální konzistenci.

Lekce 3 • Stránka průvodce styly jako živá reference

Vede studenty při vytváření interní stránky průvodce styly, která dokumentuje všechny třídy a komponenty. Stránka průvodce styly urychluje zapracování a časem zabraňuje duplicitě tříd.

Lekce 1 • Animace spouštěné skrolováním

Učí animace zeslabení, najetí a stupňování, které se spouští, když prvky vstupují do viewportu. Animace skrolování zvyšují vnímanou kvalitu a vedou pozornost uživatele dolů stránkou.

Lekce 2 • Přehled panelu Interakce

Mapuje panel Interakce, typy spouštěčů a časovou osu animace. Pochopení struktury panelu je předpokladem pro vytváření jakékoli interakce ve Webflow.

Lekce 3 • Skrolování stránky a paralaxové efekty

Vysvětluje spouštěč skrolování stránky a jak mapovat vlastnosti prvku na pozici skrolování. Paralaxové efekty a efekty založené na průběhu přidávají hloubku sekcím hero a vyprávění příběhů.

Lekce 4 • Lottie a animace s vlastním kódem

Pokrývá vkládání JSON animací Lottie a jejich spouštění prostřednictvím Webflow Interactions. Lottie rozšiřuje možnosti animací nad rámec CSS transformací pro komplexní ilustrace.

Lekce 1 • Navrhování CMS kolekcí

Pokrývá vytváření Kolekcí, definování typů polí a plánování datové architektury. Dobrý návrh Kolekce zabraňuje nákladné restrukturalizaci s růstem obsahu.

Lekce 2 • Vytváření stránek CMS šablon

Pokrývá navrhování stránky šablony Kolekce, která automaticky generuje jednu stránku pro každou položku CMS. Stránky šablon pohánějí blogy, případové studie, profily týmů a stránky detailů produktů.

Lekce 3 • Přidávání a správa CMS obsahu

Učí přidávat položky pomocí CMS Editoru, importovat CSV data a používat Editor pro předání klientovi. Pracovní postupy správy obsahu určují, jak udržovatelný je web po spuštění.

Lekce 4 • Vnořené Kolekční seznamy a řešení

Řeší omezení vnořených Kolekčních seznamů ve Webflow a praktická řešení pomocí referencí a vlastního kódu. Pokročilé CMS vzory odemykají komplexní případy použití adresářů a filtrování.

Lekce 1 • Hosting a publikování Webflow

Pokrývá hosting Webflow založený na CDN, publikování na testovací subdoménu a publikování na vlastní doménu. Pochopení úrovní hostingu zabraňuje nesouladu plánů při spuštění.

Lekce 2 • On-Page SEO ve Webflow

Pokrývá nastavení meta titulků, popisů, Open Graph obrázků a kanonických značek pro každou stránku. Správné on-page SEO zajišťuje, že stránky jsou od prvního dne správně indexovány a sdíleny.

Lekce 3 • Optimalizace výkonu webu

Učí kompresi obrázků, líné načítání, podmnožiny písma a vestavěnou minifikaci Webflow. Výkon přímo ovlivňuje hodnocení ve vyhledávání a udržení uživatelů.

Lekce 4 • 301 přesměrování a kontrolní seznam před spuštěním

Pokrývá nastavení 301 přesměrování pro migrované URL a provedení auditu před spuštěním. Strukturovaný kontrolní seznam spuštění zabraňuje nefunkčním odkazům, chybějícím stránkám a chybám indexace.