Isa sa maraming mga nakakabigo na bagay tungkol sa pagbuo ng web ay hindi pagkakaroon ng isang madaling paraan upang maibahagi ang iyong mga proyekto sa iba. Sa maraming mga kaso, kakailanganin mong i-host ang iyong proyekto sa isang web server o ipadala ang lahat ng kaukulang mga file sa isang taong nais mong makita kung ano ang iyong nilikha. Ngunit salamat sa isang masinop na tool sa online na tinatawag na CodePen, hindi mo na kailangang mag-alala tungkol sa anuman na.
CodePen.io
Ang CodePen ay isang libreng tool na hahayaan kang mag-host ng iyong mga proyekto sa online nang hindi kinakailangang magbayad ng isang dime. Upang magsimula, magtungo sa CodePen.io at lumikha ng isang libreng account.
Kapag nagawa mo na iyon, maaari kang lumikha ng isang "Pen" sa pamamagitan ng pag-click sa pindutang "New Pen" sa kanang tuktok na sulok ng screen.
Pagkatapos nito, magdagdag ka ng anumang HTML, CSS, at JavaScript sa kanilang mga kaukulang kahon. Sa sandaling simulan mo ang pagdaragdag sa ilang code, makikita mo ang isang live na preview ng iyong nilikha. Maaari mong pamagat ang iyong unang Pen sa tuktok na kaliwang sulok. Matapos mong mag-click sa iyong unang "I-save, " magagawa mong simpleng ibahagi ang URL ng pahina sa mga kaibigan, pamilya, at mga katrabaho upang makita nila kung ano ang ginagawa mo.
Ganito ang hitsura ng iyong Panulat na may ilang code sa loob nito (kagandahang-loob ng isang proyektong Libreng Code Camp na tinatawag na Pahina ng Tributo):
Kapag lumilikha ng iyong sariling Pen, nais mong dumaan sa Mga Setting bago magsimula. Kapag nag-click ka sa pindutang "New Pen", dapat mong makita ang isang template ng Pen na handa ka upang simulan ang pagpasok ng ilang code. Sa kanang tuktok na sulok ay isang pindutan ng "Mga Setting". Mag-click sa na (dapat mong makita sa ibaba screen).
Dito ka makakapasa sa mga tab na HTML, CSS, at JavaScript upang magdagdag sa ilang impormasyon. Sa tab na HTML, magagawa mong magdagdag ng impormasyon ng meta, mga bagay na dapat pumasok sa
tab, at iba pa. Sa ilalim ng CSS, magdagdag ka ng CSS Preprocessors tulad ng LESS at Sass. Hindi lamang iyon, ngunit maaari kang magdagdag sa panlabas na CSS tulad ng Bootstrap at Foundation. Sa ilalim ng tab na JavaScript, maaari kang magdagdag sa isang Preprocessor ng JavaScript tulad ng Babel o Coffeekrip. Bilang karagdagan, maaari kang magdagdag sa mga panlabas na mga graphic ng JavaScript tulad ng Angular, React, Lodash, D3, at iba pa.
Sa wakas, papayagan ka ng CodePen na baguhin ang "View" na tinitingnan mo. Ang default na view ay ang View ng Editor, na nagpapahintulot sa iyo na magpasok sa iyong code at makakuha ng isang maliit na preview sa console sa ibaba. Ngunit, may iba pang mga pagpipilian din, na may partikular na madaling gamiting pagtingin na "Buong Pahina", kung saan makikita mo ang isang proyekto na tila ito ay live sa isang website. Mayroong isang maliit na bilang ng iba pang mga Views na magagamit upang lumipat sa, ito ay nagkakahalaga ng paglalaro sa paligid!
Ang CodePen talaga ay isang masinop na tool, at hinawakan lamang namin ang ibabaw ng pagiging kapaki-pakinabang nito. Ito ay nagkakahalaga ng heading sa CodePen.io at gamitin ito upang gumana sa ilang mga proyekto, at pagkatapos, kung sa palagay mo ito, ibahagi sa iyong mga kaibigan o katrabaho.
Ano sa palagay mo ang CodePen? Gumamit ka ba ng isang katulad na tool? Ipaalam sa amin sa seksyon ng mga komento sa ibaba!
