Kako deluje splet
Odpreti spletno stran je kot poiskati lokal na Google Maps. Vpišeš ime, zemljevid najde točno lokacijo, tvoj brskalnik pa gre tja po datoteke strani.
- Vtipkaš pekarnazrno.si in pritisneš Enter.
- Brskalnik pogleda na zemljevid interneta: »Kje je pekarnazrno.si?«
- Zemljevid pokaže točno lokacijo lokala, kjer je stran.
- Brskalnik gre na tisto lokacijo: »Pošljite mi stran, prosim.«
- Lokal pošlje datoteke: besedilo, barve in slike.
- Brskalnik iz njih sestavi stran. Vse to v manj kot sekundi!
Internet deluje kot Google Maps: vpišeš ime, dobiš lokacijo in greš tja.
Na Google Maps poišči svoj najljubši lokal. Nato povej: kaj je pri spletni strani »ime«, kaj »zemljevid« in kaj »lokal«?
Pametne besede za kasneje, ni se jih treba učiti na pamet
Iz česa je narejena stran
Vsaka stran je narejena iz treh plasti. Dodajaj jih eno za drugo in opazuj, kako se ista stran spreminja.
Pekarna Zrno
Svež kruh vsako jutro od 6:00. Kislo testo, rogljički in burek.
Na vsaki plasti klikni Naroči. Gumb deluje šele s tretjo plastjo.
Okostje pove, kaj je tam. Oblačila povedo, kako izgleda. Mišice povedo, kaj počne.
Večinoma boš potreboval prvi dve plasti. Malo tretje zadostuje za stvari, kot je meni, ki se odpre na telefonu.
Odpri svojo najljubšo stran. Desni klik na naslov → Pregled (Inspect). Dvakrat klikni besedilo in ga spremeni. Stran se spremeni, a samo pri tebi.
Pametne besede za kasneje
Prva stran s Claude Code
Stran opišeš z navadnimi besedami. Claude napiše datoteke. Ti pogledaš in prosiš za spremembe.
Datoteke
Klepet s Claudom
Predogled
Živjo, jaz sem Žan
Star sem 15 let, sem iz Maribora in se učim izdelovati spletne strani.
- Nogomet
- Igrice
- Risanje
Ti si šef, Claude je gradbinec. Dober šef da jasna navodila in preveri delo.
Po vsaki spremembi vprašaj: »Razloži, kaj si spremenil, kot da imam 15 let.« Tako se učiš, ne samo klikaš.
Naredi enostransko spletno stran o meni: glavo z mojim imenom, kratek opis in 3 moje hobije. Uporabi samo navaden HTML in CSS. Nato preprosto razloži vsako datoteko, ki si jo naredil.
Pametne besede za kasneje
Razmišljaj kot oblikovalec
Skoraj vsaka stran je zložena iz istih kock, od vrha navzdol. Spoznaj kocke in Claudu boš znal opisati katerokoli stran.
Preklopi na Telefon: tri kocke s prednostmi se zložijo ena pod drugo.
Najprej nariši na papir. Nato Claudu opisuj kocko za kocko, od vrha navzdol.
Več kot polovica ljudi bo tvojo stran gledala na telefonu. Vedno preveri, kako izgleda na majhnem zaslonu.
Zgradi stran za pekarno Pekarna Zrno. Od vrha navzdol: navigacija, velik naslov z gumbom »Naroči«, 3 prednosti, mnenja strank, kontakt, noga. Tople barve. Dobro mora izgledati na telefonu.
Pametne besede za kasneje
Shranjevanje kot v igri
Ko nekaj deluje, shraniš. Če pozneje kaj pokvariš, skočiš nazaj. Kopija vseh shranjevanj je varno v oblaku.
Prenosnik
Oblak
Shrani, ko nekaj deluje. Naloži v oblak, da je varno, tudi če se prenosnik pokvari.
Nekajkrat klikni Shrani. Pike so samo na prenosniku. Nato klikni Naloži v oblak in poglej, kako se prenesejo.
Shrani to z opombo »dodal kontakt« in naloži na GitHub.
Pametne besede te boš slišal od programerjev
Na splet!
Brezplačna storitev opazuje tvoj oblak. Ko vanj naložiš novo različico, jo v minuti postavi na splet, kjer jo vidi kdorkoli.
Vpiši nov naslov. Prenosnik se posodobi takoj, splet pa ne.
Tvoj prenosniksamo ti
Prijateljev telefonvsi vidijo
Prenosnik je tvoja zasebna delavnica. Splet je izložba, ki jo vidijo vsi.
Cloudflare Pages, Netlify in Vercel so brezplačni. Vsak ti da naslov, npr. zan-pekarna.pages.dev, ki ga lahko takoj pošlješ prijateljem.
Prvič vse preklikaj sam: prijavi se z GitHubom, izberi projekt, pritisni Deploy. Tako boš razumel, kaj Claude dela pozneje.
Pametne besede za kasneje
Tvoj lasten naslov
Namesto dolgega zan-pekarna.pages.dev lahko imaš kratek naslov, kot je zan.si. Potrebuješ samo dve stvari: ime in oznako na zemljevidu.
- Izbereš ime in ga najameš, npr. zan.si. Stane približno 10–15 € na leto.
- Na zemljevid interneta postaviš oznako: »zan.si je tukaj.«
- Obiskovalec vtipka zan.si. Zemljevid ga pripelje do pravega lokala.
- Lokal mu pokaže tvojo stran. Končano!
Še ena igra: razstavi naslov. Klikni vsak del.
Ime samo po sebi ne naredi nič. Šele oznaka na zemljevidu ga poveže s tvojim lokalom.
Storitev, kjer je tvoja stran, ti natančno pove, kaj vpisati. Claude ti pomaga korak za korakom. Včasih traja nekaj ur, preden deluje povsod.
Kupil sem naslov zan.si. Moja stran je na Cloudflare Pages. Korak za korakom me vodi, kako ju povežem. Razlagaj zelo preprosto.
Pametne besede te boš videl v nastavitvah
Stran, ki dela za podjetje
Lastnik želi, da stran nekaj počne zanj. Vklopi funkcije in poglej, na katero vprašanje stranke odgovori vsaka.
Vsaka funkcija odgovori na eno vprašanje stranke.
Za obrazec uporabiš brezplačno storitev (npr. Formspree), ki sporočila pošlje lastniku. Hitrost preveriš z Googlovim orodjem PageSpeed.
Dodaj kontaktni obrazec s Formspree, zemljevid za Glavni trg 3, Maribor, in poskrbi, da stran lepo izgleda, ko jo deliš v WhatsAppu. Nato mi povej, kako preverim hitrost.
Pametne besede za kasneje
Pravi projekt za pravo stranko
Naredi stran za nekoga resničnega: družinsko podjetje, klub, prijatelja. Pravi projekti tečejo v krogu in prav ta krog je veščina.
Prva različica nikoli ni zadnja. Mnenje stranke ni kritika, ampak brezplačna navodila.
Ko je stran objavljena, vprašaj: »Jo lahko pokažem kot svoje delo?« Tako začneš svoj portfolio.
Delam stran za stričevo avtomehanično delavnico. Tukaj so moji zapiski iz pogovora z njim: [prilepi zapiske]. Najprej naredi načrt kock strani. Ne piši kode, dokler načrta ne potrdim.
Naslednja raven
Ko so osnove lahke, lahko Clauda naučiš svojih pravil in si narediš bližnjice. Odklepaj drevo veščin od vrha navzdol, kot v igri.
Dodajaj eno moč naenkrat in samo takrat, ko čutiš, da jo potrebuješ.
Preprosta datoteka CLAUDE.md v tvoji mapi. Claude jo prebere vsakič, zato ti nikoli ni treba ponavljati.