Month: April 2016

Club News

GoFundMe Campaign Launched on April 22

MMaki

We are so excited to be launching our first GoFundMe campaign: gofundme.com/fvgcc

As the first girls coding club in the Fox Valley, we are striving to provide high school girls in our community with hands on coding experience.  The funds raised from GoFundMe will be used in these exciting ways for 2016-17:

– A significant amount of money raised will go toward continuing to hold our weekly, school year meetings at 25N Coworking in Geneva, IL. This space allows our girls to learn coding in a modern, creative and tech ready space that is conveniently located near our club members’ high schools. Our goal is to eliminate any financial barriers to girls learning to code so club members do not pay to participate. The only requirement is that they come to meetings curious about coding.

– Through this campaign, we are working together, not only learning how to code, but also how to raise funding for important hardware – Makey, Makey kits for each club member – YES!  With Makey Makey Invention Kits, we can turn everyday objects into touchpads and combine them with the internet. Our club members can use Makey Makey for doing art, engineering, music, design and everything in between.

– Funds from this campaign will also be used for software – to cover our web hosting and sub-domain pages (these pages give our club members an opportunity to put what they are learning to work in their own real-world, creative space), and operating expenses, including marketing and recruiting, so we can expand our home-grown club to serve more girls in 2016-17 and beyond.

We hope you will take a minute to visit our GoFundMe page and choose to support FVGCC!

Coding in the Community, Scratch Tidbits and Tips

Welcome GEMS Girls!!!!

Dottie

We are happy to welcome the girls attending the 2016 GEMS event at Niles West High School on April 16th and visiting our Web site. We hope you may be inspired to participate in a coding club for girls too!  Or maybe even to be a Founder of a new club in your area.

I am honored to be a presenter at the event as a representative of our Fox Valley Girls Coding Club and of the Illinois Technology Foundation and am very much looking forward to meeting the girls interested in learning about coding as a profession or just as something very fun to do.

We will be doing a hands-on session that includes an introduction to Scratch, a graphical programming language, the same one that we use here at Fox Valley Girls Coding Club to get started with coding. Here are notes from the session if anyone would like them:   Introduction to Scratch

Web Page Basics

Bootstrap & Web Site Structure

Dottie

What is Bootstrap?

“Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.” – From W3Schools Bootstrap Tutorial

Why Use It?

  • Responsive Web Design: lots of built-in (“out of the box”) features to ensure that your site looks good across all types/sizes of devices
  • NavBar: Beautiful menus!
  • Consistent look and feel: buttons, menus, headings, lists, and many other Web page components
  • Themes: Many lovely themes available to change the colors and other aspects of appearance just by swapping out a file! See Bootswatch for a nice selection of free downloadable themes
  • Grow your Developer Skillset: the skillset we want to build here isn’t Bootstrap per se, but rather the ability to incorporate a third-party framework into a project, and an understanding of how the pieces fit together within the project structure. While Bootstrap isn’t a required tool for all development projects, it is a common and very useful one. There are many, many, many JavaScript and CSS libraries out there and even before you start writing your own JavaScript code you can and should understand how to install and use these tools.

How Do I Get Bootstrap Into My Project?

  • Prepare your directory structure: Bootstrap includes files for scripts (JavaScript), fonts, and CSS and we need to organize these files within our site. We will follow the common convention of creating separate directories for CSS, Scripts, Images, and Fonts.
    • Open your Web project in Atom: make sure you are in your site’s main Project Folder (FilmFestivalSite in below example).
    • Add project folders: right-click on your project folder in Atom and choose “New Folder” to create folders named css, fonts, images, and scripts.

DirectoryStructure

  • Get Bootstrap
    • Download: Go to http://getbootstrap.com/getting-started/#download. Click the Download Bootstrap button. That will download a file named bootstrap-3.3.6-dist.zip to your computer.
    • Unzip the files: On Windows machines you will find the zip in your Downloads directory, right-click and choose “Extract All”. You can change the destination folder if you like before hitting the “Extract” button, but be sure you know where the files are.
    • Copy the files to the folders in your Web project: the extracted files are organized into css, fonts, and js folders below the bootstrap-3.3.6-dist folder. Copy to the matching folders in your Web project: css to css, fonts to fonts, and “js” to “scripts”. Hint: In Atom you can right-click on a folder and select “Show in Explorer” (Windows) or “Show in Finder” (Mac) to open your destination folder to set up the copy with side-by-side windows.
  • Get JQuery:
    • Note: Version as of this writing is 1.12.3; get the latest 1.x.x version
    • Download JQuery: https://jquery.com/download/. Under the JQuery 1.x section right-click on “Download the uncompressed development jQuery 1.12.3” and choose “save link as”.  Save the file as  jquery-1.12.3.js
    • Copy the JQuery file to your project: copy jquery-1.12.3.js to the “scripts” folder of your project
    • Note on Uncompressed vs. Min versions of JQuery:  JQuery can be downloaded in its uncompressed form as above or in a “minimized” form jquery-1.12.3.min.js. The min version is much more efficient for use on your Web Page. For user-friendly pages it is important to minimize page load time and the size of scripts so in “Production” we would always deploy the “min” version of both CSS and JavaScript files. However, for development we want to be able to read, understand, and learn from the CSS and script files so we use the uncompressed (non-“min”) versions in our development environment.

Our First Bootstrap Page:

  • Add a new HTML file named “BootstrapSample.html” to your Web site’s main folder.
  • Copy content from our “Bootstrap Sample Page” to experience the power of Bootstrap right away. Once everyone has it running in your environment we can explain some of the opportunities for you to customize it and make it your own. This one is put together from combining elements of sample templates on the Bootstrap site
  • The one change you will need to make is highlighted: that is the anchor <a> tag for one of the menu links; in my example it links to a page named “FilmDetails.html”. Change it to link to your own page.

Deployment Considerations:

Once you have your page working in your own environment if you want to upload it to your Web site on the server you need to ensure that the folder structure and files needed for Bootstrap and JQuery are uploaded as well. In ATOM you can select your css folder for upload to copy the folder and its contents; do the same with your scripts, fonts, and images folders.