Opret sidens grundstruktur
Generér sidens struktur med en prompt.
Opret sidens grundstruktur er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad er en landingsside?
En landingsside er en enkelt webside, der præsenterer ét produkt, én app eller én idé. Besøgende kommer ind på siden, lærer om dit tilbud og klikker på én primær knap.
I dette kursus skal du ikke selv skrive koden. Du beskriver siden for en AI-assistent på almindeligt dansk, og den bygger den for dig.
Begynd med skelettet
Før du tænker på farver eller smarte formuleringer, har du brug for et skelet: sidens grundstruktur. Det kaldes scaffolding.
En god første prompt beder AI'en om en grundlæggende struktur med en sidehoved, et hovedområde og en sidefod. Hold det enkelt. Du kan altid tilføje mere senere.
Create a single HTML file for a landing page.
It should have a header at the top, a main section in the middle, and a footer at the bottom.
Use plain HTML for now, no styling yet.Fortæl, hvad siden handler om
AI'en fungerer bedre, når den kender dit emne. Fortæl den om produktet eller idéen i én sætning.
Giv den et navn og et kort mål. Jo mere konkret du er, desto tættere kommer det første resultat på det, du forestiller dig.
Build a landing page for a mobile app called "PlantPal".
PlantPal reminds people to water their houseplants.
Start with just the page structure: header, hero section, and footer.Hero-sektionen
Hero-sektionen er det store område øverst på siden. Den indeholder typisk en overskrift, en kort sætning og en knap.
Når du arbejder med scaffolding, skal du bede AI'en om at indsætte tydelige pladsholdere i hero-sektionen, så du kan se, hvor overskriften og knappen skal være.
Add a hero section near the top of the page.
Include a large headline, one short subtitle line, and a single call-to-action button that says "Get Started".Bed om én fil
Som begynder er det lettere at arbejde med en enkelt fil, som du kan åbne i en browser. Mange AI-værktøjer fordeler som standard koden på flere filer.
Derfor er det en god idé tydeligt at bede om én selvstændig HTML-fil. Så har du kun én ting, du skal åbne og forhåndsvise.
Put everything in one single index.html file.
Keep the HTML, structure, and any styles together so I can open it directly in a browser.Navngiv dine sektioner
Fortæl AI'en, hvilke sektioner du vil have, så skelettet passer til din plan. Almindelige sektioner på landingssider er: hero-sektion, funktioner, kundeudtalelser og en afsluttende opfordring til handling.
Du behøver ikke have dem alle med nu. Når du navngiver dem tidligt, får siden en tydelig form.
Scaffold the page with these empty sections in order:
1. Hero
2. Features
3. How It Works
4. Footer
Leave a short placeholder line inside each one.Hold prompts korte og tydelige
Lange og indviklede prompts forvirrer AI'en. Korte prompts med én tydelig anmodning fungerer bedst.
Hvis du vil have mange ting, skal du bede om dem ét trin ad gangen. Byg først skelettet, og tilføj derefter detaljer i senere beskeder.
Læs det første resultat
Når AI'en svarer, skal du se på det, den har lavet. Har det en sidehoved, en hero-sektion og en sidefod? Er dine sektionsnavne med?
Du behøver ikke at forstå hver eneste kodelinje. Tjek bare, at de store dele svarer til din anmodning, før du går videre.
Ret en manglende del
Hvis AI'en har glemt noget, skal du bare sige det tydeligt. Du behøver ikke begynde forfra.
Påpeg den manglende del, og bed om at få den tilføjet. AI'en beholder resten og tilføjer det, du har bedt om.
The footer is missing. Please add a simple footer at the bottom with the text "PlantPal 2025".
Keep everything else the same.Pladsholdere er helt i orden
I begyndelsen er det helt i orden, hvis ordene er midlertidige, f.eks. "Overskriften kommer her". Disse pladsholdere markerer, hvor det rigtige indhold skal være.
Scaffolding handler om struktur, ikke om den endelige tekst. Du erstatter pladsholderteksten i en senere lektion.
Et ryddeligt udgangspunkt
Nu kan du bede AI'en om et ryddeligt skelet: sidehoved, hero-sektion, nogle navngivne sektioner og en sidefod – alt sammen i én fil.
Dette rene grundlag gør alle senere trin lettere. En rodet begyndelse fører til en rodet side, så det kan betale sig at få grundstrukturen på plads.
Give me a clean single-file landing page skeleton for "PlantPal".
Sections in order: header, hero with a "Get Started" button, features, footer.
Use placeholder text inside each section.Hurtigt tjek
Lad os tjekke, hvad scaffolding betyder.
Opsummering: Scaffolding
Du har lært, at en landingsside er én fokuseret side, og at scaffolding først bygger dens skelet.
Du har øvet dig i tydelige prompts: navngiv produktet, oplist sektionerne, bed om én fil, og brug pladsholdere. Nu skal du style dette skelet udelukkende med almindelige ord.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Opret sidens grundstruktur” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Opret sidens grundstruktur”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Opret sidens grundstruktur”?
Generér sidens struktur med en prompt. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Opret sidens grundstruktur”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Opret sidens grundstruktur
- Styling med almindeligt sprog
- Tilføj sektioner og indhold
- Forhåndsvisning og justering