Styling med almindeligt sprog
Beskriv det udseende, De ønsker.
Styling med almindeligt sprog er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 2 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.
Styling uden kode
Nu har din side et skelet, men den ser enkel ud. Styling tilføjer farver, luft og en behagelig helhedsoplevelse.
Det magiske ved vibe coding er, at du beskriver udseendet med almindelige ord. Du siger "roligt og grønt", og AI'en vælger farver og skrifttyper for dig.
Beskriv en stemning
I stedet for at angive præcise hex-koder skal du beskrive den følelse, du ønsker. Ord som "frisk", "moderne", "legende" eller "professionel" hjælper AI'en på vej.
En stemning giver AI'en mulighed for at vælge farver og skrifttyper, der passer sammen.
Style the PlantPal landing page to feel fresh and friendly.
Use soft green tones, rounded corners, and a clean modern font.Vælg et farvetema
Hvis du har en bestemt farve i tankerne, skal du bare nævne den. "Grøn", "marineblå" eller "varm orange" fungerer alle sammen.
Du kan også bede om en primær farve plus en accentfarve til knapper. AI'en holder resten neutralt, så siden forbliver let at læse.
Use a green and white color theme.
Make the buttons a slightly darker green so they stand out.
Keep the text dark gray for easy reading.Style hero-sektionen
Hero-sektionen er det første, folk ser, så den fortjener opmærksomhed. Bed om en stor, fed overskrift og masser af luft omkring den.
Du kan bede om en blød baggrundsfarve eller en diskret gradient, der gør toppen af siden indbydende.
Make the hero section stand out.
Use a large bold headline, generous spacing, and a soft light-green background behind it.Gør knapper indbydende
Din opfordring-til-handling-knap skal være let at få øje på og behagelig at klikke på. Bed AI'en om at give den en tydelig farve og en lille hover-effekt.
En knap, der ændrer sig blidt, når musen bevæger sig hen over den, føles levende og moderne.
Style the "Get Started" button.
Make it green with white text, rounded corners, and a slightly darker shade when I hover over it.Afstand og luft
Tætpakkede sider kan føles stressende. Gode afstande får en side til at føles rolig og let at læse.
Du kan bede AI'en om mere indvendig luft omkring sektionerne og mere afstand mellem tekstlinjerne. "Giv den plads til at trække vejret" er en formulering, AI'en forstår godt.
Add more space between the sections and around the text.
Give the page room to breathe so it does not feel crowded.Skrifttyper og læsbarhed
Skrifttyper former en sides personlighed. En ren sans serif-skrifttype føles moderne, mens en serif-skrifttype føles klassisk.
Du behøver ikke kende skrifttypens navn. Sig bare "let at læse" eller "moderne", og bed om, at overskrifterne er lidt større end brødteksten.
Use a clean, modern, easy-to-read font.
Make the headings noticeably larger and bolder than the normal text.Én ændring ad gangen
Når du styler, skal du ændre én ting pr. besked. Så er det nemt at se, hvad hver ændring gør.
Hvis du beder om ti ændringer på én gang og ikke kan lide resultatet, er det svært at vide, hvilken del der skal rulles tilbage. Små trin holder dig i kontrol.
Hold det konsekvent
En god landingsside bruger de samme farver og afstande overalt. Uensartet styling får siden til at se ufærdig ud.
Du kan bede AI'en om at anvende dit tema på hele siden, så alle sektioner passer sammen med hero-sektionen.
Apply the same green theme and spacing to every section.
Make sure all buttons and headings look consistent across the page.Fortryd en stil, du ikke kan lide
Alle resultater vil ikke behage dig, og det er helt i orden. Fortæl bare AI'en, hvad der føles forkert, og hvad du foretrækker i stedet.
Du kan sige "for mørk" eller "knappen er for lille". AI'en justerer det uden at ødelægge resten af dit arbejde.
The background is too dark and hard to read.
Make it lighter and keep the green accents on the buttons only.En side med personlighed
Med nogle få anmodninger på almindeligt sprog har dit enkle skelet nu fået en tydelig stil: en temafarve, behagelige afstande, læsbare skrifttyper og en indbydende knap.
Husk, at du beskrev følelserne og lod AI'en håndtere de tekniske valg af farver og skrifttyper.
Give the whole PlantPal page a fresh, calm, modern style.
Green and white theme, roomy spacing, readable font, and a friendly rounded button.Hurtigt tjek
Lad os gennemgå styling med almindelige ord.
Opsummering: Styling med almindelige ord
Du har lært at style ved at beskrive en stemning og et tema i stedet for at skrive kode. Du stylede hero-sektionen, lavede en indbydende knap, tilføjede luft og holdt alt konsekvent.
Du har også set, hvordan du fortryder et udseende, du ikke kan lide. Nu skal du fylde siden med rigtige sektioner og indhold.
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 “Styling med almindeligt sprog” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Styling med almindeligt sprog”, 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 “Styling med almindeligt sprog”?
Beskriv det udseende, De ønsker. 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 2 af 4.
Hvor lang tid tager lektionen “Styling med almindeligt sprog”?
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