Vienas iš daugelio nelinksmų dalykų, susijusių su interneto svetainių kūrimu, nėra paprastas būdas dalytis savo projektais su kitais. Daugeliu atvejų turėsite priglobti savo projektą žiniatinklio serveryje arba išsiųsti visus atitinkamus failus tam, kuris nori pamatyti tai, ką sukūrėte. Tačiau dėl tvarkingo internetinio įrankio, vadinamo „CodePen“, jums nebereikia jaudintis.
„CodePen.io“
„CodePen“ yra nemokama priemonė, leidžianti priglobti savo projektus internete niekada nereikia mokėti nė cento. Norėdami pradėti, apsilankykite „CodePen.io“ ir sukurkite nemokamą sąskaitą.
Tai padarę, galite sukurti „rašiklį“ spustelėję mygtuką „Naujas rašiklis“ ekrano viršutiniame dešiniajame kampe.
Po to, prie atitinkamų laukelių, galėsite pridėti HTML, CSS ir „JavaScript“. Kai tik pradėsite pridėti kokį nors kodą, pamatysite tiesioginę peržiūrą, ką sukuriate. Viršutiniame kairiajame kampe galite pavadinti savo pirmąjį rašiklį. Spustelėję pirmąjį „Išsaugoti“, galėsite tiesiog bendrinti puslapio URL su draugais, šeima ir bendradarbiais, kad jie galėtų pamatyti, ką dirbate.
Taip atrodys jūsų rašiklis su kokiu nors kodu (sutikdamas su „Free Code Camp“ projektu, vadinamu „Tribute Page“):
Kurdami savo rašiklį, prieš pradėdami, norėsite peržvelgti nustatymus. Kai spustelėsite mygtuką „Naujas rašiklis“, turėtumėte pamatyti švirkštimo priemonės šabloną, kad galėtumėte pradėti įvesti kodą. Viršutiniame dešiniajame kampe bus mygtukas „Nustatymai“. Spustelėkite tai (turėtumėte pamatyti žemiau esantį ekraną).
Čia galėsite pereiti HTML, CSS ir „JavaScript“ skirtukus, kad pridėtumėte tam tikrą informaciją. HTML skirtuke galėsite pridėti meta informacijos, dalykų, kurie turėtų būti
skirtuką ir pan. Skiltyje CSS galėsite pridėti CSS pirminius procesorius, tokius kaip LESS ir Sass. Ne tik tai, bet ir jūs galite įtraukti išorinę CSS, pvz., „Bootstrap“ ir „Foundation“. Skirtuke „JavaScript“ galite pridėti „JavaScript“ pirminį procesorių, pvz., „Babel“ ar „CoffeeScript“. Be to, galite pridėti išorinius „JavaScript“ rėmus, tokius kaip „Angular“, „React“, „Lodash“, D3 ir pan.
Galiausiai „CodePen“ leis pakeisti žiūrimą „rodinį“. Numatytasis rodinys yra Redaktoriaus vaizdas, leidžiantis įvesti kodą ir gauti nedidelę apžvalgą žemiau esančioje konsolėje. Tačiau yra ir kitų variantų, ypač patogus - „Visas puslapis“, kuriame galėsite pamatyti projektą taip, lyg jis būtų pateiktas svetainėje. Yra keletas kitų rodinių, prie kurių galima pereiti, su kuriais verta žaisti!
„CodePen“ iš tikrųjų yra tvarkingas įrankis, o mes tik palietėme jo naudingumo paviršių. Verta pereiti prie „CodePen.io“ ir naudoti ją dirbant prie kelių projektų, o tada, jei jums tai patinka, pasidalyti su draugais ar bendradarbiais.
Ką manote apie „CodePen“? Ar jūs naudojote panašų įrankį? Praneškite mums komentarų skiltyje žemiau!
