Updated Notes for Web Development

In case anyone missed a meeting or needs catching up, here are some technical notes on what we have done so far in our Web Development meetings. The documents also include more details on some of the concepts we are covering:

Week 1: Getting set up with Cloud9 and GitHub; cloning the code from a repository

Intro To Web With Cloud9/GitHub Notes

Week 2: Adding and editing files in a Cloud9 workspace; Git commands; pushing your Cloud9 code up to your GitHub Repository; publishing your site on GitHub

Web Week 2 Notes

Week 3: Languages of the Web: High level look at use of HTML, CSS, and JS. Web directory structure: organizing your files. Hands-on exercise: clean up the sample code for the “Chapter 3” project from the book, separating the JavaScript and CSS out of the index page. Brief look at Dev Tools and Debugging

Web Week 3 Notes

 

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

Amanda Lannert – CEO of Jellyvision

The girls of FVGCC had the privilege of web chatting with Jellyvision CEO, Amanda Lannert, as we wrapped up our first full year of coding club meetings.  Ms. Lannert generously shared her path in tech as well as providing insight and advice to our high school students.  Here is a sample of our conversation:

Ms. Lannert went to work for Leo Burnett right out of college.  She discovered early in her career that any job and any industry can be interesting if the people you work with are curious and engaged.  Who you work for and with is often more important than what you are doing in your daily work.  When looking for employment, interview your boss just as they interview you.  A good boss can turn your job into a fountain of learning that will lead to your next opportunity.  A bad boss can make even the best career seem awful.

In every position you take, it is important to build your network.  Who you know can often mean more than what you know as you move through your career.  One such contact led Ms. Lannert to a tech startup, Jellyvision, that was producing CD-ROM games. At that time, Jellyvision produced the number one CD-ROM game, Who Wants to be a Millionaire?, based off of the popular TV show and the game, You Don’t Know Jack, a trivia-based party game series.  In her first position at Jellyvision, Ms. Lannert was working with future head writers of The Colbert Report and creative types that inspired her every day.  Interestingly, the company even turned down Seth Meyers for a job at that time!  Joining Jellyvision, was important because of the people and the creative work, it wasn’t about the initial position she held, but what she learned from it.  Within six months, Ms. Lannert was Jellyvision’s President.

With this new position, came the challenge of watching Jellyvision’s profit and loss numbers going off a cliff because the company’s main business was producing CD games and the technology around gaming was rapidly changing.  As a result, at the age of 28, Ms. Lannert had the gut wrenching responsibility of shutting down the company, laying off 60 people, including herself.  They had three opportunities to keep the company, but then the tech bubble burst and the company had to close.  One of the greatest takeaways for Ms. Lannert from this experience was that, “Failure is not permanent.  You need perspective and resilience.”

Ms. Lannert’s next opportunity would find her again working with Jellyvision after the company’s founder raised money to restart the company, transitioning from the gaming industry to selling software that talks people through difficult life decisions such as health benefits, insurance, and investments/saving.  The change did not come with overnight success, the company spent a decade going sideways, but through grit and perseverance, Jellyvision now works with just under 1,000 companies, representing 91 billion dollars in insurance premium.  Companies spend significant amounts of money each year to help explain health insurance to their employees.  Jellyvision helps make this process clearer, more engaging, and as an added benefit, easy, and fun!

Ms. Lannert used the latter part of our conversation to take questions and share important thoughts on college and career:

  • She hears from a lot of women “I can’t fail.”  Ms. Lannert says you may have set backs or failures but that should be because you have big dreams.  She told the girls of FVGCC, “I want you to have more audacious dreams.  Dream to have an audacious and brave life.”
  • The girls wanted to know how a person knows how to lead a 350 person company.  Ms. Lannert shared that the ability to learn is the greatest thing you will be taught in college. Through Liberal Arts, you can learn about diverse topics so challenge yourself to take a lot of unusual classes.  In Cultural Anthropology, you can learn why people do what they do.  The skills and knowledge you pick up will lead to understanding when you are in a position to lead a team, division, or a company.
  • Have curiosity and chase what interests you!
  • Developers with great communication skills help to bridge the gap between business and development.  The better you communicate within and across groups, the more invaluable you become.
  • Start-up companies are scrappy – never stop learning.  Pick up Ruby on Rails, Java, Python.  Stay curious.  You will find yourself taking on many diverse roles in a start- up.
  • Ms. Lannert is passionate about helping women gain opportunities.  She will meet with anyone who is female.  But, she advised the girls that it is important to do their part.  Know yourself and what you want both from yourself and others.  Make it easy for people to help you.  Ask for something as simple as an introduction.  There is a world of people to help you, everywhere from Facebook to LinkedIn.  Be clear on where you are and where you are trying to go.
  • Join a Women in Tech Group or view the video series 30 Days of Genius by Chase Jarvis.
  • Most importantly, know that as a girl going into tech, you can, “Join, build, or create a business that will make a difference.”

Thanks Ms. Lannert for your time and insight!

 

 

October 20, 2017 Meeting

Welcome Back! Let’s get down to it!

This week we are going to:

  1. Quickly introduce and catch up anyone who is new this week – WELCOME!
  2. Make sure everyone has the following:
    1. GitHub Account
    2. Cloud9 Account with our team
    3. Forked the HTML5, CSS and JS book repo at github
    4. Created a new workspace with the github repo in Cloud9
  3. Let’s add a home page for our site – kind of like this: https://youtu.be/ent9dh0dRJg
    1. Add “index.html” in cloud 9 and type in a bit of html (we will talk about this in a bit)
    2. git add .
    3. git commit -m “added index.html”
    4. git push
  4. Enable GitHub Pages in settings (it is probably turned off by default)
  5. Copy the URL in your GitHub settings for your website, once you push your changes, your site is published there! Whoot!
  6. Now let’s add
    1. A title for our index page <title>This is my really great page</title>
    2. A header <H1>This is my really great header</H1>
    3. An image <img src=”myImage.jpeg” alt”really great image”/>
      1. Make a new folder called “images”
      2. Find a great image online somewhere and save as to your desktop
      3. File -> upload local files in Cloud9
      4. push again to git
        1. git commit -a -m “my note”
        2. git push
    4. What happened? Didn’t work quite right? Let’s TROUBLESHOOT!
      1. Can we see what is going on by using F12 developer tools in Chrome?
      2. Can we see if everything got up to git the way we wanted? Check out our git hub repo online.
      3. Use Ctrl+F5 to do a forced refresh of your browser
    5. BONUS: If we have time, check out https://www.favicon-generator.org/
      1. Make a favicon
      2. Add it to the root of your website
      3. Add two lines to your header
      4. Commit, push and check out your site!
  7. Awesome! Share your site URL on Slack so we can all see it!

 

Huskie Hackathon at NIU November 4-5

We have an opportunity to participate in the Huskie Hackathon at Northern Illinois University on November 4-5!  As several members of the Fox Valley Girls Coding Club were enthusiastic and successful participants in the Chicago Hacks Hackathon last spring, the Huskie Hackathon should be an exciting and rewarding experience.

For more details and to sign up, please go to the Huskie Hackathon site.