Tutorials
/
JavaScript Tutorials

JavaScript Tutorials

At this point, you’re familiar with the fundamentals of HTML and CSS. (If not, read through the HTML tutorials and then come back!) You know that HTML lets you write the content for your webpage, and CSS lets you style that content. JavaScript lets you make your webpages interactive.

Chapter 1: From p5.js to JavaScript

From p5.js to JavaScript From p5.js to JavaScript

Build on your p5.js knowledge to learn JavaScript.

Chapter 2: Calling JavaScript

Calling JavaScript Calling JavaScript

Start making interactive webpages.

Chapter 3: Variables

Variables Variables

Store information in variables.

Chapter 4: Developer Tools

Developer Tools Developer Tools

Meet your new best friend.

Chapter 5: Creating Functions

Creating Functions Creating Functions

Learn about creating functions in JavaScript.

Chapter 6: Interactive HTML

Interactive HTML Interactive HTML

Learn about creating interactive HTML with JavaScript.

Interactive HTML Examples

Remove What's Happening Remove What's Happening

Remove clickbait from the internet.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Chapter 7: If Statements

If Statements If Statements

Make decisions in your JavaScript code.

If Statements Examples

Game of Nim Game of Nim

Play the Game of Nim against the computer!

Feed the Ducks Feed the Ducks

Create an interactive story using if statements!

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Chapter 8: For Loops

For Loops For Loops

Repeat code multiple times.

For Loops Examples

Twelve Days of Christmas Twelve Days of Christmas

Use a for loop to sing the Twelve Days of Christmas

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Chapter 9: Arrays

Arrays Arrays

Store multiple values.

Chapter 10: Libraries

Libraries Libraries

Learn about using libraries in JavaScript.

Libraries Examples

Simple Weather Map Simple Weather Map

View the current weather on a map.

Washington DC Tour Washington DC Tour

Take a tour of my favorite Washington DC places!

Distance Comparison Map Distance Comparison Map

Compare distances on multiple maps.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Chapter 11: Objects

Objects Objects

Group related variables together.

Chapter 12: Fetch

Fetch Fetch

Fetch content from other URLs.

Fetch Examples

Etsy API Etsy API

Use the fetch function to get data from an API.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Chapter 13: Bootstrap

Bootstrap Bootstrap

Create a website using Bootstrap.

Bootstrap Examples

Personal Webpage (default Bootstrap styles) Personal Webpage (default Bootstrap styles)

Use Bootstrap to style your personal webpage.

Personal Webpage (Cyborg Bootstrap theme) Personal Webpage (Cyborg Bootstrap theme)

Use Bootstrap themes to style your personal webpage.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

React Tutorials

React React

Use React to build an interactive web app.

React JSX React JSX

Reactify your syntax with JSX.

React Components React Components

Build your webpage out of components.

React State React State

Add data to your components.

Loops Loops

Use loops and iterate over arrays.

Keys Keys

How (and Why) to use Keys in React.

Lifting State Lifting State

Share state between components.

CSS in React CSS in React

Use CSS to style your React apps.

Fetching Data Fetching Data

Fetch data from a server in React.