Build a rocket launch sequence with JavaScript, HTML and CSS

ee789f13

After learning the basics of JavaScript, we’ll plan our rocket launch sequence; build the basics with HTML and CSS; add the JavaScript to make in interactive; and then finish it off by making it look amazing with some more CSS! End it off by showing off and sharing it with the other students in the project gallery :)

ASSIGNMENT

Create a rocket launch sequence with JavaScript, HTML, and CSS – and then share it with the other students in the class! The assignment will give you a structured environment to learn, play and test things out. You’ll learn what all the slashes, dots, braces, brackets and funny words mean. And you’ll also learn about some advanced CSS properties and CSS transitions!!

DELIVERABLES

- A launch button.
- A CSS styled rocket.
- A rocket that launches upwards.
- A countdown sequence.
- A programmed random chance of failure.
- Sharing your project in the project gallery.

If you're keen, read on!

RESOURCES

Visit these three webpages for all the HTML tags (3 different links)
Visit these two pages for all the CSS rules (2 different links)
Visit the two pages for all the JS properties and methods (2 different links, and maybe a bit overwhelming)
Use this color picker or this one if you need custom colors.
Use this site for image resizing, or find your own on Google if you'd like to resize images – maybe for cropping or tiling backgrounds.
Use this cool Panda site for compressing your images (for ultra-quick site loading).

APPS TO DOWNLOAD

We do go through downloading and installing the apps in the class, but here are the links for reference.

Sublime Text 3
Google Chrome
Github Desktop.
You can create a Github account too (NB. remeber to verify your email address)

FOR REF

Here's my js-rocket gh-pages Github repository if you'd like to take a look, and reference the final files.
Here's a final version of my rocket launch sequence!

Réka Hangonyi

--

--