HEY

Participate in the next Webflow Challenge!

How to learn JavaScript with Webflow?

Do you often hear about HTML, CSS and JavaScript? Maybe it's time for you to try learning JavaScript with Webflow!

Updated on

10/6/2020

learn javascript with webflow
Photo by Leah Kelley from Pexels

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. In fact, today I'm going to show you how to learn JavaScript with Webflow.

Why learn JavaScript with Webflow?

You may have noticed it, but the majority of web programs and projects now include JavaScript. He's on a roll! Anyway, that's one of the reasons I got interested in it.

I've already started some theories. There's a whole range of websites that give rich information on this, but the ones I'm most interested in:

If you have other sources to advise me, I'll take it. Just put them on the commentary, or write me.

Above all, with the help of Webflow, you'll understand JavaScript fast enough!

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

learn javascript with webflow
Photo by Jonathan Petersson from Pexels

JavaScript in practice

If that's a whole new term for you, I understand you're having trouble following it. In fact, it is mostly 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 main focus of this article.

JavaScript in Webflow

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

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

learn javascript with webflow
Photo by Gelgas de Pexels

At the top right, under the sign , you have access to all the codes (especially JavaScript). If you want to analyze them and learn JavaScript with Webflow, you just have to export them :) All the animations that you will have created from Webflow will be automatically generated in JavaScript code.

Now let's go to the next step: try to understand JavaScript codes.

The animations are accessible in the bar on the right, under the lightning icon. Everything can be found 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 (or even delete existing ones):

  • number of repetitions of an effect
  • animation delay
  • change in colour
  • effector
  • the size of the elements
  • the animation on the flyover
  • etc.

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

learn javascript with webflow
Photo by Min An de Pexels

In short, you'll get a glimpse of how the developer of this template handled JavaScript when he created the site. So it would be easier to understand this language, and why not learn JavaScript with Webflow. Just sign up if you haven't already!

Conclusion
I think you've made your point there. JavaScript is probably not so new to you anymore. So, are you interested? At least, it does to me! That's why I'm really going to deepen this language!

Would you also be interested in learning HTML with Webflow, or learning CSS with Webflow?

YouTube: Learn JavaScript with Webflow

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training