Select Lesson

Create a postcard—a simple HTML course for beginners

30 min

Digital Postcard - Lesson 1. 1

15 min

HTML, CSS and JavaScript: The Bones of a Webpage

5 min

Tags—start/end and self-closing

5 min

Elements

5 min

Indenting HTML

5 min

Head section—for the computer to read

5 min

Body section—webpage content

5 min

Label the Parts of a Web Page

5 min

Changing colors with CSS

5 min

Where to next?

Create a postcard

Create a postcard—a simple HTML course for beginners

30 min

Digital Postcard - Lesson 1. 1

15 min

HTML, CSS and JavaScript: The Bones of a Webpage

5 min

Tags—start/end and self-closing

5 min

Elements

5 min

Indenting HTML

5 min

Head section—for the computer to read

5 min

Body section—webpage content

5 min

Label the Parts of a Web Page

5 min

Changing colors with CSS

5 min

Where to next?

30 min

Create a postcard—a simple HTML course for beginners

Hyper text Mark-up Language (HTML) uses tags, <>, to format a webpage. This taster will cover the formatting of headings, images, links, paragraphs and a touch of CSS

vocab

HTML/CSS Intro Project

Digital Postcard - Lesson 1. 1

Start 15 min

Starting to learn HTML and CSS is easy and fun with this digital postcard. Learn about adding headings, paragraphs, images and links to create a holiday card or birthday celebration to share with friends and family.

Lesson Outline

task 1: Choose a theme

task 2: Add a heading

task 3: Different headings

task 4: Making paragraphs

task 5: Paragraph tags

task 6: Choose an image

task 7: Image tags

task 8: Add an anchor

task 9: Anchor activity

task 10: Changing colors

The lesson plan below will provide in-depth explanations of the code found in this Postcard HTML-CSS taster.

Concepts

HTML, CSS and JavaScript: The Bones of a Webpage

5 min

Apps and webpages are transformed from an endless paragraph of text to an interactive, well designed and structured webpages through using the three languages : '''HTML, CSS and JavaScript'''.

HTML - the markup language (Format the content)

Hypertext-markup language, or HTML, is a language used to add formatting to text.
See the example below of a poem written with and without html on this webpage.

HTML Code

Without HTML:<br>
I went out to the hazel wood,
Because a fire was in my head,
And cut and peeled a hazel wand,
And hooked a berry to a thread;
And when white moths were on the wing,
And moth-like stars were flickering out,
I dropped the berry in a stream
And caught a little silver trout.

<hr>
<h1>With HTML</h1>
<em>
<p>When I had laid it on the floor<br>
I went to blow the fire aflame,<br>
But something rustled on the floor,<br>
And someone called me by my name:<br>
<p>It had become a glimmering girl<br>
With apple blossom in her hair<br>
Who called me by my name and ran<br>
And faded through the brightening air.</em>

<p>Poem by W. B. Yeats from <a href="http://www.world-english.org">world-english.org</a>

Webpage Output

CSS - the style sheet language (Make it pretty)

Cascade Style Sheets, or CSS, is a styling language that can be used control the layout and look of a webpage.
It can be taken from a linked page or added to the HTML page you are on at the top of the page inside <style></style> tags. See the small snippet below for an example.

HTML Code

<style>
h1{
  background-color:mediumTurquoise;
}
em{
  color:midnightBlue;
}
p{
  background-color:powderBlue;
}
</style>
<h1>O Captain! My Captain!</h1>

<p><em>"O Captain! my Captain! our fearful trip is done,<br>
The ship has weather'd every rack, the prize we sought is won,<br>
The port is near, the bells I hear, the people all exulting,<br>
While follow eyes the steady keel, the vessel grim and daring;<br>
But O heart! heart! heart!<br>
O the bleeding drops of red,<br>
Where on the deck my Captain lies,<br>
Fallen cold and dead."<br></em>

<p>Poem by Walt Whitman from <a href="http://www.rainsnow.org/csh_poems_by_walt_whitman.htm">rainsnow.org</a>

Webpage Output

JavaScript - the programming language (Make things clickable and interactive)

The interactive tables and buttons you see on a web page (plus a lot of things you probably don't notice) are controlled with JavaScript.
You can learn more about how JavaScript is used in either our Web Development courses or our JavaScript courses.
JavaScript can be written on a separate page or added to the bottom of your HTML webpage with <script></script>.
Here is an example of JavaScript below, click the button to trigger the Javascript.

HTML Code

<h1>JavaScript</h1>
<p><em>"Low hidden in among the forest trees<br>
An artist's tilted easel, ankle-deep<br>
In tousled ferns and mosses, and in these<br>
A fluffy water-spaniel, half asleep<br>
Beside a sketch-book and a fallen hat -<br> 
A little wicker flask tossed into that."<br></em>
<p>"Water Color" by James Whitcomb Riley from <a href="http://www.public-domain-poetry.com/james-whitcomb-riley/a-water-color-29321">Public Domain Poetry</a>
<p><button id="greenButton">Click to color background</button>
<script>
function makeBackgroundGreen() {
  document.body.style.backgroundColor = 'green';
  document.body.style.color = 'powderBlue';
}
greenButton.style.backgroundColor = 'green';
greenButton.style.color = 'powderBlue';
greenButton.onclick = makeBackgroundGreen;
</script>

Webpage Output

Concepts

Tags—start/end and self-closing

5 min

HTML uses tags to format things. It add spaces, creates paragraphs and headings.

HTML Code

<h1>This is a heading</h1>
<p>This is a paragraph of normal text

Webpage Output

The spelling and the characters you use are important when they are inside the tags <>.

They must have correct spelling (for the CSS, in American English (color not colour)) and punctuation, (for example, all brackets and quote marks are in pairs).
Most of the tags are easy to remember, some are full words like <strong>, some are abbreviations like image, <img>, or emphasize, <em>.

Start and end tags

Tags typically come in pairs; an opening start tag and a closing end tag with a forward slash: <tag>Words</tag> and the actual content to display goes between them, like this:

HTML Code <h1> My awesome page </h1>

Webpage Output

Example 1: Heading tags

HTML Code

<h1>Biggest heading</h1>
<h3>Medium heading</h3>
<h6>Smallest heading</h6>

Webpage Output

Example 2: Normal text tags

HTML Code

<p>Paragraph of text</p>
<strong>Strong, heavy text in bold</strong>
<p>This is another paragraph</p>
<em>Emphasised text in italics</em>

Webpage Output

Self-closing tags

Self-closing tags have no closing tag - only an opening tag.

Here are some common ones:

HTML Code

<p>Thematic break (hr)<br>
Makes a <hr> line.

<p>Line break (br)<br>
This breaks <br> your text into lines  

<p>Image (img)<br>
<img src="http://gathergather.co.nz/grumpy-cat.png" width="30%">

Webpage Output

Concepts

Elements

5 min

An HTML element is made up of a start tag, an end tag (if it has one), and all the content in between.

Here you can see different elements of our HTML create different parts of our webpage

So these are both elements: <br> and <h1>Hi Sis</h1>

You can also have elements inside of elements.

2 elements, one inside the other. <a href="add a hyperlink"> <img src="add an image"> </a>

3 elements inside each other. <body> <ul>Bullet point list <li>point 1</li> <li>point 2</li> </ul> </body>

Concepts

Indenting HTML

5 min

Formatting your HTML code makes it much easier to read.
If an element is inside another element it should be moved to the right a bit on a new line (this is called indenting).
This leaves white space on the left hand margin so that it is really easy to see what elements are inside others and it makes your code tidy.

How much do we indent by?

The internet rages with conversations about whether to use 2 spaces, 4 spaces, or 8 spaces when indenting. We are a 2 space company because we follow the Google Style Guide →.

So what should you use? Well, we recommend 2 spaces. However, it is ok to follow personal preference- if you wish to have 4 or 8 spaces then add those. Just make sure you use indentation to add space to the left margin.

You can use empty lines (hitting ENTER) for formatting as well, this has no effect on your webpage but it makes the HTML code easier to read.

2 space indentation:
<!DOCTYPE html> <html> --<head> ----<title>HTML TAGS</title> --</head> --<body> ----<h1>Hello Everyone</h1> --</body> </html>

4 space indentation:
<!DOCTYPE html> <html> ----<head> --------<title>HTML TAGS</title> ----</head> ----<body> --------<h1>Hello Everyone</h1> ----</body> </html>

You might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".

Concepts

Head section—for the computer to read

5 min

There are some tags that we add to the HEAD or top part of our webpage. These are usually for linking to special files (not normal webpages), or giving the computer information about your webpage and they do not appear on the webpage.
Example: Look at the output of this code - what actually shows up for viewers?

HTML Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Name in tab</title>
    <link href="..." rel="...">
  </head>
  <body>
    <h1> Hello World!</h1>
    </body>
</html>

Webpage Output

Only the h1 text is in the body section, the rest are in the HEAD of the webpage and are not seen by the webpage user.

Doctype `<!DOCTYPE HTML>`

<!doctype html>, or <!DOCTYPE HTML>, is an element that tells the browser what type of document this is.
Line 1 should always have <!doctype html> to tell the browser that this document is written in HTML 5.

Title `<title> </title>`

Title is a head section element, with a start and end tag.

The title element is important, it defines the title of a document. Title elements are often used on search engine results pages (SERPs) to show a section of your webpage. Title elements are useful for Search Engine Optimization, SEO, (Helping people to find your website) and social sharing (The info that can show up when you share a link with people). They also show up in your browser tab.

The title element of a web page should give a lot of information of a page's content clearly and in a couple of words. It is often the name of the webpage. <head> <title>Introduction to Coding Lesson Notes: Code Avengers</title> </head>

A title element changes the text in the tab and helps search engines find your webpage

Link `<link>`

A head section element, with a self-closing tag.
Required attributes: rel="What is the relationship between these files?" and href="What is the file path to the file?".

The link tag links the CSS style sheet to our web page, it is used for other files as well but CSS is the most common file you link to. We will learn more about how to add CSS in our later lessons. <head> <link rel="stylesheet" type="text/css" href="profile1.css"> </head>

Concepts

Body section—webpage content

5 min

There are a lot of HTML tags that can go into the body section of your HTML.
They body section comes beneath the head section and everything you see on a live webpage is inside the body section.
In the notes above we have seen a few tags that have not been explained yet. <img>, <a> and <iframe> will be covered below in more detail.

Heading tags `<h1></h1>`

Headings are body section element, with a start and end tag.
Required attributes: None

Heading tags make text bigger and add space above and below it.

HTML Code

<body>
  <h1>h1: main heading</h1>
  <h2>h2: subheading</h2>
  <h3>h3: sub-subheading</h3> 
  <h4>h4: for sub-headings you need under your h3 headings</h4>
  <h5>h5: you probably wouldn't use this much</h5>
  <h6>h6: the last level of heading</h6>
</body>

Webpage Output

There are 6 heading tags, h1,h2,h3,h4,h5,h6, and they should be used in order of importance, not on how they make your text look (You can change how they look with CSS)
By order we mean order of importance or detail, their hierarchy.

Here is an example section of a webpage about foxes.

Can you see how the headings change as the detail increases?

HTML Code

  <h1>The Fox</h1>
  <h2>Food:</h2>
  <h3>Winter</h3>
  <p>Info....
  <h2>Types of fox:</h2>
  <h3>Artic</h3>
  <p>Info....
  <h3>Gray</h3>
  <p>Info....
  <h3>Red</h3>
  <p>Info....

Webpage Output

Paragraph tag `<p>`

Paragraph is a body section element, with a start and an optional end tag.
Required attributes: None <p> is the paragraph tag. It adds space between paragraphs of text.

HTML Code

<body>
  <p>Hi, I'm para1</p><p>Hello, I am para 2</p>
</body>

Webpage Output

The same code, without optional tags:

HTML Code <p>Hi, I'm para1<p>Hello, I am para 2

Webpage Output

Break tags `<br>`

A body section element, with a self-closing tag.

Break tags put text on a newline.

HTML Code

<body>
  Like in JavaScript and Python, 
  hitting ENTER doesn't do anything. 
  To start new lines of text in your code, show the text on a newline in the output.<br>You have to use <br> (br) to separate text onto newlines<br>see?
</body>

Webpage Output

Image tag `<img src="">`

A body section element, with a self-closing tag.
Required attributes: src and alt

Image of post-it-note images The image tag adds an image to your webpage. It needs to have a source attribute which links to where the image file is stored (Either on your server or on another server).

alt attribute

When your image is broken or you are using a screen reader, then the text in the alt attribute is used. Though it is not a required tag, you should use it for your users who have visual disabilities. When you use it, describe what the image is for rather than what it looks like, for example; "CA logo" is more useful than red letters."

HTML Code

<body>
  <img style="width:100%;" src="/images/postcard/1-7.png" alt="An example image">
</body>

Webpage Output

Anchor tag `<a href="">Link</a>`

Anchor uses start and end tags.
Required attribute: href

HTML Code

<body>
  Hi all,<br>
  <a href="www.codeavengers.com">Go to Code Avengers</a>
  to learn how to code.
</body>

Webpage Output

Code Avengers Quiz

Label the Parts of a Web Page

Start 5 min

Concepts

Changing colors with CSS

5 min

In the final task of the Postcard project we have 4 options for changing the color of your postcard... but how does it work? <link rel="stylesheet" href ="/css/theme4.css"> links to a separate file stored on the CA server. This file is a .css file and contains a lot of code that looks like this:
body { background-color: white; border: 30px solid #ff8989; border-radius: 10px; display: inline-block; font-size: 16pt; margin: 100px auto; min-height: 300px; overflow: auto; padding: 30px; position: relative; width: 550px; }

This code changes how the element that has been selected looks. Body selects the whole visible page because everything visible is inside the body of the webpage.
There is a lot CSS can do- it is a very powerful tool for design.
There are 4 themes, each with different colors, fonts and subtle layouts.

You can easily change so many things about your website using CSS, have a closer look at the heading example from earlier.

HTML Code

<style>
  body{
    background-color:lightGray;
  }
  h1{
    background-color:paleTurquoise;
  }
  h2{
  background-color:lavender;
  margin-left:10px;
  }
  p,h3{
  background-color:cornsilk;
  margin-left:20px;
  }
  </style>
<body>
  <h1>The Fox</h1>
  <h2>Food:</h2>
  <h3>Winter</h3>
  <p>Info....
  <h2>Types of fox:</h2>
  <h3>Artic</h3>
  <p>Info....
  <h3>Gray</h3>
  <p>Info....
  <h3>Red</h3>
  <p>Info....
</body>

Webpage Output

Where to next?

Congratulations you have created a postcard with HTML!
example of finished postcard

Share it with the world by clicking on the text to '''"Show postcard.html in a new tab" This will open your project up in a real live webpage. Copy the URL and send your postcard however you like- email, Facebook, what ever suits you.

If you liked this take a look at our HTML/CSS courses to learn more about making websites, or if you want more projects to try do more hour of code or go to our next level- intro to coding.

Computer Coding – the New Direction

HTML and CSS have been used to build websites for over 20 years. Once only familiar to “computer nerds”, these coding languages are starting to become more accessible to all kinds of people. Nowadays, even amateurs can create their own website from scratch. This makes HTML and CSS a hot topic, along with the fact that the demand for skilled I.T. professionals is steadily growing around the world. The problem for the industry is that there aren’t enough people to fill those jobs! The truth is HTML and CSS aren’t just for website and app developers; the skills involved are super useful for graphic designers, bloggers, online journalists and authors, digital marketeers, IT project managers and entrepreneurs.

What is HTML/CSS?

So what do these mysterious acronyms mean? HTML stands for HyperText Markup Language, while CSS stands for Cascading Style Sheets, and they’re required for building websites. To help explain how they work, let’s go through an overview of how a website is made:

A website needs content. This just means text, images, video, or audio. The people who decide what content goes into a site are usually a company’s marketing team. One of those people may be a copywriter. A copywriter is someone who writes persuasive marketing material – otherwise known as copy.

This is where HTML comes in. HTML provides structure to the content of a site. It tells the web browser what text, pictures, or videos should appear on a webpage, and how to arrange them all. A web developer takes all of the content and turns it into HTML code.

CSS comes into play when it’s time to add some style to the site. CSS tells the web browser how the HTML elements are to be displayed. Usually, a web designer will decide which colors, fonts, sizes, patterns, and layouts to use. CSS is written in a separate file to HTML, which makes it easier to edit. The HTML and CSS files need to be linked together to make it all work.

If you’re wondering how you can learn these key languages, look no further! Code Avengers has developed a learn-by-doing experience that gets you building real world webpages while you learn. Let me tell you a bit about it:

Code Avengers HTML/CSS Courses

Intro to HTML/CSS (3 hrs)

Our Code Avengers HTML/CSS track will help you learn from the very beginning. Kick-start your coding career with our fun and simple introduction to HTML5 and CSS3. By the end of this 1-hour course, you will have contributed 2 webpages to WikiJr – a version of Wikipedia for children powered by Code Avengers. Not bad for a beginner!

Try HTML/CSS now!

Intro to the Internet (3hrs)

You probably use the Internet and the World Wide Web every day, but do you know how it works? This ten lesson course is an easy way to find out. Simple explanations, graphics, and tasks reinforce your learning. Getting noticed is just as important; this course gives a basic introduction to web design and shows the way to get your site up and running.

View Intro to the Internet

HTML/CSS level 1 (15hrs)

Build your first website as you learn the essentials of HTML and CSS with level 1! Play with cool effects and customize headers, footers, images and fonts to make your own personal and business profile pages that are uniquely you. Your journey to becoming a web developer or designer starts here.

View HTML/CSS Level 1

HTML/CSS level 2 (13hrs)

Ready to dive deeper into HTML and CSS? What better way to do it than by building a 5 page, interactive travel guide optimized for mobile devices? Level 2 will take you through it the fun way. Add audio and video to your webpages, make interactive buttons, create an HTML table and discover new ways to code with color.

View HTML/CSS Level 2

HTML/CSS level 3 (In development)

Responsive Web Design makes your website look great on any screen size, so we’ll show you how to use it in our level 3 course! Along the way you’ll learn how to use advanced CSS selectors and special layout techniques. Oh, we’ll also introduce you to PHP – a powerful scripting language used to make dynamic websites like Facebook.

HTML/CSS Level 3 Coming Soon!

HTML/CSS level 4 (In development)

In Level 4 learn advanced skills that will get you sought after in the I.T. industry. This course teaches best practice for organizing code and maintaining large websites using the BEM naming convention and the CSS pre-processor LESS. These tools streamline collaborative processes, making you an important member of any team. In addition, add new CSS properties to your inventory for even more engaging webpages.

HTML/CSS Level 4 Coming Soon!

Why Should You Learn With Our Intro Courses?

If you have looked through our courses you would have seen our range of lessons on Python, JavaScript, HTML/CSS, and more courses on using those languages as tools in Game Development, Web development and Design.
We also have an Intro to Coding course where we have stripped down and simplified our level one courses to give you a quick taste of what coding looks like with some fun finished products.

If you're new to programming, this is where you want to start so you can see what language you want to learn first: the easy to learn Python, with it's simpler commands that are easy to understand and remember. Widely used JavaScript, which is commonly used by a wide group of developers for gaming, creating large text based programs, to making websites interactive. Or do you want to dip your toes into the markup languages of HTML and CSS to create beautiful and informative webpages.

View the Intro to Coding track now!

Code Avengers Introduction Courses

The Code Avengers Introduction track has 3 lessons, 5 projects and a quiz, with more learning material being added often.

HTML/CSS

The track starts with our HTML/CSS Introduction. In 5 lessons, this 2 hour course will teach you about tags and the basic structure of a webpage, how to add images, videos and links and a little CSS to add style to your webpage. At the end of this course you will have made a WikiJnr webpage, tested your knowledge with a quiz and learned a little about JQuery, the JavaScript library that can add all sorts of cool functionality to your web page.

View the HTML/CSS outline

JavaScript

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 your done, you can build your first game with our "Intro to Game Development" listed in the projects section on the right and practice important concepts like drawing graphics, following sequences or reading co-ordinates.
View the outline of the Intro to JavaScript

Python

Finally, the 5 lesson Introduction to Python course. This 1 hour course will give you a short overview of all of the basics of Python. It's great if you just want to get an idea of what the language is like, or if you have never done any programming before. In here you will learn a range of Python skills such as input, output, variables, if statements, turtles and loops to build a basic program.

Try Python now!

Teaching Intro to Coding in schools

If you are a teacher wanting to introduce programming into your classroom, we recommend you start here. We have even made a unit of lesson plans that you can follow to teach this as a 10 hour course. It could be taught in school or as a code camp or after school activities program. This course has been run with students as young as nine years old and all around the world, they can make fun and real-world things like wiki Jnr pages, quizzes and games. We also have developed a range of physical activities to get the body and mind moving while teaching important computing concepts.

See our lesson plans on Intro to Coding here!

Our courses are written in a way that they align with the programming learning objectives of a number of different countries curricula, and we're happy to help you out if you want to know which levels or sections your class should do to cover a particular topic. And like the rest of our courses, we also have a fantastic teacher dashboard which allows you to see how your students are progressing and any lessons they are having trouble with.

View the Intro to Coding track now!

We are so excited to see people get into coding and try something new. I promise it is not nearly as scary as you might think! Code Avengers is here to make coding awesome and give you a helping hand.

1. NAV BAR

13HRS

Resources

Guide

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}/image/RedLogoMedium.png"
                                    alt="Code Avengers logo" width="200" height="25"
                                    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}/image/RedLogoMedium.png"
                                    alt="Code Avengers logo" width="200" height="25"
                                    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!

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

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

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

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

.t-quiz > * {
        font-size: initial !important;
        margin-bottom: 0 !important;
    }
</style>
<link rel="stylesheet" href="/css/main.min.css?546885">

{{#each css}}
<link rel="stylesheet" href="{{this}}">
{{/each}}
<script>
    window.CHINA = true;
    window._MIN_ = '';
    window.CURRENT_VERSION = '1';
    window.IFRAME = true;
</script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>

Digital Postcard - Lesson 1. 1

15 min

HTML, CSS and JavaScript: The Bones of a Webpage

5 min

Tags—start/end and self-closing

5 min

Elements

5 min

Indenting HTML

5 min

Head section—for the computer to read

5 min

Body section—webpage content

5 min

Label the Parts of a Web Page

5 min

Changing colors with CSS

5 min

Where to next?

Create a postcard

Digital Postcard - Lesson 1. 1

15 min

HTML, CSS and JavaScript: The Bones of a Webpage

5 min

Tags—start/end and self-closing

5 min

Elements

5 min

Indenting HTML

5 min

Head section—for the computer to read

5 min

Body section—webpage content

5 min

Label the Parts of a Web Page

5 min

Changing colors with CSS

5 min

Where to next?

Create a postcard—a simple HTML course for beginners

HTML/CSS Intro Project

Digital Postcard - Lesson 1. 1

Lesson Outline

Concepts

HTML, CSS and JavaScript: The Bones of a Webpage

HTML - the markup language (Format the content)

CSS - the style sheet language (Make it pretty)

JavaScript - the programming language (Make things clickable and interactive)

Concepts

Tags—start/end and self-closing

Start and end tags

Self-closing tags

Concepts

Elements

Concepts

Indenting HTML

How much do we indent by?

Concepts

Head section—for the computer to read

Doctype <!DOCTYPE HTML>

Title <title> </title>

Link <link>

Concepts

Body section—webpage content

Heading tags <h1></h1>

Here is an example section of a webpage about foxes.

Paragraph tag <p>

Break tags <br>

Image tag <img src="">

alt attribute

Anchor tag <a href="">Link</a>

Code Avengers Quiz

Label the Parts of a Web Page

Concepts

Changing colors with CSS

Where to next?

Read more below

Computer Coding – the New Direction

What is HTML/CSS?

Code Avengers HTML/CSS Courses

Doctype `<!DOCTYPE HTML>`

Title `<title> </title>`

Link `<link>`

Heading tags `<h1></h1>`

Paragraph tag `<p>`

Break tags `<br>`

Image tag `<img src="">`

Anchor tag `<a href="">Link</a>`