Learn to build websites, apps and games in a fun and effective way.

Learn HTML CSS JAVASCRIPT PYTHON JQUERY DESIGN

20 hrs.

To Code This

10 hrs.

To Code This

2 hrs.

To Code This

Learn to code a {type} like this in as little as {time} hrs.

Game App Webpage

Choose your track

Created by
Expert Educators

Meet the Team

Used by 10,000+ High
Schools and Universities

Learn More

5 Star Rating From
Experienced Educators

Read Reviews

"A leading online
learning provider"

A learning experience
that's actually fun for
ages 12 to 100.

See How

You'll build real
world products.

Learn More

Effective learning
from 200+ hours
of in depth courses.

Learn More

Help from experts
when you need it.

Support Tools

Join 700,000 Other Students To Learn To Code

Dan Owen, USA

"I just want to compliment you on an outstanding site! I enjoyed immensely the Javascript lessons."
Mark, AUS

"Your lessons are awesome! You teach JavaScript thoroughly, in a way that is engaging, enjoyable, and most importantly, enriching for me as a complete beginner."
Karl Kajehart, USA

"I LOVED your first course on JavaScript! It's the best free resource out there! Thank you So MUCH for putting it together! You're helping us all to better the world of design and development!"
Akweli, UK

"I am REALLY enjoying the site. I found it after voicing my frustrations about CodeCademy to the Interwebs. Code Avengers is an order of magnitude better. You've truly created an addictive experience."
Gwen, NZ

"You've done a brilliant job. I am amazed by how much thought has been put into it, and the fact that someone has created a course who actually seems to know HOW to teach, and HOW people actually learn! I owe you a debt of gratitude!"
Cale Switzer, USA

"I started on codecademy and got frustrated when I couldn't figure out what was wrong with my code and couldn't advance. I went on to try your site and loved it - it is much more conceptual."
Pete, UK

"I've been looking for html5 courses all over the internet and your system is by far the best! I will definitely tell my friends about it. Thanks a lot."

Osine & Anesi

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

Read Their Story

Olivia

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

Read Olivia's Story

Benji

Started his own app development company.

Read Benji's Story

<!doctype html>
<meta name="viewport" content="width=device-width">
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
body {
  font-family: "Open Sans", sans-serif;
  color: white;
  background-color: black;
  margin: -1px 0 0 -1px;
  text-align: center;
  font-size: 14px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  background-color: white;
  border: 1px solid black;
}

table {
  position: absolute;
  width: 80%;
  height: 70px;
  background-color: black;
  top: 40%;
  opacity: 0.9;
  margin: auto;
  margin-top: -70px;
  left: 0;
  right: 0;
  cursor: pointer;
}

td {
  padding: 24px;
}

p {
  line-height: 28px;
}

.instructions {
  line-height: 20px;
}

</style>

new Game.BackgroundImage('/image/game/tile/1.png')

var p1 = new Game.Player(200, 25, '/image/game/player1.png')
var p2 = new Game.Player(25, 25, '/image/game/player2.png', 'w', 'a', 's', 'd')
p1.scaling = 0.4
p2.scaling = 0.4

var e1 = new Game.Enemy(25, 350, '/image/game/player10.png')
var e2 = new Game.Enemy(200, 350, '/image/game/player10.png')
e1.scaling = 0.4
e2.scaling = 0.4

var path = new Path()
path.add(15, 75)
path.add(65, 75)
new Game.Obstacle(path, '/image/game/obstacle/1.png')

path = new Path()
path.add(225, 75)
path.add(175, 75)
new Game.Obstacle(path, '/image/game/obstacle/1.png')

path = new Path()
path.add(65, 150)
path.add(65, 275)
new Game.Obstacle(path, '/image/game/obstacle/1.png')

path = new Path()
path.add(175, 150)
path.add(175, 275)
new Game.Obstacle(path, '/image/game/obstacle/1.png')

new Game.GoodItem(120, 100, '/image/game/goodItem/1.png')
new Game.GoodItem(120, 220, '/image/game/goodItem/1.png')
new Game.GoodItem(120, 350, '/image/game/goodItem/1.png')
new Game.GoodItem(25, 220, '/image/game/goodItem/1.png')
new Game.GoodItem(215, 220, '/image/game/goodItem/1.png')

new Game.BadItem(65, 300, '/image/game/badItem/1.png')
new Game.BadItem(175, 300, '/image/game/badItem/1.png')

new Game.Scoreboard()
view.pause();
</script>

<table onclick="this.style.display='none';paper.view.play(); paperscriptCanvas.focus(); window.parent.pausePreviews()">
<tr><td><p><b>Click to start</b>
<p class="instructions">Dodge the enemies and collect the most coins. Use the arrow keys and 'wasd' keys to move the players.</p>
</table>

<!doctype html>
<meta name="viewport" content="width=device-width">
<style>
body {
  font-family: "Open Sans", sans-serif;
  color: white;
  background-color: black;
  margin: -1px 0 0 -1px;
  text-align: center;
  font-size: 14px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  background-color: white;
  border: 1px solid black;
}

table {
  position: absolute;
  width: 80%;
  height: 70px;
  background-color: black;
  top: 40%;
  opacity: 0.9;
  margin: auto;
  margin-top: -70px;
  left: 0;
  right: 0;
  cursor: pointer;
}

td {
  padding: 24px;
}

p {
  line-height: 28px;
}

.instructions {
  line-height: 20px;
}

</style>
    
<script src="/js/paper.js"></script>
<script type="text/paperscript" canvas="paperscriptCanvas">
//paper 239 382
var boss;
var score = new Game.Score();
Game.GoodItem.size = 25;
Game.BadItem.size = 25;

var ship = new Game.Player(120, 350, '/image/game/ship.png');
ship.scaling = 0.4;
ship.speed = 3;
var gun = new Game.Gun();
gun.onlyDirection = gun.UP;
gun.setPositions([new Point(0, -30)]);
ship.gun = gun;

Game.setScrollingBackground('/image/game/background.jpg', 1, true);
//Game.setBackgroundMusic(1);

for (var i = 0; i < 3; i++) {
  createBadItem();
  createGoodItem();
}

onFrame = function() {
  if (!boss && score.get() > 4) {
    boss = new Game.Enemy(200, -50, '/image/game/enemy.png');
    boss.health = 5;
    var gun = new Game.Gun();
    gun.onlyDirection = gun.DOWN;
    gun.setPositions([new Point(0, 30)]);
    gun.fireSpeed = 1;
    gun.bullet = '/image/game/bullet-blue.png';
    boss.gun = gun;
    boss.onKilled = function() {
      Game.badItems.removeAll();
      Game.goodItems.removeAll();
      Game.fadeOut('Victory!');
    }
  }
}

view.pause();
</script>

<table onclick="this.style.display='none';paper.view.play(); paperscriptCanvas.focus(); window.parent.pausePreviews()">
<tr><td><p><b>Click to start</b>
<p class="instructions">Avoid the bombs, collect the orbs, defeat the boss! Use the arrows to move and spacebar to shoot.</p>
</table>

canvas {
  background-color: white;
  border: 1px solid black;
}

table {
  position: absolute;
  width: 80%;
  height: 70px;
  background-color: black;
  top: 38%;
  opacity: 0.9;
  margin: auto;
  margin-top: -70px;
  left: 0;
  right: 0;
  cursor: pointer;
}

td {
  padding: 24px;
}

p {
  line-height: 28px;
}

.instructions {
  line-height: 20px;
}

</style>

var SCREEN_HEIGHT = 382;
var SCREEN_WIDTH = 239;

var scoreboard = new PointText({
    point: [120, 135],
    content: '0:0',
    fontSize: 60,
    opacity: 0.4,
    justification: 'center'
});

var score1 = 0;
var score2 = 0;
var goal1 = new Goal(0, score2);
var goal2 = new Goal(372, score1);
var ball = new Ball();
var timer = new Game.Timer(60, new Point(120, 272), 'center');
timer.start();
timer.status._text.opacity = 0.4;

var p1 = new Robot(120, 30);
p1.setKeys('w', 'd', 's', 'a');
var p2 = new Robot(120, 350);
p2.fillColor = 'red';
p2.strokeColor = 'orange';

function Ball() {
  var ball = new Shape.Circle(new Point(0, 0), 4);
  ball.fillColor = 'white';
  ball.MASS = 0.04;
  ball.MAX_SPEED = 10;
  ball.MIN_SPEED = 0.1;
  ball.DECELERATION = 0.992;
  ball.WALL_DECELERATION = 0.95;
  
  ball.reset = function() {
    this.velocity = new Point(2.5, 0);
    this.position = new Point(this.radius, SCREEN_HEIGHT / 2);
  };
  
  ball.reset();
  ball.onFrame = moveObject;
  
  return ball;
}

function onFrame() {
  //if (!timer.isRunning()) return;
  
  checkCollision(p1, ball);
  checkCollision(p2, ball);
  checkCollision(p1, p2);
  if (goal1.checkCollision())
    score2++;
  else if (goal2.checkCollision())
    score1++;
  scoreboard.content = score1 + ':' + score2;
}

function calculateCollisionVelocity(o1, o2) {
  //Calculate normal
  var x = o1.position - o2.position;
  var n = x.dot(x);
  var v = o1.velocity - o2.velocity;
  var m = 2 * o2.MASS / (o1.MASS + o2.MASS)
  var delta = x * v.dot(x) / n * m;
  
  return o1.velocity - delta;
}

function checkCollision(o1, o2) {
  var hit = o1.hitTest(o2.position, {tolerance: o2.radius});
  
  if (hit) {
    var u2 = calculateCollisionVelocity(o2, o1);
    var u1 = calculateCollisionVelocity(o1, o2);

//Move the ball back a bit so they are free to move
    o1.position -= o1.velocity * 1.5;
    o2.position -= o2.velocity * 1.5;

o1.velocity = u1;
    o2.velocity = u2;
  }
}

function Robot(x, y) {
  //Add private variables
  var robot = new Shape.Circle(x, y, 10);
  robot.velocity = new Point(0, 0);
  robot.strokeWidth = 2;
  robot.fillColor = 'blue';
  robot.strokeColor = 'white';

<table onclick="this.style.display='none';paper.view.play(); paperscriptCanvas.focus(); window.parent.pausePreviews()">
<tr><td> <p><b>Click to start</b>
<p class="instructions">The player with the most goals after 60 seconds wins! Use the arrow keys and 'wasd' keys to move the players.<p>
</table>

<!doctype html>
<title>Code Avengers customer survey</title>
<link rel="stylesheet" href="/css/wiki.css">
<img src="/images/logo5.png" alt="CodeAvengers Logo" title="Go to the Code Avengers home page">

<h3>Customer Survey</h3>

Help <strong>US</strong> to help <strong>YOU</strong> by answering these 6 quick questions. Then submit your answers and we will message you back personally!
<br>
<br>

<h2>Question 1</h2>
Why are you learning to Code?
<br>
<select id="q1">
  <option></option>
  <option>Want to build an App</option>
  <option>Want to build a Website</option>
  <option>Want to build a Game</option>
  <option>To learn a specific coding language</option>
  <option>Learning at School</option>
  <option>Teaching at School</option>
  <option>I want to get a Job</option>
  <option>Become a web developer</option>
  <option>Become a software developer</option>
</select>
<br>
<br>

<h2>Question 2</h2>
How much coding experience do you have? <br>
<br>
<label><input id="aloneCheckbox" type="checkbox">None at all</label><br>
<label><input id="smallCheckbox" type="checkbox">very little</label><br>
<label><input id="largeCheckbox" type="checkbox">self taught online</label><br>
<label><input id="smallCheckbox" type="checkbox"> Studied at school</label><br>
<label><input id="largeCheckbox" type="checkbox"> Work in industry</label><br>
<br>
<br>

<h2>Question 3</h2>
On a scale of 1 to 10, how interested are you in learning to code?
<br>
<br>
1 being <strong>Not interested at all</strong>;
<br>
10 being <strong>Extremely interested</strong>
<br>
<br>
1 <input id="googlinessRange" max="10" min="1" type="range"> 10
<br>
<br>

<h2>Question 4</h2>
Which of the following best describes you current situation:
<br>
<select id="q4">
  <option></option>
  <option>Primary school student</option>
  <option>Middle school student</option>
  <option>High school student</option>
  <option>University student</option>
  <option>Currently employed</option>
  <option>Looking for a job</option>
  <option>Stay at home parent</option>
  <option>other</option>
</select>
<br>
<br>

<h2>Question 5</h2>
Are you:
<br>
<br>
<label><input id="aloneCheckbox" name="gender" type="radio">Male</label><br>
<label><input id="smallCheckbox" name="gender" type="radio">Female</label><br>
<br>
<br>

<h2>Question 6</h2>
What age bracket are you in?
<br>
<select id="q6">
  <option></option>
  <option>0-9 years</option>
  <option>10-19 years</option>
  <option>20-29 years</option>
  <option>30-39 years</option>
  <option>40-49 years</option>
  <option>50+ years</option>
</select>
<br>
Type in your <strong>Email Address</strong> (optional) if you would like us to send you a personal message.
<br>
<textarea id="addressTextarea" rows="2"></textarea>
<br>
<button id="submitButton">Submit</button>
<br>
<br>

<footer>Created by Code Avengers</footer>
<script src="/js/app.js"></script>
<script>

function submitApplication() {
  var message = '<h1>Google Job Application</h1>';
  message += '<h3>Personal Information</h3>';
  message += 'Name: ' + nameInput.value;
  message += '<br>Address: ' + addressTextarea.value;
  message += '<br>Phone: ' + phoneInput.value;
  message += '<br>Email: ' + emailInput.value;
  message += '<h3>Application Questions</h3>';
  message += 'Googliness: ' + googlinessRange.value;
  message += '<br>World Peace: ' + peaceTextarea.value;
  message += '<br>Environments: ';
  if (aloneCheckbox.checked) message += 'Alone. ';
  if (smallCheckbox.checked) message += 'Small group. ';
  if (largeCheckbox.checked) message += 'Large group. ';
  app.sendEmail('Google Job Application', message, 'support@codeavengers.com');
}

submitButton.onclick = submitApplication;

window.parent.showPreview();
</script>

<!doctype html>
<title>firebase</title>
<link rel="stylesheet" href="/css/ca-icon-font.css">
<style>

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  width: 320px;
  overflow-x: hidden;
}

body {
  background-color: #161a1e;
  color: #fff;
  margin: 0;
  padding: 10px 15px;
  width: 320px;
  overflow-x: hidden;
}

.icon-ca-logo {
  font-size: 50px;
}

#inputBox, #nameBox {
  background-color: #303337;
  border: none;
  color: #999a9b;
}

#inputBox {
  bottom: 0px;
  left: 0px;
  font-size: 20px;
  padding: 15px 20px 30px;
  position: fixed;
  width: 100%;
}

#nameBox {
  top: 10px;
  right: 10px;
  font-size: 20px;
  padding: 12px;
  position: fixed;
  width: 65%;
}

#messageBox {
  position: fixed;
  top: 60px;
  bottom: 82px;
  width: 365px;
  overflow-y: scroll;
  overflow-x: none;
  overflow-x: hidden;
}

.message {
  border-bottom: 1px solid #babbbc;
  padding: 0 10px 20px 10px;
  margin: 15px 0;
  position: relative;
  width: 88%;
}

.message:last-of-type {
  border: none;
}

.letter {
  font-size: 20px;
  border: 2px solid #babbbc;
  border-radius: 50%;
  display: inline-block;
  padding: 10px 14px;
  position: absolute;
  text-align: center;
  width: 15px;
  font-weight: 300;
}

.text {
  padding-left: 63px;
  display: inline-block;
  width: 210px;
  overflow-x: hidden;
}

.text img {
  width: 100%;
  height: auto;
}

.text a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text h3, .text p {
  color: #a7a8a9;
  padding: 0;
  margin: 0;
}

.text a {
  color: #fff;
  /*
  text-decoration: none;
  background-color: #272c31;
  padding: 3px;
  display: inline-block;
  max-width: 150px;
  margin: 0 5px;
  position: relative;
  top: 10px;
  */
}

.text h3 {
  margin-bottom: 8px;
}

.text p {
  color: #fff;
  line-height: 25px;
  min-height: 25px;
}
</style>

var messages = new Firebase('https://boiling-fire-2942.firebaseio.com/messages');

messages.limitToLast(50).on("child_added", function(m) {
  addMessage(m.val())
});

inputBox.onkeyup = function(e) {
  if (e.which === 13) {
    if(this.value){
      
      var msg = {
        text: this.value,
        author: nameBox.value
      }
      
      if(isDirty(this.value) || isDirty(nameBox.value)) {
        addMessage(msg)
      } else {
        messages.push(msg)
      }
        
      
    }
    this.value = '';
  }
}

function isDirty(test){
  
  var map = {};

var list = $('#bannedList').text().split("\n");
    list.forEach(function(value){
      value = value.trim();
      if(value)
        map[value] = true;
    });
    
    test = test.split(/\W+/);
    
    var dirty = test.some(function(val){
      return map[val];
    })
    
    return dirty;
    
}

/*!
 * polyfill.insertAdjacentHTML.js
 * Author: Jared Abbott
 * Description: A Cross-browser implementation of HTMLElement.insertAdjacentHTML
 * Copyright 2015 Jared Abbott
 * Distributed under the MIT license
 */

if (!("insertAdjacentHTML" in document.createElementNS("http://www.w3.org/1999/xhtml", "_"))) {
HTMLElement.prototype.insertAdjacentHTML = function(position, html) {
    "use strict";
    
    var node, 
    element = this, 
    container = element.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "_"), 
    parent = element.parentNode, 
    nodeFrag = document.createDocumentFragment();
    
    // Make position lowercase
    position = position.toLowerCase();
    
    // Insert the container HTML and append the resulting nodes to nodeFrag
    container.innerHTML = html;
    while (node == container.firstChild) {
      nodeFrag.appendChild(node);
    }
    
    // Add nodes to DOM
    if (position === "beforeend") {
      element.appendChild(nodeFrag);
    } else if (position === "afterbegin") {
      element.insertBefore(nodeFrag, element.firstChild);
    } else if (position === "beforebegin") {
      parent.insertBefore(nodeFrag, element);
    } else if (position === "afterend") {
      parent.insertBefore(nodeFrag, element.nextElementSibling);
    }
  }
  ;
}
</script>
<script>
  window.parent.showPreview();
</script>
<script id="bannedList" type="text">
  4r5e 
  5h1t 
  5hit 
  a55 
  anal 
  anus 
  ar5e 
  arrse 
  arse 
  ass 
  ass-fucker 
  asses 
  assfucker 
  assfukka 
  asshole 
  assholes 
  asswhole 
  a_s_s 
  b!tch 
  b00bs 
  b17ch 
  b1tch 
  ballbag 
  balls 
  ballsack 
  bastard 
  beastial 
  beastiality 
  bellend 
  bestial 
  bestiality 
  bi+ch 
  biatch 
  bitch 
  bitcher 
  bitchers 
  bitches 
  bitchin 
  bitching 
  bloody 
  blow job 
  blowjob 
  blowjobs 
  boiolas 
  bollock 
  bollok 
  boner 
  boob 
  boobs 
  booobs 
  boooobs 
  booooobs 
  booooooobs 
  breasts 
  buceta 
  bugger 
  bum 
  bunny fucker 
  butt 
  butthole 
  buttmuch 
  buttplug 
  c0ck 
  c0cksucker 
  carpet muncher 
  cawk 
  chink 
  cipa 
  cl1t 
  clit 
  clitoris 
  clits 
  cnut 
  cock 
  cock-sucker 
  cockface 
  cockhead 
  cockmunch 
  cockmuncher 
  cocks 
  cocksuck  
  cocksucked  
  cocksucker 
  cocksucking 
  cocksucks  
  cocksuka 
  cocksukka 
  cok 
  cokmuncher 
  coksucka 
  coon 
  cox 
  crap 
  cum 
  cummer 
  cumming 
  cums 
  cumshot 
  cunilingus 
  cunillingus 
  cunnilingus 
  cunt 
  cuntlick  
  cuntlicker  
  cuntlicking  
  cunts 
  cyalis 
  cyberfuc 
  cyberfuck  
  cyberfucked  
  cyberfucker 
  cyberfuckers 
  cyberfucking  
  d1ck 
  damn 
  dick 
  dickhead 
  dildo 
  dildos 
  dink 
  dinks 
  dirsa 
  dlck 
  dog-fucker 
  doggin 
  dogging 
  donkeyribber 
  doosh 
  duche 
  dyke 
  ejaculate 
  ejaculated 
  ejaculates  
  ejaculating  
  ejaculatings 
  ejaculation 
  ejakulate 
  f u c k 
  f u c k e r 
  f4nny 
  fag 
  fagging 
  faggitt 
  faggot 
  faggs 
  fagot 
  fagots 
  fags 
  fanny 
  fannyflaps 
  fannyfucker 
  fanyy 
  fatass 
  fcuk 
  fcuker 
  fcuking 
  feck 
  fecker 
  felching 
  fellate 
  fellatio 
  fingerfuck  
  fingerfucked  
  fingerfucker  
  fingerfuckers 
  fingerfucking  
  fingerfucks  
  fistfuck 
  fistfucked  
  fistfucker  
  fistfuckers  
  fistfucking  
  fistfuckings  
  fistfucks  
  flange 
  fook 
  fooker 
  fuck 
  fucka 
  fucked 
  fucker 
  fuckers 
  fuckhead 
  fuckheads 
  fuckin 
  fucking 
  fuckings 
  fuckingshitmotherfucker 
  fuckme  
  fucks 
  fuckwhit 
  fuckwit 
  fudge packer 
  fudgepacker 
  fuk 
  fuker 
  fukker 
  fukkin 
  fuks 
  fukwhit 
  fukwit 
  fux 
  fux0r 
  f_u_c_k 
  gangbang 
  gangbanged  
  gangbangs  
  gaylord 
  gaysex 
  goatse 
  God 
  god-dam 
  god-damned 
  goddamn 
  goddamned 
  hardcoresex  
  hell 
  heshe 
  hoar 
  hoare 
  hoer 
  homo 
  hore 
  horniest 
  horny 
  hotsex 
  jack-off  
  jackoff 
  jap 
  jerk-off  
  jism 
  jiz  
  jizm  
  jizz 
  kawk 
  knob 
  knobead 
  knobed 
  knobend 
  knobhead 
  knobjocky 
  knobjokey 
  kock 
  kondum 
  kondums 
  kum 
  kummer 
  kumming 
  kums 
  kunilingus 
  l3i+ch 
  l3itch 
  labia 
  lmfao 
  lust 
  lusting 
  m0f0 
  m0fo 
  m45terbate 
  ma5terb8 
  ma5terbate 
  masochist 
  master-bate 
  masterb8 
  masterbat* 
  masterbat3 
  masterbate 
  masterbation 
  masterbations 
  masturbate 
  mo-fo 
  mof0 
  mofo 
  mothafuck 
  mothafucka 
  mothafuckas 
  mothafuckaz 
  mothafucked  
  mothafucker 
  mothafuckers 
  mothafuckin 
  mothafucking  
  mothafuckings 
  mothafucks 
  mother fucker 
  motherfuck 
  motherfucked 
  motherfucker 
  motherfuckers 
  motherfuckin 
  motherfucking 
  motherfuckings 
  motherfuckka 
  motherfucks 
  muff 
  mutha 
  muthafecker 
  muthafuckker 
  muther 
  mutherfucker 
  n1gga 
  n1gger 
  nazi 
  nigg3r 
  nigg4h 
  nigga 
  niggah 
  niggas 
  niggaz 
  nigger 
  niggers  
  nob 
  nob jokey 
  nobhead 
  nobjocky 
  nobjokey 
  numbnuts 
  nutsack 
  orgasim  
  orgasims  
  orgasm 
  orgasms  
  p0rn 
  pawn 
  pecker 
  penis 
  penisfucker 
  phonesex 
  phuck 
  phuk 
  phuked 
  phuking 
  phukked 
  phukking 
  phuks 
  phuq 
  pigfucker 
  pimpis 
  piss 
  pissed 
  pisser 
  pissers 
  pisses  
  pissflaps 
  pissin  
  pissing 
  pissoff  
  poop 
  porn 
  porno 
  pornography 
  pornos 
  prick 
  pricks  
  pron 
  pube 
  pusse 
  pussi 
  pussies 
  pussy 
  pussys  
  rectum 
  retard 
  rimjaw 
  rimming 
  s hit 
  s.o.b. 
  sadist 
  schlong 
  screwing 
  scroat 
  scrote 
  scrotum 
  semen 
  sex 
  sh!+ 
  sh!t 
  sh1t 
  shag 
  shagger 
  shaggin 
  shagging 
  shemale 
  shi+ 
  shit 
  shitdick 
  shite 
  shited 
  shitey 
  shitfuck 
  shitfull 
  shithead 
  shiting 
  shitings 
  shits 
  shitted 
  shitter 
  shitters  
  shitting 
  shittings 
  shitty  
  skank 
  slut 
  sluts 
  smegma 
  smut 
  snatch 
  son-of-a-bitch 
  spac 
  spunk 
  s_h_i_t 
  t1tt1e5 
  t1tties 
  teets 
  teez 
  testical 
  testicle 
  tit 
  titfuck 
  tits 
  titt 
  tittie5 
  tittiefucker 
  titties 
  tittyfuck 
  tittywank 
  titwank 
  tosser 
  turd 
  tw4t 
  twat 
  twathead 
  twatty 
  twunt 
  twunter 
  v14gra 
  v1gra 
  vagina 
  viagra 
  vulva 
  w00se 
  wang 
  wank 
  wanker 
  wanky 
  whoar 
  whore 
  willies 
  willy 
  wtf
  xrated 
  xxx 
</script>

<!doctype html>
<script src="/js/jquery.min.js"></script>
<style>
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
 
/* CSS TO STYLE MAIN ELEMENTS */
 
body {
  color: rgb(160,160,160);
  background-color: rgb(80,80,80);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  margin: 0 auto;
  overflow: hidden;
}
 
div {
  width: 359px;
}
 
/* CSS FOR MUSIC PLAYER CONTAINER */
 
.player {
  background-color: rgb(50,50,50);
  height: auto;
  margin: 0 auto 0;
}
 
/* CSS FOR BUTTON THAT SHOWS THE PLAYLIST */
 
.player-list-button {
  background: url('/images/jquery/icon-down.png');
  color: rgb(120,120,120);
  cursor: pointer;
  float: right;
  height: 20px;
  margin: 5px 3px;
  width: 20px;
}
 
.up {
  background: url('/images/jquery/icon-up.png');
}
 
/* CSS FOR SONG INFORMATION IN PLAYER*/
 
.player-info {
  height: 120px;
}
 
.player-info-image {
  background-color: rgb(20,20,20);
  float: left;
  height: 120px;
  overflow: hidden;
  width: 120px;
}
 
.player-info-image img{
  width: 100%;
}
 
.player-info-song {
  color: white;
  float: right;
  font-size: 20px;
  margin: 0 20px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 199px;
}
 
.player-info-artist {
  color: rgb(160,160,160);
  float: right;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  width: 199px;
  white-space: nowrap;
}
 
.player-info-range {
  float: right;
  margin: 30px 20px 0;
  width: 199px;
}
 
input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgb(30,30,30);
  border: none;
  height:6px;
  outline: none;
  margin: 0;
  width: 199px;
}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgb(100,100,100);
  height: 6px;
  outline: none;
  width: 25px;
}
 
/* CSS FOR THE MUSIC PLAYER BUTTONS */
 
.player-buttons {
  display: inline-block;
  margin: 10px 0;
  text-align: center;
}
 
.player-buttons-previous {
  background-image: url('/images/jquery/button-prev.png');
  cursor: pointer;
  display: inline-block;
  height: 60px;
  opacity: 0.5;
  width: 60px;
}
 
.player-buttons-play {
  background-image: url('/images/jquery/button-play.png');
  cursor: pointer;
  display: inline-block;
  height: 60px;
  opacity: 0.5;
  width: 60px;
}
 
.pause {
  background: url('/images/jquery/button-pause.png');
}
 
.player-buttons-next {
  background-image: url('/images/jquery/button-next.png');
  cursor: pointer;
  display: inline-block;
  height: 60px;
  opacity: 0.5;
  width: 60px;
}
 
.player-buttons-previous:hover,
.player-buttons-play:hover,
.player-buttons-next:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}
 
/* css FOR THE PLAYER LIST AND LIST ITEMS */
 
.player-list {
  height: 321px;
  overflow-x: hidden;
}
 
.player-list-item {
  background-color: rgb(40,40,40);
  cursor: pointer;
  height: 50px;
}
 
.item-image {
  background-color: rgb(20,20,20);
  float: left;
  height: 50px;
  margin: 0 10px 0 0;
  width: 50px;
}
 
.item-image img {
  width: 100%;
}
 
.item-song {
  color: rgb(180,180,180);
  font-size: 16px;
  font-weight: 600;
  height: 20px;
  margin: 0;
  padding: 5px 0 3px;
  width: 320px;
}
 
.item-artist {
  font-size: 10px;
  height: 20px;
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
  width: 250px;
}
 
/* CLASS USED TO HIGHLIGHT A SELECTED LIST ITEM */
 
.selected {
  background-color: rgb(60,60,60);
}
 
/* ID FOR THE YOUTUBE VIDEO PLAYER DIV */
 
#player {
    background-color: black;
    height: 120px;
    width: 120px;
  }
</style>
<div class="player">
  <div class="player-list-button up"></div>
  <div class="player-info">
    <div class="player-info-image"><img id="player"></div>
    <div class="player-info-song">Song Title</div>
    <div class="player-info-artist">Artist Name</div>
    
  </div>
  <div class="player-buttons">
    <div class="player-buttons-previous"></div>
    <div class="player-buttons-play"></div>
    <div class="player-buttons-next"></div>
  </div>
  <div class="player-list"></div>
</div>
 
<script>
    
    var player;
    var currentSong = 0;
    var paused = false;
    
    if (!window.SC) {
      loadScript('//connect.soundcloud.com/sdk.js', function() {
        window.SC.initialize({
          client_id: '6143a4b659c3034b50b389a0a0519da8'
        });
      });
    }
    /*
    $('.player-info-range input').on('input', function() { 
        
    });
    */
    var playlist = [{
      "song": "And Such",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/artworks-000106527157-pj7bsa-t200x200.jpg",
      "url": "190850746",
    },{
      "song": "If Only",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/artworks-000092316003-lj81gf-t200x200.jpg",
      "url": "169657357"
    },{
      "song": "The Present",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/artworks-000140101741-cd4ly0-t200x200.jpg",
      "url": "238224947"
    },{
      "song": "Bit Different",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/artworks-000090890074-d84jm7-t200x200.jpg",
      "url": "144285513"
    },{
      "song": "All Gone",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/avatars-000108082815-5sc8hf-t200x200.jpg",
      "url": "149914604"
    },{
      "song": "Stuff",
      "name": "Hundaes",
      "image": "https://i1.sndcdn.com/artworks-000093391314-wrvr3d-t200x200.jpg",
      "url": "106445336"
    }]
  
    var html;
    $.each(playlist, function(index, element){

html =  '<div class="player-list-item" data-id="'+index+'">\n';
      html += '<div class="item-image"><img src="'+element.image+'"></div>\n';
      html += '<div class="item-song">'+element.song+'</div>\n';
      html += '<div class="item-artist">'+element.name+'</div>\n';
      html += '</div>'

$('.player-list').append(html);
      $('.player-list').children().first().addClass('selected');
    });
    
    //set first song
    highlight();
 
    $('.player-list-button').on('click', function(){
      var margin = $('.player').css('margin-top');
      $(this).toggleClass('up');
 
      if(margin == "160px") {
        $('.player').animate({ marginTop: 0 }, 300);
        $('.player-list').slideDown();
      }
      else {
        $('.player').animate({ marginTop: 160 }, 300);
        $('.player-list').slideUp();
      }
    });
  
    function highlight() {
      
      var selected = $('div[class*=selected]');
      selected.removeClass('selected');
      selected = $('[data-id=' + currentSong + ']').addClass('selected');
      
      var song = selected.find('div[class$=song]').text();
      var artist = selected.find('div[class$=artist]').text();
      
      $('.player-info-song').text(song);
      $('.player-info-artist').text(artist);
      $('#player').attr('src', playlist[currentSong].image)
      
    }
 
    $('body').on('click', '.player-list-item', function(){
      
      $('.player-list-item').removeClass('selected');
      $(this).addClass('selected');
      
      currentSong = $(this).data('id');
      
      highlight();
      
      playSong();
      
    });
  
    $('.player-buttons-previous').on('click', function(){
      
      currentSong--;
      if(currentSong < 0){
        currentSong = playlist.length - 1;
      }
      
      highlight();
      
      playSong();
      
    });
 
    $('.player-buttons-next').on('click', function(){
      
      currentSong++;
      if(currentSong == playlist.length){
        currentSong = 0;
      }
      
      highlight();
      
      playSong();
      
    });
 
    $('.player-buttons-play').on('click', function(){
      $(this).toggleClass('pause');
      var buttonType = $(this).attr('class');
      
      if (buttonType == "player-buttons-play pause" && paused == false) {
        playSong();
      }
      else {
        paused = true;
        player.togglePause();
      }
    });
    
    function playSong(){
      
      if(player){
        player.stop();
      }
      
      SC.stream('/tracks/' + playlist[currentSong].url, {
          onfinish: function(){
            $('.player-buttons-next').trigger('click')
          },
          autoPlay: true,
          volume: 2
        }, function(song) {
          player = song;
        });
    }
    
    function loadScript(url, callback) {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      script.onreadystatechange = callback;
      script.onload = callback;
  
      // Fire the loading
      head.appendChild(script);
    }
  
  window.parent.showPreview();
  
</script>

<!doctype html>
<title>Code Avengers Profile</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Code Avengers super hero profile page">
<link rel="stylesheet" href="/css/profile3.css">

<section>
  <h2>Computer Programming and IT career options</h2>
  <p>Find out all you need to know about a variety of computer programming and IT career options. Click <strong>More Info</strong> to find out salary figures, list of job duties, and what you need to do to get that job.
  <br>
  <br>
  
  
  
  <h3>Computer Programmers</h3>
  <p>Computer programmers write code to create software programs. They turn the program designs created by software developers and engineers into instructions that a computer can follow.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-programmers">More Info</a>
  <br>
  <br>
  <img src="http://res.freestockphotos.biz/pictures/17/17120-illustration-of-a-laptop-computer-pv.png" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Software Developers</h3>
  <p>Software developers are tech-savvy, creative and generally out-of-the box thinkers, who help create mobile apps, web services, operating systems, and other software applications that consumers and enterprises use every day, including addictive computer games as well as surprisingly effective productivity apps.
  <p><a target="_blank" href="https://collegegrad.com/careers/software-developers">More Info</a>
  <br>
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/8-UX-Pitfalls-To-Avoid-In-Mobile-App-Design.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Web Developers</h3>
  <p>Web developers design and create websites. They are responsible for the look of the site. They are also responsible for the site’s technical aspects, such as performance and capacity, which are measures of a website’s speed and how much traffic the site can handle. They also may create content for the site.
  <p><a target="_blank" href="https://collegegrad.com/careers/web-developers">More Info</a>
  <br>
  <br>
  <img src="http://orig14.deviantart.net/3caf/f/2014/019/d/7/modern_communication_technology_flat_illustration_by_cursorch-d72tm9f.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer and Information Research Scientists</h3>
  <p>Computer and information research scientists invent and design new approaches to computing technology and find innovative uses for existing technology. They study and solve complex problems in computing for business, medicine, science, and other fields.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-and-information-research-scientists
  ">More Info</a>
  <br>
  <br>
  <img src="https://pixabay.com/static/uploads/photo/2014/03/25/23/04/technology-298256_960_720.jpg" width="250" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer and Information Systems Managers</h3>
  <p>Computer and information systems managers, often called information technology (IT) managers or IT project managers, plan, coordinate, and direct computer-related activities in an organization. They help determine the information technology goals of an organization and are responsible for implementing computer systems to meet those goals.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-and-information-systems-managers">More Info</a>
  <br>
  <br>
  <img src="http://cdn2.business2community.com/wp-content/uploads/2014/09/Data-Manage-Image1.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer Hardware Engineers</h3>
  <p>Computer hardware engineers research, design, develop, and test computer systems and components such as processors, circuit boards, memory devices, networks, and routers. By creating new directions in computer hardware, these engineers create rapid advances in computer technology.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-hardware-engineers">More Info</a>
  <br>
  <br>
  <img src="http://cupertinotimes.com/wp-content/uploads/2015/03/computer-chip.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer Network Architects</h3>
  <p>Computer network architects design and build data communication networks, including local area networks (LANs), wide area networks (WANs), and intranets. These networks range from a small connection between two offices to a multinational series of globally distributed communications systems.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-network-architects">More Info</a>
  <br>
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Sample-network-diagram.png" width="250" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer Support Specialists</h3>
  <p>Computer support specialists provide help and advice to people and organizations using computer software or equipment. Some, called computer network support specialists, support information technology (IT) employees within their organization. Others, called computer user support specialists, assist non-IT users who are having computer problems.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-support-specialists">More Info</a>
  <br>
  <br>
  <img src="https://www.jisc.ac.uk/sites/default/files/digital-teaching.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Computer Systems Analysts</h3>
  <p>Computer systems analysts study an organization’s current computer systems and procedures and design information systems solutions to help the organization operate more efficiently and effectively. They bring business and information technology (IT) together by understanding the needs and limitations of both.
  <p><a target="_blank" href="https://collegegrad.com/careers/computer-systems-analysts">More Info</a>
  <br>
  <br>
  <img src="https://www.secureworldexpo.com/sites/secureworld/files/Cybersecurity%20Professionals%20Image%202%20-%20Labled%20for%20Reuse_1.jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Database Administrators</h3>
  <p>Database administrators (DBAs) use specialized software to store and organize data, such as financial information and customer shipping records. They make sure that data are available to users and are secure from unauthorized access.
  <p><a target="_blank" href="https://collegegrad.com/careers/database-administrators">More Info</a>
  <br>
  <br>
  <img src="https://cbsla.files.wordpress.com/2014/10/technology1.jpg?w=625" width="250" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Information Security Analysts</h3>
  <p>Information security analysts plan and carry out security measures to protect an organization's computer networks and systems. Their responsibilities are continually expanding as the number of cyberattacks increase.
  <p><a target="_blank" href="https://collegegrad.com/careers/information-security-analysts">More Info</a>
  <br>
  <br>
  <img src="http://uwf.edu/media/cybersecurity/Cyber-Security-(2).jpg" width="200" title="" alt="">
  <br>
  <br>
  
  
  
  <h3>Network and Computer Systems Administrators</h3>
  <p>Computer networks are critical parts of almost every organization. Network and computer systems administrators are responsible for the day-to-day operation of these networks.
  <p><a target="_blank" href="https://collegegrad.com/careers/network-and-computer-systems-administrators">More Info</a>
  <br>
  <br>
  <img src="https://www.jisc.ac.uk/sites/default/files/computer-lab-locks.jpg" width="200" title="" alt="">
  <br>
  <br>
</section>

<!doctype html>
<title>Resume</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

body {
  background-color: rgb(235, 235, 235);
  color: rgb(150, 150, 150);
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  margin: auto;
  max-width: 800px;
}
 
section {
  background-color: rgb(255, 255, 255);
  margin-left: 190px;
  overflow-x: hidden;
  padding: 0 20px 100px 20px;
}
 
nav {
  background-color: rgb(82, 182, 249);
  color: rgb(255, 255, 255);
  font-weight: bold;
  height: 100%;
  padding: 30px 20px;
  position: fixed;
  text-align: center;
  width: 150px;
}
 
nav img {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  height: 100px;
  width: 100px;
}
 
nav a {
  color: rgb(255, 255, 255);
  display: inline-block;
  padding: 14px 0;
  text-decoration: none;
  width: 150px;
  opacity: 0.5;
  transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  -moz-transition: opacity 0.3s ease 0s;
  -webkit-transition: opacity 0.3s ease 0s;
}
 
nav a:hover {
  opacity: 1;
}
 
nav hr {
  border: 1px solid rgb(255, 255, 255);
}
 
h1 {
  background-color: rgb(124, 214, 255);
  color: rgb(255, 255, 255);
  font-size: 36px;
  font-weight: lighter;
  margin: 0 -60px 35px;
  padding: 20px 60px;
}
 
h2 {
  border-bottom: 1px solid rgb(190, 190, 190);
  color: rgb(82, 182, 249);
  font-size: 26px;
  font-weight: normal;
  margin-top: 10px;
  padding: 30px 0 5px;
}
 
h3 {
  color: rgb(114, 204, 255);
  font-size: 22px;
  font-weight: normal;
  margin: 0;
}
 
h3 i {
  color: rgb(220,220,220);
  font-size: 20px;
  font-weight: normal;
  margin-left: 10px;
}
 
h4 {
  font-size: 18px;
  font-weight: normal;
}
 
img {
  height: auto;
  width: 32%;
}

.icon {
  display: none;
}

@media screen and (max-width: 600px) {
  body {
    overflow: hidden;
  }
  
  section {
    font-size: 17px;
    height: 400px;
    margin: 180px 0 60px 0;
    overflow-y: scroll;
    padding: 0 20px;
    position: fixed;
    width: 340px;
  }
  
  nav {
    height: 190px;
    padding: 0;
    top: 0;
    width: 100%;
  }
  
  nav a {
    display: inline;
    font-size: 13px;
    padding: 3px;
  }
  
  nav img {
    background-color: rgba(255,255,255,0.1);
    margin-top: 20px;
    width: 80px;
    height: 80px;
  }
  
  nav hr {
    display: none;
  }
  
  nav p {
    font-size: 22px;
    margin: 10px 0 5px;
  }
  
  h1 {
    display: none;
    margin: 0 -30px 30px;
    padding: 20px 0 20px 120px;
  }
  
  h2 {
    border: none;
    color: white;
    font-size: 30px;
    margin: 0;
    padding-top: 0;
  }
  
  h3,
  h3 i,
  h4 {
    font-size: 21px;
    font-weight: 600;
  }
  
  h3 i {
    display: none;
  }
  
  i {
    color: white;
    margin: 0;
    padding: 0;
  }
  
  .icon {
    display: block;
    margin: 0;
  }
  
  .heading {
    background-color: rgb(124, 214, 255);
    margin: 100px 0 50px -20px;
    padding: 25px 0 20px;
    text-align: center;
    width: 363px;
  }
  
  .heading:first-of-type {
    margin-top: 0;
  }
}
</style>

<nav>
  <img src="/images/profile1.png">
  <p>Josh York
  <hr>
  <a href="#education">Education</a>
  <a href="#employment">Employment</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#interests">Interests</a>
  <a href="#contact">Contact</a>
</nav>

<section>
  <h1 id="resume">Resume</h1>
  <div id="education" class="heading">
    <p class="icon"><i class="fa fa-graduation-cap fa-3x"></i>
    <h2>Education</h2>
  </div>
  <h3>Code Avengers<i>(2009-Current)</i></h3>
  <p>Learned how to code my first game.
  <br>
  <h3>Game Development and Design<i>(2010-2012)</i></h3>
  <p>Bachelor's in Game Development and Design at Waikato University, New Zealand.
  
  <h3>Photography<i>(2011-2013)</i></h3>
  <p>Bachelor's in Photography at Waikato University, New Zealand.
  
  <div id="employment" class="heading">
    <p class="icon"><i class="fa fa-briefcase fa-3x"></i>
    <h2>Employment</h2>
  </div>
  <p>Below is a list of past employers, the roles I played in each company and the skills I've learned.
 
  <h3>Ubisoft<i>(April 2012)</i></h3>
  <p><strong>National Geographic</strong> - Modeling and texturing of 3D objects, characters and the graphical content of levels.
  <h4>Skills gained:</h4>
  <ul>
    <li>Experience in low-poly and high-poly modeling techniques.</li>
    <li>Strong high mesh sculpting abilities.</li>
    <li>Extensive experience with texture painting.</li>
  </ul>
  
  <h3>National Geographic<i>(April 2013)</i></h3>
  <p><strong>Photographer</strong> - Landscape and astrophopher.
  
  <h3>Game Dev Studios<i>(May 2014)</i></h3>
  <p>Opened my own multi million dollar development studio.
  
  <div id="portfolio" class="heading">
    <p class="icon"><i class="fa fa-camera fa-3x"></i>
    <h2>Portfolio</h2>
  </div>
  <p>Here are some images of work I've done throughout my studies and working career.
  
  <p><img src="/images/josh-york/abandon-ship.jpg">
  <img src="/images/josh-york/milkyway3.jpg">
  <img src="/images/josh-york/star-trails.jpg">
  <img src="/images/josh-york/trees.jpg">
  <img src="/images/josh-york/auckland-harbour.jpg">
  <img src="/images/josh-york/raglan-beach.jpg">
  
  <div id="interests" class="heading">
    <p class="icon"><i class="fa fa-thumb-tack fa-3x"></i>
    <h2>Interests</h2>
  </div>
  <p>Here is a list of my interests and hobbies.
  <ul>
    <li>Playing sports.</li>
    <li>A big Star Wars fan!</li>
    <li>Landscape photography.</li>
  </ul>
 
  <div id="contact" class="heading">
    <p class="icon"><i class="fa fa-phone-square fa-3x"></i>
    <h2>Contact</h2>
  </div>
  <p>If you have any questions or would like to talk about any of my works, please feel free to contact me using the details below. Thanks.
  
  <p>Phone Number: <strong>+64 22 333 4444</strong>
  <p>Email Address: <strong>josh@codeavengers.com</strong>
  <br><br>
  <br><br>
</section>
<script>
  window.parent.showPreview();
</script>

{{#with pricing}}
<div id="pricing-popup">
  <div class="pricing">
    <h3 class="pricing_header">{{{header}}}</h3>
    <p class="pricing_info">{{{text}}}
    
    <select name="country" class="js- pricing_country">
    {{#each locations}}
      <option value="{{@key}}">{{name}}
    {{/each}}
    </select>

<div class="pricing_sections">
    {{#each sections}}
      <div class="pricing_section-wrapper">
        <div class="pricing_section">
          <h3 class="pricing_section-header">{{header}}</h3>
          {{#if list}}
            <ul>
              {{#each list}}
                <li class="pricing_section-info">{{this}}
              {{/each}}
            </ul>
          {{else}}
            <span class="js- pricing_section-price">{{price}}</span> <span class="js- pricing_section-dom">{{dom}}</span> <span class="pricing_section-details">{{{details}}}</span></h2>
            <p class="pricing_section-info">{{{text}}}</p>
            <span class="pricing_section-link js-contact-button">{{link}}</span>
          {{/if}}
        </div>
      </div>
    {{/each}}
    </div>
  </div>
</div>
{{/with}}

<div class="js- projects-popup -{{type}}">
  <div class="js- projects-popup_top">
    {{#if screenshot}}
    <div class="js- projects-popup_image-wrapper">
      <div class="projects-popup_image-overlay"></div>
      <img src="{{screenshot}}" 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>
        <span class="js- projects-popup_time">{{{time}}}</span>
      </div>
      <p class="js- projects-popup_description">{{{description}}}</p>
      {{#equals type project}}
        <div class="projects-popup_progress-bar">
          <div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
        </div>
      {{/equals}}
    </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>
        <span class="js- projects-popup_time">{{{time}}}</span>
      </div>
      <p class="js- projects-popup_description">{{{description}}}</p>
      {{#equals type project}}
        <div class="projects-popup_progress-bar">
          <div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
        </div>
      {{/equals}}
    </div>
    {{#if screenshot}}
    <div class="js- projects-popup_image-wrapper">
      <div class="projects-popup_image-overlay"></div>
      <img src="{{screenshot}}" class="js- projects-popup_image">
    </div>
    {{/if}}
  </div>
</div>

Andre Bourque of Huffington Post wrote:

Join 700,000 Other Students To Learn To Code

Dan Owen, USA

Mark, AUS

Karl Kajehart, USA

Akweli, UK

Gwen, NZ

Cale Switzer, USA

Pete, UK

Osine & Anesi

Osine & Anesi

Olivia

Olivia

Benji

Benji

Get Started Today!

With our free 14 day trial