A better way to learn to code
websites, apps, games and more.

Kickstart your career

Get in demand tech skills
Learn by doing
Track your progress
Support from experts
and more

Choose Your Path

See which courses will help you reach your goal.

Python

Learn an easy, powerful, popular language with lots of practical applications.

35 Hours

HTML and CSS

Build a collection of websites as you master HTML5 and CSS3.

41 Hours

JavaScript

Build simple apps and games as you learn computer programming

77 Hours

Web Development

Build real world apps with HTML, CSS, JavaScript and databases.

25 Hours

Design

Learn how to choose stunning fonts, colors, and layouts.

20 Hours

Intro to Coding

Get a taste of HTML, CSS, JavaScript and Python.

9 Hours

Computer Science

Learn the fundamentals of programming and development.

12 Hours

Game Development

Use JavaScript to create your own games you can share with friends.

15 Hours

I tried many other websites, who offer programming courses... I did your intro to JavaScript and loved it.

Simon

You guys explain what to do and why, in a clear and concise manner, in a fun way.

Jay

The site covers concepts slowly and in far more depth... the way it reiterates previously taught content (without feeling repetitive) really helped…

Aaron

You teach in a way that is engaging, enjoyable, and most importantly, enriching for me as a complete beginner.

Mark

I started on similar websites and got frustrated when I couldn’t figure out what was wrong with my code...I tried your site and loved it - it is much more conceptual.

Cale

I have tried about a dozen websites trying to learn coding and Code Avengers is the only one I have stuck to…

Kristina

How Code Avengers Works?

Find out how we teach and how you can succeed.

Learn by
Doing

Learn from step-by-step instructions combined with 1,000s of code challenges, videos and quizzes with support from expert educators and an enthusiastic community of learners.

Build Your Portfolio

You'll start off learning to build simple apps and websites, but quickly progress to building real-world applications you can show-off to friends and future employers.

Achieve Your Goals

Whether you want to land your dream job, start your own tech company, or build technology that changes the world, the Code Avengers team are dedicated to helping you get there faster!

Success Stories

They did it... and so can you!

Osine & Anesi

Developed an app that has been downloaded over 60,000 times.

Olivia

Landed a full-time job straight out of high school as a web developer.

Benji

Started his own app development company.

Start your free 7 day trial today

<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">{{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">{{{button}}}</button>
  </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}}

A better way to learn to code
websites, apps, games and more.

Kickstart your career

Choose Your Path

Python

HTML and CSS

JavaScript

Web Development

Design

Intro to Coding

Computer Science

Game Development

I tried many other websites, who offer programming courses... I did your intro to JavaScript and loved it.

You guys explain what to do and why, in a clear and concise manner, in a fun way.

The site covers concepts slowly and in far more depth... the way it reiterates previously taught content (without feeling repetitive) really helped…

You teach in a way that is engaging, enjoyable, and most importantly, enriching for me as a complete beginner.

I started on similar websites and got frustrated when I couldn’t figure out what was wrong with my code...I tried your site and loved it - it is much more conceptual.

I have tried about a dozen websites trying to learn coding and Code Avengers is the only one I have stuck to…

How Code Avengers Works?

Learn by
Doing

Build Your Portfolio

Achieve Your Goals

Success Stories

Osine & Anesi

Olivia

Benji

Kick start your career

Start your free 7 day trial today

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

Kickstart your career

Choose Your Path

Python

HTML and CSS

JavaScript

Web Development

Design

Intro to Coding

Computer Science

Game Development

I tried many other websites, who offer programming courses... I did your intro to JavaScript and loved it.

You guys explain what to do and why, in a clear and concise manner, in a fun way.

The site covers concepts slowly and in far more depth... the way it reiterates previously taught content (without feeling repetitive) really helped…

You teach in a way that is engaging, enjoyable, and most importantly, enriching for me as a complete beginner.

I started on similar websites and got frustrated when I couldn’t figure out what was wrong with my code...I tried your site and loved it - it is much more conceptual.

I have tried about a dozen websites trying to learn coding and Code Avengers is the only one I have stuck to…

How Code Avengers Works?

Learn by Doing

Build Your Portfolio

Achieve Your Goals

Success Stories

Osine & Anesi

Osine & Anesi

Olivia

Olivia

Benji

Benji

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

Learn by
Doing