Learn JS & jQuery

In this course you will learn how to use JS to redefine what's possible in Webflow. We'll provide you with tons of examples specific to Webflow and empower you to implement custom scripts that boost your website's functionality.

See course curriculum
Buy F'in Pro to get access

Basics

In this section, you'll cover different data types in Javascript, and you'll learn some basic terminology.
Basics

Forms

In this section, learn how to do cool stuff with forms — from validating inputs to sending data across the web
Forms

Cookies

Here, you'll learn how to store and retrieve data from cookies.
Cookies

Debugging

In this section, you're going to learn how to debug your code like a pro.
Debugging

jQuery

In this section, you'll learn how to do a lot of useful tricks with jQuery.
jQuery

Objects

Here, you'll learn how to work with objects like a pro — from regular expressions to the date object and more.
Objects

Debugger

Chapter 
 — 
2
 lesson
 lessons
Debugger

Console: Log

Chapter 
1
 — 
3
 lesson
 lessons
Console: Log

Forms

Chapter 
1
 — 
1
 lesson
 lessons
Forms

Introduction

Chapter 
1
 — 
3
 lesson
 lessons
Introduction

Introduction

Chapter 
1
 — 
1
 lesson
 lessons
Introduction

Introduction

Chapter 
1
 — 
2
 lesson
 lessons
Introduction

The Regex Object

Chapter 
1
 — 
2
 lesson
 lessons
The Regex Object

Console: Table

Chapter 
2
 — 
2
 lesson
 lessons
Console: Table

Math Object

Chapter 
2
 — 
2
 lesson
 lessons
Math Object

Mouse Events: Click

Chapter 
2
 — 
6
 lesson
 lessons
Mouse Events: Click

Using Js Cookie

Chapter 
2
 — 
1
 lesson
 lessons
Using Js Cookie

Validating Forms

Chapter 
2
 — 
1
 lesson
 lessons
Validating Forms

Variables

Chapter 
2
 — 
1
 lesson
 lessons
Variables

Console: assert

Chapter 
3
 — 
1
 lesson
 lessons
Console: assert

Functions

Chapter 
3
 — 
2
 lesson
 lessons
Functions

Saving a cookie

Chapter 
3
 — 
3
 lesson
 lessons
Saving a cookie

The Change event

Chapter 
3
 — 
2
 lesson
 lessons
The Change event

The Date Object

Chapter 
3
 — 
4
 lesson
 lessons
The Date Object

The Event Object

Chapter 
3
 — 
1
 lesson
 lessons
The Event Object

Conditional Statements

Chapter 
4
 — 
3
 lesson
 lessons
Conditional Statements

Console: clear

Chapter 
4
 — 
1
 lesson
 lessons
Console: clear

Getting cookie values

Chapter 
4
 — 
1
 lesson
 lessons
Getting cookie values

Mouse Events: Double Click

Chapter 
4
 — 
5
 lesson
 lessons
Mouse Events: Double Click

The String Object

Chapter 
4
 — 
10
 lesson
 lessons
The String Object

Working with form submit

Chapter 
4
 — 
2
 lesson
 lessons
Working with form submit

Accessing Browser Debuggers

Chapter 
5
 — 
1
 lesson
 lessons
Accessing Browser Debuggers

Mouse Up

Chapter 
5
 — 
4
 lesson
 lessons
Mouse Up

Objects

Chapter 
5
 — 
1
 lesson
 lessons
Objects

Storing submitted data

Chapter 
5
 — 
2
 lesson
 lessons
Storing submitted data

Updating cookie values

Chapter 
5
 — 
3
 lesson
 lessons
Updating cookie values

Deleting Cookies

Chapter 
6
 — 
1
 lesson
 lessons
Deleting Cookies

Loops

Chapter 
6
 — 
4
 lesson
 lessons
Loops

Mouseout

Chapter 
6
 — 
5
 lesson
 lessons
Mouseout

The Focus Event

Chapter 
6
 — 
3
 lesson
 lessons
The Focus Event

jQuery Functions

Chapter 
7
 — 
8
 lesson
 lessons
jQuery Functions

Mouse Events: Hover

Chapter 
7
 — 
5
 lesson
 lessons
Mouse Events: Hover

Showing and hiding items based on cookie values

Chapter 
7
 — 
1
 lesson
 lessons
Showing and hiding items based on cookie values

Complete weflow form demo

Chapter 
8
 — 
1
 lesson
 lessons
Complete weflow form demo

DOM

Chapter 
8
 — 
1
 lesson
 lessons
DOM

Mouse Events: Scroll

Chapter 
8
 — 
5
 lesson
 lessons
Mouse Events: Scroll

Saving Browser History to a cookie

Chapter 
8
 — 
1
 lesson
 lessons
Saving Browser History to a cookie

JQuery Selectors

Chapter 
9
 — 
1
 lesson
 lessons
JQuery Selectors

Operate shopping cart with a cookie

Chapter 
9
 — 
1
 lesson
 lessons
Operate shopping cart with a cookie

Window Events

Chapter 
9
 — 
2
 lesson
 lessons
Window Events

Keyboard Events: Keypress

Chapter 
10
 — 
4
 lesson
 lessons
Keyboard Events: Keypress

Remembering User site preferences

Chapter 
10
 — 
1
 lesson
 lessons
Remembering User site preferences

Arrays

Chapter 
11
 — 
2
 lesson
 lessons
Arrays

Keyboard Events: Keyup and KeyDown

Chapter 
11
 — 
5
 lesson
 lessons
Keyboard Events: Keyup and KeyDown

Webflow copy paste demos

Chapter 
12
 — 
2
 lesson
 lessons
Webflow copy paste demos

Collection lists

Chapter 
13
 — 
2
 lesson
 lessons
Collection lists
{ Lesson 1 } 
How to access browser debuggers
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Add item to a collection list.
{ Lesson 1 } 
Demo
{ Lesson 1 } 
If statement
{ Lesson 1 } 
Using console.assert()
{ Lesson 1 } 
Using console.clear()
{ Lesson 1 } 
Using console.log()
{ Lesson 1 } 
Using console.table()
{ Lesson 1 } 
Using debugger
{ Lesson 1 } 
How to delete cookies
{ Lesson 1 } 
Introduction DOM
{ Lesson 1 } 
Forms
{ Lesson 1 } 
Introduction to functions
{ Lesson 1 } 
Get Cookie values
{ Lesson 1 } 
What is Javascript
{ Lesson 1 } 
Introduction: Event Types: Using Event functions
{ Lesson 1 } 
What is a cookie ?
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Click
{ Lesson 1 } 
Double Click
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Scroll
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Demo
{ Lesson 1 } 
Demo
{ Lesson 1 } 
Saving a string to a cookie
{ Lesson 1 } 
Save browsing history to a cookie
{ Lesson 1 } 
Showing and hiding items based on cookie value
{ Lesson 1 } 
Displaying form data on another element
{ Lesson 1 } 
Overview
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Overview
{ Lesson 1 } 
Introduction: Focus
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Introduction
{ Lesson 1 } 
Updating cookie values
{ Lesson 1 } 
Using JsCookie
{ Lesson 1 } 
Demo
{ Lesson 1 } 
Introduction: Reserved Words
{ Lesson 1 } 
Clone
{ Lesson 1 } 
Load
{ Lesson 1 } 
Preventing default form submit behaviour
{ Lesson 2 } 
Arrays in webflow
{ Lesson 2 } 
Target an item and append it to the bottom.
{ Lesson 2 } 
Switch statements
{ Lesson 2 } 
Inspecting Objects
{ Lesson 2 } 
Specify columns
{ Lesson 2 } 
Open the debugger first then run this code.
{ Lesson 2 } 
Anonymous Functions
{ Lesson 2 } 
What is a library vs A script
{ Lesson 2 } 
Stopping Webflow Interactions
{ Lesson 2 } 
Chaining functions
{ Lesson 2 } 
Count Key Presses
{ Lesson 2 } 
Use keydown()
{ Lesson 2 } 
The while Loop
{ Lesson 2 } 
The Math Object
{ Lesson 2 } 
Disable a button after click
{ Lesson 2 } 
Double Click to change
{ Lesson 2 } 
Toggle color changes on hover.
{ Lesson 2 } 
Use listeners to toggle visibility.
{ Lesson 2 } 
Toggle color changes on mouse out/ over.
{ Lesson 2 } 
Using Scroll to change text size
{ Lesson 2 } 
Saving an array to a cookie
{ Lesson 2 } 
Storing form data with cookies.
{ Lesson 2 } 
Using our validation code with change()
{ Lesson 2 } 
Get day
{ Lesson 2 } 
Blur
{ Lesson 2 } 
Finding emails in a div
{ Lesson 2 } 
Lowercase method
{ Lesson 2 } 
Get the user cookie, modify its age.
{ Lesson 2 } 
Add class
{ Lesson 2 } 
Resize
{ Lesson 2 } 
Preventing form submit until agree is checked
{ Lesson 3 } 
Ternary operator
{ Lesson 3 } 
Inspecting Arrays
{ Lesson 3 } 
How does JS run on the page?
{ Lesson 3 } 
Adding content to a page
{ Lesson 3 } 
Disable your keyboard
{ Lesson 3 } 
Reveal on keydown
{ Lesson 3 } 
The do...while Loop
{ Lesson 3 } 
Change button color after click
{ Lesson 3 } 
Implement listener using on() method.
{ Lesson 3 } 
Toggle text decorations on hover.
{ Lesson 3 } 
Use mouseup
{ Lesson 3 } 
Toggle underline on mouse out/ over.
{ Lesson 3 } 
Infinite Scroll on list.
{ Lesson 3 } 
Saving an object to a cookie
{ Lesson 3 } 
Get Month
{ Lesson 3 } 
Demo: Check valid signup passwords using focus and blur events
{ Lesson 3 } 
Uppercase method
{ Lesson 3 } 
Modify the shopping cart cookie.
{ Lesson 4 } 
Removing selections