Codepen. Une aire de jeux pour le Front-End

Aujourd'hui je vais vous parlez d'un site web appelé Codepen.

Codepen est un site crée par Alex Vazquez , Tim Sabat , et Chris Coyier:

• Alex Vazquez est un full Stack Developper, Alex réalise le développement de la partie Javascript et Rails de Codepen.

• Tim Sabat est un full stack developper mais plus concentrés sur le coté back, il gere donc toute la partie Rails également pour Codepen.

• Chris Coyier quand a lui est un front developper ainsi qu'un designer, il code donc en HTML CSS JS

Ce site permet a la communauté Front-End de développer et de partager leur projets / snippets avec les technologies suivante: HTML CSS JAVASCRIPT, mais Codepen intègre également les frameworks tel que: Bootstrap,Jquery, Animate.css, Vue.js, React, et plus encore

voici l'interface de base de celui-ci:

Dans la sidebar on peut donc observer, nos activitées, nos pens (j'y revien plus tard), notre dashboard(tableau de bord) , ainsi que notre profile.

Apres nous avons l'onglet Explore.

Dans celui-ci nous retrouvons les pens, mais d'abord quesqu'un pens? 

Un pens c'est tout simplement un projet realiser par une personne de la communauté de CodePen, en voici un exemple:

Il faut savoir que ce site est ouvert a tous, si vous voulez creer des pens ou alors juste explorer et lire le code d'autre c'est tout a fait faisable.

Maintenant je vais vous expliquez comment on creer un pen:

1.  rendez vous sur le site de Codepen.io
2. Cliquer sur create comme l'image ci-contre.
3. Puis sur pen.

Une fois sur cette interface vous pouvez commencer a ecrire du code HTML CSS JS, un detail important sur codePen vous n'avez pas besoin de linker le CSS ou le JS

Voici un exemple de pen, que l'on peut creer:

Projet d'un compteur de jours restant avant le festival du DECIBEL 2019, cliquez ici pour voir le pen

Maintenant que l'on sait ce qu'est un pen et comment en creer un, pourquoi pas allez voir ceux des autres?

sur l'interface d’accueil, on vois diffèrents pen, il n'y a juste a cliquer dessus et on ouvre le pen, il faut savoir que le code peut etre parfois compilé. cela dépend de la technologie utilisé. ici nous voyons donc les Picked pens (les pen qui on ete choisi par le Staff de Codepen)

Pour conclure Codepen est parfait pour expérimenter, tester et découvrir de nouvelles possibilités en terme de Front-End, j'ai moi même utilisé ce site a de multiples reprises.

Source:

https://codepen.io/

https://codepen.io/freeCodeCamp/

Redacteur: Moulun Kevin