Jedna od mnogih zastrašujućih stvari u vezi s web razvojem nije jednostavno dijeljenje projekata s drugima. U mnogim ćete slučajevima projekt morati ugostiti na web poslužitelju ili poslati sve odgovarajuće datoteke nekome tko želi vidjeti što ste stvorili. Ali zahvaljujući urednom internetskom alatu pod nazivom CodePen, više se ne morate brinuti ni o čemu.
CodePen.io
CodePen je besplatan alat koji će vam omogućiti da domaćite svoje projekte putem interneta, a da pri tome nikad ne morate platiti niti jedan denar. Za početak prijeđite na CodePen.io i stvorite besplatni račun.
Nakon što to učinite, možete stvoriti "Olovku" klikom na gumb "Nova olovka" u gornjem desnom kutu zaslona.
Nakon toga moći ćete dodati bilo koji HTML, CSS i JavaScript u njihove odgovarajuće okvire. Jednom kada počnete dodavati neki kôd, vidjet ćete uživo pregled onoga što stvarate. Prvu olovku možete nasloviti u gornjem lijevom kutu. Nakon što kliknete na prvo "Spremi", moći ćete jednostavno podijeliti URL stranice s prijateljima, obitelji i suradnicima kako bi vidjeli što radite.
Ovako će izgledati vaša olovka s nekim kodom (ljubaznošću projekta Free Code Camp pod nazivom Tribute Page):
Kada stvarate vlastitu olovku, morat ćete proći kroz Postavke prije nego što započnete. Kada kliknete na gumb "Nova olovka", trebali biste vidjeti predložak olovke kako biste mogli unositi neki kôd. U gornjem desnom kutu nalazi se gumb "Postavke". Kliknite na to (trebali biste vidjeti donji ekran).
Ovdje ćete moći proći kroz HTML, CSS i JavaScript kartice da biste dodali određene podatke. Na kartici HTML moći ćete dodati meta informacije, stvari koje bi trebale ići u
karticu i tako dalje. Pod CSS moći ćete dodati CSS predprocesore poput LESS i Sass. I ne samo to, već možete dodati u eksterni CSS kao što je Bootstrap i Foundation. Na kartici JavaScript možete dodati JavaScript predprocesor poput Babel ili CoffeeScript. Uz to možete dodati vanjske JavaScript okvire kao što su Angular, React, Lodash, D3 i tako dalje.
Konačno, CodePen će vam omogućiti da promijenite "Pogled" koji gledate. Zadani prikaz je Editor View, koji vam omogućuje da unesete svoj kôd i dobijete mali pregled u konzoli ispod. No, postoje i druge mogućnosti, posebno prikladno je pogled "Cijela stranica" na kojem ćete vidjeti projekt kao da se radi na web mjestu. Na raspolaganju je pregršt drugih pogleda koji vrijede prebaciti na njih, s tim se vrijedi igrati!
CodePen je zaista uredan alat i samo smo dotakli površinu njegove korisnosti. Vrijedno je krenuti na CodePen.io i upotrijebiti ga za rad na nekoliko projekata, a zatim, ako vam se sviđa, podijelite sa svojim prijateljima ili suradnicima.
Što mislite o CodePenu? Jeste li koristili sličan alat? Javite nam se u odjeljku s komentarima u nastavku!
