Een van de vele frustrerende dingen over webontwikkeling is het niet hebben van een gemakkelijke manier om uw projecten met anderen te delen. In veel gevallen moet u uw project op een webserver hosten of alle bijbehorende bestanden verzenden naar iemand die wil zien wat u hebt gemaakt. Maar dankzij een handige online tool genaamd CodePen, hoeft u zich daar geen zorgen meer over te maken.
CodePen.io
CodePen is een gratis tool waarmee u uw projecten online kunt hosten zonder ooit een cent te betalen. Om te beginnen, ga je naar CodePen.io en maak je een gratis account aan.
Nadat u dat hebt gedaan, kunt u een 'Pen' maken door op de knop 'Nieuwe pen' in de rechterbovenhoek van het scherm te klikken.
Daarna kunt u HTML, CSS en JavaScript toevoegen aan de bijbehorende vakken. Zodra je code toevoegt, krijg je een live preview te zien van wat je maakt. U kunt uw eerste pen in de linkerbovenhoek een titel geven. Nadat u op uw eerste 'Opslaan' hebt geklikt, kunt u eenvoudig de URL van de pagina delen met vrienden, familie en collega's, zodat zij kunnen zien waaraan u werkt.
Dit is hoe je pen eruit zal zien met wat code erin (met dank aan een Free Code Camp-project genaamd Tribute Page):
Wanneer u uw eigen pen maakt, moet u eerst de instellingen doorlopen voordat u aan de slag gaat. Wanneer u op de knop "Nieuwe pen" klikt, zou u een pensjabloon voor u klaar moeten staan om een code in te voeren. In de rechterbovenhoek ziet u een knop 'Instellingen'. Klik daarop (u zou het onderstaande scherm moeten zien).
Hier kun je de HTML-, CSS- en JavaScript-tabbladen doorlopen om bepaalde informatie toe te voegen. Op het HTML-tabblad kun je meta-informatie toevoegen, dingen die in de
tab, enzovoort. Onder CSS kun je CSS Preprocessors zoals MINDER en Sass toevoegen. Niet alleen dat, maar u kunt externe CSS zoals Bootstrap en Foundation toevoegen. Op het tabblad JavaScript kunt u een JavaScript-voorprocessor zoals Babel of CoffeeScript toevoegen. Bovendien kunt u externe JavaScript-frameworks toevoegen, zoals Angular, React, Lodash, D3, enzovoort.
Ten slotte kunt u met CodePen de "weergave" wijzigen waarnaar u kijkt. De standaardweergave is Editor View, waarmee u uw code kunt invoeren en een klein voorbeeld kunt krijgen in de console hieronder. Maar er zijn ook andere opties, met een bijzonder handige optie als "Volledige pagina" -weergave, waar je een project te zien krijgt alsof het live op een website staat. Er zijn een handvol andere weergaven beschikbaar om naar over te schakelen, het is de moeite waard om mee te spelen!
CodePen is echt een handige tool, en we hebben alleen het oppervlak van zijn bruikbaarheid aangeraakt. Het is de moeite waard om naar CodePen.io te gaan en het te gebruiken om aan een paar projecten te werken, en vervolgens, als je daar zin in hebt, te delen met je vrienden of collega's.
Wat vindt u van CodePen? Heb je een soortgelijk hulpmiddel gebruikt? Laat het ons weten in de comments hieronder!
