C'est pas parce qu'on s'y connait
Qu'on n'a pas besoin d'aide

Découvrez nos contriburteurs
Découvrez les talents cachés
de nos contributeurs !
Facebook page Web y es-tu ? Twitter MemePasGarantie Twitter Yoplet Google + Web y es-tu ? Contactez notre équipe Les visages de Web y es-tu ?

Code Academy : apprendre facilement jQuery (entre autres)

Photo d'un écran avec des lignes de codePeu importe le poste qu’on occupe dans une équipe web, ou l’approche qu’on en a quand on bidouille à la maison, avoir des connaissances techniques reste un atout important. Que ce soit pour mieux appréhender les problématiques de nos collègues développeurs / intégrateurs ou disposer d’une meilleure polyvalence lors de travaux en indépendant.

Pour développer ces connaissances, vous avez bien sûr l’incontournable Site du Zéro. Cependant je vais aborder ici un outil moins connu au sein de nos frontières mais beaucoup plus interactif : Code Academy.

Certes le site est en anglais, mais rassurez-vous inutile d’être bilingue. Le vocabulaire n’est pas complexe (niveau scolaire) et, même si vous ne vous sentez pas à l’aise au début, la structure des exercices proposés reste assez répétitive pour comprendre facilement ce que l’on attend de nous par la suite.

Comment fonctionne la Code Academy ?

En premier lieu il faut s’inscrire pour créer un profil (pas de panique c’est rapide).

Ensuite vous aurez accès à plusieurs cours en fonction de ce que vous voulez apprendre. J’ai titré cet article sur jQuery car ce langage très accessible vous permettra d’enrichir rapidement vos pages web, mais libre à vous de vous diversifier.

Les différents cours de la Code Academy

Comme vous le voyez sur l’image ci-dessus, les cours disponibles portent sur :

  • HTML et CSS (avec certains des nouveaux éléments d’HTML 5 et CSS 3)
  • PHP (en cours de réalisation)
  • jQuery
  • JavaScript
  • Projet (où vous combiner tout ce qui a été appris plus haut)
  • Python (plutôt réservé à ceux qui veulent devenir développeur)
  • Ruby (idem)
  • API’s (pour interagir avec des services externes : Twitter, Evernote…)

Chaque cours comprend plusieurs sections, elles-même composées de plusieurs exercices qui se présentent sous la forme suivante :

Exemple d'exercice de la Code Academy

À gauche les instructions de l’exercice, à droite un espace pour coder avec la possibilité de sauvegarder le code, de le remettre à zéro ou de le soumettre à validation. Si le code est conforme à ce qui est attendu, on passe à l’exercice suivant. Sinon un message d’erreur avec une indication s’affiche.

Tout le site fonctionne comme ça : on est ici dans la pratique permanente, laquelle se fait de façon extrêmement progressive avec une approche pédagogique. Ainsi la plupart des exercices mettent un indice à disposition si vous êtes en difficulté, et votre progression est récompensée par des médailles ornant votre profil.

Code Academy est un excellent outil pour acquérir de solides bases rapidement. Prenons l’exemple de jQuery. Une fois tous les exercices effectués, on peut rapidement mettre en application des choses sympa (faire bouger des éléments au clavier, modifier des propriétés CSS ou des attribut HTML en fonction de certaines actions, ajouter toute sortes d’effets…) mais on est loin d’en avoir fait le tour. Cependant on a les outils pour pouvoir approfondir ses connaissances en s’aidant de la documentation, voir de continuer avec les parties avancées du tutoriel correspondant sur le Site du Zéro. Une fois les bases acquises, la motivation et la vitesse de progression suit.

Au passage, comme le rappelle la Code Academy, il n’est pas indispensable d’être un fin connaisseur de JavaScript pour s’attaquer à sa librairie jQuery. Pour savoir pourquoi, je vous invite à finir la première section du tutoriel jQuery.

Allez, tous à vos claviers !

Le site de la Code Academy

Le Site du Zéro

Notre traduction d’un chouette tutoriel sur l’animation avec HTML 5 et CSS 3

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>