NOTE: Our December 1st meeting will be held at the St. Charles Public Library. We will meet at the usual time 5:45PM to 7:45PM
- Fix the Jelly Wobbly Gravity game! With the book’s original code, the character won’t move…the jellies are all dropping in the same line and splattering before hitting the floor…the character isn’t able to get sick from the jellies because the “collisions” have no effect. Let’s help The Dude enjoy (or not) his fill of jellies!
- Make your own changes to any part of the game and/or to your site’s home page
- We can do some changes as a group if there are suggestions and desire to do that
- We can help each other with updates to individual pages
- Click the “Raw” button when viewing the file
- Right-click and select “save as” to save it to your machine
Detailed notes for the debugging exercise and concepts:
A working version of the game: Jelly Gravity
Tonight’s meeting will be a feast of engaging presentations by:
- Our first tech talk of the year!: Erin Maresko, who designed our FVGCC branding, will give us her insights on technical design
- Our very own Hackathon team: Our members who participated very successfully in the Huskie Hackathon at Northern Illinois University will share their experiences and demo the results of their all-night programming efforts
- Our very own instructor: Robin will give us a mini-version of her presentation for Fox Valley Computing Professionals on Cross Platform Mobile Development with Xamarin
Dissect the Typography Game
We are looking forward to tonight’s meeting at 25N where we will be taking a deeper dive into the inner workings of the typography game.
Explore the answers to these questions and more:
- How does clicking a button or pressing a key cause something to happen on the Web page? The keydown and click events! What is an event listener? What is an event handler? What is a keycode? Reference: Keycode lookup
- How do we define a single object that can represent either the player or the “bad guy” in the game? Define a function that is used as an object constructor; within the function define methods such as “move” and “setSpeed”. Use the keyword “new” to create named instances of the class – “hero” and “enemy”. Use those named instances to control the players. Examples: hero.move() or enemy.setSpeed(speed * 23)
Document: Notes for today’s activities
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
- 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
- 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 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
Welcome Back! Let’s get down to it!
This week we are going to:
- Quickly introduce and catch up anyone who is new this week – WELCOME!
- Make sure everyone has the following:
- GitHub Account
- Cloud9 Account with our team
- Forked the HTML5, CSS and JS book repo at github
- Created a new workspace with the github repo in Cloud9
- Let’s add a home page for our site – kind of like this: https://youtu.be/ent9dh0dRJg
- Add “index.html” in cloud 9 and type in a bit of html (we will talk about this in a bit)
- git add .
- git commit -m “added index.html”
- git push
- Enable GitHub Pages in settings (it is probably turned off by default)
- Copy the URL in your GitHub settings for your website, once you push your changes, your site is published there! Whoot!
- Now let’s add
- A title for our index page <title>This is my really great page</title>
- A header <H1>This is my really great header</H1>
- An image <img src=”myImage.jpeg” alt”really great image”/>
- Make a new folder called “images”
- Find a great image online somewhere and save as to your desktop
- File -> upload local files in Cloud9
- push again to git
- git commit -a -m “my note”
- git push
- What happened? Didn’t work quite right? Let’s TROUBLESHOOT!
- Can we see what is going on by using F12 developer tools in Chrome?
- Can we see if everything got up to git the way we wanted? Check out our git hub repo online.
- Use Ctrl+F5 to do a forced refresh of your browser
- BONUS: If we have time, check out https://www.favicon-generator.org/
- Make a favicon
- Add it to the root of your website
- Add two lines to your header
- Commit, push and check out your site!
- Awesome! Share your site URL on Slack so we can all see it!
Welcome to a new year of Fox Valley Girls Coding Club!
We will meet in the Board Room of 25N at 5:45pm, October 13, 2017.
- High level review of all that we have planned and are considering for the year
- Mobile – Thunkable
- 3D Gaming – Unity
- Huskie Hackathon at NIU November 4-5
- NCWIT Aspirations Awards
- Set up
Excited to meet our new members and catch up with our returning members! It is going to be a great year! 🙂
The Fox Valley Girls Coding Club extends a warm welcome and congratulations to all the girls attending the Niles West GEMS event for girls in grades 5 through 8.
I am thrilled to be presenting again! Our sessions will be an introduction to what coding is all about. Each group rotates through several different STEM sessions at the event, each about 30 minutes long. Here are copies of the material for anyone who wants to review Scratch/coding concepts.
GEMS Niles West Introduction to Scratch Handout: this is for people new to coding and covers basic concepts while building a GEMS Dance Party App based on the introductory tutorial on the MIT Scratch Web site
GEMS Niles West Advanced Scratch Handout: this is for people who are already familiar with Scratch and its basic blocks and introduces some advanced concepts (working with lists, clones, custom procedures). We start with the introductory project as a base and enhance it.