Introduction Complete

Advance To
The Next Level Now

Complete Level 1 in only 12 hours.

Introduction Complete

Advance To
The Next Level Now

Complete Level 1 in only 12 hours.

Secure Payment

Free Trial Complete

Advance To The Next Level
In Only 12 Hours

Get 40% off level 1 JavaScript—normally $39

Secure payment—you'll be taken directly to PayPal

Introduction Complete

Buy Now to Access
Lessons 11–40 and Projects

Get 40% off level 1—normally $39

Secure payment—you'll be taken directly to PayPal

Your free trial includes lessons 1–10

Buy Now to Access
Lessons 11–40 and Projects

Get 40% off level 1—normally $39

Secure Payment—you'll be taken directly to PayPal

Free Trial Complete

Buy Now to Access
Lessons 6–20 and Projects

Get 35% off level 1—normally $29

Secure Payment—you'll be taken directly to PayPal

Your free trial includes lessons 1–10

Buy Now to Access
Lessons 11–20 and Projects

Get 35% off level 1—normally $29

Secure Payment

Your free trial includes lessons 1–5

Buy Now to
Access Lessons 6–20

Get 35% off level 1—normally $29

Secure Payment

Introduction Complete

Advance To
The Next Level Now

Complete Level 1 in only 12 hours.

Secure Payment

Log In

Let's get back to coding!


I forgot my password

Sign Up

Ready to become a
Code Avenger?


Code Editor
test.html
test2.html
index.html
plan.html
day1.html
day2.html
day3.html
styles.css
profile.html
likes.html
business.html
98%
Open page in a new tab
Sign in to open page in a new tab
example page

Task Complete

creates a link to another web page. gives the address of the web page. is set to '''_blank''' to show the linked page in a new tab when the user clicks it.
is put around things like news or magazine articles and blogs or forum posts.
used to play audio files. makes the audio play as soon as the page loads. displays audio player controls on the page. makes the audio play from the start as soon as it ends.
is an optional element that goes right after the head element.
puts text on separate lines.
adds a button element. sets the button type. The type can be '''button''', '''reset''' or '''submit'''.
is an attribute used to specify one or more classnames for a given HTML element. The class attribute can be given to any HTML5 element and is often used in combination with CSS class selectors in order to style all elements with a given classname.
explain complicated code, hide code to be shown later and remind you of things to do. They are not shown on the web page.
adds a caption to a figure
is put around content like images, maps and videos that are important to the meaning of the page but can be positioned anywhere without changing the meaning. The figcaption is optional.
creates a form for users to input data. sets where the form's data should be sent when submitted.
normally contains information about the author, copyright data or links to related documents.
is an optional tag put right after the html start tag; contains tags that are not shown on the web page, e.g. title, link and meta tags.
usually contains the logo and navigation links.
is an optional element that is put after the doctype and surrounds the rest of the code for the web page.
represents a thematic break between paragraphs; displayed as a horizontal line.
is an attribute used to specify the unique id of the element. The id attribute can be given to any HTML5 element and is often used in combination with CSS id selectors in order to style the element with the given id.
is used to show another web page on your page. sets the page to be displayed in the iframe. sets the height of the iframe. sets the width of the iframe. is set to 0 to hide the border around the iframe.
adds an image to a web page. gives the address of the image. describes it to search engines and blind people. adds a tooltip. sets the height of the image. sets the width of the image.
adds an input field where the user enters data. sets the type of input. sets the text of the input. pre-selects the input when the page loads. sets the maximum number of characters that can be entered. sets the name and tells the form to send this input to the server when the form is submitted.
adds a check box. Users can select any number of check boxes.
adds a color chooser input. Currently only works in Chrome, Firefox and Opera.
adds an input field where the user enters a date. Currently only works in Chrome, Safari and Opera. sets the initial value in a date box. You must use the format '''yyyy-mm-dd'''.
adds an input element where the user can enter an email address. The element is given the pseudo class ''':invalid''' if the value of the input is not a valid email address.
adds an input element that the user cannot see.
adds an input field where the user enters a number. sets the minimum number. sets the maximum number. sets the size of the intervals between legal numbers.
adds an input element where the user can enter a password. The text in this input is hidden.
adds a radio button where the user can select 1 from a number of choices. sets the group name of the radio button.
adds a range slider element. sets the minimum range number. sets the maximum range number. sets the size of the intervals between numbers. sets the initial value of the range slider.
adds an input field where the user enters a phone number. makes sure that the number matches a certain pattern in order to be valid.
adds an input field where the user enters a date. Currently only works in Chrome, Safari and Opera. sets the initial time. It is specified in 24 hour format '''hh:mm:ss'''
adds an input element where the user can enter a web page url. The element is given the pseudo class ''':invalid''' if the value of the input is not a valid web page url.
sets a custom error message that is displayed when trying to submit a form that contains invalid input. Use {{inputID.setCustomValidity('')}} to clear the message.
gets the number value of an input element.
creates a label for an '''input''' element. Clicking on the text inside a label will toggle the input element.
is used to add items to an ordered (<ol>) or unordered (<ul>) list.
is used to link an HTML document to a CSS stylesheets. sets the type of link sets the address of the file to link to
tags give information about a web page; they are put in the head section of the code gives the type of information contains the information

For example: meta charset sets the character encoding for the web page. meta description describes your page to search engines. meta viewport scales a page so that it looks good on mobile devices.

is put around a group of links to other pages in a web site.
creates a numbered list.
stores a function that is run when the value of an input element is changed.
stores a function that is run when the user clicks on the element.
stores a function that is run when a user changes the value of an input element.
stores a function that is run when the pointer is moved over top of an element.
stores a function that is run when the pointer is moved out of an element.
adds an element for displaying calculation results. sets the value of the element.
is put at the start of each paragraph of text.
sets the regular expression used for validating the data entered in the input element.
gives the user an example of the correct format to enter in the input element.
sets an input element to be read-only.
contains script code, like JavaScript, or points to a script file. points to a script file.
contains a section of a document, typically starting with a heading element.
is used to make a drop-down list. The '''option''' elements inside it specify the options in the list.
is used to specify media files for audio and video elements. 2 source elements are needed because not all browsers support the same formats.
marks important text that is usually displayed with a bold font.
contains CSS style rules on an HTML page.
defines a span of text that should be displayed lower and smaller than the main text.
defines a span of text that should be displayed higher and smaller than the main text.
means that the input element must be filled out before the form can be submitted.
creates a table tr tag creates a new row td starts each cell th starts each header cell rowspan and colspan create cells that span more than 1 row or column.
creates an input where the user can enter multiple lines of text. sets the maximum number of characters that the user can enter. sets the number of columns for the element. sets the number of rows for the element.
sets the text that appears on the web browser tab, and is used in search-engine results, and when a page is added to favorites.
sets the text that is displayed as a tool tip when you hover over the input. The text also appears at the bottom of error messages.
creates a bulleted list.
used to play video files. displays a video player on the page.
adds a rule that styles anchors the user hovers over.
adds a rule that styles elements the user hovers over.
adds a rule that styles input elements containing invalid entries.
adds a rule that styles elements the user hovers over.
is a shorthand for setting background image and background color.
sets the background color.
sets the background image.
adds a border.
sets the color of a border.
sets the type of border on a table.
sets the radius for borders with rounded corners.
sets the style of a border.
sets the width of a border.
sets the distance from the bottom for absolute and fixed position elements.
adds a box shadow. The order of the values is offset x, offset y, blur radius, spread radius, color.
sets the color of text.
sets the number of columns.
change the display type. elements drop below the previous element. Width and height are used. elements are displayed next to eachother if there is space. Width and height are ignored. elements are displayed next to eachother if there is space. Width and height are used. elements are not displayed on the page.
sets the generic font family.
sets font weight.
sets font size.
sets height of an element.
sets the distance from the left for absolute and fixed position elements.
adds a gradient background fill.
sets the style of the list bullet point.
adds space around the outside of an element. margin is shorthand for setting margin-top, margin-right, margin-bottom and margin-left
sets the minimum width of an element.
sets the transparency of an element.
sets what happens to content that doesn't fit in an element. shows the extra content. hides the extra content. makes scroll bars appear when there is too much content. makes scroll bars always visible; they and are enabled only when there is too much content.
adds space between the content and border. padding is shorthand for setting padding-top, padding-right, padding-bottom and padding-left
change the display type. render in order as they appear in the document. elements are positioned relative to its first non-static ancestor element. elements are positioned relative to the browser window. elements are are positioned relative to its normal position. They are shifted using the left, right, top and bottom properties
sets whether or not the element resizable by the user.
sets the distance from the right for absolute and fixed position elements.
set the text alignment.
set the text decoration.
adds a shadow to text. The order of the values is offset x, offset y, blur, color. Color can be first or last.
sets the distance from the top for absolute and fixed position elements.
controls the appearance of selection. none makes the element appear as if it can't be selected. text the text can be selected. all (in an HTML editor) makes a double-click in sub-elements select the highest ancestor with this value. element (supported in Firefox and IE) enables selection to start within the element but be contained by the bounds of that element.
controls the vertical alignment of elements. baseline aligns the box baseline with the parent baseline. top aligns the box top to the parent top. bottom aligns the box bottom to the parent bottom. middle aligns the vertical midpoint of the box, with half the x-height(height of lowercase x) of the parent.
sets width of an element.
displays a message box with an OK button. the text to display.
joins the elements of an array into a string and returns it. The elements will be separated the specified separator. the separator. The default separator is a comma {{,}}.
property that stores the length of the array. E.g. {{[1, 2, 3, 4].length}} is '''4'''
adds items to the end of an array and returns the new length of the array 1 or more items to add to the end of the array
sorts an array sets the sort order. If left out, the array items are converted to strings and sorted alphabetically.
terminates the current loop and transfers program control to the statement following the loop
displays a message and returns true if OK was clicked and false for cancel. the text to display.
displays messages to check a program works correctly the text to display
runs a group of statements a specific number of times It has 3 optional expressions, surrounded by ( ) and separated by ;, followed by statements that are run in the loop. The 1st expression is typically used to create a counter variable (which can be accessed both inside and outside the loop) Next is the loop condition. If this expression is true the statements inside the loop are run. If the expression is false, execution skips to the statement after the for loop.
is a named reusable section of code that does a specific task and may return a value
Runs a statements if a specified condition is true.
is a special value that is returned when a number is divided by 0
returns true if a value is an illegal number (not-a-number). the value to be tested.
returns the absolute value of a number a number.
returns the smallest integer greater than or equal to a number a number.
returns the largest integer less than or equal to a number a number.
Represents the ratio of the circumference of a circle to its diameter, i.e. approximately 3.14159
Returns base to the power of exponent (i.e. baseexponent)
Returns a random floating point (decimal) number from 0 (inclusive) up to but not including 1, which you can scale to a desired range
returns the next highest integer if the fractional protion of the number is .5 or greater; otherwise it returns the next lower integer a number.
returns the square root of a number a number.
is a special value that is returned when the Number function tries to convert a string that is not a number.
is a special value meaning no value.
converts a value to a number; returns NaN if the value can't be converted to a number the value to be converted.
formats a number to fixed number of decimal points The parameter sets the number of digits to appear after the decimal point; this may be a value between 0 and 20 inclusive. If this parameter is ommitted, it is treated as 0
formats a number to a specified precision The parameter sets the number of significant digits
asks the user a question the question to ask the user the text shown as the default answer returns the response as a string, or null if the user clicks cancel
is a variable that is only accessible inside the class it was created in.
is a variable that can be accessed by any piece of code.
is a property that stores the number of characters in a string. E.g. 'CodeAvengers'.length is 12
returns a single character in a string an integer between 0 and 1 less than the length of string; it specifies the character to return E.g. {{'CodeAvengers'.charAt(0)}} is '''C''', and {{'CodeAvengers'.charAt(3)}} is '''e'''
coverts a string to lowercase E.g. 'CodeAvengers'.toLowerCase() is codeavengers
converts a string to uppercase E.g. 'CodeAvengers'.toUpperCase() is CODEAVENGERS
returns the index within a string object of the first occurrence of the specified value, starting the search at fromIndex; returns -1 if the value is not found. a string to search for. the location within the calling string to start the search from. It can be any integer between 0 and the length of the string. The default value is 0. E.g. 'CodeAvengers'.indexOf('e', 4) is 6
splits a string object into an array of substrings. a sequence of 1 or more characters used to separate the string. an integer specifying a limit on the number of substrings to return. The function splits normally but shortens the returned array to at past .
returns a substring from indexA up to but not including indexB a number between 0 and the length of the string a number between 0 and the length of the string; if omitted, substring gets characters from indexA to the end of the string If indexA equals indexB, substring returns an empty string If either parameter is less than 0 or is NaN, it is treated as 0. If either parameter is greater than the string length it is treated as if it were the string length. If indexA is larger than indexB, the effect is as if the 2 parametrers were swapped E.g. 'CodeAvengers'.substring(4) is Avengers and 'CodeAvengers'.substring(5, 8) is ven
creates a variable, optionally giving it an initial value. The variable name can consist of letters, numbers, $ and _, but can\'t begin with a number.
runs a group of statements while a test condition is true The loop condition is checked before each pass through the loop. If the condition is true, the statements inside the loop are run. When the condition is false, the run continues with the statement after the loop.
adds numbers and joins strings 4 + 8 equals 12 '4' + '8', 4 + '8' and '4' + 8 are equal to '48'
add 1 to the value of a variable
increase the value of a variable
subtracts numbers, e.g. 32 - 24 equals 8
subtract 1 from the value of a variable
decrease the value of a variable
multiplies numbers E.g. 4 * 8 equals 32
divides numbers E.g. 16 / 2 equals 8
means equal to; a == b is true if a and b have the same value. E.g. age == 15 is true if age is 15
means not equal to; a != b is true if a and b have different values. E.g. code>age != 0 is true if age is any value except 0
means AND; a && b is true if both a and b are true.
means OR; a || b is true if either a or b or both are true. E.g. age == 5 || age == 10 is true if age is 5 or 10 The | key is normally above the Enter key.
creates a random color.
creates a table. Full description coming soon.
gets the color of a specific item in the table. Full description coming soon.
hides a specific item in the table. Full description coming soon.
hides all of the items in the table. Full description coming soon.
hides each items label in the table. Full description coming soon.
checks if a given item in the table is visible or not. Full description coming soon.
sets the color of a specific item in the table. Full description coming soon.
sets the size of each item in the table. Full description coming soon.
shows a specific item in the table. Full description coming soon.
randomly shuffles the colors of the items in the table. Full description coming soon.
is a property that stores the hue of the color as value in degrees between 0 and 360.
gets a random color.
pauses the code when the browsers debugging tools are active.
gets the distance the mouse moved since the last time that mouse event was triggered.
gets the position of the mouse when the mouse button was last clicked.
is a property that stores which mouse button was clicked represented by a number. 0 = left mouse button. 1 = middle mouse button. 2 = right mouse button.
is a property that stores additional information about the event. For mouse click events, it stores the number of clicks. For mouse wheel events, it stores the distance that the wheel rolled.
gets the item at the position of the mouse when the event occurred. It will contain {{null}} if there was no item there.
gets the position of the mouse when the event occurred.
creates a bar that slowly empties over time. the amount of time in seconds that it takes the bar to empty completely.
adds time to the bar. the amount of time in seconds to add to the bar. A negative time value will take time off the bar.
checks if the bar is active. Returns true if it is active. Returns false if it is not.
tells the bar to reset.
tells the bar to restart. Works the same as calling reset followed by start.
tells the bar to start emptying.
tells the bar to stop emptying.
creates a button. the text to be displayed. distance of the left side of the button from the left of the canvas. distance of the right side of the button from the right of the canvas. function that gets run when the button is clicked.
gets a random number. specifies the random number range. specifies the random number range. If no parameters are given then it returns a number between 0 and the width of the canvas. If just 1 number is given then it returns a number between 0 and the given number. If 2 numbers are given then it returns a number between num1 and num2.
creates a score object to keep track of and display a score. the text label for the score object. the position of the score object. Should be an array (e.g. [x, y]).
add points to the current score. the number of points to add to the score. The default value is 1.
gets the current score.
sets the score back to 0.
sets the background color. desired background color.
sets the background image. the background image source. the desired width of the image. the desired height of the image. If no width or height are given then the image will be drawn at its original size. If a width is given but not a height then height is set equal to width.
returns a shuffled version of a given array. array to be shuffled.
creates a text display area. the text you want to display. the position of the text area. Should be an array (e.g. [x, y]). the text alignment. Options are 'left', 'right', or 'center'.
stores the text for the text display area.
creates a text display area. the text you want to display. distance of the left edge from the left of the canvas. distance of the top edge from the top of the canvas. the function that gets run when the text area is clicked on. If the x and y positions are not specified then the text area will default to the middle of the canvas.
stores the color of the text.
stores the font family of the text.
creates a countdown timer in the top left corner of the canvas. the starting value of the timer. the function that will get run when the timer runs out.
gets the amount of time (in seconds) since the timer was started.
checks if the timer is running. Returns true if it is running. Returns false if it is not running.
stores the function that will get run when the timer runs out.
starts the timer.
stops the timer.
if the HitResult has a type of 'pixel', this property refers to the color of the pixel on the Raster that was hit.
stores the bounding rectangle of the item.
brings the item in front of all the other items.
creates a copy of the item.
specifies an array containing the dash and gap lengths of the stroke. The first element sets the dash length and the second sets the gap length.
adds an item to a group of items. the item to be added to the group.
performs a hit test on the item at the given point. the point to check for a hit. Returns a {{HitResult}} object containing information about what was hit or {{null}} if nothing was hit.
stores the function that handles mouse down events for the item.
stores the function that handles mouse drag events for the item.
stores the function that handles mouse move events for the item.
stores the function that handles mouse up events for the item.
adds transparency to items and is set with a value of 0 to 1. 0 is fully transparent, 1 is fully opaque (not transparent)
is a property that stores the pivot point of the item. The pivot point is the point around which all transformations hinge. The default value is the center of the bounding rectangle.
is a property that stores the current position of the item.
removes the item.
is a property that stores the current rotation angle of the item.
is a property that stores the current scale factor of the item.
is a property that stores whether or not the item is selected.
sends the item behind all the other items.
is a property that stores whether or not the item is visible.
checks if the given key is currently being pressed. the key to check. Returns true if the key is pressed, otherwise it returns false.
contains information about the keyboard event.
contains the character that caused the keyboard event.
contains the key that caused the keyboard event.
indicates which special keys are pressed down by use of boolean values. For example, if the option key is pressed down then {{KeyEvent.modifiers.option == true}}. The special keys are: control, option, command, shift, capsLock and space.
handles animations. details of the frame event including the total amount of time since the first frame event.
handles mouse down events. details of the mouse down event including the point.
handles mouse drag events. details of the mouse drag event including the point.
handles mouse move events. details of the mouse move event including the point.
handles mouse up events. details of the mouse up event including the point.
adds a point to the path. the new point to be added on the end of the path.
creates a circle. distance of the circle center from the left of the canvas. distance of the circle center from the top of the canvas. radius of the circle.
a property that stores whether or not the path is closed. If closed, the first and last segments will be connected.
the fill color of the shape.
contains the first point of the path object.
contains the last point of the path object.
creates a rectangle. distance of the left edge from the left of the canvas. distance of the top edge from the top of the canvas. width of the canvas. height of the canvas.
creates a star. distance of the star center from the left of the canvas. distance of the star center from the top of the canvas. number of points. radius of the outer part of each point. radius of the inner part of each point.
the color of the outline of the shape.
the width of the outline of the shape.
represents a 2-D point on the canvas. It also represents a 2-D vector object. x coordinate. y coordinate.
the vector's angle from the x-axis in degrees.
the length of the vector.
modifies the length of the vector without changing its angle. defines the length of the normalized vector. The default value is 1.
creates an object for displaying text. distance of the text from the left of the canvas. distance of the text from the top of the canvas.
represents an image. the file path of the image. distance of the image center from the left of the canvas. distance of the image center from the top of the canvas.
gets the average color of the raster in the specified area. the rectangle which specifies the area to be averaged.
resizes the image. the horizontal scale factor. the vertical scale factor; if omitted, scaleHeight will be set to the same as scaleWidth. if the horizontal scale factor is negative, then it will flip the image horizontally. if the vertical scale factor is negative, then it will flip the image vertically.
creates an invisible rectangle. starting corner of the rectangle. opposite corner of the rectangle.
creates a circle. distance from the center of the circle to the left of the canvas. distance from the center of the circle to the top of the canvas. the radius of the circle.
creates an ellipse. distance of the left side of the ellipse from the left of the canvas. distance of the top of the ellipse from the top of the canvas. the width of the ellipse. the height of the ellipse.
the radius of the circle.
creates a rectangle. If you give a radius then the rectangle will have rounded corners. distance of the left side of the rectangle from the left of the canvas. distance of the top of the rectangle from the top of the canvas. the width of the rectangle. the height of the rectangle. the radius of the rounded edges.
the text of the item.
the size of the font for the item.

Toolbox

Keyboard Shortcuts

Next task Ctrl+Space
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Undo Ctrl+Z
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+R
Find & replace ALL Ctrl+Shift+R

Lesson Index

My Notes

Want to help get Code Avengers in your language? Contact translation@codeavengers.com
Tasks
Time
Bonus
1
2
3
4
5
Lessons
20 / 20
tool
code
notes
schedule

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
CodeAvengers');

This is a test paragraph');

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2
'); CA icon

Our other web sites

Fern- an app to help you learn to read Spanish.

Mouse Master- A fun game for all ages that helps you develop your skills with a mouse.

Mj Software- Download the FREE cricket scoring application I started creating in high school.