Repl:ar & templates

Kom igång med färdiga mallar för allt möjligt.

5 minCursor & kod
Illustration för lektionen Repl:ar & templates

Vad du bygger

Du skapar och startar din allra första personliga utvecklingsmiljö i molnet, en så kallad Repl. Genom att utgå från en färdig mall har du en fungerande hemsida eller ett enklare program igång på skärmen inom några minuter. Det blir din egen digitala sandlåda där du kan testa och ändra precis vad du vill.

Innan du börjar

  • Ett konto på Replit som är helt gratis att skapa.
  • En modern webbläsare, till exempel Chrome eller Safari.
  • Inga förkunskaper i kodning behövs. Vår isbjörnsmaskot Bygge brukar säga att det bästa sättet att lära sig är att helt enkelt börja klicka runt.

Steg för steg

  1. Logga in på Replit – Gå till hemsidan i din webbläsare och logga in. Du möts då av din personliga startsida där alla dina framtida projekt kommer att samlas.
  2. Starta ett nytt projekt – Klicka på den stora knappen Create Repl uppe i det vänstra hörnet på skärmen. En ny ruta öppnas i mitten av skärmen.
  3. Välj en passande mall – Bläddra igenom listan eller sök efter en mall i sökrutan högst upp. För en enkel och snabb start, sök efter och välj mallen som heter HTML, CSS, JS.
  4. Namnge ditt projekt – I rutan till höger ser du ett fält som heter Title. Replit hittar på ett slumpmässigt namn åt dig, men ändra gärna detta till något mer personligt, till exempel "Mitt första projekt".
  5. Skapa din arbetsyta – Klicka på den blå knappen Create Repl i det nedre högra hörnet av rutan för att öppna ditt nya projektrum.
  6. Kör koden och se resultatet – Klicka på den gröna Run-knappen (med en liten spela-ikon på) som ligger längst upp i mitten av skärmen.

Byggloftets tips

  • Våga göra fel: Din Repl är en säker miljö. Om du råkar radera något eller om koden slutar fungera kan du alltid skapa en ny Repl från samma mall och börja om från början.
  • Undvik att starta från noll: Använd sökfunktionen för mallar aktivt. Om du vill bygga ett litet spel, prova att söka på "Game" för att se hur andra har lagt upp grunden.

Vanliga fel

  • "Run-knappen är grå och det händer ingenting när jag klickar": Replit håller på att starta upp din personliga server i bakgrunden. Vänta i några sekunder så blir knappen grön och klickbar.
  • "Hemsidan till höger är helt tom": Kontrollera att du valde en mall med färdig kod och inte en helt tom mall. Om den är tom, gå tillbaka till startsidan och skapa en ny Repl med mallen HTML, CSS, JS.

Du är klar när…

Du ser en fungerande hemsida i fönstret längst till höger på skärmen och kan se text eller bilder laddas under fliken Webview.

Steg för steg i bild

Logga in på Replit – Gå till hemsidan i din webbläsare och l
1. Logga in på Replit – Gå till hemsidan i din webbläsare och l
Starta ett nytt projekt – Klicka på den stora knappen Create
2. Starta ett nytt projekt – Klicka på den stora knappen Create
Välj en passande mall – Bläddra igenom listan eller sök efte
3. Välj en passande mall – Bläddra igenom listan eller sök efte

Det finns en videoversion av den här lektionen för medlemmar. Texten ovan är komplett.