Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build an Online Paint Website
Course Overview
01 Project Preview (2:22)
02 What You'll Need (2:05)
Source Files
Mammoth Interactive Courses Introduction
00 About Mammoth Interactive (1:12)
01 How To Learn Online Effectively (13:46)
00b (Prerequisite) Introduction to HTML
01. Course Requirements (2:55)
02. What Is Jsbin (3:15)
03. Setting Up The Html Document (2:41)
04. Header Tags And Paragraphs Tags (4:06)
05. Styles (3:32)
06. Bold Underline And Italic Tags (3:10)
07. Adding In A Link (1:38)
08. Adding In A Image (3:00)
09. Adding A Link To An Image (1:54)
10. Lists (4:03)
11. Tables (3:29)
12. Different Kinds Of Input (4:59)
13. Adding In A Submit Button (3:01)
14. Scripts And Style Tags (3:27)
00c (Prerequisite) Introduction to CSS
01. Course Requirements (3:41)
02. Html Styles Crash Course (4:45)
03. Adding Code To The CSS (4:46)
04. Adding In IDs To The CSS (5:16)
05. Classes In CSS (2:39)
06. Font Families (5:04)
07. Colors In CSS (5:44)
08. Padding In CSS (3:06)
09. Text Align And Transforms (3:14)
10. Margins And Width (5:33)
11. Changing The Body (4:11)
12. Latin Text Generator (1:57)
13. Adding In A Horizontal Menu With HTML And CSS (7:53)
14. Adding A Background Image (4:04)
15. Playing Around With Margins In CSS (2:20)
00d (Prerequisite) Intro to Javascript
01 Introduction To The Course (3:43)
Source Files
00d-2 Variables and Data Types
02 01 What Will We Learn In This Section (0:44)
02 02 Variables (10:21)
02 03 Data Types (5:41)
02 04 Variable Mutation (6:53)
02 05 Type Coercion (6:52)
02 06 Coding Challenge (1:36)
02 07 Coding Challenge Solution (2:43)
02 08 Section Summary (0:46)
Source Files
00d-3 Operators
03 01 What Will We Learn In This Section (0:35)
03 02 Basic Operators (15:32)
03 03 Operator Precedence (5:41)
03 04 Coding Challenge (2:11)
03 05 Coding Challenge Solution (5:52)
03 06 Section Summary (0:56)
Source Files
00d-4 Conditional Statements
04 01 What Will We Learn In This Section (0:36)
04 02 If Else Statements (11:43)
04 03 Boolean Logic (7:57)
04 04 Switch Statements (10:54)
04 05 Truthy And Falsie Values (6:03)
04 06 Equality Operators (4:38)
04 07 Coding Challenge (2:25)
04 08 Coding Challenge Solution (4:54)
04 09 Section Summary (1:07)
Source Files
00d-5 Functions and Arrays
05 01 What Will We Learn In This Section (0:37)
05 02 Functions (9:46)
05 03 Function Statements And Expressions (7:37)
05 04 Arrays (10:09)
05 05 Coding Challenge (3:49)
05 06 Section Summary (1:26)
Source Files
00d-6 Objects
06 01 What Will We Learn In This Section (0:38)
06 02 Objects And Properties (9:49)
06 03 Objects And Methods (12:25)
06 04 Objects Vs Primitives (16:17)
06 05 Coding Challenge (0:51)
06 06 Coding Challenge Solution (5:13)
06 07 Section Summary (0:42)
Source Files
00d-7 Loops
07 01 What Will We Learn In This Section (0:34)
07 02 Loops (15:03)
07 03 Iteration (12:35)
07 04 Coding Challenge (1:01)
07 05 Coding Challenge Solution (6:32)
07 06 Section Summary (0:45)
Source Files
00d-8 JavaScript Execution
08 01 What Will We Learn In This Section (0:52)
08 02 Javasript Parsers And Engines (5:19)
08 03 Execution Contexts And Execution Stack (2:26)
08 04 Creation And Execution Phases (6:23)
08 05 Hoisting (2:13)
08 06 Scoping (4:52)
08 07 Scope Chain (3:20)
08 08 This Keyword (4:16)
08 09 Coding Challenge (0:46)
08 10 Coding Challenge Solution (3:21)
08 11 Section Summary (0:47)
Source Files
01 Build the User Interface
01 Set Up The Project (4:36)
02 Build A Toolbar (8:21)
03 Import Bootstrap Icons (9:28)
04 Build A Canvas (8:11)
Source Files
02 Build Toolbar Functionality
01 Build Main Javascript Files (7:03)
02 Build Tool Controls (8:37)
03 Launch A Server (7:53)
03A Install Http Server (5:59)
03B Disable Cache (6:35)
04 Load An Image From User's Computer (7:40)
04A Where To Find Images (1:19)
05 Put Image Onto Canvas (13:55)
06 Resize Canvas To Fit Image (6:44)
07 Save Image (9:53)
08 Undo An Action (11:16)
09 Redo An Action (7:05)
Source Files
03 Build Drawing Functionality
01 Enable Freehand Drawing Tool (3:44)
02 Listen For Mouse Down (11:32)
03 Listen For Mouse Move (8:28)
04 Listen For Mouse Release (9:54)
05 Highlight Selected Tool (7:30)
Source Files
04 Build Shape Tools
01 Draw A Line (15:54)
02 Create A Temporary Canvas (12:50)
03 Draw A Rectangle (13:27)
04 Draw A Filled Rectangle (9:15)
05 Draw A Circle (16:18)
06 Draw A Filled Circle (6:51)
Source Files
05 Build Color Pickers
01 Build A Stroke Color Picker (7:28)
02 Get User Input Of Stroke Color (7:43)
03 Build A Fill Color Picker (5:37)
04 Get User Input Of Fill Color (10:03)
Source Files
06 Build a Text Tool
01 Build A Text Tool (10:05)
02 Draw Text On Canvas (14:16)
Source Files
08 01 What Will We Learn In This Section
Lesson content will be unlocked within 30 minutes.
Teachable is working on this bug.
No further action will be required on your part
.
Thank you for your patience