Select Lesson

Introduction to JavaScript

JavaScript 102 - Intro to Graphics (Tangrams) (0:30 minutes, PRO)

JavaScript 105 - Food Frenzy (1:00 hour, PRO)

JavaScript 123 - Blockly Flags (1:20 hours, PRO)

JavaScript 103 - Drawing Flags (1:00 hour, PRO)

JavaScript 0 - Introduction to JavaScript (2:20 hours, PRO)

1: Beginner JavaScript, JS1

JavaScript 1 Course information

Resources for Lessons 1-10

Resources for Lessons 11-20

Resources for Lessons 21-30

Resources for Lessons 31-40

2: Advanced JavaScript, JS2

JavaScript 2 Course Information

JavaScript 2 Resources

3: Complex JavaScript, JS3

JavaScript 3 Course Information

JavaScript 3 Resources

JavaScript Resources

Introduction to JavaScript

JavaScript 102 - Intro to Graphics (Tangrams) (0:30 minutes, PRO)

JavaScript 105 - Food Frenzy (1:00 hour, PRO)

JavaScript 123 - Blockly Flags (1:20 hours, PRO)

JavaScript 103 - Drawing Flags (1:00 hour, PRO)

JavaScript 0 - Introduction to JavaScript (2:20 hours, PRO)

1: Beginner JavaScript, JS1

JavaScript 1 Course information

Resources for Lessons 1-10

Resources for Lessons 11-20

Resources for Lessons 21-30

Resources for Lessons 31-40

2: Advanced JavaScript, JS2

JavaScript 2 Course Information

JavaScript 2 Resources

3: Complex JavaScript, JS3

JavaScript 3 Course Information

JavaScript 3 Resources

Introduction to JavaScript

JavaScript is a wonderful programming language to learn. It is especially useful in Web Development and Game Development. These resources can help you learn more about JavaScript:

Why learn JavaScript?

Why learn Game Development?

Game Development Lesson plan

JavaScript 102 - Intro to Graphics (Tangrams) (0:30 minutes, PRO)

Project Description

A tangram is a puzzle that uses small, often brightly colored, wooden blocks to form different shapes. In this project we will use coordinates to draw those small block shapes and create a picture.

Learning Outcomes

Draw basic shapes by connecting points described by coordinates.

Activity

JavaScript 102 - Tangram Paper Activity

Go to course

JavaScript 105 - Food Frenzy (1:00 hour, PRO)

js105 Track Icon

Project Description

Create a cat or dog player who eats as many tasty treats as they can before the time runs out.

Learning Outcomes

Correctly sequence text based code, edit file paths and coordinates, and fix common errors.

Go to course Go to course notes

JavaScript 123 - Blockly Flags (1:20 hours, PRO)

js123 Track Icon

Project Description

Use rectangles, circles, triangles and stars to draw 10 flags of the world.

Learning Outcomes

Build increasingly complex flags by creating overlapping shapes using block functions.

Activity

JavaScript 123 - Blockly Shapes Activity (Functions)

Go to course Go to course notes

JavaScript 103 - Drawing Flags (1:00 hour, PRO)

js103 Track Icon

Project Description

Use text-based coding to make rectangles, circles, triangles and stars to draw 10 flags of the world. The flag designs become increasingly complex over the 10 tasks.

Learning Outcomes

Build increasingly complex flags by creating overlapping shapes using JavaScript functions.

Activity

JavaScript 103 - Drawing shapes with PaperScript Functions Activity (Functions)

Go to course Go to course notes

JavaScript 0 - Introduction to JavaScript (2:20 hours, PRO)

Project Description

Want to build your own apps and games? Start here! With Code Avengers' comprehensive JavaScript courses you'll learn one of the most widely used languages, and build lots of fun apps and games along the way.

In this 10 lesson intro to JavaScript you'll learn how to use variables, if statements, alerts and prompts to build your own quiz app. When you're done, you can build your first game with our Intro to Game Development listed in the projects section on the right. This course will introduce you to a new programming language. You will begin with following coordinate commands on a grid and eventually develop the knowledge needed to create a basic quiz, in ten easy lessons.

Learning Outcomes

An introduction to programming using JavaScript.

Resources

Activities

JavaScript 0.6 Naming JavaScript variables worksheet

Projects

JavaScript 102 - Intro to Graphics 60 mins - Tangrams and coordinates.
- Activity Coordinates: Tangrams worksheet
JavaScript 101 Sequence Grid Challenge 15 mins -Practice reading a sequence of code to determine the end point on the shapes grid.
- Activity Coordinates: Drawing Graphics
JavaScript 100 Intro to Game Dev 60 mins - Build a simple 2 player 2D top-down game where players race to collect coins while avoiding obstacles and enemies!

1: Beginner JavaScript, JS1

JavaScript 1 - Variables, If Statements, Loops (43:25 hours, PRO)

1.1: JavaScript 1 Course information

Project Description

Build a range of cool programs including a fitness checker, shopping calculator and screen time tracker as you learn the essentials of JavaScript with Code Avengers.

Learning Outcomes

Create a program using variables, conditional, and iterative structures that can handle invalid inputs, perform calculations and output data.

JavaScript programmers are hugely sought after by employers, so it’s valuable to know! Jump straight into building apps and games. Learn about variables, Booleans, if statements and loops while completing various projects, code challenges, bug hunts and robot missions.

This course covers:

Calculations & Variables - First up, we'll teach you how to let users have a conversation with your website, using prompts, variables and alerts.
If Statements & Booleans - Get your code to react differently to all sorts of situations by using Boolean values, confirm boxes and if statements.
While Loops - Using while loops to repeat certain parts of code can be very useful. Use loops to create a calculator and a quiz… but be careful not to write an infinite loop!
For loops & Testing - Learn about for loops and how to exit a loop early. After this module, you'll know how to handle invalid user input to stop your programs from crashing.

Resources

Go to course Go to course notes

1.2: Resources for Lessons 1-10

Activities

JavaScript 1.4 Datatypes: Chain reaction
JavaScript 1.5 JS—Valid variables
JavaScript 1.6 JS—Spot the bug
JavaScript 1.8 If statements: What is the output?
JavaScript 1.9 Crossword: Joining strings

Quizzes

JavaScript 1.2 Alerts Quiz
JavaScript 1.4 Maths Quiz
JavaScript 1.8 Variables Quiz
JavaScript 1.10 Strings Quiz

Projects

JavaScript 111 - Variables Grid Challenge
In this lesson use variables to determine where your player starts a grid and how far they should move.
JavaScript 118 - Variables Practice 1
Practice using variables with 5 different situations such as calculating the mortgage on a house or the discount price on an item for sale.
JavaScript 106 - Game Dev Features 1
Learn some of the features available in the game development projects. Here you can create and customize game objects and create a game with multiple levels.
JavaScript 110 - Game Dev with Variables
Build a 2 player 2D top-down game with enemies teleports keys and doors.
JavaScript 103 - Drawing Flags Tutorial
These 10 tasks that introduce the basics of drawing graphics, by drawing 10 flags of the world with increasing difficulty.
JavaScript 112 - 112 Flags Challenge 1
Test your graphics coding skills by drawing 10 flags from around the world. You should finish the JS103 - Flags Tutorial before attempting this challenge.
JavaScript 113 - 113 Flags Challenge 2
Test your graphics coding skills by drawing 20 flags from around the world. You should finish the JS123 - Blockly Flags Tutorial before attempting this challenge.

1.3: Resources for Lessons 11-20

Quizzes

JavaScript 1.12 If Statements Quiz
JavaScript 1.13 Boolean Quiz
JavaScript 1.16 Confirms Quiz
JavaScript 1.20 Null Quiz

Projects

JavaScript 121 - If Statements Grid Challenge
In this lesson the type and color of each shape will determine where you end up.
JavaScript 128 - If Statements Practice 1
Practice using if statements to do things like display the year you were born or whether or not you should sleep in today.
JavaScript 120 - Game Dev with If Statements
In this game the player slides across ice avoiding snowmen and spikes in order to collect the golden cup and win. Use prompts to control the number of enemies and difficulty level.
JavaScript 122 - Eye Spy
Use the PaperJS graphics library to draw your images then use prompts and if statements to quiz the player on what they see.

1.4: Resources for Lessons 21-30

Quizzes

JavaScript 1.23 While Loop Quiz 1
JavaScript 1.24 While Loop Practice Quiz
JavaScript 1.27 While Loop Bugs Quiz
JavaScript 1.30 While Loop Quiz 2

Projects

JavaScript 131 While Loop Grid Challenge
Here you'll need to pay careful attention to your current position on the grid as you loop through the code.
JavaScript 138 While Loops Practice 1
Practice while loops to keep track of purchases make sure users type in content and more.
JavaScript 133 Game Dev Loops
Use loops to ask users questions.
JavaScript 130 Game Dev with While Loops
Navigate a maze full of teleports collect the coins and unlock the goals to pass this stage! Use loops to build walls.
JavaScript 136 Awesomeness Calculator
Create a calculator that ranks your awesomeness. Use while loops to make sure the user enters the right kind of information.

Challenges

JavaScript Challenge 150 Shotput Scoreboard
The person who throws the shot-put the furthest wins! Use a loop to collect each throw and keep track of the best ones.
JavaScript Challenge 151 Boxing Scoreboard
The person who lands the most clean punches wins the fight! Use a loop to keep track of each fighters score.
JavaScript Challenge 152 Table Tennis Scoreboard
The first person to 11 points wins &mdash but you must win by at least 2 points! Use a loop to keep track of each player 's score until there is a winner.
JavaScript Challenge 153 Weightlifting Scoreboard
Build an app that records the total weight lifted with the snatch and clean and jerk lifts. Use loops to collect each lifter 's total weights and keep track of the winner!
JavaScript Challenge 154 Tennis Scoreboard
Be the first to score 4 times and beat your opponent by 2 to win a game of tennis! Use a loop and if statements to keep track of the score.

1.5: Resources for Lessons 31-40

Quizzes

JavaScript 1.33 User Input Quiz
JavaScript 1.35 Readability Quiz
JavaScript 1.38 For Loop Quiz
JavaScript 1.39 For Loop Practice Quiz

Projects

JavaScript 141 For Loop Grid Challenge
Keep track of how many times you 've been through each loop so you don 't end up in the wrong place.
JavaScript 148 For Loops Practice
Practice coding for loops that count down to the new year calculate division tables and more.
JavaScript 143 Game Dev Loops 2
Use loops to create rows of objects.
JavaScript 140 Game Dev with For Loops
The player must move crates to get the coins and the goal in this stage. Use loops to build puzzles.
JavaScript 147 Statistics Calculator
Use loops and prompts to get data from the user and calculate some basic statistics

Challenges

JavaScript 155 Athletics Scoreboard
Record the fastest time to win the race! Use a loop to record each runner 's time and figure out who gets a medal.
JavaScript 156 Golf Scoreboard
The person with the lowest score wins a round of golf! Use loops to collect a player 's score over multiple rounds and to give the total score.
JavaScript 157 Diving Scoreboard
Diving scores are based on the difficulty of the dive and are given by a group of judges. Learn how diving scores are calculated and code an app that gets the right result.
JavaScript 158 Gymnastics Scoreboard
To give a score in Gymnastics there needs to be a set of judges scoring difficulty and another set scoring execution. Use loops to collect and average the judges' scores.
JavaScript 159 Curling Scoreboard
In curling you score the most points by getting your stones closest to the center of the target. Use loops to get the scores for each of the 10 rounds.

2: Advanced JavaScript, JS2

JavaScript 2 - Strings, Functions, Arrays, Math (27:00 hours, PRO)

2.1: JavaScript 2 Course Information

This course covers:

String Functions - Understand how a web browser reads and modifies user input with ASCII codes and string functions.
Functions - Draw graphics and shapes using functions!
Math Object - The JavaScript Math object may sound boring, but what if we told you that you can create intriguing apps like a fortune teller, a game-of-chance dice game and a number guessing game? Impress your friends!
Arrays - Store, sort and print lists of data using a special type of variable called an array. Believe it or not, you can create a Pig Latin translator with arrays – we'll even show you how. Then make some fun games in our projects like Paper, Scissors, Rock a bug-catching game and even your own version of Snake!

Project Description

S.C.R.I.P.T. training is hard work. Can you complete the 40 lesson challenge and become an elite member? The course has a variety of exciting tasks including:

Programming robots to their destinations
Drawing a plan for the S.C.R.I.P.T. headquarters
Drawing a model of the Great Pyramid of Giza
Developing a fortune telling app
Refactoring a Chuck-a-luck game
Building a Pig Latin translator

Learning Outcomes

Programs with strings, functions , math, and arrays.

Go to course Go to course notes

2.2: JavaScript 2 Resources

Resources

Projects

JavaScript 200 Game Dev Features 2
We 'll show you some of the features in the next set of game development projects. Here you 'll learn how to use events in the game to trigger your own functions.
JavaScript 208 For Loops Practice
Practice coding for loops that count down to the new year calculate division tables and more.
JavaScript 210 Game Dev with Functions
Create a 2 player survival game! Withstand waves of enemies and collect the goal &mdash or be the last player standing &mdash to score points. You 'll make your own functions to spawn enemies.
JavaScript 220 Game Dev with Functions 2
Create a game like Space Invaders! Learn how to get functions to run when different events happen.
JavaScript 221 Function
Practice using functions to repeat chunks of code.
JavaScript 230 Game Dev with Math Functions
Create and use your own game objects. Make a robot and collect all the idols before the enemy catches you!
JavaScript 240 Game Dev with Arrays
Create a bug catching game using an array of images to animate items!
JavaScript 241 Function Grid Challenge
Learn about using arrays to store information.
JavaScript 242 Snake
Build your own version of the game Snake. Use the PaperJS graphics library to draw your images then use functions and arrays to create the snake and apples.

Quizzes

JavaScript 2.15 Functions Quiz 1
JavaScript 2.18 Function Scope Quiz
JavaScript 2.20 Functions Quiz 2
JavaScript 2.22 Math Object Quiz
JavaScript 2.25 Random Quiz
JavaScript 2.30 Refactor Quiz

3: Complex JavaScript, JS3

JavaScript 3 - Events, Animations, GUIs, Classes (19:15 hours, PRO)

3.1: JavaScript 3 Course Information

Want to make a graphical tank battle game? How about apps like an interactive whiteboard? We’ll show you how by introducing you to the PaperJS graphics library and teaching code that reacts to mouse clicks and keystrokes. Also awaiting you are 5 lessons on animation!

This course covers:

Mouse Events - What happens when the left mouse button is clicked? Learn how to write code that listens and responds to these events so you can make your programs more interactive.
Frame Events (Animation) - A frame rate of 24 frames per second (fps) means that the image is redrawn 24 times each second. Learn animation with up to 60 fps in Paper.js by using the onFrame function.
Key Events - Learn to capture every keystroke in order to add a whole new level of functionality to your apps.
Key & Vectors - Check which keys are pressed during animations to make more realistic looking movements. Use vectors to create a mini golf game!
Classes - Create your own tank objects that shoot bouncing bullets and challenge a friend to a battle!

3.2: JavaScript 3 Resources

Resources

Projects

JavaScript 301 Game Dev Robo Football
Use JavaScript to build a 2 player Robo Football game.
JavaScript 302 Game Dev Robo Ice Hockey
Use JavaScript to create a Robo Ice Hockey game.
JavaScript 312 Game Dev Olympic Race
Interested in game development? Try this Olympic themed project.
JavaScript 322 Game Dev Archery
Interested in game development? Try this archery project.
JavaScript 332 Game Dev Throwing a Ball
Do you want to add more features to the first archery project? Try this ball throwing project.
JavaScript 342 Game Dev Boxing
Do you want to add more features the the first archery project? Try this boxing project.

Quiz

JavaScript 3 Advanced-Numbers Quiz

Go to course Go to course notes

1. NAV BAR

13HRS

Resources

Guide

</div>
<div class="js comments_comment-content">
<div class="comments_comment-profile-info">
<span class="js comments_comment-profile-name">{{codeName}}</span>
        
<span class="js comments_comment-timestamp">{{timestamp}}</span>
      </div>
<p class="js comments_comment-text">{{comment}}
<div class="js comments_comment-buttons">
<span class="js comments_comment-replies-count" data-upvotes="{{upvotes}}">{{upvotes}}</span>
<button class="js comments_comment-up-vote"></button>
<button class="js comments_comment-reply"></button>
      </div>
    </div>
    {{#if parentID}}

{{else}}
<div class="js comments_comment-replies">
        
      </div>
    {{/if}}
  </div>

<div class="guiders-preview_content">
      {{#if complete}}{{else}}
<h4 class="guiders-preview_subtitle">{{subtitle}}</h4>
      {{/if}}
<h2 class="guiders-preview_title">{{{title}}} {{#if complete}}{{{message}}}{{/if}}</h2>
      {{#if complete}}{{else}}
<div class="guiders-preview_description"><p>{{{message}}}</div>
      {{/if}}
      {{#if complete}}
<div class="guiders-preview_social-buttons">
<a href="{{{twitterUrl}}}" target="_blank" onclick="ai.publish(true, null, event);" class="js guiders-preview_social-button -twitter"><i class="guiders-preview_social-icon icon-ca-twitter"></i> {{{twitter}}}</a>
<button class="js guiders-preview_social-button -facebook" onclick="ai.share.facebook();ai.publish(true, null, event);"><i class="guiders-preview_social-icon icon-ca-facebook"></i> {{{facebook}}}</button>
      </div>
      {{/if}}
    </div>
  </div>  
  {{#if tour}}
<p class="guiders-preview_action">{{{action}}}
  {{/if}}

{{#with pricing}}
<div id="pricing-popup">
<div class="pricing">
<h3 class="pricing_header">{{{header}}}</h3>
<p class="pricing_info">
    
    {{{text}}}

<div class="pricing_sections">
    {{#each sections}}
<div class="pricing_section-wrapper">
<div class="pricing_section">
<h3 class="pricing_section-header">{{header}}</h3>
          {{#if list}}
            {{#each list}}
<p class="pricing_section-info">{{this}}
            {{/each}}
          {{else}}
<p><span class="js- pricing_section-price">{{price}}</span> <span class="js- pricing_section-dom">{{dom}}</span> <span class="pricing_section-details">{{{details}}}</span>
<p class="pricing_section-info">{{{text}}}</p>
          {{/if}}
        </div>
        {{#if button1}}
<button class="pricing_button js signup-button">{{../button1}}</button>
        {{/if}}
        {{#if button2}}
<button class="pricing_button -red js-quote-button" data-analytic="submit-quote">{{../button2}}</button>
        {{/if}}
      </div>
    {{/each}}
    </div>
    
  </div>
</div>
{{/with}}

<div id="quote" class="js quote">
    <div class="pricing">
        <h3 class="pricing_header">{{{header}}}</h3>
        <p class="pricing_info">{{{text}}}</p>
        <div class="js pricing_sections">
        {{#each inputs}}
            <div class="pricing_input-wrapper {{size}}">
                <label class="pricing_label">{{placeholder}}</label>
                {{#if list}}
                    <select required name="{{name}}" class="js pricing_input">
                    {{#each list}}
                        <option value="{{#if name}}{{name}}{{/if}}">{{#if name}}{{name}}{{else}}{{this}}{{/if}}</option>
                    {{/each}}
                    </select>
                {{else}}
                    <input required type="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{name}}" placeholder="{{placeholder}}" class="js pricing_input" value="{{value}}">
                {{/if}}
            </div>
        {{/each}}
        </div>
        <button class="js-teacher-quote pricing_button -red" data-analytic="submit-quote-button Quote">{{{button}}}</button>
  </div>
</div>

{{else}}
            {{{level}}}
          {{/if}}
        </h2>
<h3 class="track-popup_name">{{name}}</h3>
<p class="track-popup_description">{{description}}</p>
      </div>
    </div>
<div class="track-popup_header-right">
      {{{trackBox}}}
      
      {{#if secondaryButton}}
<a href="{{trackUrl}}" class="js track-popup_header-button">{{secondaryButton}}</a>
      {{/if}}
    </div>
  </div>
<div class="js track-popup_tracks">
    {{#each courses}}
<div class="track-popup_course">
<div class="track-popup_course-left">
<div class="track-popup_course-left-content">
<h2 class="track-popup_course-name">{{name}} {{type}}</h2>
<p class="track-popup_course-info">{{{description}}}</p>
          </div>
        </div>
<div class="track-popup_course-right">
          {{{boxHtml}}}
<a href="{{url}}" class="track-popup_course-button {{#if ../disableTrack}}is-disabled{{/if}}">{{../startNowButton}}</a>
        </div>
      </div>
    {{/each}}
  </div>
</div>

<div class="guides-info-section">
<h3 class="guides-info-section_heading">Key</h3>
<div class="js guides-info-section_key">
<p class="js guides-info-section_key-text">There are five types of lesson segments:</p>
<i class="guides-info-section_key-icon icon-ca-puzzle"></i> <span class="guides-info-section_type">Concepts</span>: <p class="guides-info-section_key-description">Notes on the concepts covered in the CA lessons.</p>
<i class="guides-info-section_key-icon icon-ca-rocket"></i> <span class="guides-info-section_type">Activities</span>: <p class="guides-info-section_key-description">Off-line and online activities to supplement the CA lessons. </p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Lessons</span> = <p> class="guides-info-section_key-description"Online lessons created by CA.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Projects</span> = <p class="guides-info-section_key-description">Online projects created by CA to reinforce your learning.</p>
<i class="guides-info-section_key-icon icon-ca-ca-logo"></i> <span class="guides-info-section_type">CA Quizzes</span> = <p class="guides-info-section_key-description">Online quizzes created by CA to review previous lessons.</p>
<p class="js guides-info-section_key-text">These small segments can be organised into three sections</p>
<p><span>Prior Learning</span>: These are recap/review segments</p>
<p><span>The Lesson</span>: This section leads you through the concepts, activities and CA lessons.</p> 
<p><span>Extension</span>: These are additional concepts, activities and lessons.</p>
  </div>
</div>

<div class="js purchase-item {{handler}} {{type}} {{#if purchased}}has-purchased{{/if}} {{#if isComplete}}is-complete{{/if}} {{#if new}}-new{{/if}}" {{#if id}} data-id="{{id}}" {{/if}} {{#if plan}} data-plan="{{plan}}" {{/if}} {{#if item}} data-item="{{item}}" {{/if}} {{#if url}} data-url="{{url}}" {{/if}}>
<img src="{{img}}" class="purchase-item_img">
<p class="purchase-item_header">{{title}}</p>
    {{#if description}}
<p class="purchase-item_text">{{description}}</p>
    {{/if}}
<p class="purchase-item_price"><span class="purchase-item_price-price {{#if salePrice}}-strikethrough{{/if}}">{{price}}</span> {{#if salePrice}}<span class="purchase-item_price-sale">{{salePrice}}</span>{{/if}}</p>
<p class="purchase-item_type">USD {{per}}</p>
<div class="purchase-item_buttons">
      {{#each buttons}}
        {{#if url}}
<a href="{{url}}" {{#if target}} target="{{target}}" {{/if}} class="js purchase-item_button external-link" title="{{text}}">{{text}}</a>
        {{else}}
<button class="js purchase-item_button {{hander}}" title="{{text}}">
<span class="js show-spinner">{{text}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
          </button>
        {{/if}}
      {{/each}}
    </div>
    {{#if info}}
<p class="purchase-item_info">{{info}}</p>
    {{/if}}
  </div>

<div class="js payment-form">
<div class="payment-form_content">
      {{{header}}}
<div class="payment-form_inputs">
<div class="js payment-form_input-wrapper -wide -radios">
<div class="js payment-form_option" data-type="ccd">
<label class="js payment-form_label" title="{{creditCard}}">{{creditCard}}</label> 
<span class="js payment-form_option-radio is-active"></span>
          </div>
<div class="js payment-form_option" data-type="paypal">
<label class="js payment-form_label" title="Paypal">Paypal</label> 
<span class="js payment-form_option-radio"></span> 
          </div>
        </div>
      </div>
<form class="js payment-form_input-wrapper -wide ccd_form">

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{firstName}} *</label>
<input class="js payment-form_input -dark" type="text" data-recurly="first_name">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{lastName}} *</label>
<input class="js payment-form_input" type="text" data-recurly="last_name">

</div> 
        </div>
        
        {{#if includeSignup}}
<div class="js payment-form_inputs include-signup">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{email}} *</label>
<input class="js payment-form_input -dark" type="email">

</div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{password}} *</label>
<input class="js payment-form_input" type="password">

</div> 
          </div>
        {{/if}}

<div class="payment-form_inputs">
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{cardNumber}} *</label>
<div data-recurly="number"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">CVV *</label>
<div data-recurly="cvv"></div>
          </div> 
        </div>
<div class="payment-form_inputs">  
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{month}} *</label>
<div data-recurly="month"></div>
          </div>
<div class="payment-form_input-wrapper">
<label class="js payment-form_label">{{year}} *</label>
<div data-recurly="year"></div>
          </div> 
<input type="hidden" name="recurly-token" data-recurly="token">

</div>
      </form>
<div class="payment-form_input-wrapper -wide js code">
<label class="js payment-form_label">{{couponCode}} </label>
<input type="text" name="coupon" class="js payment-form_input">

</div>
      
      {{#if includeSignup}}
<div class="js payment-form_input-wrapper include-signup">
<span class="js payment-form_option-checkbox policy-consent -dark" data-value="yes"></span>
<label class="js payment-form_label -checkbox -no-caps">
            {{{consent}}}
          </label>
        </div>
      {{/if}}

<div class="payment-form_buttons">
<div class="js payment-form_error"></div>
<button class="js payment-form_continue-button">
<span class="payment-form_continue-button-text js show-spinner">{{buttonText}}</span>
<div class="js show-spinner" data-loader="circle-side"></div>
        </button>
      </div>
    </div>
  </div>

<!doctype html>

<body class="slide -{slideType}">
<header class="slide_header"> 
<i class="slide_logo icon-ca-ca-logo"></i>
<span class="slide_title">{header}</span>
<div class="slide_controls">
<button id="presentation-jump" class="js slide_controls-button -jump" onclick="window.opener.ai.presentation.previousSlide(true)"><i class="slide_controls-icon icon-ca-left-arrow -double"></i><i class="slide_controls-icon icon-ca-left-arrow -double"></i></button>
<button id="presentation-prev" class="js slide_controls-button -prev" onclick="window.opener.ai.presentation.previousSlide(false)"><i class="slide_controls-icon icon-ca-left-arrow"></i></button>
<button id="presentation-next" class="js slide_controls-button -next" onclick="window.opener.ai.presentation.nextSlide(false)"><i class="slide_controls-icon icon-ca-right-arrow"></i></button>
<button id="presentation-skip" class="js slide_controls-button -skip" onclick="window.opener.ai.presentation.nextSlide(true)"><i class="slide_controls-icon icon-ca-right-arrow -double"></i><i class="slide_controls-icon icon-ca-right-arrow -double"></i></button>
</div>
</header>

{content}
</section>

</body>

<div class="js- projects-popup -{{type}}">
<div class="js- projects-popup_top">
    {{#if image}}
<div class="js- projects-popup_image-wrapper">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
  </div>
<div class="js- projects-popup_bottom">
<div class="projects-popup_info">
<div class="projects-popup_header">
<span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
<div class="projects-popup_progress-bar">
<div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
    {{#if image}}
<div class="js- projects-popup_image-wrapper {{#if promo}}-promo{{/if}}">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
<img src="{{image}}" class="js- projects-popup_image">

</div>
    {{/if}}
  </div>
</div>

<div class="pdf-header_title">{{name}} Answers</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if solution}}
<pre class="prettyprint pdf-section_code">{{{solution}}}</pre>
        {{else if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{answer}}}
            {{/each}}
          </ol>
        {{else if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

<div class="pdf-header_title">{{name}} Instructions</div>
</header>
<section class="pdf-section">
  {{#each lessons}}
<div class="pdf-section_lesson-title">{{lessonNo}}. {{{title}}}</div>
    {{#each tasks}}
<div class="pdf-section_task">
<h2 class="pdf-section_task-title">{{lessonNo}}.{{taskNo}}. {{{objective}}}</h2>
        {{#if goal}}
          {{{goal}}}
        {{/if}}
        {{#if questions}}
<p>Review Quiz Questions:<br>

<ol class="pdf-section_list">
            {{#each questions}}
<li class="pdf-section_list-item">{{{question}}}
            {{/each}}
          </ol>
        {{/if}}
        {{#if answer}}
<p>{{{answer}}}
        {{/if}}
      </div>
    {{/each}}
  {{/each}}
</section>
<script>addEventListener("load", function (event) { prettyPrint() }, false);</script>

{{#each this}}
<div class="course-box -{{theme}}">
<div class="course-box_content">
<div class="course-box_top-bar">
<div class="course-box_top-bar-left">
<span class="course-box_type">{{level}}</span>
<span class="course-box_title">{{{name}}}</span>
          </div>
<div class="course-box_top-bar-right">
<span>{{hours}} HRS</span>
<span class="course-box_top-post"></span>
<span class="course-box_preview-btn">Preview <i class="icon-ca-play-full course-box_preview-btn-triangle"></i></span>
          </div>
        </div>
<div class="course-box_details">
<p class="course-box_description">{{{description}}}</p>
<div class="course-box_buttons">
<div class="course-box_buttons-left">
              {{#if progress}}
<a href="{{url}}" class="button course-box_resume-button">Resume</a>
              {{else}}
<a href="{{url}}" class="button course-box_resume-button">Start</a>
              {{/if}}
            </div>
<div class="course-box_buttons-right">
<button class="button course-box_details-button">View Details</button>
<div class="course-box_content-footer">
<div class="course-box_footer-info">
                  
                </div>
<div class="course-box_footer-info">
                  {{difficulty}}
                </div>
<div class="course-box_footer-info">
                  {{taskCount}} Tasks
                </div>
              </div>
            </div>
          </div>
<div class="course-box_footer">
<div class="course-box_footer-info">
                  
            </div>
<div class="course-box_footer-info">
              {{difficulty}}
            </div>
<div class="course-box_footer-info">
              {{taskCount}} Tasks
            </div>
          </div>
        </div>
      </div>
<div class="course-box_preview">
        {{#if image}}
<div class="course-box_preview-image">
<image src="{{image}}" class="course-box_preview-image-image">
          </div>
        {{else}}
<div class="course-box_preview-video">
<div class="course-box_preview-video-play">
<div class="course-box_preview-video-play-icon">
<i class="icon-ca-play"></i>
              </div>
            </div>
          </div>  
        {{/if}}
      </div>
<div class="course-box_percentage-top">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
<div class="course-box_percentage-bottom">
<span class="course-box_percentage-circle"></span>
<div class="course-box_percentage-percent-wrapper">
<span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
<i class="icon-ca-star course-box_percentage-star"></i>
<i class="icon-ca-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
    </div>
  {{/each}}

<!doctype html>
<style>
    html {
        font-size: 0 !important;
    }

.t-quiz > * {
        font-size: initial !important;
        margin-bottom: 0 !important;
    }
</style>
<link rel="stylesheet" href="/dist/style.min.css?0.052468554855654936">
{{#each css}}
{{/each}}
<script>
    window.CHINA = true;
    window._MIN_ = '';
    window.CURRENT_VERSION = '1';
    window.IFRAME = true;
</script>
<script src="/js/jquery.js?v=yOKaW5htuhTZ_ZEWQ-n3h0ennNBkN3zmVmtasuaxVKk"></script>
<script src="/js/jquery-ui.min.js?v=_CzTpg6QTje_ISm9yjDTYORSNm5j6oJ56j0nP6TCzhc"></script>

download
new file
upload media
rename

delete

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

table {
        position: absolute;
        width: 360px;
        height: 300px;
        background-color: black;
        top: 50%;
        opacity: 0.9;
        margin: auto;
        margin-top: -150px;
        left: 0;
        right: 0;
        cursor: pointer;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

#code {
        display: none;
    }
</style>

<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
<iframe id="myApp" {events} width="{width}" height="{height}"></iframe>
<p>Learn to make apps, games and websites with <a style="color: #ef5555" href="/">CodeAvengers.com</a>

<table onclick="this.style.display='none';displayApp()">
<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<div id="code">
{content}
</div>

<!doctype html>

<title>{title}</title>
<meta name="viewport" content="width=device-width">

canvas {
        background-color: white;
        border: 1px solid black;
    }

td {
        padding: 24px;
    }

p {
        line-height: 28px;
    }

.social-share img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

h1 {
        font-size: 28px;
    }

.fullscreen footer, .fullscreen header {
        display: none;
    }

.fullscreen table {
        top: 170px;
    }
</style>

<header>
<a href="{protocol}//{domain}"><img src="{protocol}//{domain}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
</header>

<canvas id="paperscriptCanvas" tabindex="0"
        {canvasEvents} width="{width}" height="{height}"></canvas>

<footer>
<p>Learn to make apps, games and websites with <a style="color: #ef5555;" href="/">CodeAvengers.com</a>

</footer>

<tr>
<td>  
<h2>Instructions</h2>
<p>{instructions}
  
<p>
<b>Click to start</b>

</table>

<title>Code Avengers Profile</title>
<meta name="viewport" content="width=device-width">

<header>
<a href="https://codeavengers.com"><img src="/images/logo.png"></a>
<a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a>
</header>
<section>
<h2>My Profile</h2>
<img src="/images/profile9.png" width="180" alt="profile">

</a>
<strong>Name</strong>: Supacoda<br>

<strong>Birthday</strong>: 14<sup>th</sup> April<br>

<strong>Height</strong>: 1.79m<br>

<h3>My Super Powers</h3>
<p>I have super endurance, once I start, I keep going until I finish!
	
<p>I will eat anything and lots of it... if there is a plate with food on it, I will eat it!