Jedną z wielu frustrujących rzeczy związanych z tworzeniem stron internetowych jest brak łatwego sposobu udostępniania projektów innym osobom. W wielu przypadkach będziesz musiał hostować swój projekt na serwerze WWW lub przesłać wszystkie odpowiednie pliki komuś, kto chce zobaczyć, co stworzyłeś. Ale dzięki schludnemu narzędziu internetowemu o nazwie CodePen nie musisz się już o to martwić.
CodePen.io
CodePen to darmowe narzędzie, które pozwoli Ci hostować swoje projekty online bez konieczności płacenia ani grosza. Aby rozpocząć, przejdź do CodePen.io i utwórz bezpłatne konto.
Po wykonaniu tej czynności możesz utworzyć „Pióro”, klikając przycisk „Nowe Pióro” w prawym górnym rogu ekranu.
Następnie będziesz mógł dodać dowolny HTML, CSS i JavaScript do odpowiednich pól. Po rozpoczęciu dodawania kodu zobaczysz podgląd na żywo tego, co tworzysz. Możesz nazwać swój pierwszy długopis w lewym górnym rogu. Po kliknięciu pierwszego przycisku „Zapisz” będziesz mógł po prostu udostępnić adres URL strony znajomym, rodzinie i współpracownikom, aby mogli zobaczyć, nad czym pracujesz.
Tak będzie wyglądać Twoje pióro z pewnym kodem (dzięki uprzejmości projektu Free Code Camp o nazwie Tribute Page):
Tworząc własne pióro, musisz przejść przez Ustawienia zanim zaczniesz. Po kliknięciu przycisku „Nowe pióro” powinieneś zobaczyć szablon Pióra gotowy do rozpoczęcia wprowadzania kodu. W prawym górnym rogu będzie przycisk „Ustawienia”. Kliknij na to (powinieneś zobaczyć poniższy ekran).
Tutaj możesz przeglądać zakładki HTML, CSS i JavaScript, aby dodać określone informacje. Na karcie HTML będziesz mógł dodawać meta informacje, czyli rzeczy, które powinny znaleźć się w
zakładka i tak dalej. W ramach CSS będziesz mógł dodać Preprocesory CSS, takie jak LESS i Sass. Nie tylko, ale możesz dodać zewnętrzny CSS, taki jak Bootstrap i Foundation. Na karcie JavaScript możesz dodać Preprocesor JavaScript, taki jak Babel lub CoffeeScript. Dodatkowo możesz dodać zewnętrzne frameworki JavaScript, takie jak Angular, React, Lodash, D3 i tak dalej.
Wreszcie CodePen pozwoli Ci zmienić „Widok”, na który patrzysz. Domyślny widok to Widok edytora, umożliwiający wpisanie kodu i uzyskanie małego podglądu w konsoli poniżej. Istnieją jednak również inne opcje, z których szczególnie przydatny jest widok „Pełna strona”, w którym można zobaczyć projekt tak, jakby był na żywo na stronie internetowej. Dostępnych jest kilka innych widoków, z którymi warto się bawić!
CodePen to naprawdę fajne narzędzie, a my tylko dotknęliśmy powierzchni jego przydatności. Warto przejść do CodePen.io i wykorzystać go do pracy nad kilkoma projektami, a następnie, jeśli masz na to ochotę, podziel się z przyjaciółmi lub współpracownikami.
Co sądzisz o CodePen? Czy użyłeś podobnego narzędzia? Daj nam znać w sekcji komentarzy poniżej!
