Lift-Off is a very simple exercise in basic HTML, CSS, and JavaScript.
The application presents a small canvas with a rocket and a launch button. Once clicked, a countdown begins before actually launching the rocket into space.
The goal of this exercise is to expose the individual to some basic HTML tags, relatively simple styling with CSS, and some basic JavaScript usage and concepts.
Goals of project:
- Basic introduction to standard web technologies
- HTML
- CSS
- JavaScript
- Introduce some development best practices
- VCS (using git)
- Dev diary (in the form of a README)
Thoughts on how to organize exercise:
- Start with HTML layout
- Empty document, what it means (at a high level)
- Cover some basic elements
- Layer on styling (CSS), probably over several smaller exercises
- How to style an element
- How to define a class
- How to style a specific element
- Start with inline CSS
- Move to in-file
- Move to external file
when doing the lesson for drawing the rocket, refer to this MDN link.
I think I was overly ambitious and planned too much with this project. Going from very basic computer usage and trying to include this much animation code was a LOT to take in. Simply launching a rocket would have been sufficient. Although, I have to say that my kids were SUPER excited to see it all in action. My apologies for the state of this code. Paired programming with a 9 and 14 year old tends to get a little crazy.
- I have wrapped up the project with the kids but I still need to organize this project for others. So many things to do!