Készítsd el saját weblapodat pár óra alatt!
Komplett útmutató kezdőknek — a nulláról a kész, működő weboldalig. Programozói tudás nélkül, mesterséges intelligencia segítségével.
Előkészületek
Mielőtt nekiállnál építeni, fontos megérteni, hogyan működik egy weboldal és mit kell előre megtervezned.
Mi az a weboldal?
Egy weboldal egyszerűen fájlok gyűjteménye, amelyeket egy szerver (számítógép) szolgáltat ki az interneten, és a böngésződ (Chrome, Firefox, Safari) megjeleníti. Nézzük meg az alapvető fogalmakat:
A domain név az az egyedi cím, amit az emberek beírnak a böngészőjükbe, hogy eljussanak a weboldaladra. Például: példa.hu vagy uzletem.com.
Gondolj rá úgy, mint a házad postai címére — ez alapján találják meg az internetezők a weboldalad.
A hosting egy szerver (speciális számítógép), amely a weboldalad fájljait tárolja és folyamatosan elérhetővé teszi az interneten. Jó hír: a Lovable automatikusan biztosít hosting-ot — ezt hívják Lovable Cloud-nak. Ezzel neked nem kell foglalkoznod!
Frontend (az oldal „arca”): Minden, amit a látogató lát és használ — a design, a gombok, a szövegek, a képek, a menü, az animációk. Amikor megnyitsz egy weboldalt a böngésződben, az, amit látsz, az a frontend. Gondolj rá úgy, mint egy üzlet kirakata — ezt látja mindenki, aki belép.
Backend (a „hátsó iroda”): A háttérben futó logika, amit a látogató nem lát — adatbázis, felhasználó-kezelés (bejelentkezés/regisztráció), űrlap-feldolgozás, fizetés kezelése. Ha nincs szükséged bejelentkezésre vagy adatbázisra, akkor backend nélkül is elkészítheted a weboldalad!
A Lovable mindkettőt képes létrehozni: a frontend-et React-tel (ez készíti el amit látsz), a backend-et pedig Supabase integrációval (ha szükséged van rá).
Fontos fogalmak egyszerűen
Mielőtt továbbmennénk, ismerd meg ezeket az alapfogalmakat — mindegyiket hétköznapi nyelven magyarázzuk el:
🔒 SSL/HTTPS — A lakat ikon a böngészőben
Képzeld el, hogy küldöl egy képeslapot (HTTP) — bárki olvashatja útközben. Most képzeld el, hogy zárt, leragasztott borítékban küldöd (HTTPS) — csak a címzett nyithatja ki. Az SSL tanúsítvány pontosan ezt csinálja: titkosítja a weboldal és a látogató közötti kommunikációt. A böngésző ezért mutat egy kis lakat ikont 🔒 a biztonságos oldalaknál. Jó hír: a Lovable automatikusan biztosít SSL-t — nem kell vele foglalkoznod!
🔗 URL — A weboldalad pontos címe
Egy URL (Uniform Resource Locator) a weboldal pontos „postacíme”. Nézzük még a részeit:
- https:// — Protokoll (biztonságos kapcsolat)
- www. — Aldomain (opcionális, ma már nem kötelező)
- példa — A domain neved
- .hu — Kiterjesztés (TLD)
- /szolgáltatások — Aloldal (útvonal)
📱 Reszponzív design — Alkalmazkodó megjelenés
Gondolj egy okos bútorra, ami automatikusan atrendeződik, hogy belférjen egy kis szobába is és egy nagy nappaliba is. A reszponzív design ugyanezt csinaja: a weboldal automatikusan alkalmazkodik a képernyő méretéhez — legyen az telefon, tablet, vagy monitor. A Lovable minden általa generált oldalt automatikusan reszponzívvá tesz!
🤖 CMS vs. Kód vs. AI — Hogyan építhetsz weboldalt?
Háromféleképpen készíthetsz weboldalt:
- CMS (pl. WordPress): Kész sablonokból építkezel, de korlátozott és gyakran lassú
- Kóddal: Maximális szabadság, de programozói tudás kell
- AI-alapú (Lovable): Leírod szöveggel, mit szeretnél, és az AI megépíti — programozás nélkül, de profi eredménnyel!
Hogyan működik egy weboldal?
Tervezd még a weboldaladat!
Mielőtt akár egyetlen sort is írnál, gondold végig ezeket:
- Mi a célom a weboldallal? (bemutatkozás, szolgáltatás, portfólió, webshop?)
- Ki a célközönségem? (magánszemélyek, cégek, fiatalok, idősebbek?)
- Milyen oldalak kellenek? (Főoldal, Rólam, Szolgáltatások, Kapcsolat, stb.)
- Milyen domain nevét szeretnék? (.hu, .com, .eu?)
- Van-e szükségem backend funkcionalitásra? (bejelentkezés, adatbázis, űrlap?)
- Összegyűjtöttem a szövegeket és képeket?
Válassz rövid, könnyen megjegyezhető domain nevét. Kerüld a kötőjeleket és a számokat. Ha magyar célközönségnek készül, a .hu kiterjesztés a legerősebb. Ha nemzetközi, válaszd a .com-ot.
Amire szükséged lesz
- ✔️Egy modern böngésző (Chrome, Edge, Firefox)
- ✔️Lovable.dev fiók (ingyenes is elég a kezdéshez)
- ✔️Google fiók (Analytics-hoz és Search Console-hoz)
- ✔️~3-5 óra szabad idő
Mennyibe kerül összesen?
Az egyik legjobb dolog a Lovable-ben, hogy szinte ingyen elkezdhetsz. Íme a teljes költségbontás:
💰 Költségkalkulátor
Összesítés magyar forintban (2026-os árak)
Az ingyenes Lovable csomaggal és egy .hu domainnél már indulhatsz. Később, ha kell, bármikor frissíthetsz Pro-ra a saját domain és több kredit érdekében.
Domain Regisztráció
Foglald le a weboldalad nevét. A Rackhost.hu a legjobb magyar szolgáltató erre a célra.
Miért a Rackhost?
A Rackhost.hu az egyik legmegbízhatóbb magyar domain regisztrátor. Előnyei:
- Magyar nyelvű felület és ügyfélszolgálat
- Kifejezetten alacsony árak (.hu domain: 490 Ft/év!)
- Egyszerű DNS kezelőfelület
- Gyors regisztrációs folyamat
- Megbízható, évek óta működő szolgáltatás
Domain árak (2026)
| Kiterjesztés | Regisztráció (nettó/év) | Hosszabbítás (nettó/év) | |
|---|---|---|---|
| .hu | 490 Ft/év | 2 200 Ft/év | Legjobb ár! |
| .eu | 490 Ft/év | 2 500 Ft/év | EU-s opció |
| .com | 6 000 Ft/év | 6 000 Ft/év | |
| .org | 5 500 Ft/év | 5 500 Ft/év | |
| .net | 7 000 Ft/év | 7 000 Ft/év | |
| .de | 3 500 Ft/év | 3 500 Ft/év |
Ha magyar célközönségnek készül a weboldalad, a .hu domain a legjobb választás. Első évre mindössze 490 Ft (bruttó 622 Ft) — ez a legolcsóbb opció!
Regisztrációs lépések
- Ellenőrizd, szabad-e a kívánt domain: menj a rackhost.hu oldalra és írd be a kereső mezőbe
- Ha szabad, tedd a kosárba és válaszd ki, hány évre szeretnéd regisztrálni
- Add még a számlázási adataidat (cég vagy magánszemély)
- Fogadd el az Általános Szerződési Feltételeket és kattints a „Megrendel” gombra
- A felhasználói fiókodban add még a tulajdonosi adatokat és fizess
- .hu domainnél: megerősítő e-mailt kapsz — erősítsd még a tulajdonjogot elektronikusan
- Várd még a regisztráció befejezését (.hu: ~3 munkanap, nemzetközi: ~24 óra)
.hu domain esetén a tulajdonosi adatok megerősítése kötelező! Ha nem erositedd még időben, a regisztráció meghiúsulhat. Figyeld az e-mailjeidet.
DNS Rekordok — sajatdomain.hu
Rackhost Vezérlőpult
| Típus | Név | Érték | TTL |
|---|---|---|---|
| A | @ | 76.76.21.21 | 3600 |
| TXT | @ | lovable-verification=abc123xyz | 3600 |
| CNAME | www | sajatdomain.hu | 3600 |
Gyorsítás az Affilion Motion sablonokkal
A tanfolyamban megtanult folyamat bármelyik lépését lerövidítheted az ingyenes sablonkönyvtárral. Így kapcsolódnak egymáshoz:
Kész prompt a 4. modulhoz
A „Weblap építése” lépésnél üres lap helyett indulj egy teljes oldal-promptból – élő demóval ellenőrizheted, mit kapsz.
Szekciók a bővítéshez
Árazás, GYIK, vélemények, kapcsolat: a már kész oldaladhoz egyenként adhatod hozzá őket.
Letölthető Lovable-projektek
Teljes React + Tailwind forráskód, amit a GitHubon keresztül viszel a Lovable-be – kreditfogyasztás nélkül.
MCP a Claude Code-hoz
Ha már kódeditorban dolgozol, az AI maga keres és olvas ki sablont a könyvtárból.