Javascript Fun: Build a Photo Editor App! | Chris Dixon | Skillshare

Javascript Fun: Build a Photo Editor App!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 5m)
    • 1. Introduction

    • 2. Creating the HTML structure

    • 3. Styling with CSS

    • 4. Drawing to the canvas

    • 5. Uploading and displaying images

    • 6. Understanding pixels

    • 7. Looping through image data

    • 8. Greyscale, sepia and invert effects

    • 9. Adding additional effects

    • 10. Clearing effects

    • 11. Thank you!

    • 12. Follow me on Skillshare!

13 students are watching this class

About This Class

Welcome to the Javascript fun series!

For web design or development, there is 3 must know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will build in this course will be a Javascript Photo Editing App.

All the required tools are free to download, I will be using the following:

Visual Studio Code Text Editor:

Chrome Web Browser:

We begin by creating the user interface with HTML. The we apply styling using CSS.

Then we add Javascript, this is where the real magic happens!

You will learn things such as:

  • 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!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!