October 27, 2017 Meeting

We are looking forward to another fun meeting full of discoveries! Here’s some of what we are planning:

  • Help anyone get up to speed who hasn’t completed the GitHub and Cloud9 setup and basic Web pages from the previous 2 weeks; don’t worry if you weren’t able to attend those meetings
  • Notes about the Book and the source code
    • Sample code in our Repo has different chapter numbers than the chapters in the actual book, i.e., Chapter 3 code directory = Chapter 2 of book
    • the book focuses on  on what the HTML5 specification adds to the “older” specifications of HTML, CSS, and JS and assumes knowledge of basic HTML, CSS, JS, so we will review the basics of these 3 Web languages
  • Three Languages of the Web:
    • HTML: HyperText Markup Language – determines  structure of the page content -> the SKELETON
    • CSS: Cascading StyleSheets – determines appearance of the page, the presentation (colors, fonts, and much more) -> the SKIN
    • JS: JavaScript – determines actions on the page, the behavior. For example, what happens when you click a button, hover with the mouse, or when the page loads -> the MUSCLE
    • Remember that the W3 Schools Tutorials are an excellent resource for learning these languages and many other Web Development skills
  • Typical Web directory structure
    • Explore the folders for css, img, fonts, and js as in the Chapter 4 code folder
    • Look at the index.html page for Chapter 4’s code to see how the css and js files are linked to it
    • Compare to Chapter 3’s index.html (Typography Game, chapter 2 in book); note how the CSS is embedded between <style> tags in the <head> and the JavaScript is embedded between <script> tags just above the closing body tag
    • Group exercise: Separate out the CSS and JS from Chapter3/index.html into separate files and link them in the index.html page. It will help to have the code folding setting turned on in Cloud9 to make copying easier. Menu Cloud9 –> Preferences –> User Settings –> Code Editor
  • Debugging:
    • Debugging tools are used not only to find “bugs” in the code but to analyze running code to understand what is going on
    • Chrome Debugging Tutorial
    • For the Typography Game, let’s run through a brief debugging session to see what the code is doing, how to step through it, how to change a variable, as well as inspecting the HTML/CSS. Analyze how the game works and find something you would like to change
    • Small teams or individuals can work on each making a change to the code, change something in the CSS or the JS or the HTML, then look at it in the debugger
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s