Hur man kodar en website (Complete Beginner’s Guide)

De flesta av oss i WPBeginner-teamet kan minnas hur vi stirrade på vår första tomma kodredigerare och blev helt överväldigade av alla HTML-taggar, CSS-egenskaper och JavaScript-funktioner som vi behövde lära oss.

Men det var länge sedan, och sedan dess har vi hjälpt tusentals nybörjare att förvandla samma tomma skärm till vackra, funktionella webbplatser.

Det här är vad vi har lärt oss: kodning är inte bara för “teknikmänniskor”. Med rätt tillvägagångssätt och vägledning kan vem som helst lära sig att bygga en webbplats från grunden. Vi har testat och förfinat vår undervisningsmetod med elever från alla bakgrunder – från företagare till konstnärer.

I den här nybörjarvänliga guiden går vi igenom hela processen med att koda din första webbplats med hjälp av samma beprövade metod som har fungerat otaliga gånger tidigare. Ingen teknisk bakgrund krävs – ta bara med din vilja att lära dig.

Webbplatsbyggare kontra att koda en webbplats från grunden

I internets barndom var det lite av en huvudvärk att skapa en webbplats. Du var i princip tvungen att bygga allt från grunden med hjälp av kod, vilket kunde ta lång tid – tänk timmar, kanske till och med veckor.

Tack och lov är de dagarna långt borta. Nu byggs hela 62,9% av alla webbplatser med hjälp av ramverk för webbplatser. Det betyder att du inte längre behöver veta hur man bygger en webbplats från grunden.

De flesta använder nu WordPress och andra innehållshanteringssystem (ramverk för webbplatsbyggare) med öppen källkod för att bygga webbplatser.

På WPBeginner använder vi sidbyggare utan kod som WordPress och SeedProd för alla våra webbplatser. Vi tycker att de är superbekväma, lätta att anpassa och riktigt effektiva.

Den goda nyheten är att du i cirka 95% av fallen kan bygga en fantastisk webbplats med hjälp av dessa webbplatsbyggare eller lösningar utan kod.

Pro och Contra med att använda en Website Builder

Här är några av fördelarna med att använda en website-byggare:

• Det är lätt att använda, även för Beginnare.
• You behöver inte investera tid och pengar i att lära sig webbutveckling.
• It saves you time, which you can then spend on growing your business.
• Bygg enkelt webbplatser för ecommerce, medlemskap och företag utan att spendera en förmögenhet.

Det finns dock några nackdelar med att använda en website-byggare:

• Din webbplats kan få onödiga funktioner som gör den långsammare.
• Du kanske ej behöver CMS capability för ett projekt, men du måste ändå underhålla updating och backup av programvaran.

Pro och Contra med att skriva kod from scratch

Här är några fördelar med att skriva kod all själv from scratch:

• Your website kommer bara att ha den kod som behövs, vilket allowar att den laddas snabbare.
• You won’t need to maintain software updates.
• Du får värdefulla programmeringskunskaper som kan leda till nya karriärmöjligheter inom WordPress.

Du måste dock jämföra dessa fördelar med följande nackdelar:

• You will spend hours and days learning to code in HTML, CSS, and JavaScript.
• Att generera innehåll dynamiskt kommer att bli svårt, eftersom du inte har tillgång till ett förbyggt backend-system. Dessutom måste du lära dig språk på serversidan som PHP eller Python.
• För att lägga till och updating content krävs edit av flera filer.
• Att lägga till ny funktionalitet, sökmotorsoptimering (SEO) och integrationer med tredjepartsverktyg kommer att bli svårt.
• Du kan inte enkelt dela åtkomst till din website utan att ge full control till någon annan.
• Om du anlitar en utvecklare för att skriva koden åt dig blir det dyrt och ej särskilt kostnadseffektivt.

För mer information, se vår guide om webbplatsbyggare kontra manuell kodning.

Eftersom din tid är värdefull ska vi visa dig hur du skapar en webbplats med hjälp av verktyg som i princip skriver koden åt dig (vi går igenom dessa i metod 1 och 2).

Sedan i metod 3 delar vi några resurser om hur man bygger en webbplats helt från grunden. Detta är perfekt om du är en student som vill lära dig programmering.

Med det sagt, låt oss titta på hur man kodar en website. Du kan använda snabblänkarna under för att hoppa till den metod du vill använda:

1. Koda en custom website med WordPress

WordPress är den mest populära plattformen för att bygga hemsidor. Enligt vår rapport om delning av CMS-marknaden driver WordPress faktiskt över 43% av alla websites på internet.

Vi använder WordPress för alla våra webbplatser. I vår djupgående WordPress-recension beskrivs dess för- och nackdelar mer ingående.

WordPress levereras redan med massor av funktioner, men det blir ännu bättre: du kan installera tillägg som kallas plugins. Dessa är programvaror som lägger till extra funktionalitet till WordPress, och du kan hitta över 59 000 bara i WordPress.org-arkivet, inklusive många sidbyggare utan kod.

När det gäller sidbyggare är SeedProd vårt förstahandsval. Det är en populär WordPress-sidbyggare med dra-och-släpp-funktion som vi har använt för att designa många av våra partners webbplatser. Vi designade till och med SeedProds webbplats med SeedProd!

För mer information, kolla in vår detaljerade SeedProd-recension.

För att komma igång med WordPress behöver du ett domännamn och ett webbhotell. Vi rekommenderar att du använder Bluehost. De är en av de bästa hostingleverantörerna för WordPress, och de erbjuder våra läsare ett gratis domännamn och en enorm rabatt på hosting (bara 1,99 USD/månad).

Om du vill titta på alternativ rekommenderar vi Hostinger, SiteGround eller något av de andra bästa hostingföretagen för WordPress.

När du har en domän och ett webbhotell är nästa steg att installera WordPress (på rätt sätt).

Den goda nyheten är att de flesta bra webbhotell, som Bluehost, gör det superenkelt att installera WordPress med sin installationsprocess med ett klick. Den är verkligen användarvänlig, så du kan bara följa instruktionerna på skärmen för att komma igång.

När du har installerat WordPress kan du logga in på adminpanelen. Den kommer att se ut ungefär så här:

Låt oss nu prata om hur du får din webbplats att se fantastisk ut utan att behöva skriva en enda rad kod. Till att börja med måste du installera och aktivera SeedProd-pluginet. För mer information, se vår handledning om att installera ett WordPress-plugin.

Med SeedProd kan du enkelt designa din egen webbplats och skapa vackra sidor helt enkelt genom att dra och släppa – ingen kodning krävs, så det är perfekt för den här handledningen.

Du kan också använda det för att skapa ditt eget anpassade WordPress-tema från grunden. Detta kommer att vara frontend på din webbplats som användarna kommer att se när de besöker den.

SeedProd har till och med en AI-byggare som skapar ett helt anpassat tema åt dig på mindre än 60 sekunder. För mer information, se vår guide om hur man skapar en WordPress-webbplats med AI.

När du har installerat SeedProd, gå bara till SeedProd ” Landing Pages sida och klicka på knappen ‘Add New Landing Page’.

På nästa vy blir du ombedd att välja en template.

SeedProd kommer laddat med massor av vackert designade mallar för att ge dig ett försprång. Detta inkluderar mallar för specifika användningsfall, till exempel ideella webbplatser eller webbplatser för fordonsföretag. Eller så kan du välja “Blank Template” för att börja med en tom sida.

Efter det kommer du att bli ombedd att enter en rubrik för din page och en URL slug.

Om du t.ex. skapar webbplatsens förstasida kan du ange “Home” som titel och URL (webbadressen för den specifika sidan).

Sedan måste du klicka på knappen “Save and Start Editing the Page”.

SeedProd kommer nu att hämta gränssnittet för page builder. Det är en intuitiv page builder där du helt enkelt kan peka och clicka för att börja edit.

SeedProds dra-och-släpp-gränssnitt är en barnlek för nybörjare, men det är också tillräckligt kraftfullt för erfarna utvecklare.

På vänster sida ser du alla vanliga webbdesignelement i form av block. Tänk på dem som byggstenar som du helt enkelt kan dra in på din sida.

Till höger ser du en förhandsgranskning i realtid av din design. Du kan helt enkelt peka och klicka på valfritt element för att redigera, ta bort eller flytta det.

Har du svårt att hitta inspiration eller vill du helt enkelt bygga din webbplats snabbt? SeedProd kommer med kraftfulla AI-funktioner som enkelt kan generera text, inklusive rubriker, bildtexter och uppmaningar till handling.

Lägg bara till ett textblock i din design och klicka på knappen “Generera AI-text”. Skriv in den uppmaning du vill använda och tryck på “Generera text”. SeedProd kommer då att generera lite text baserat på dina instruktioner.

Vill du skapa unika bilder och grafik utan att behöva använda ett webbdesignprogram som Canva?

Sedan integreras SeedProd med DALL-E så att du kan generera originalbilder på några sekunder och sedan lägga till dem på din webbplats med ett enda klick.

I princip kan du skapa en customize webbdesign, inklusive en navigation menu, sidebars och footers, utan att skriva kod.

Nu , om du behöver lägga till lite anpassad kod, har SeedProd täckt dig där också. Dra och släpp bara blocket “Anpassad HTML” på din sida.

I det blocket kan du manuellt lägga till den HTML-kod som du behöver.

You can also adjust the margin, padding, and design attributes of your custom HTML block.

På samma sätt kan du också add to custom CSS kod till din page.

Klicka bara på knappen “Settings” längst ner i vänstra hörnet och välj “Custom CSS”.

När du har slutfört edit av din page, click the “Save and Publicera” button to make it go live.

You can also click the ‘Preview’ button to view your page in live action.

Upprepa helt enkelt processen för att skapa andra sidor för din webbplats. Du kan bokstavligen bygga en webbplats med en sida eller till och med en hel webbplats för småföretag på några minuter.

Det fina med SeedProd är att det gör det otroligt enkelt att skapa och redigera en webbplats.

Det är därför så många professionella utvecklare runt om i världen använder det. Faktum är att även utvecklarna på stora företag som Awesome Motive förlitar sig på SeedProd för att bygga sina huvudwebbplatser eftersom det är så snabbt och anpassningsbart.

Alternativ till SeedProd

Vill du inte använda SeedProd? Vi har täckt upp för dig! Här är några av våra toppval för andra WordPress-sidbyggare som du kan använda:

• Thrive Architect – Det här är en fantastisk sidbyggare som verkligen fokuserar på att ge dig konverteringar. Den levereras med över 357 fördesignade layouter för att du ska komma igång snabbt.
• Divi Builder – En annan kraftfull dra-och-släpp-byggare som fungerar både som ett tema och en sidbyggare. Det ger dig massor av flexibilitet.
• Beaver Builder – Detta är en annan välkänd och pålitlig sidbyggare för WordPress som många älskar.
• Astra – Om du letar efter ett tema är Astra superanpassningsbart och levereras med färdiga startwebbplatser som du kan installera med bara ett klick. Det är en riktig tidsbesparare!

Även om vi kanske är lite partiska mot WordPress (eftersom, ja, vi är WPBeginner!) talar dess popularitet verkligen för sig själv. Massor av stora namn som BBC, Microsoft, Facebook och The New York Times använder WordPress. Så du vet att du är i gott sällskap!

2. Koda en website med Web.com Website Builder

Om du hellre vill hoppa över stegen med att skaffa ett domännamn, sätta upp ett webbhotell och installera programvara som WordPress, kanske du vill kolla in Web.coms webbplatsbyggare.

Det är en bra plattform för att bygga enkla företagswebbplatser och onlinebutiker. De har till och med en guidad wizard som hjälper till med processen.

Web.coms prisplaner inkluderar ett gratis domännamn, gratis SSL-certifikat (vilket är viktigt för säkerheten), dussintals mallar och ett AI-skrivverktyg som hjälper dig att snabbt skapa webbplatstexter.

Välj helt enkelt bland deras tusentals beautiful pre-made website templates och customize designen för att matcha dina varumärkesbehov med peka och click.

Byggaren har alla de utvalda funktioner som du kan förvänta dig.

You can easily add photo galleries, videos, testimonial sliders, contact forms, map locations, social media buttons, and more.

Du behöver inte oroa dig för uppdateringar, säkerhet eller säkerhetskopior eftersom Web.com hanterar det åt dig. De erbjuder också 24/7 support via chatt, e-post och telefon.

Alternativ till Web.com

Det finns många olika allt-i-ett-lösningar där ute. Förutom Web.com, här är några av våra toppval för lättanvända hemsidebyggare som inte är WordPress:

• Gator by HostGator – Fullt hosted website builder med drag and drop tools och templates.
• Domain.com Website Builder – Ett annat värdbaserat alternativ med massor av vackra mallar för alla typer av webbplatser.
• HubSpot – Detta är en allt-i-ett-webbplatsbyggare och marknadsföringsplattform som är bra för småföretag.
• Wix – En välkänd drag-och-släpp-webbplatsbyggare som är ganska populär.
• BigCommerce – Om du specifikt vill bygga en onlinebutik är BigCommerce ett helt värdalternativ att överväga.

För fler alternativ kan du se vår jämförelse av de bästa webbplatsbyggarna med för- och nackdelar. Vi har lagt ner hårt arbete på att testa i stort sett alla större hemsidebyggare som finns. Så vi gillar att tro att vi vet vad vi pratar om när det gäller att välja rätt webbplatsbyggare!

3. Lär dig att koda en website from scratch

Är du student och vill lära dig att koda en webbplats från grunden? Det är ju helt fantastiskt! Du kommer att behöva sätta dig in i grunderna för webbplatsutveckling, som HTML, CSS och några andra saker.

Det finns massor av kurser där ute (både gratis och betalda), men den som vi tycker är riktigt bra finns på Code Academy.

Det tar ungefär 9 timmar att genomföra, men i slutet kommer du att ha lärt dig att koda en anpassad responsiv webbplats från grunden med HTML, CSS och Bootstrap.

Även efter att du har avslutat kursen behöver du öva lite för att bli riktigt bra på att koda webbplatser från grunden. Men oroa dig inte, vi är här för att hjälpa dig! I nästa avsnitt visar vi dig hur du kodar en mycket grundläggande webbplats med bara HTML och CSS.

Även efter att du har slutfört kursen kommer du att behöva timmar av övning innan du verkligen kan bli effektiv på att koda websites from scratch. I nästa section visar vi hur du kodar en mycket grundläggande website med hjälp av HTML och CSS.

Kodning av en enkel statisk website

Webbplatser byggs upp med hjälp av HTML, CSS och ibland lite JavaScript. Tänk på dem så här:

• HTML (Hyper Text Markup Language): Detta är grunden för din webbsida. Den definierar den grundläggande layouten och allt innehåll, som bilder, text, videor och mycket mer.
• CSS (Cascading Style Sheets): Det är det här som gör att din webbplats ser bra ut! CSS hanterar saker som färger, marginaler, utfyllnad och textstorlek.

För att skriva den här koden behöver du en kodredigerare. Det är som en speciell textredigerare som hjälper dig att skriva kod genom att markera olika delar, vilket gör det lättare att upptäcka misstag och skriva mer effektivt.

Nu måste du starta ett projekt. Skapa bara en ny mapp på din dator och döp den till vad du vill. Det är här du kommer att ha alla dina webbplatsfiler.

Öppna din kodredigerare och skapa en ny fil. Eftersom detta kommer att vara startsidan för din webbplats rekommenderar vi att du döper den till index.html.

I den här filen skriver du HTML-koden för din första page.

En grundläggande HTML page innehåller följande sections.

• Wrapper för HTML-dokument
• Head
• Kropp

Du kan skapa denna grundläggande struktur genom att skriva följande kod:

Doctype HTML-deklarationen talar bara om för web browsers att det är en HTML page.

Koden i head-avsnittet är inte synlig på skärmen. Den definierar metadata för ditt HTML-dokument, som titeln på ditt HTML-dokument, länk till CSS-filen med mera.

Låt oss nu fylla i section head på din HTML page:

Det är i webbplatsens huvuddel som du definierar sidlayouten och lägger till allt innehåll som besökarna kommer att se.

Här är ett exempel på en page med header, area för huvudinnehåll och footer:

Byt gärna ut platshållarna mot ditt eget innehåll. Kom bara ihåg att spara dina ändringar!

När du har sparat ditt HTML-dokument kan du förhandsgranska det i en webbläsare. Du kanske ser något som först ser lite slätstruket ut, som det här:

Det beror på att vårt HTML-dokument pekar på två filer som inte finns. Den första är CSS stylesheet.

CSS eller Cascading Style Sheet är ett annat kodningsspråk. Det används för styling av HTML-element, byggblock och div-selektorer i dina HTML-dokument.

Skapa helt enkelt en fil som heter style.css med hjälp av din kod-redigerare och save den i samma folder som din index.html-fil.

Följare: Add följande kod till din style.css-fil:

Detta tar hand om stylingen. Men kom ihåg att CSS kan göra så mycket mer än vad vi har visat här! Det kan användas för att verkligen förbättra användarupplevelsen, lägga till animationer och till och med justera hur din webbplats ser ut på olika skärmstorlekar med hjälp av något som kallas media queries.

Nu måste vi fortfarande uploada en image.

Skapa helt enkelt en new folder i ditt projekt och döp den till images.

Leta nu upp en bild som du vill visa och lägg till den i mappen images.

Gå sedan tillbaka till din index.html-fil och ändra bildnamnet i taggen <img> till det faktiska namnet på din bildfil.

Glöm inte att spara alla dina ändringar och sedan förhandsgranska din sida i webbläsaren igen. Du bör nu se din bild och den grundläggande stylingen från din CSS-fil.

Du kan upprepa denna process för att skapa andra sidor för din webbplats. Ett praktiskt knep är att använda filen index.html som mall för dina andra sidor. Spara den bara med ett annat namn (t.ex. about.html eller contact.html) och ändra sedan innehållet efter behov.

Vi hoppas att den här artikeln hjälpte dig att lära dig att koda en webbplats. Om du valde WordPress kanske du vill lära dig WordPress (gratis) på mindre än en vecka eller ta en titt på de bästa kodredigerarna för nybörjare .

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.