Giter Club home page Giter Club logo

lift-off's Introduction

Lift-Off

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:

  1. Basic introduction to standard web technologies
  • HTML
  • CSS
  • JavaScript
  1. Introduce some development best practices
  • VCS (using git)
  • Dev diary (in the form of a README)

Thoughts on how to organize exercise:

  1. Start with HTML layout
  • Empty document, what it means (at a high level)
  • Cover some basic elements
  1. 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

Lessons

when doing the lesson for drawing the rocket, refer to this MDN link.

Current Progress

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!

lift-off's People

Contributors

sonnyg avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.