En av de många frustrerande sakerna med webbutveckling är att inte ha ett enkelt sätt att dela dina projekt med andra. I många fall måste du vara värd för ditt projekt på en webbserver eller skicka över alla motsvarande filer till någon som vill se vad du har skapat. Men tack vare ett snyggt onlineverktyg som heter CodePen, behöver du inte oroa dig för något av det längre.
CodePen.io
CodePen är ett gratis verktyg som låter dig vara värd för dina projekt på nätet utan att behöva betala en krona. För att komma igång, gå till CodePen.io och skapa ett gratis konto.
När du har gjort det kan du skapa en "penna" genom att klicka på knappen "Ny penna" längst upp till höger på skärmen.
Därefter kan du lägga till HTML, CSS och JavaScript i motsvarande rutor. När du börjar lägga till en kod kommer du att se en direkt förhandsvisning av vad du skapar. Du kan titta på din första penna i det övre vänstra hörnet. När du har klickat på din första "Spara" kan du enkelt dela sidans URL med vänner, familj och kollegor så att de kan se vad du arbetar med.
Så här ser din penna ut med en kod i den (med tillstånd av ett Free Code Camp-projekt som kallas Tribute Page):
När du skapar din egen penna vill du gå igenom inställningarna innan du börjar. När du klickar på knappen "Ny penna" bör du se en penmall som är klar för att du ska börja ange någon kod. I det övre högra hörnet finns en "Inställningar" -knapp. Klicka på det (du bör se skärmen nedan).
Här kan du gå igenom flikarna HTML, CSS och JavaScript för att lägga till viss information. På HTML-fliken kan du lägga till metainformation, saker som bör gå i
fliken och så vidare. Under CSS kan du lägga till CSS-förprocessorer som LESS och Sass. Inte bara det, men du kan lägga till extern CSS som Bootstrap och Foundation. Under fliken JavaScript kan du lägga till en JavaScript-förprocessor som Babel eller CoffeeScript. Dessutom kan du lägga till externa JavaScript-ramar som Angular, React, Lodash, D3 och så vidare.
Slutligen kommer CodePen att låta dig ändra "Visa" du tittar på. Standardvyn är Editor View, så att du kan ange din kod och få en liten förhandsvisning i konsolen nedan. Men det finns andra alternativ också, med en särskilt praktisk visning som "Full Page" -vy, där du får se ett projekt som om det var live på en webbplats. Det finns en handfull andra vyer att byta till, det är värt att leka med!
CodePen är verkligen ett snyggt verktyg, och vi har bara berört ytan av dess användbarhet. Det är värt att gå vidare till CodePen.io och använda den för att arbeta på några projekt och sedan, om du känner för det, dela med dina vänner eller kollegor.
Vad tycker du om CodePen? Har du använt ett liknande verktyg? Låt oss veta i kommentaravsnittet nedan!
