Lägg till avsnitt och innehåll
Bygg ut hero-avsnitt, funktioner och sidfot.
Lägg till avsnitt och innehåll är en gratis lektion i Vibe Coding på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vibe Coding, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Från stomme till berättelse
Sidan är formgiven, men texten består fortfarande av platshållare. Nu fyller ni den med riktiga sektioner och riktigt innehåll.
En landningssida berättar en kort historia: här är problemet, här är lösningen, här är varför ni kan lita på den och här är knappen för nästa steg.
Skriv rubriken
Rubriken är sidans viktigaste rad. Den ska beskriva den största nyttan med några få ord.
Ni kan be AI:n föreslå några alternativ och sedan välja er favorit. Beskriv vad produkten gör och vem den hjälper.
Write three short headline options for the PlantPal hero.
PlantPal sends gentle reminders so houseplants never get forgotten.
Keep each headline under eight words.Lägg till en funktionssektion
En funktionssektion listar vad produkten gör, vanligtvis som tre eller fyra korta punkter med små rubriker.
Berätta för AI:n vilka funktioner som är viktigast och be den placera dem snyggt, ofta i en rad med kort.
Fill the features section with three feature cards:
1. Smart watering reminders
2. Care tips for each plant
3. Track all your plants in one place
Give each card a short title and one sentence.Förklara hur det fungerar
Människor känner sig tryggare när de vet vad de kan förvänta sig. En sektion med rubriken ”Så fungerar det” visar stegen med enkla ord.
Tre steg är ett lagom antal. Be AI:n numrera dem och hålla varje steg till en kort rad.
Add a "How It Works" section with three numbered steps:
1. Add your plants
2. Set a watering schedule
3. Get reminders on your phone
Keep each step to one short sentence.Lägg till sociala bevis
Social proof innebär att visa att andra tycker om din produkt. Korta citat från nöjda användare bygger förtroende.
På en övningssida kan du be AI:n skapa exempel på omdömen. Kom bara ihåg att de är exempel, inte riktiga recensioner.
Add a testimonials section with two short sample quotes from imaginary happy users.
Label them clearly as example reviews with a first name and city.Den sista uppmaningen till handling
Nära sidans nederkant upprepar du huvudknappen, så att besökare som är redo inte behöver bläddra tillbaka upp.
Lägg till en uppmuntrande rad ovanför den. Den här sista knuffen förvandlar ofta en intresserad besökare till en användare.
Add a final call-to-action section near the bottom.
Include a short encouraging line like "Start caring for your plants today" and a "Get Started" button.Håll texten kort
På landningssidor vinner korta texter. Besökare skummar igenom sidan i stället för att läsa varje ord.
Om ett stycke känns långt kan du be AI:n korta ner det. ”Gör det här kortare och enklare” är en instruktion som AI:n hanterar direkt.
The features text feels too long.
Make each feature description shorter and simpler, just one clear line each.Anpassa tonen efter målgruppen
Sättet du skriver på bör passa dem du vänder dig till. En app om växter för nybörjare bör låta varm och lättförståelig, inte teknisk.
Berätta för AI:n vilken ton du vill ha, till exempel ”vänlig och uppmuntrande”, så att orden känns rätt.
Rewrite all the text in a warm, friendly, encouraging tone.
Imagine talking to a busy beginner who loves their plants but forgets to water them.Lägg till en bildplatshållare
Bilder får en sida att kännas verklig. Även innan du har foton kan du be AI:n lägga in bildplatshållare på rätt ställen.
Senare kan du byta ut dem mot en riktig bild. Tills vidare visar en märkt platshållarruta var bilden ska placeras.
Add an image placeholder in the hero section next to the headline.
Label it "App screenshot goes here" so I know where to add a real image later.Kontrollera flödet
Läs sidan uppifrån och ner. Flyter den smidigt från rubriken till funktionerna, vidare till hur det fungerar, omdömena och knappen?
Om ett avsnitt känns felplacerat kan du be AI:n flytta det. Berättelsen ska kännas naturlig och leda till en tydlig handling.
En komplett sida
Din sida berättar nu en hel historia: en tydlig rubrik, verkliga funktioner, enkla steg, vänliga omdömen och en avslutande knapp.
Du byggde allt genom att beskriva vad du ville ha med vanliga ord. Nästa steg är att förhandsvisa sidan och göra små justeringar.
Review the whole PlantPal page and make sure the sections flow in this order:
hero, features, how it works, testimonials, final call to action, footer.Snabbtest
Låt oss gå igenom hur man bygger innehåll.
Sammanfattning: Avsnitt och innehåll
Du fyllde ditt skelett med en riktig berättelse: rubrik, funktioner, hur det fungerar, omdömen och en avslutande uppmaning till handling.
Du lärde dig att hålla texten kort, anpassa tonen efter målgruppen och lägga till bildplatshållare. Nästa steg är att förhandsvisa och justera den färdiga sidan.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 25
- Lektioner
- 100
Vanliga frågor
Är lektionen ”Lägg till avsnitt och innehåll” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vibe Coding, inklusive ”Lägg till avsnitt och innehåll”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Vad lär jag mig i ”Lägg till avsnitt och innehåll”?
Bygg ut hero-avsnitt, funktioner och sidfot. Ni övar på Vibe Coding med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vibe Coding?
Du behöver inga förkunskaper. Utbildningen i Vibe Coding på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Lägg till avsnitt och innehåll”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vibe Coding-lektionen?
Ja. Varje Vibe Coding-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Skapa sidans grundstruktur
- Styla med vanligt språk
- Lägg till avsnitt och innehåll
- Förhandsgranska och justera