← Főoldal MODUL · II. FÁZIS · 4-6. HÉT

Egyoldalas weboldal építése

Két óra alatt élő weboldalt építesz a saját domaineden, kódolás helyett az AI-jal beszélgetve.

Heti összefoglaló

A hét kulcspontjai ~60 másodpercben — a videó előtt vagy után.

Beszélgetés az AI-jal, nem kódolás. HTML + Tailwind + Vercel — élesben, a saját domaineden, egy délután alatt.

Röviden — Egy délután alatt megépíted és élesíted a weboldaladat a saját domaineden. A végén ott a működő oldal, fizetési gombbal a CTA mögött.

Hol tartasz

A 4. modulból fut a géped: Claude Code, saját domain, hivatalos email. Az 1–3. modulból megvan a nyersanyag: az egy mondatod, a vevőd fájdalmai, a csomagjaid. Ezen a héten ebből lesz publikus weboldal.

Mit építesz meg ezen a héten

Egy élő, nyolc szekciós, mobil-barát, HTTPS-es oldalt a saját domaineden. Cél: létezzen, és az ajánlatod 30 másodperc alatt érthető legyen. A legtöbb kezdő itt akad meg, túlbonyolítva — pedig ma annyi, hogy az AI-nak elmondod, mi legyen rajta.

Tervezz egy délutánt, és számolj a domain-rákötés utáni 1–24 óra DNS-propagációval. Ne estére időzítsd a „megmutatom mindenkinek” pillanatot.

01. A nyolc szekció — és a logika mögöttük

Egy fogalom előre: a CTA (call to action) a cselekvésre hívó gomb — „Foglalj időpontot”, „Kérek ajánlatot”. Minden szekció ide terel.

A nyolc szekció nem véletlen sorrend: bevált sales-oldal felépítése, szolgáltatóra szabva. Minden szekció egy apró igent csikar ki, mielőtt a nagy döntést — a foglalást — kérnéd. Előbb a látogató magára ismer (Problémák), aztán bízni kezd (Megoldás, Rólam), meglátja a jövőjét (Outcome-ok), lehullik a kockázat (Garancia, FAQ), és csak ezután kattint.

Kötött sorrend (zárójelben a funkció):

  1. Hero — egy mondatos ígéret + CTA gomb (a vevő transzformációja, a „WOW + CTA”)
  2. Problémák — 3 fájdalom, amit a vevőd érez (probléma-tükör: itt ismer magára)
  3. Megoldás — mit csinálsz, a vevő nyelvén (ezt kapod tőlem)
  4. Rólam — mini, 3–4 mondat (miért bízhat épp benned — megnyugtatás, nem önéletrajz)
  5. Outcome-ok — mit kap a vevő ténylegesen (jövőkép: milyen lesz az élete utána)
  6. Garancia (kockázatfordítás)
  7. FAQ — 5–7 kérdés-válasz (kifogások lefogása, mielőtt felmerülnek)
  8. CTA + footer (záró cselekvésre hívás)

Mindegyik szekciónak EGY dolga van — egy érzés, egy felismerés, egy kattintás. Az 1–3. modulból van anyagod: az ajánlat 1 mondata adja a Herót, 3 probléma a vevő hangjából, 3 outcome a csomagból. A Rólam azért negyedik, mert akkorra a látogató már érti, mit kínálsz — innentől a kérdés csak az, épp benned bízzon-e meg. Ha a Rólam-mal indítasz, rólad olvas, mielőtt tudná, mit nyer — ott veszíted el.

Mielőtt építesz, nézz meg 2 mintát — 17. modul · Landing page minták. Ott látod ugyanezt a szerkezetet kész oldalakon.

Próbáld ki most: írd fel a 8 szekció-címet, mindegyik mellé 1 mondatot a saját anyagaidból — ez a vázlat megy a gépbe.

02. HTML és Tailwind generálás Claude Code-dal

Három fogalom: a HTML a weboldal szövege és szerkezete egy fájlban. A Tailwind stílus-könyvtár — kész formázó osztályok, hogy ne írj design-kódot. A CDN azt jelenti, hogy ezt egyetlen sor tölti be az internetről — nem kell telepítened semmit.

Két út van, mindkettő jó.

Gyors út: a kész boilerplate. A letölthetők közt ott a boilerplate.html — a teljes 8 szekciós oldal működő Tailwind-kóddal, magyar [KITÖLTENDŐ: …] placeholderekkel és kommentekkel. Megnyitod VS Code-ban, kicseréled a placeholdereket, kész az első verzió. Böngészőben azonnal nézheted (Mac terminálban: open index.html; Windowson: start index.html).

Generálós út. Üres mappa VS Code-ban, a Claude Code-nak elmondod: „Készíts egy index.html-t Tailwind CDN-ről, ezekkel a szekciókkal: [lista].”

Második prompt-kör mindkét útnál: „A hero legyen csendesebb, a garancia más háttérszínnel, a FAQ accordion.” Az AI átírja, te ránézel, visszaszólsz. 20–30 perc, kész.

03. GitHub és Vercel deploy + custom domain

Az index.html még a gépeden. GitHub = online tároló a fájljaidnak (egysége: repo). Vercel = ingyenes hoszting, ami az oldaladat kiszolgálja. Deploy = az élesítés: a fájl publikus weboldallá válik.

Lépéssor:

  1. GitHub új repo, és a fájl feltöltése — a Claude Code lefuttatja neked: git init (verziókövetés indítása), commit (mentés-pont), push (feltöltés GitHub-ra)
  2. Vercel.com, GitHub-login, „New Project”, import repo, „Deploy” (30 mp, tedneved.vercel.app)
  3. Custom domain: Vercel admin alatt Settings, majd Domains, írd be: tedneved.hu
  4. Vercel ad 2 DNS-rekordot (A + CNAME — ezek irányítják a domained a Vercel szervereire), bemásolod a Sybell DNS-be
  5. DNS-propagáció: jellemzően 1–2 óra, de akár 24 óra is lehet — utána automatikus HTTPS (a lakat-ikon a böngészőben)

A propagáció alatt a tedneved.vercel.app címen már él az oldal. Ne estére időzítsd a domain-rákötést: csináld délután, ellenőrizd reggel.

A Vercel Hobby csomag ingyenes (személyes, 100 GB bandwidth/hó), kereskedelmi forgalomra $20/hó-tól a Pro.

Példa: Bence csütörtök délután deployolt, a bencefoto.hu péntek reggelre élt — addig a bencefoto.vercel.app linket küldte tesztre.

Próbáld ki most: a deploy után nyisd meg az oldalt a telefonodon is. A legtöbb látogatód mobilról jön.

04. Fizető-megoldás a CTA-gombra (Stripe HUF Checkout)

A Foglalj most / Vásárolj gomb mögé legegyszerűbb a Stripe HUF Checkout (stripe.com).

Részletes Stripe + Wise setup és NAV-integráció: 12. modul. Itt csak a fizetési URL kell a gomb mögé, Stripe Checkout 10 perc. Ha a gomb mögött csak email-cím van, a lendületben lévő vevő megáll, és ritkán jön vissza.

Próbáld ki most: kattints végig a saját CTA-gombodon vevőként, fizess teszt-módban — ahol te elakadsz, ott a vevő is.

Heti feladat

Töltsd ki a boilerplate.html-t, vagy generáld le az index.html-t Claude Code-dal. Push-old GitHub-ra, deployold Vercel-re, kösd rá a saját domaint — a DNS-propagációt számold bele.

Akkor vagy kész, ha az oldal él a saját domaineden, telefonon is megnézted, és az egy-mondatod (1. modul) ott áll a hero-ban.

Mit értél el — és mi jön

Átlépted a küszöböt, ahol a legtöbb szolgáltató hónapokra megreked: élő, mobil-barát, fizetést is fogadó oldalad van a saját domaineden. Az ajánlatod megmutatható — egy link, és bárki látja.

A szekciók a helyükön, de a szövegük még a nyers első verzió. A jövő héten a szöveg kezd dolgozni: a vevőd saját mondataiból írjuk újra a hero-t, a garanciát és a FAQ-t, hogy a látogató magára ismerjen — és kattintson.

Ha elakadtál

Letölthetők

A modul munkaeszközei

Eszközök, prompt és források

Prompt másolása

A struktúra előbb, mint a HTML. Ez a prompt megtervezi a 8 szekció tartalmát az 1-3. modul outputjaira építve.

Az 1-3. modul output-jaim:
- Tudásom magja (1 mondat): [1. modul output]
- Avatárom (1 mondat): [2. modul output]
- Ajánlatom (1 mondat) és 3 csomag: [3. modul output]

Tervezz meg egy egyoldalas weboldalt 8 szekcióval.
Mindegyiknél add meg:
- Szekció neve
- Célja (mit érezzen vagy tegyen a látogató)
- Tartalom-elemek (3-5 bullet, magyarul)
- 1 mondatos "mit ér el" cél

Sorrend kötött:
1. Hero (headline + subheadline + CTA)
2. Problémák (3 fájdalom az avatár hangján)
3. Megoldás (mit csinálsz)
4. Rólam mini (3-4 mondat)
5. Outcome-ok (mit kap a vevő)
6. Garancia
7. FAQ (5-7 kérdés-válasz)
8. CTA + footer

Magyar nyelven, zero emoji, zero gradient, dokumentáló hangon.