Una delle tante cose frustranti dello sviluppo web non è avere un modo semplice per condividere i tuoi progetti con gli altri. In molti casi, dovrai ospitare il tuo progetto su un server Web o inviare tutti i file corrispondenti a qualcuno che vuole vedere ciò che hai creato. Ma grazie a uno strumento online pulito chiamato CodePen, non devi più preoccuparti di questo.
CodePen.io
CodePen è uno strumento gratuito che ti permetterà di ospitare i tuoi progetti online senza mai dover pagare un centesimo. Per iniziare, vai su CodePen.io e crea un account gratuito.
Una volta fatto, puoi creare una "Penna" facendo clic sul pulsante "Nuova penna" nell'angolo in alto a destra dello schermo.
Successivamente, sarai in grado di aggiungere qualsiasi HTML, CSS e JavaScript alle rispettive caselle. Una volta che inizi ad aggiungere del codice, vedrai un'anteprima dal vivo di ciò che stai creando. Puoi nominare la tua prima penna nell'angolo in alto a sinistra. Dopo aver fatto clic sul tuo primo "Salva", potrai semplicemente condividere l'URL della pagina con amici, familiari e colleghi in modo che possano vedere su cosa stai lavorando.
Ecco come apparirà la tua penna con un po 'di codice (per gentile concessione di un progetto Free Code Camp chiamato Tribute Page):
Quando crei la tua penna, ti consigliamo di consultare le Impostazioni prima di iniziare. Quando fai clic sul pulsante "Nuova penna", dovresti vedere un modello di penna pronto per iniziare a inserire un codice. Nell'angolo in alto a destra sarà presente un pulsante "Impostazioni". Cliccaci sopra (dovresti vedere la schermata qui sotto).
Qui potrai consultare le schede HTML, CSS e JavaScript per aggiungere determinate informazioni. Nella scheda HTML, sarai in grado di aggiungere meta informazioni, cose che dovrebbero andare nel
scheda e così via. Sotto CSS, sarai in grado di aggiungere preprocessori CSS come LESS e Sass. Non solo, ma puoi aggiungere CSS esterni come Bootstrap e Foundation. Nella scheda JavaScript, puoi aggiungere un preprocessore JavaScript come Babel o CoffeeScript. Inoltre, puoi aggiungere in framework JavaScript esterni come Angular, React, Lodash, D3 e così via.
Infine, CodePen ti permetterà di cambiare la "Vista" che stai guardando. La vista predefinita è Vista Editor, che consente di inserire il codice e ottenere una piccola anteprima nella console di seguito. Ma ci sono anche altre opzioni, di cui una particolarmente utile è la visualizzazione "Pagina intera", in cui potrai vedere un progetto come se fosse in diretta su un sito web. Ci sono alcune altre viste disponibili per passare a, vale la pena giocarci!
CodePen è davvero uno strumento pulito e abbiamo solo toccato la superficie della sua utilità. Vale la pena andare su CodePen.io e usarlo per lavorare su alcuni progetti, quindi, se ne hai voglia, condividi con i tuoi amici o colleghi.
Cosa ne pensi di CodePen? Hai usato uno strumento simile? Facci sapere nella sezione commenti qui sotto!
