Select Lesson

Image styles and color

60 min

Anchor Styles Quiz

5 min

Image width & height in CSS `width:`, `height:`, `max-width:`

5 min

Border

5 min

Individual borders for a side

5 min

Color names

2 min

RGB colors —`rgb(r,g,b)`

3 min

RGB Colors Quiz

5 min

Hex colors —`#RRGGBB`

3 min

HEX Colors Quiz

5 min

HSL colors —`hsl(hue, saturation, lightness)`

5 min

Adobe color panel

2 min

ColorZilla

3 min

Lesson 16. Image borders

15 min

Image Styles Quiz

5 min

Review Quiz 2

5 min

Some other fun links

5 min

Image & Color CSS

Level One

Image styles and color

60 min

Anchor Styles Quiz

5 min

Image width & height in CSS `width:`, `height:`, `max-width:`

5 min

Border

5 min

Individual borders for a side

5 min

Color names

2 min

RGB colors —`rgb(r,g,b)`

3 min

RGB Colors Quiz

5 min

Hex colors —`#RRGGBB`

3 min

HEX Colors Quiz

5 min

HSL colors —`hsl(hue, saturation, lightness)`

5 min

Adobe color panel

2 min

ColorZilla

3 min

Lesson 16. Image borders

15 min

Image Styles Quiz

5 min

Review Quiz 2

5 min

Some other fun links

5 min

60 min

Image styles and color

How to add CSS to format images and a bit about how color works in CSS

vocab

prerequisites

Code Avengers Quiz

Anchor Styles Quiz

Start 5 min

Concepts

Image width & height in CSS `width:`, `height:`, `max-width:`

5 min

The width property specifies the width of an element, and the height property specifies the height of an element.

There are actually two ways to set the size of an image: using the img tag attribute or using a CSS property.

HTML

This sets the width of an image using the img tag attribute: <img src="/image/default.png" width="115">

CSS

This CSS code sets the width of all images on the page using a CSS property: img { width: 115px; }

There is also a max-width property.

It is very useful for small screens. It will set the width but if the screen is smaller than the width, the image will adjust.

(The value of the max-width property overrides width.)

The img tag attribute doesn't need a measurement, like px, on the end, but the CSS rule does. If you add the img tag attribute and the CSS rule, the CSS rule is used.

You can set the length with many different values.

pixels (px),
percentage of the container (%)
centimeters (cm)
auto (original size)

There are a lot more here

`width: auto`, `height: auto`

HTML Code

<style>
body{height:300px;}
img {
  width: auto;
  height: auto;
}
</style>
<img src="/image/default.png"><br>
The width and auto is set to the automatic size of the image

Webpage Output

`width: 150px`, `height: auto`

HTML Code

<style>
body{height:300px;}
img {
  width: 150px;
  height: auto;
}
</style>
<img src="/image/default.png"><br>
<p>The width is set to 150px and the height automatically scales

Webpage Output

`width: 100%`, `height: 133px`

Remember that % is the percentage of the container it fills up.

50% means "fill the half containers width." NOT set image to half its real size, as you might expect.

HTML Code

<style>
img {
  width: 100%;
  height:300px;
}
</style>
<img src="/image/default.png"><br>
<p>The width is set to 100% and the height to 300px

Webpage Output

HTML Code

<style>
body{height:300px;}
img {
  width: 50%;
  height:auto;
}
</style>
<img src="/image/default.png"><img src="/image/default.png"><br>
<p>The width is set to 50% and the height to auto

Webpage Output

Concepts

Border

5 min

A border is added to an image by setting the border-style property to solid.
The width of a border can be set with the border-width property.
The color of a border can be set with the border-color property.

Example:

img {
  border-color: tan;
  border-style: ridge;
  border-width: 10px;
  width: 150px;
}

This is the shorthand for border style. border:width style color;

The three values you can change are:

width:px, mm, in
style: solid, dotted, dashed, double, groove, ridge, inset, outset and none.
color: steelBlue, rgb(123,128,147), #7B8093 etc

Here are some examples:

Concepts

Individual borders for a side

5 min

You can control individual sides with border-top, -bottom, -right or -left.
You can write it the long way img{ border-top-style:dotted; border-top-width:10px; border-top-color:tomato; }

or use shorthand img{ border-top:10px dotted tomato; }

The CSS that is written last will take effect (as long as they have the same specificity , which these all have).

Example:

HTML Code

<style>
img {
  border:10px none lightSteelBlue;
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
  width: 150px;
  height: 215px;
}
  </style>
  <img src="/image/default.png">

Webpage Output

Concepts

Color names

2 min

140 color names are defined in the HTML and CSS color specification
(17 standard colors plus 123 more).
The table below lists them all:
image of color names

For Example

HTML Code

<style>
h3{
color: red; /*Named color value*/
}
</style>
<h3>Red colored text</h3>

Webpage Output

You can play around with the color names table → in the project IDE.

Heads Up!

These tools can all be accessed through the TOOLBOX inside the Code Avengers Lessons.

Concepts

RGB colors —`rgb(r,g,b)`

3 min

The CSS colors "gray", "blue", or "purple" can be boring and limiting.
You can define your own custom color using rgb color values.
An RGB value is the intensity of red, green, and blue used to make a color.
Each intensity value is on a scale of 0 to 255 , you can also use percent out of 100.

For example:

rgb(0,0,0) is Black and
- rgb(255,255,255)/ rgb(100%,100%,100%) is White.
  - rgb(255,0,0)/ rgb(100%,0,0) is Red,
    - rgb(0,255,0) or rgb(0,100%,0) is Green and
      - rgb(0,0,255) or rgb(0,0,100%) is Blue.
        
        slateBlue has these RGB values rgb(106,90,205).

There is a 4th value that can be added, alpha to rgba color values to specify transparency .
Alpha is between 0(completely transparent) to 1 (completely opaque). So 0.5 is semi-transparent.

For Example

HTML Code

<style>
/*RGB color value (Red,Green,Blue)*/
.red {
  color: rgb(255, 0, 0);
}
/*RGB using % rather than a number from 0-255*/  
.green{
  color: rgb(0%, 50%, 0%);
}
/*A semi-transparent blue*/
.blueAndTransparent{
  color: rgba(0, 0, 255, 0.5); 
}
</style>
<p class="red">You can use a number between 0-255: rgb(255,0,0)
<p class="green">You can use a percent out of 100: rgb(0%,50%,0%)
<p class="blueAndTransparent"> And you can add a number between 0 and 1 to the alpha channel to control transparency: rgba(0, 0, 255, 0.5)

Webpage Output

Try the RGB color values table

Try the RGB colors mixer

Heads Up!

These tools can all be accessed through the TOOLBOX inside the lessons.

Code Avengers Quiz

RGB Colors Quiz

Start 5 min

Concepts

Hex colors —`#RRGGBB`

3 min

The red, green, and blue intensity can also be valued using hexadecimal from 00 to FF (0-255 in RGB).
There are six digits, in three pairs for the colors #RRGGBB. Each digit goes from 0-15 (A-F replace the decimal numbers 10-15).
The hex number for black is #000000 and #FFFFFF are the values for white. 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15

For Examples

HTML Code

<style>
  .red{
/*Hex color value*/
    color: #FF0000;
  }
  .green{
/*2 digits for each color*/  
    color: #00A900;
  }
  .gray{
/*Grays just repeat the same value for red,green and blue.*/  
    color: #5F5F5F; 
  }
</style>

<p class="red">#FF0000 sets the intensity of only the red value to max. 
<p class="green">#00A900 is a less intense (bright) value than #00FF00.
<p class="gray">Grays are made by using the same values for the different colors, E.G. 5F= #5F5F5F

Webpage Output

Try the HEX color mixer to mix and match your own hex values.

Try the HEX & RGB Color widget >> to see the two different color values together.

There is more information on hexadecimals in the extension work.

Code Avengers Quiz

HEX Colors Quiz

Start 5 min

Concepts

HSL colors —`hsl(hue, saturation, lightness)`

5 min

HSL colors are RGB colors rearranged in a model designed to be more intuitive to use and more relevant. hsl(hue, saturation, lightness) color: hsl(0, 100%, 50%); /*HSL color value for pure red.*/

HTML Code

<style>
p{
  color: hsl(0, 100%, 50%); 
/*HSL color value for pure red.*/}
</style>
<p>HSL: Hue, Saturation, Lightness

Webpage Output

HSL uses three values:

Hue

Hue is the "pure" color. The values are degrees on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. The degrees in between are a pure mix of those colors.

Name	Degrees	Color
Red	0°
Yellow	60°
Green	120°
Cyan	180°
Blue	240°
Purple	300°

Saturation

Saturation uses a percentage; 0% is gray and 100% is full colour. Saturation determines the ratio of colorfulness to brightness. (A basic use is to make color duller or more vivid).

Percent:	0%	20%	40%	60%	80%	100%
Saturation

Lightness

Lightness asks how bright is it compared to the brightness of a white with the same values? 0% is dark (black), 100% is light (white), and 50% is the average (the one you will want for a pure hue).
This is how you get your tints and shades- lighter and darker versions of a color.

Percent:	0%	20%	40%	60%	80%	100%
Lightness

Alpha channel (optional)

Like RGBa, HSLa has an optional alpha channel that controls the opacity (solidness) of a color. Again it is a number between 1 and 0 with 0.5 being semi-transparent.
background-color: hsla(0,100%,0%,0.2)

HTML Code

  <tr><td>0.2 <td style="background-color: hsla(0,100%,0%,0.2);">
  <tr><td>0.4 <td style="background-color: hsla(0,100%,0%,0.4);">
  <tr><td>0.6 <td style="background-color: hsla(0,100%,0%,0.6);">
  <tr><td>0.8 <td style="background-color: hsla(0,100%,0%,0.8);">
  <tr><td>1 <td style="background-color: hsla(0,100%,0%,1);">
  </table>

Webpage Output

Concepts

Adobe color panel

2 min

The Adobe color panel is a great tool for picking a color group when you don't know what color goes with what.

color.adobe.com is a tool used by web designers to create and share color schemes.

Concepts

ColorZilla

3 min

ColorZilla is a great website that has two features.

An eyedropper to select the values of a color on your screen and
A super easy gradient tool that then generates the CSS code for you to easily copy and apply to your buttons or backgrounds or what ever you need!

Try http://www.colorzilla.com, it is so easy to get color schemes!

Heads Up!

The eyedropper is a plugin so if you using Code Avengers at school or at work you may not have permissions to install it. You may need to email your IT admin for them to install it if you are unable too

HTML/CSS 1 Lesson

Lesson 16. Image borders

Start 15 min

Code Avengers Quiz

Image Styles Quiz

Start 5 min

Code Avengers Quiz

Review Quiz 2

Start 5 min

Extension: Concepts

Some other fun links

5 min

1. NAV BAR

13HRS

Resources

Guide

</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-ca-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-ca-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-ca-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-ca-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-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-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-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-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-ca-left-arrow -double"></i><i class="slide_controls-icon icon-ca-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-ca-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-ca-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-ca-right-arrow -double"></i><i class="slide_controls-icon icon-ca-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-ca-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-ca-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-ca-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-ca-star course-box_percentage-star"></i>
<i class="icon-ca-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="/dist/style.min.css?0.052468554855654936">
{{#each css}}
{{/each}}
<script>
    window.CHINA = true;
    window._MIN_ = '';
    window.CURRENT_VERSION = '1';
    window.IFRAME = true;
</script>
<script src="/js/jquery.js?v=yOKaW5htuhTZ_ZEWQ-n3h0ennNBkN3zmVmtasuaxVKk"></script>
<script src="/js/jquery-ui.min.js?v=_CzTpg6QTje_ISm9yjDTYORSNm5j6oJ56j0nP6TCzhc"></script>

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}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    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}/images/logo-full.png"
                                    alt="Code Avengers logo" width="200"
                                    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!

Anchor Styles Quiz

5 min

Image width & height in CSS width:, height:, max-width:

5 min

Border

5 min

Individual borders for a side

5 min

Color names

2 min

RGB colors —rgb(r,g,b)

3 min

RGB Colors Quiz

5 min

Hex colors —#RRGGBB

3 min

HEX Colors Quiz

5 min

HSL colors —hsl(hue, saturation, lightness)

5 min

Adobe color panel

2 min

ColorZilla

3 min

Lesson 16. Image borders

15 min

Image Styles Quiz

5 min

Review Quiz 2

5 min

Some other fun links

5 min

Image & Color CSS

Anchor Styles Quiz

5 min

Image width & height in CSS width:, height:, max-width:

5 min

Border

5 min

Individual borders for a side

5 min

Color names

2 min

RGB colors —rgb(r,g,b)

3 min

RGB Colors Quiz

5 min

Hex colors —#RRGGBB

3 min

HEX Colors Quiz

5 min

HSL colors —hsl(hue, saturation, lightness)

5 min

Adobe color panel

2 min

ColorZilla

3 min

Lesson 16. Image borders

15 min

Image Styles Quiz

5 min

Review Quiz 2

5 min

Some other fun links

5 min

Image styles and color

Code Avengers Quiz

Anchor Styles Quiz

Concepts

Image width & height in CSS width:, height:, max-width:

width: auto, height: auto

width: 150px, height: auto

width: 100%, height: 133px

Concepts

Border

Example:

Concepts

Individual borders for a side

Example:

Concepts

Image width & height in CSS `width:`, `height:`, `max-width:`

RGB colors —`rgb(r,g,b)`

Hex colors —`#RRGGBB`

HSL colors —`hsl(hue, saturation, lightness)`

Image width & height in CSS `width:`, `height:`, `max-width:`

RGB colors —`rgb(r,g,b)`

Hex colors —`#RRGGBB`

HSL colors —`hsl(hue, saturation, lightness)`

Image width & height in CSS `width:`, `height:`, `max-width:`

`width: auto`, `height: auto`

`width: 150px`, `height: auto`

`width: 100%`, `height: 133px`

RGB colors —`rgb(r,g,b)`

Hex colors —`#RRGGBB`

HSL colors —`hsl(hue, saturation, lightness)`