Pop Up: Animate a Rocket with CSS

In this live, instructor-led workshop, you will customize a drawing of a rocket and program it to fly across the page! You’ll leave with your animated rocket on a website that you can share with anyone around the world 🚀

This will be best experienced on a desktop or laptop computer.

Welcome!

We are so glad you are here! To get set up…

Open up repl.it in a browser (preferably Chrome) and login to your account
Please change your zoom name to first, last initial, pronouns (ex: Amy H. (she/her))
Heads up! We’ll ask you to briefly introduce yourself in a few minutes.

Goals

Customize a CSS drawing of a rocket and sky scene
Create a basic animation of the rocket taking off
Gain exposure to what is possible with CSS
Determine if coding is something you enjoy doing and want to pursue further

Disclaimer: We won’t become experts in CSS today. And you may leave with more questions than answers!

Programming Languages We Will Use

Building the user-facing part of a website or app is referred to as Front End Engineering. Building a Front End requires the writing code in three programming languages, and making the code in each language “talk to” the code in the others. Today, we will get some exposure to two of those languages.

Let’s start by building an understanding of what each language is responsible for. We will make some comparisons to the human body to create context.

HTML

HTML holds the content we see on a page (text, images, etc.) and defines the structure and order in which the content appears.

We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:

CSS

CSS defines the look and feel of a webpage - it can change the layout of items on a page, colors, fonts, and you guessed it - animate items!

We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.

Project Setup

We will work off of a starter kit that has already been created. Click this link to access the starter kit in repl.it. Here’s how to get set up:

Once you are on the site, substitute your name in for the NAME placeholder on line 4 of the HTML file.
Click the green “Run” button at the top of the page, and you should see a scene with a rocket and moon on the right side of the page.

Let’s quickly explore the HTML file to understand the “bones” of this app.