PRO

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

+ + + + + + + + + + + + + + + +

Learn while you create. Own your future.

Our online courses help you learn coding and design skills
that will take you wherever you want to go.

+ + + + + + + + + + + + + + + +

How deep would you like to get into coding?

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.

Short Haul (1-3 Months)

Build websites using

HTML & CSS

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!

Long Haul (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.

<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}}

PRO