Cloudy to Fair

As dark clouds sway and fall in the night sky;
as we seed them with water drops;
each drop affects a cloud, making it larger.
First drop turns a cloud gold;
next to teal - the cloud hovers.
Transform all clouds teal to see a night spectacular.
Once for fun and more if you are clever and with a bit of luck!

Learn about responsive coding for the web using HTML, CSS, and JavaScript. With a focus on JavaScript, draw shapes, work with objects, musical notes, rgba colors, and randomization. We will navigate the computer's file structure, use Atom (a hackable text editor for the 21st Century), p5.js, and Chrome Developer Tools as we explore coding for the web that works as well on your phone as it does on your computer.

Processing - Hour of Codeā„¢ - Computer Science Education Week → http://hello.processing.org/

Click this hyperlink Cloudy to Fair, to play the game, described in the poem.

In the first lab we gain familiarity with two powerful tools of the trade: Chrome Developer Tools & Atom. We edit with Atom. We use developer tools to explore under the hood and to find the cause of any bugs. In the second lab we explore JavaScript in action.
  1. Lab1 Using Atom & Chrome Developer Tools:
    1. Before we start Lab1, let's use Atom to create a web page. As we proceed note the three elements of an HTML document: html, head, body.
      1. Start Atom
      2. Select File/New File then File/Save (ctrl-s) Type mywebpage.html and press enter to save the file
      3. Type html and press enter - You should see a minimal HTML5 webpage
      4. Between the title start tag and title close tag, type your by and your name
      5. Between the body start tag and the body close tag, type h1 and press enter, then type Hello World!
      6. Simultaneously press (ctrl-s) then enter so save your work.
      7. Open your new webpage by right clicking on it and selecting Open with... Google Chrome
      8. Explore with (ctrl-u), close this tab, then with (ctrl-shift-i)
      9. Close Atom - we will come back to it in Lab1.
    2. Click on the Lab1 link above to begin Lab1.
  2. Lab2 Programming using the Atom editor
    1. Start the Atom editor (atom-windows\Atom\atom.exe)
    2. Complete the three stages of Lab2