Do you often hear about HTML, CSS and JavaScript ? Maybe it's time for you to try to understand these languages, especially if you want to pursue your career as a freelance webdesigner, on Webflow. By the way, today I'm going to show you how to learn JavaScript with Webflow.

Why learn JavaScript with Webflow?

Maybe you've noticed, but the majority of programs and web projects now include JavaScript. It is on the rise! In any case, this is one of the reasons that motivated me to get interested in it.

I have already started some theories. There are a whole host of websites that give rich information on this, but the ones that interested me the most :

• YouTube channel: https://www.youtube.com/watch?v=lDO14...
• Website : https://developer.mozilla.org/fr/docs...
• JavaScript events : https://www.w3schools.com/js/js_event...

If you have any other sources to recommend, I'm interested. Just put them in comments, or write me.

Above all, with the help of Webflow, you will understand JavaScript quite quickly!

There is a YouTube video in which I describe this at the bottom of the article. Support me by subscribing to the YouTube channel "Happy Desk Design".

JavaScript, in practice

If this is a brand new term for you, I understand very well that you have trouble following. In fact, it is mainly thanks to JavaScript that we can obtain effects, animations, calculations and other factors invisible to the naked eye, but very useful for a website, software or application.

However, animation is the one we are most interested in in this article.

JavaScript in Webflow

Here again, I invite you to choose a site template that inspires you on Webflow (preferably with a lot of animations; this is the easiest way to learn JavaScript with Webflow). To do this, go to the Showcase.

Then, you have to duplicate the concerned model, and then publish it to make it your own. In this way, you will be able to access the codes, and eventually, modify them.

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.

Let's move on to the next step: trying to understand the JavaScript codes.

The animations are accessible in the bar on the right, under the lightning icon. Everything is under the "page load". A step by step preview of the animations is even possible. All the effects (for the site model you have chosen) are actually listed in this bar.

From there, you even have the right to modify them (even delete existing ones):

• number of repetitions of an effect
• delay of an animation
• color change
• trigger for an effect
• the size of the elements
• animation on the flyover
• etc.

For the more experienced, adding JavaScript code (in order to add new animations) in this interface is possible.

In short, you will have a glimpse of how the developer of this template did it in JavaScript, when he created the site. So it would be easier to understand this language, and why not to learn JavaScript with Webflow. Just sign up if you haven't done so yet!

Conclusion
I think you have done the trick here. JavaScript is probably not very new for you anymore. So, are you interested in it? At least, I am! That's why I'm really going to look into this language!

Would you also be interested inlearning HTML with Webflow, orCSS with Webflow?

YouTube: Learn JavaScript with Webflow

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be