Power-Ups

Create a way for your character to gain new abilities. Maybe gain super-speed or Invincibility. Or change your character's size to reach new areas.   Create the Actor Add an actor that will be the power-up. When Touching Actor Use the Event When Occurs. Then add a touching block. For example: set the size. Create the ActorWhen Touching [...]
Default Badge

Boss Battle

Create a boss character that move on his own and attempts to damage the player. This character should be able to be defeated.

Default Badge

MadLibs JS

Use JavaScript variables and prompts to create an online MadLib. Get started with this Pen. Prompting the user var wildAnimal = prompt(“Enter a wild animal”); Filling in a Blank HTML: <span id=“wildAnimal”></span> JS: $(‘#wildAnimal’).html(wildAnimal);

Default Badge

Variables in JavaScript

In your project, Create a JavaScript variable and display the variable’s value in the HTML. Creating a Variable We’re creating a variable named noun1 with the value “Pokemon”. var noun1 = “Pokemon” Displaying the variable in HTML $(‘span’).html(noun1) Tip: If you started from scratch with a New Pen, you’ll need to add jQuery for the […]

Default Badge

Choose your own Adventure in HTML

Create a ‘Choose your own Adventure’ story using links in HTML. Include at least 2 endings for the user to find. In a Choose your own Adventure story, the user gets to choose what will happen next. Example Adventure See the Pen Choose your own Adventure story in HTML by Learn43 (@learn43) on CodePen.

Default Badge

Links Lv1

Use at least 1 link in your project. You can link to another web page, an image, or anything on the web with a URL. Creating Links The <a> Tag Visit <a>Google</a> The href attribute href=”http://www.google.com” Complete Example <a href=”http://www.google.com”>Click here for google.com</a> <a href=”mailto:hello@learn43.me”>Click here to email us.</a>

links

Jumping and Gravity

If you’re creating a Platform style game or a 2D side-scroller, you’ll want to add the ability for characters to Jump. And, of course, when a character jumps there should be Gravity to pull him back down. Jumping What is Jumping? To jump is to move higher on the Y-axis. Inside our Game loop we’ll […]

Default Badge

Notifications // Level 1

Objective Create your first notification. Create a Notification <zf-notification-static id=”my-notify” title=”My first notification” image=”http://placehold.it/40×40″ animation-in=”hingeInFromTop” animation-out=”hingeOutFromTop”> <p>Hi Genius. Your favorite animal is grumpy cat. </p> </zf-notification-static> Trigger the Notification with a Link <a class=”button” href=”#” zf-open=”my-notify”>Triggers Notifcation with id = my-notify</a> This link opens the zf-notification element with id “my-notify”. Further Reading See the Zurb Foundation […]

notification-lv0

Layout // Level 3

Objective Create a grid based layout that responds based on mobile or tablet. Create a grid-block Add a div.grid-block inside a screen (section.grid-content). <div class=”grid-block”></div> Using Grid Classes Inside of the .grid-block create an element an add a grid class. Grid Classes include small, medium, and large. The number of columns is 1-12. <div class=”grid-block”> <div […]

layout-lv3