Become a

Webflow Developer.

Learn Javascript by using Webflow. Empower yourself to take on higher value projects &
earn more money.

Thanks! You're in. We will notify you when it's ready.

Oops! Something went wrong while submitting the form.


// set the progress bar
function evaluateCourseProgress() {
  const progressLine = $(".progress__line");
  const progressPercentage = $(".progress__percentage");

  completed = (lessonsCompletedArray.length / lessonCount) * 100;

  progressLine.css("width", `${completed}%`);
  progressPercentage.text(Math.round(completed));
}
evaluateCourseProgress();

// set action buttons
prevLesson
  ? prevLessonButton.attr("href", prevLesson)
  : prevLessonButton.remove();
nextLesson
  ? nextLessonButton.attr("href", nextLesson)
  : nextLessonButton.remove();

nextLessonButton.click(function (e) {
  e.preventDefault();
  if (!lessonsCompletedArray.includes(currentLessonUrl)) {
    lessonsCompletedArray.push(currentLessonUrl);
    member.updateMetaData(metaData);
    window.location.href = nextLesson;
  } else {
    window.location.href = nextLesson;
  }
});

Do more with Webflow.

Empower yourself to uncover new possibilities.

Take on higher value projects

No longer feel held back by Webflow’s limitations. Power up your projects to meet the growing demands of your clients.

Feel secure in your capabilities

Instead of copying scripts hoping they never need to change, understand your work to make it future-proof.

Work seamlessly with integrations

Many common Webflow tools are “low-code”, still requiring some coding to make the most of them.

Sell clients without hassle.

Love using Webflow? So do we. Let's keep it that way.

Do more with less

Use Webflow's designer to quickly create the foundation, then sprinkle in some code to tie it all together.

Fill the missing void

Webflow is powerful, but can't do everything. Take your projects to the next level with minimal lines of code.

Build confidence

Stop feeling stuck when selling Webflow. Sell the final result & feel confident using Webflow to get you there.

Further bridge the gap between design & development.

No code is always better when you know a little code.

Remain in control

Take the driver's seat with your clients projects using Webflow + any custom code you need.

Work through "limitations"

Extend your projects' capabilities by doing what's not yet natively possible in Webflow.

Enhance your builds

Uncover new possibilities by understanding how your code works with Webflow.

With Webflow, coding doesn't have to be scary.

The Complete Guide

Learn Javscript for Webflow

$(document).ready(function() {
  // do something ...
});

The Basics

Learn variables, data types, operators & other basics to begin coding in Webflow.

const output = result;
console.log(result);

Efficient Coding & Debugging

Learn how to analyze & implement actions & tools to help you make your code work properly.

for (item in items) {
  if (true) {
    // do something...
  }
}

Control Structures

Learn about paradigms that allow you to loop over lists, create coditional statements & more.

<div> data-trigger="true" class="accordion__trigger"><div>
<div> data-body="true" class="accordion__body><div>

The DOM & Events

Learn about DOM traversal & manipulation as well as how it relates to your Webflow projects.

const url = window.location.pathname
const newUrl = `${domain}/lessons/`

Numbers & Strings

Learn about paradigms that allow you to loop over lists, create coditional statements & more.

function toggleAccordion() {
  // do something ...
}

Functions

Learn one of the primary building blocks of coding in Webflow — functions.

const user = {
       "name": name,
       "age": age,
      }

Objects

Learn to work with similar pieces of data & how they relate to your Webflow project.

const names = ["Joe", John", "Sam"]
names.push("Josh");

Arrays

Learn about lists & iterable things as well as how to transform them.

navigator.clipboard.readText().then(
  clipText => document.querySelector(".editor").innerText += clipText);

Browser APIs

Learn about some of the most common browser APIs & how they can add value to your project.

return downloadData(url) // returns a promise
  .then(v => {
    return processDataInWorker(v)  // returns a promise
  })
}

Async Javascript

Need to fetch data from someone else? Not a problem. We've got you covered.

const name = Josh;
localStorage.setItem('name', name);

Browser Storage

Learn how we can utilize the browser you work to act as a mini-database.

// more
// to
// come

& more!

Lots of bonus content that is geared specifically toward using Javascript with Webflow.

The Practical Guide

Learn how we built everything.

No secrets — we break down all scripts used to turn this Webflow site into a custom web application.

Custom Navigation

Implement custom scroll triggers & features that run on page load & click.

Real-Time Search

Create a real-time search widget using the native Webflow search results page.

Data Storage & Course Progress

Learn how we are using Memberstack's front-end API to store your custom user data & course progress.

Interactive Quizzes

Test your knowledge with dynamic quizzes using the Webflow CMS & some custom code.

And much more!

This is only the start — we take Webflow to the next level.

Who is this course for?

you love Webflow & would love to use it for all of your web projects.

you copy & paste scripts into your projects but don't really understand how they work.

you don't know how to change or modify scripts you use.

your productivity has hit a wall due to lack of technical knowledge.

you want to learn Javascript, but only what you need to know for Webflow.

you have been too intimidated to learn Javascript in the past.

some apps you use require Javascript to unlock their full potential (Memberstack API, Slick Slider, etc.)

you have been limited in the types of Webflow projects you can take on.

you waste money outsourcing developers to write code you can't.

Hassle-free

Pricing, made simple.

No complicated or confusing pricing tiers. You get everything in one.

$149/yearly

Exclusive access to...

JS for WF — The Complete Guide

Build This Course — The Practical Guide

Community-voted Webflow builds with step-by-step tutorials

Over 100 snippets

Our monthly newsletter

Our Slack community

Future courses, builds & products

Thanks! You're in. We will notify you when it's ready.

Oops! Something went wrong while submitting the form.

FAQs

How does this course differ from other Javascript courses?

While this is a Javascript course, it is specific to Webflow. This course does not include many of the granular, pragmatic features typically required, such as Git & Github, Classes & Object Oriented Programming, Tooling & Workflows as well as Frameworks & Meta-Programming. These aren’t needed to code with Webflow.

Are their any prerequisites?

The only prerequisite for this course is some working experience with Webflow, however the more experience you have building in the designer the easier it will be to grasp certain concepts.

Does this course teach me how to use Webflow?

For the most part, no. You may stumble across a new thing or 2 that you hadn't noticed or worked with before, but it assumes that you have pretty good working knowledge of Webflow. If you are looking to learn more about how to use Webflow, consider visiting their university.

Why learn Javascript when Webflow is a no-code tool?

The reality is that custom code isn't going anywhere — at least not any time soon. Webflow can't do it all, and even the release of their Logic feature this summer is anticipated to be more an equivalent to Zapier (back-end actions) as opposed to custom code (front-end actions). With that being said, custom code will continue to be around for the coming years as a supplement to work with no-code & low-code tools.

Will this course help me with 3rd-party apps for Webflow?

In many cases, yes. We built this course using Memberstack's front-end API, which is a product that requires custom code. This is the nature of many no-code & low-code tools — while they can do a lot without code, they can't cover everything. This is where custom code really shines.

How long will it take to complete?

That is completely up to you. While this is a course, it also acts as a guide as you learn & grow as a Webflow developer. Think of it as a learning tool & a refresher for when you forget a topic or need to brush up on it.

Still have questions?

Reach out & we will do our best to answer you!

Contact

Coding doesn't have to be scary.

Level up your career while still using your favorite website tool — Webflow.

Thanks! You're in. We will notify you when it's ready.

Oops! Something went wrong while submitting the form.