Buduj strony, przeciągając bloki
Prosty, edukacyjny kreator wizytówek i stron jednostronicowych — bez pisania kodu, z podglądem HTML na żywo dla tych, którzy chcą zobaczyć, co dzieje się pod spodem.
Wszystko, czego potrzeba na lekcji
Zaprojektowany z myślą o realnych warunkach szkolnych — współdzielone komputery, ograniczony czas, zero instalacji.
Przeciągnij i upuść
Gotowe bloki — hero, o nas, usługi, galeria, kontakt, stopka — przeciągasz z panelu wprost na stronę.
Kod HTML na żywo
Panel z podświetloną składnią pokazuje, jaki HTML odpowiada temu, co widać na canvasie — świetne do nauki.
Wiele projektów
Każdy projekt ma własny, nazwany zapis — uczniowie na tym samym komputerze nie nadpisują sobie prac.
Eksport statyczny
Gotowa strona to jeden plik .html bez frameworka — działa na dowolnym hostingu, nawet przez zwykłe FTP.
Cofnij / ponów
Pełna historia zmian — można swobodnie eksperymentować, nic nie ginie bezpowrotnie.
Panel właściwości
Tekst, kolory, obrazy — każdy blok ma proste, zrozumiałe pola do edycji, bez pisania kodu.
Od pustej strony do gotowego pliku
Przeciągnij blok
Wybierz sekcję z biblioteki po lewej i upuść ją na stronę. Kolejność zmienisz w każdej chwili.
Dostosuj treść
Kliknij sekcję i edytuj tekst, kolory i obrazy w panelu właściwości po prawej.
Zapisz i eksportuj
Nazwij projekt, zapisz go na później albo od razu pobierz gotowy plik .html do wgrania na serwer.
Dla klasy i dla nauczyciela
👩🎓 Uczniowie
- Uczą się HTML, patrząc na kod generowany w czasie rzeczywistym
- Każdy ma własny, nazwany projekt — bez nadpisywania kolegów
- Projekt można zabrać ze sobą jako plik .json
👨🏫 Nauczyciele
- Nie wymaga instalacji ani kont — działa od razu w przeglądarce
- Gotowy do wrzucenia na szkolny hosting przez zwykłe FTP
- Otwarty kod źródłowy — można dodać własne bloki na lekcję
Zanim zaczniesz
Czy trzeba coś instalować?
Nie — edytor działa w całości w przeglądarce. Do wgrania gotowej strony na serwer wystarczy zwykłe FTP, bez Node.js po stronie hostingu.
Gdzie zapisują się projekty uczniów?
W pamięci przeglądarki (localStorage), każdy pod osobną nazwą. Dodatkowo można pobrać projekt jako plik .json — dobra kopia zapasowa na wypadek czyszczenia komputerów szkolnych.
Czy da się dodać własne bloki?
Tak — projekt jest open source (pnpm monorepo, Next.js + TypeScript). Nowy blok to nowy wpis w rejestrze bloków plus komponent React.
Co dokładnie generuje eksport?
Jeden, samodzielny plik .html z osadzonym CSS — bez zależności od frameworka, więc ładuje się błyskawicznie i działa wszędzie.
Gotowy, żeby zacząć?
Otwórz edytor i przeciągnij pierwszy blok — zajmie to mniej niż minutę.
Otwórz edytor →