Learn Javascript & HTML5 Canvas - Build A Paint/Drawing App

Javascript Front End Web App Development - HTML5 Canvas & CSS3 - Build a drawing app from scratch - hands-on training

4.20 (52 reviews)
Udemy
platform
English
language
Web Development
category
Learn Javascript & HTML5 Canvas - Build A Paint/Drawing App
1,386
students
6 hours
content
Nov 2021
last update
$69.99
regular price

What you will learn

Understand the basics of HTML5 & CSS (I'll explain the concepts as we code the project)

Understand the basics of Javascript & HTML5 canvas (we have separate modules for these 2 topics)

Build a completely dynamic drawing/paint app with HTML5 canvas, CSS3 & Javascript from scratch

Know how front end web app development works by building this project

Create step by step algorithms for projects before turning them into codes

Improve your logical problem solving skills

Improve your front end design and development skills

Create HTML5 skeletons of web applications

Design web applications with various CSS styling concepts

Make web applications work with Javascript concepts

Get a foundation in HTML canvas concepts

Description

Practice makes perfect. Start your journey into becoming a professional front end web developer here!

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Front end Web app development practice series. 

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem solving isn't as easy as learning a bunch of syntaxes. 

But we aim to make it easy for you. 


What will you learn in this course? 

In this course, you'll learn how to build your own Drawing/paint App from the ground up with just HTML5 canvas, Javascript and CSS  in just a couple of hours

You'll learn:

1. How to create the HTML5 structures of this app. 

2. How to make the app pretty with CSS (design, design, design!) 

and last but never the least 

3. How to make the app work (draw on the canvas) with logic and algorithm, i.e Javascript 

4. Basic concepts of Javascript and HTML5 canvas (concepts related to this project). 

By the end of the course, you'll be one stop closer to creating front end web apps like a pro. You could even try creating other smaller web apps and games. 


How is this course designed? 

I've made this course as easy to understand as possible. I've structured it in such a way that each section will handle one of the 3 languages covered here. 

Introduction: This is where I'll explain how the app works, it's various features and what we'll be using to achieve the same results. 

Module 1: Every professional developer writes algorithms before creating a software or game. We'll be writing the a step by step algorithm for our app, and I'll be explaining what we'll do in every step. 

Module 2: I'll be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our app, devoid any colors or design elements. 

Module 3: Here, we'll "beautify" our app. We'll be using CSS elements to give our game colors and styles. At the end of this module, we'll have a Drawing/Paint web app that'll look like the final result, albeit one that dose not draw on the canvas yet. 

Module 4: I'll be covering some basic concepts of Javascript in this module. I'll only cover concepts that we'll need for our app's Javascript code though. If you already know the basics, you can skip this module. 

Module 5:  I'll be covering some basic concepts of HTML5 canvas in this module. I'll only cover concepts that we'll need for our app's Javascript/HTML5 canvas code though. If you already know the basics, you can skip this module. 

Module 6: This would be the meat of the course. We'll be delving into Javascript & HTML5 canvas code of our app in this module, and I'll teach you how to make the app work (let the user draw on the drawing canvas and use the various tools in the toolbar) in here. 

Final section: Finally, I'll give you some ideas on how to improve/enhance the app further and make it your own in terms of design and functionalities. 


This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures. 

2. If you're a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You'll learn the basics of everything used in this project (HTM5, CSS3, Javascript, HTML canvas).  I'll be explaining every single line of code I'll be using in this course, so you won't feel lost. 

3. If you have the passion for programming, and if you know the basics of HTML5 and CSS, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course. 

4. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction. 

5. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.


So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of front end web app development!


Content

Introduction

Introduction

Algorithm of the game app

Algorithm of the game app

HTML5 Building Blocks of the App

Create skeleton of the HTML5 code
Add meta tags
Create the toolbar's skeleton
Create the color input box
Create the range input slider
Create the brush, erase, reset & save button and the drawing canvas
HTML code for the app with the images

Styling the Drawing/Paint app - achieving the final look

CSS basics - link tag, selectors and comments
CSS3 properties - box sizing and user select settings
Style the drawing canvas
Style the toolbar - part 1
Style the toolbar - part 2
Style the toolbar - part 3
Style the color change tool - part 1
Style the color change tool - part 2
Style the size change tool
Style the remaining tools/buttons - part 1
Style the remaining tools/buttons - part 2
Style.css file - Drawing/Paint app
HTML & CSS (Related to the course)

[OPTIONAL] Javascript Basic Concepts (related to this project)

Connecting HTML and script/JS files
An introduction to variables and assigning values
Mathematical operators and alerts
Conditional statements - if else statement
Conditional statements - Switch case
Loops - For loop
Arrays - 1 dimensional arrays
Arrays - 2 dimensional arrays
An introduction to functions (function definition and calls)
Intro to DOM - getElementById and InnerText
Intro to DOM - adding click events to buttons
More Event listeners Part 1
More Event listeners Part 2

[OPTIONAL] HTML5 Canvas Basic Concepts (related to this project)

Step 1 & 2 - Getting the canvas and creating the drawing object
Drawing a line (also explanation on canvas dimensions and pixel points)
Drawing & coloring a shape with poly lines (a path)
Drawing & coloring a circle and arcs

Javascript code for the app - Making the app work

Initializing variables and conditions - part 1
Initializing variables and conditions - part 2
Make the brush work - brush button click event & function
Make the brush work - mouse down event part 1
Make the brush work - mouse down event part 2
Make the brush work - mouse down event part 3
Make the brush work - draw on mouse drag
Make the brush work - mouse up event
Make the eraser work
Make the color change tool work
Make the size change tool work
Make the reset button work
Make the save button work
Add default conditions for when the app loads
Complete code of the app
Javascript & HTML5 Canvas Practice Test

Conclusion & Feature ideas

New features that you can try to create for this game
Conclusion & Bonus - Continue your journey

Reviews

Erika
August 30, 2022
The presenter is doing an excellent job describing the concepts and steps being taken. It’s as though you’re looking over their shoulder while they build the app.
Warren
March 28, 2020
The instructor occasionally mispronounces a word (according to US english), but she covers the material just enough to help me past that. It is nice to actually see an app come together.
Lewis
December 31, 2019
I don't believe you are using a brush. This represents no more than an afternoon of reading MDN docs. It works and I'm happy to say it's broken down and not awful code.
Ângelo
October 7, 2018
This course is a great opportunity to improve knowledge in this interesting functionality of draw by code. Create animations, and everything is taught step by step with detailing.
Jlin
March 20, 2018
Aarthi is a natural born educator. Her greatest strength in this class is simplifying difficult concepts into easy to understand language. She ensures that there are no gaps or misunderstandings, especially in the javascript section (which experienced individuals understand how complicated it can become). Her explaination of basic javascript is better than anything I've read/watched on youtube or other Free coding sites. Overall, Aarthi made the course effective, efficient and enjoyable. All the videos and material is very well organized. I hope she continues teaching.
Leslie
January 30, 2018
The instructor explains everything relative to the project. And I'm very grateful for the lessons on JavaScript basics!
Will
December 3, 2017
Aarthi does a tremendous job of explaining what we learn in this course. She gives some background on what some code means, not just how to write the code. After finishing this course, I realize that Aarthi does know what she is instructing her students to learn, from what she knows. Anyone that wants to learn, no matter the subject, I recommend Aarthi to everyone!
Stephen
November 9, 2017
In this course I gained experience in using the HTML canvas element. We developed a real-world paint type application that runs in a browser. You can use the program developed in this course to create a drawing/painting, and download the resulting .png file to your computer. The tools used in this course are the Google Chrome browser and the Brackets code editor. We created the HTML, CSS3, and JavaScript code files.
Sahan
October 31, 2017
Another cool course from her! Well done Aarthi. You are always amazing on that business. I'm enrolled in some of your courses. All are very well structured and amazing with much more details. I have worked with some others instructors but really she is very nice person i ever met on this site. Yah those are not a fancy words for describe her. You had taken more effort to doing this. And happy to say its is cool and awesome. See you in next course as soon as possible. :)
Maliha
October 30, 2017
well done u are amazing... i'm enrolled in all of ur courses ... all are very good ... u r a excellent teacher.. keep up the great work (Y)
Ly
October 29, 2017
the course is very good. it help me understand many thing which relate canvas. thank the instructor very much.
Suman
September 7, 2017
I think that this course is very effective and is and is as equally effective as a face to face course.

Charts

Price

Learn Javascript & HTML5 Canvas - Build A Paint/Drawing App - Price chart

Rating

Learn Javascript & HTML5 Canvas - Build A Paint/Drawing App - Ratings chart

Enrollment distribution

Learn Javascript & HTML5 Canvas - Build A Paint/Drawing App - Distribution chart
1310532
udemy ID
8/2/2017
course created date
11/20/2019
course indexed date
Bot
course submited by