PRO

Fast-track your digital career
the easy, affordable way.

* No credit card required

// + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + //

What would you like to create?

Choose a path that suits you.

I'm not sure I'd like to try something first

In 15 mins

Build an app

This project uses:

This challenging and exciting project will teach you how to create a Photo Booth app. Using JavaScript, CSS and HTML you will connect buttons that let you use a camera, upload images and customize your photos by inserting stickers and applying filters.

html-css javascript

Learn a language (1-3 Months)

Use HTML & CSS

Build websites

What you'll need:

Learn HTML and CSS and you'll be able to build you own websites with full control over layout and style!

html-css

Build a career (6+ Months)

Become a

Web Developer

What you'll need:

Learn web development to get the skills to build fully interactive websites using HTML, CSS, and Javascript.

html-css javascript

Bite-sized learning

Pace yourself with learning modules that fit easily into your day and motivate you to practice, finish tasks and meet your goals.

Make & share live projects

Unleash your own ideas! Access to our Interactive Development Environment (IDE) enables you to build a portfolio as you learn and share your work online.

Coding concepts made simple

Go from absolute beginner to a proficient coder with simple, supportive teaching that effortlessly builds knowledge.

Get Code Avengers qualified
Get your dream job.

Frequently Asked Questions

How does the 7 day trial work?

The free trial gives you unlimited access to all our free courses and up to 5 lessons of our premium courses. No credit card is required to start a trial. If you would like to get full access to courses you will need to upgrade to a subscription.

What kind of skills do I need to use Code Avengers?

None! Code Avengers teaches both beginners and those with more experience. We’re continually adding content to our library.

Will I need any special software, hardware or books?

You won't need any special hardware or OS. You can access Code Avengers courses from any computer with a modern browser and Internet connection, although we recommend using Google Chrome. Please note: Code Avengers does not support Internet Explorer 11 or lower.

How long does it usually take for me to build something after learning?

While everyone learns at a different pace, students who put in several hours each day to apply what they’ve learned should be able to build their own projects in 6-12 months.

Am I tied to a contract?

There are absolutely no contracts with Code Avengers. You can cancel or pause your account at any time.

<div class="js comments_comment {{#if parentId}}-reply{{else}}-parent{{/if}}" data-comment-id="{{id}}" data-user-id="{{userId}}">
    <div class="comments_comment-profile-pic-wrapper">
      <img class="js comments_comment-profile-pic" src="{{profileImage}}">
    </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">
    <img src="{{{image}}}" class="guiders-preview_image">
    <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-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-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">
    <select name="country" class="js- pricing_country">
    {{#each locations}}
      {{#unless alias}}<option value="{{@key}}" {{#compare @key '==' 'us'}}selected{{/compare}}>{{name}}{{/unless}}
    {{/each}}
    </select>
    
    {{{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>
      </div>
    {{/each}}
    </div>
    <button class="pricing_button js-quote-button" data-analytic="submit-quote">{{button}}</button>
  </div>
</div>
{{/with}}

<div id="quote" class="js quote">
  <div class="pricing">
    <h3 class="pricing_header">{{{header}}}</h3>
    <p class="pricing_info">{{{text}}}
    <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}}" {{#equals name ../value}}selected{{/equals}}{{else}}{{this}}" {{#equals this ../value}}selected{{/equals}}{{/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" data-analytic="submit-quote-button Quote">{{{button}}}</button>
  </div>
</div>

<div class="track-popup -{{theme}}">
  <div class="track-popup_header">
    <div class="track-popup_header-left">
      <div class="track-popup_header-left-content">
        <h2 class="track-popup_level">
          {{#if logo}}
            <img src="{{{logo}}}" class="track-popup_logo">
          {{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-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-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-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-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-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>

<!doctype html>
<link rel="stylesheet" type="text/css" href="/css/presentation{min}.css?2.{id}">
<link rel="stylesheet" type="text/css" href="/css/styles{min}.css?2.{id}">
<script src="/js/presentation{min}.js?{id}"></script>
<title>{title}</title>

<body class="slide -{slideType}">
<header class="slide_header"> 
<i class="slide_logo icon-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-left-arrow -double"></i><i class="slide_controls-icon icon-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-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-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-right-arrow -double"></i><i class="slide_controls-icon icon-right-arrow -double"></i></button>
</div>
</header>

<section class="_content">
<img class="filler-image" src="/image/guides/collection-2.png">
{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>

{{#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-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-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-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-star course-box_percentage-star"></i>
        <i class="icon-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
    </div>
  {{/each}}

PRO

Fast-track your digital career
the easy, affordable way.

What would you like to create?

In 15 mins

Build an app

html-css javascript

Use HTML & CSS

Build websites

html-css

Become a

Web Developer

html-css javascript

Bite-sized learning

Make & share live projects

Coding concepts made simple

Get Code Avengers qualified
Get your dream job.

Frequently Asked Questions

How does the 7 day trial work?

What kind of skills do I need to use Code Avengers?

Will I need any special software, hardware or books?

How long does it usually take for me to build something after learning?

Am I tied to a contract?

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

What would you like to create?

In 15 mins

Build an app

html-css javascript

Use HTML & CSS

Build websites

html-css

Become a

Web Developer

html-css javascript

Bite-sized learning

Make & share live projects

Coding concepts made simple

Get Code Avengers qualifiedGet your dream job.

Frequently Asked Questions

How does the 7 day trial work?

What kind of skills do I need to use Code Avengers?

Will I need any special software, hardware or books?

How long does it usually take for me to build something after learning?

Am I tied to a contract?

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

Get Code Avengers qualified
Get your dream job.