site icon

Hi, I’m Chris

I am a web developer teaching
regular people how to code

~ Welcome to my blog ~

Learn Javascript by building fun projects!

Learning Javascript or any programming language can be hard.

Thats why I have created the Javascript Fun Series!

The aim of these free tutorials is to build fun projects using HTML, CSS and vanilla Javascript, to see how they all fit together.

The courses are approximately 1 hour long each, and follow a pattern of:

  • Building the UI with HTML
  • Styling and layout using CSS
  • Then linking up the UI with Javascript to bring them to life!

There is currently 5 courses in the series and counting, and here is the projects in more detail, in order of difficulty:

Javascript Fun: Build a Tip Calculator!

tip calculator image

Topics covered:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Functions
  • Event handlers
  • Manipulating the DOM
  • performing calculations and storing in variables
  • String concatenation
  • Converting values to a number
  • Setting the number of decimal places of a number

Javascript Fun: Build a Guess The Number Game!

guess the number game image

Topics covered:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Functions
  • Comparison (if, else if, else statements)
  • Event handlers
  • Arrays & pushing values to arrays
  • Manipulating the DOM
  • Adding styles & attributes with Javascript
  • Javascript Math
  • String concatenation
  • Incrementing
  • And much more

Javascript Fun: Build a Number Comparison Game!

number comparison game image

Topics covered:

  • Creating HTML interfaces
  • Styling with CSS
  • CSS Animations and keyframes
  • CSS Gradients
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • Displaying images
  • Manipulating the DOM
  • Working with and looping through arrays of objects
  • Setting CSS with Javascript
  • Template strings
  • Using the splice and slice methods
  • Javascript Math functions
  • The ternary operator
  • If statements and the return keyword
  • setInterval, clearInterval and setTimeout
  • And much more

Javascript Fun: Build a Music Player App!

music player image

Topics covered:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • Manipulating the DOM
  • Performing calculations and storing in variables
  • Javascript arrays
  • Looping through arrays
  • Using Javascript to create HTML elements (createElement, createTextNode & appendChild)
  • HTML5 Audio Player default and custom settings
  • How to create custom elements to control the audio element
  • Setting the audio source dynamically
  • Checking the readyState of the audio player
  • Getting the value of slider inputs
  • Calculating the value of the HTML progress element
  • Basic debugging
  • Including Fontawesome icons
  • And much more

Javascript Fun: Build a Photo Editor App!

photo editor image

Topics covered:

  • Creating HTML interfaces

  • Styling with CSS

  • Incorporating Javascript and linking external files

  • Variables

  • Const and let

  • ES6 Arrow Functions

  • Event handlers

  • Manipulating the DOM

  • Drawing to the canvas

  • Using the canvas 2d context

  • Working with file readers

  • Uploading images

  • How pixels are structured

  • Looping through pixel data

  • Manipulating and replacing pixels on the canvas

  • And much more!

    These courses are ordered here in what I would consider "difficulty" order, but feel free to take in any order.

    Hope you enjoy, and looking to add more projects in the future...


- By Chris Dixon

Chris Dixon is a web developer and teacher. Teaching thousands of students mainly in Vue.js React.js, WordPress and web development.