Tu entends souvent parler de HTML, de CSS et de JavaScript ? Il est peut-être temps pour toi d’essayer de comprendre ces langages, surtout si tu veux poursuivre ta carrière de webdesigner freelance, sur Webflow. D’ailleurs, aujourd’hui, je vais te montrer comment apprendre JavaScript avec Webflow.

Pourquoi apprendre JavaScript avec Webflow ?

Peut-être l’as-tu remarqué, mais la majorité des programmes et projets web incluent désormais le JavaScript. Il a le vent en poupe ! En tout cas, c’est l’une des raisons qui m’ont motivé à m’y intéresser.

J’ai déjà commencé quelques théories. Il y a toute une panoplie de sites web qui donnent de riches informations là-dessus, mais ceux qui m’ont le plus intéressé :

• Chaine YouTube : https://www.youtube.com/watch?v=lDO14...
• Site web : https://developer.mozilla.org/fr/docs...
• Évents JavaScript : https://www.w3schools.com/js/js_event...

Si tu as d’autres sources à me conseiller, je suis preneur. Mets-les juste en commentaire, ou écris-moi.

Par-dessus tout, avec l’aide de Webflow, tu comprendras JavaScript assez vite !

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

JavaScript, en pratique

Si c’est un tout nouveau terme pour toi, je comprends très bien que tu as du mal à suivre. En fait, c’est surtout grâce à JavaScript qu’on peut obtenir des effets, animations, calculs ainsi qu’autres facteurs invisibles à l’oeil nu, mais très utiles pour un site web, logiciel ou application.

Toutefois, l’animation est surtout celle qui nous intéresse dans cet article.

JavaScript dans Webflow

Encore ici, je t’invite à choisir un modèle de site qui t’inspire sur Webflow (de préférence, avec beaucoup d’animations ; c’est ce qui te permet le plus facilement d’apprendre JavaScript avec Webflow). Pour cela, rends-toi donc dans le Showcase.

Ensuite, tu dois dupliquer le modèle concerné, et ensuite le publier pour t’en approprier. De cette manière, tu pourras accéder aux codes, et éventuellement, les modifier.

En haut à droite, sous le signe <>, tu as accès à tous les codes (notamment JavaScript). Si tu veux les analyser et ainsi, apprendre JavaScript avec Webflow, tu n’as qu’à les exporter :) Toutes les animations que tu auras créées à partir de Webflow seront automatiquement générées en code JavaScript.

Passons maintenant à l’étape suivante : essayer de comprendre les codes JavaScript.

Les animations sont accessibles dans la barre à droite, sous l'icône en forme d’éclair. Tout se trouve sous la “page load”. Une prévisualisation des animations étape par étape est même possible. Tous les effets (pour le modèle de site que tu as choisi) sont effectivement recensés dans cette barre-là.

De là, tu as même le droit de les modifier (voire, supprimer des existants) :

• nombre de répétitions d’un effet
• délai d’une animation
• changement de couleur
• élément déclencheur d’un effet
• la taille des éléments
• l’animation au survol
• etc.

Pour les plus aguerris, l’ajout de code JavaScript (dans le but d’ajouter de nouvelles animations) dans cette interface est envisageable.

Bref, tu auras un aperçu de la façon dont le développeur de ce modèle s’y est pris en JavaScript, lorsqu’il a créé le site. Il serait donc plus facile de comprendre ce langage, et pourquoi pas d’apprendre JavaScript avec Webflow. Il suffit de t’y inscrire si ce n’est pas encore fait !

Conclusion
Je pense que tu as fait le tour là. JavaScript n’est sûrement plus très nouveau pour toi. Alors, est-ce que cela t’intéresse ? En tout cas, à moi, oui ! C’est pourquoi je vais vraiment approfondir ce langage !

Ça t’intéresserait aussi d’apprendre HTML avec Webflow, ou d’apprendre CSS avec Webflow ?

YouTube : Apprends JavaScript avec Webflow

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be