Jednou z mnoha frustrujících věcí v oblasti vývoje webu není snadný způsob, jak sdílet své projekty s ostatními. V mnoha případech budete muset svůj projekt hostit na webovém serveru nebo odeslat všechny odpovídající soubory někomu, kdo chce vidět, co jste vytvořili. Ale díky úhlednému online nástroji s názvem CodePen se s tím už nemusíte starat.
CodePen.io
CodePen je bezplatný nástroj, který vám umožní hostit vaše projekty online, aniž byste museli platit desetník. Nejprve přejděte na CodePen.io a vytvořte si bezplatný účet.
Jakmile to uděláte, můžete vytvořit „pero“ kliknutím na tlačítko „Nové pero“ v pravém horním rohu obrazovky.
Poté budete moci do příslušných polí přidat jakýkoli HTML, CSS a JavaScript. Jakmile začnete přidávat nějaký kód, uvidíte živý náhled toho, co vytváříte. První pero můžete nazvat v levém horním rohu. Po kliknutí na své první „Uložit“ budete moci jednoduše sdílet URL stránky s přáteli, rodinou a spolupracovníky, aby mohli vidět, na čem pracujete.
Takto bude vaše pero vypadat s nějakým kódem v něm (se svolením projektu Free Code Camp nazvaného Tribute Page):
Při vytváření vlastního pera budete chtít projít Nastavení, než začnete. Po kliknutí na tlačítko „Nové pero“ byste měli vidět šablonu pera připravenou začít zadávat nějaký kód. V pravém horním rohu bude tlačítko „Nastavení“. Klikněte na to (měla by se zobrazit níže uvedená obrazovka).
Zde budete moci procházet kartami HTML, CSS a JavaScript a přidat určité informace. Na kartě HTML budete moci přidat meta informace, věci, které by měly jít do
kartu atd. V části CSS budete moci přidat předprocesory CSS jako LESS a Sass. Nejen to, ale můžete přidat i externí CSS jako Bootstrap a Foundation. Na kartě JavaScript můžete přidat předprocesor JavaScriptu, jako je Babel nebo CoffeeScript. Kromě toho můžete přidat do externích rámců JavaScriptu, jako jsou Angular, React, Lodash, D3 atd.
Nakonec vám CodePen umožní změnit „Pohled“, na který se díváte. Výchozí zobrazení je Zobrazení editoru, které vám umožní zadat kód a získat malý náhled v konzole níže. Existují však i jiné možnosti. Zvláště užitečný je zobrazení „Full Page“, kde uvidíte projekt, jako by byl na webu. Existuje několik dalších pohledů, které lze přepnout, stojí za to si s nimi pohrát!
CodePen je opravdu úhledný nástroj a my jsme se dotkli pouze povrchu jeho užitečnosti. Vyplatí se zamířit do CodePen.io a použít jej k práci na několika projektech, a pak, pokud se vám to líbí, sdílet se svými přáteli nebo spolupracovníky.
Co si myslíte o CodePen? Už jste použili podobný nástroj? Dejte nám vědět v sekci komentářů níže!
