gdisf / teaching-materials

GDI SF - Web Development and Programming Curriculum

GDISF Teaching Materials

Teaching materials for HTML, CSS, JS, and HTML5. We maintain our Open Source materials on this repo.

Contributing

Read our docs

Curriculum Creation

• Read So You Want To Teach A Workshop
• Read our Curriculum Creation Guide in the wiki
• Make sure that all curricula are in line with the GDI mission and an appropriate topic/level for our members. This may include:
  • Topics that complement and expand our Front End Web Development curriculum
  • Industry-relevant topics for advanced students (these students already work in the industry and range from Associate/Junior to Senior and above)
  • Topics that students have requested to learn
• Would you like to fork an existing workshop? Check out these resources: GDI Curriculum Review site girldevelopit.com
• Make a Pull Request. You may want to use the example/ directory to get started with the required templates. Your PR must must include:
  • Description
  • Lecture slides
  • Hands-on exercises
  • Solutions to exercises
  • Follow Up Email
• If you want your workshop to be included in our national website, check out this review rubric. Please note that this is not a requirement for inclusion in this repository.

teaching-materials's Issues

[HTML/CSS] Additional readability resource

http://coding.smashingmagazine.com/2013/02/19/using-white-space-for-readability-in-html-and-css/

[Backbone] Add Bootstrap css to exercise instructions

[Graphics] Add scripted SVG example

Instead of just blob demo.

[CSS3] Move over to teaching-materials.org

[CSS3] Link to tardis from slides

Add this link to css3 slides
http://codepen.io/joshnetherton/full/maDxd

[Backbone] Remove "Bonus" from Models and make the step required

[Backbone] Remove events requirements from early instructions

[APIs] Improvements and notes

• Add rating to JSON file
• Make exercise time link more obvious in slides
• Get Windows instructions for simple server
  -Add an easier exercise before IMG rating or make it more explicit
• Inline the JSON so that we don't have to worry about AJAX permissions?
• Add error callback to JSON code, maybe.

cc @icyfenix

Remove $ from variable names in jQuery exercises

Question about how these are taught.

I tried to do the HTML101 workshop at a school called Hyper Island. While working through the slides, I noticed that there are some parts that are really long (ex: Starting Here), where it's multiple slides in a row with tons of info.

I'm wondering if you've had issues with people losing focus. Do you actually go through the code for each html tag presented? During my workshop, I just showed a webpage with all sorts of tags on it (from buttons to forms to radioboxes), and said that there were more details in the slides. Then I gave the exercise. Seemed to work well, since going through the tags one by one was making some heads nod asleep.

[CSS3] Fix step 1 of the selectors exercise to be background-color

Cuz it's already bold!

[HTML/CSS] Various suggestions for HTML Basics

Porting over from the site.

• On the text editors slide, make sure to actually demonstrate saving a file and opening it on the desktop vs. in Cloud9, as that's a source of confusion during the exercise.
• Reiterate that the title element goes in the head and is not rendered on the page (this seems a matter of great confusion for newbies).
• Consider talking about the HTML as a tree structure (DOM).
• Consider downloading a screen reader and having them hear a page read aloud, so that they understand the need for accessible HTML.
• Make the HTML history slide more concise (less text-y). Clarify what was wrong with IETF's standard (why W3C was needed).
• Consider explaining meta charset and encoding.
• Talk about project folder structure (index.html, css folder, images folder, etc)

[Backbone] Intro - review object literals

Review Object Literals and data types
Explain that Objects are common ways to interact with a library's APIs
Create a basic library with an API
Instantiate and pass in an object

[JS 101] Provide extra material on day 1 for advanced students

When people who are already familiar with programming take day 1, they perceive it as too slow. We could provide extra material for them to go deeper into the basics.

For example I have a few more basics exercises linked from https://sites.google.com/site/webdevedu/lessons-1/javascript-basics

cc @icyfenix

[Multimedia] Some links to consider

http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
http://weavly.com/

[JSOO] Improvements

• Add slide on passing arguments into methods
• Link to article on short circuit assignment
• Slide on class libraries like KlassJS
• Here's the in-class we did:
  https://github.com/ded/klass

http://repl.it/MWE
http://repl.it/MWF
http://repl.it/MV2/2

[CSS Tools] Various suggestions

• Add link to Chrome Canary and FF Alpha
• Add link to https://developer.chrome.com/devtools/docs/device-mode on resolution testing slide
• Show for normalize slide
• Upgrade slides and exercise to Bootstrap 3.
• Make in-class examples for things like Reset, Grids, Bootstrap, to make it easier to explain them.
• Show BuiltWithBootstrap, explain Bootstrap-itis and the pros/cons of using a framework.
• Audit all the links

[AJAX] Improvements

• Add example of jQuery error callback
• Fix the

  in the AJAX slide

[JSMVC] Improvements and notes

• Slide on how to turn spaghetti code into MVC (like in Addy's digesting MVC slides)
• Change MVC exercise to create VideoListView, with bonus of creating an ItemView nested inside. (Can't do this unless we change the HTML to not be a UL, List would need to create the ul)

[Backbone] Elaborate on model defaults

In slides show an example of instantiating a model with properties other than defaults. Also explain .set() and .get()

[Backbone] Add more CollectionViewSpec tests

Use spies so that the penultimate exercise relies on more unit tests and fewer instructions

Graphics link

http://jspro.com/raw-javascript/basic-animation-with-canvas-and-javascript/?utm_source=html5weekly&utm_medium=email

[jQuery] Exercise improvements

• The circle of life thumbnail now 404s.
• Some of the exercises reference the youtube.js/bootstrap.css files locally instead of on teaching-materials.org server, so they can't be copied/pasted.
• Exercise 1 and exercise 2 should provide a quick link back to the previous exercise's solution for those who didn't finish.

[Backbone] Have models.js exist at the beginning

Its too confusing to get it in the right place.

Possibly app.js and views.js too.

[Graphics] Add d3 to list of SVG libraries

[CSS Layout] Various suggestions

Porting over from site.

• The timing of when span is introduced is a bit awkward. Maybe change.
  • Consider adding a slide on CSS3 features (border-radius, etc).
• Add position:fixed after position:absolute.
• Add an exercise (or modify final exercise) where the student moves their CSS into an external file.
• Consider adding slide about "getting help" when learning HTML: jsfiddle, IRC.
• Consider adding slide about how to find designers (99designs, dribbble).
• Consider adding slide on prototyping tools (like MyBalsamiq or code generators like jQuery Mobile).

Reverse order of events and animation

In the case of a time crunch, events is more important than animation, so we should reverse those.

That means the final events exercise needs to be made a final homework, since it involves both.

[CSS] Various suggestions

Porting over from site.

• Explain the "cascading" of rules better/more.
• Consider adding attribute selection, like input[type="text"].
• Include a slide on debugging CSS - show example of when rules break (invalid property value), show changing properties, adding styles, viewing :hover properties.
• Clarify font-size section better, it's confusing now. Maybe change order that the units are explained in. Possibly introduce rem sizing.
• Consider adding a slide on selectors in CSS3 (nth child, odd, etc).
• Add additional exercise or bonus in exercise on using web fonts (Google fonts).
  • Consider mentioning HSL and alpha in colors section (though it's IE8+).
• Add additional exercise on colors - like implementing a color scheme from colourlovers or colorscheme site.
• Make a version of in-class example that is the "before" (same with all in-class examples).
• Students find inline styles confusing. Not sure how best to remedy.

[Backbone] setup improvement - include empty models.js file in correct directory location

students spend more time debugging directory structure than on model instantiation, so just include an empty models.js file that is correctly referred to in index.html and runner.html

[HTML/CSS] Various improvements to web and clients

Thanks to Brandon Frohs:

HTML/CSS Lesson 1 Slides

Next/previous slides are visible (unlike in Lesson 2).

The Web (#2)

The client/browser/server interaction image is a bit too simply. Maybe add URL under the arrow between client and browser (and add navigation field to browser image), and add an additional arrow going from browser to server requesting a specific page? I also like the additional step listed in this image (source) where the server has to find the "data".

Clients (#3)

Tablets may be worth adding to the list of devices.

Browsers (#4)

Perhaps change the first sentence to be more descriptive:

Browsers are programs that access and render content...

Browsers (#5)

"...each browser varies in how it displays webpages" seems drastic to me, as though each webpage will look completely different in each browser. Perhaps "...each browser can vary slightly in how it displays webspages." to show the end result can be pixel-perfect, but it's not always the case, especially with newly added elements/features.

Browser Parts (#6)

• Chrome now uses Blink, a fork of Webkit
• Perhaps list Opera to show sharing of Blink (and because it's listed on "Browsers" slide)

Browser Usage (#7)

The chart is about a year out of date. Link is helpful, but would be nice to see an updated chart. Would be awesome if this could be generated on the fly from data pulled from somewhere (perhaps gs.statcounter.com like caniuse.com?).

It may be useful to explain how developers [should] choose which browsers they want to focus on. Perhaps add a link to caniuse.com.

Step 1: The URL Breakdown (#9)

May want to add a port example (ports are used later, but not explained).

Step 2: Server Name -> IP (#10)

Bottom of image (including the source of the image) is cut off.

IP Addresses (#11)

IPv6 is mentioned, described as a number, but hexidecimal is show. May want to mention what hexidecimal is (base 16) and perhaps link to the Wikipedia article for IPv4/IPv6/Hexidecimal.

According to Wikipedia, 127.0.0.1 isn't necessarily always the "self" address, so I'd suggest rewording to say "usually". And, for IPv6, it is ::1.

ifconfig isn't available on Windows machines, and is being deprecated on Linux. ip address can be used on Linux, and I believe ipconfig is the command for Windows.

Servers (#15)

Maybe add node.js to list of server-side programming languages? It's JavaScript, so, theoretically, those who see these slides will soon know JavaScript too. Might be too much information for a beginner though.

Add new slide decks to front page of teaching-materials.org

Front page is quite out of date.

[JS 200] Improvements

• Rewrite functions using var onButtonClick = function() {} instead of function onButtonClick

• Fix HTML editor slide column order

• Remove default CSS from bianca's jsbin in-class

• In DOM detective exercise, include images of what theyre selecting (or atleast be more specific about the green class names)

  cc @bgando

Maybe talk about window.onload after the events exercise

I worry that window.onload distracts from the basics of events, and I think it might be better to have it after, and use that to talk about best practices generally.

nano fix

The course JS302: Backbone has as requisite JS302. Maybe JS205 ?

[Graphics] Add libraries

https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

[Backbone] Put example of fetch() in backend slides

Should show fetch and reset events in context of BackboneShelf and have a demo for that stage, to help with exercise.

[JS 101] Remove ages from exercises

From our feedback form:
"GDI is an organization whose reason for existence is to fight stereotype threat. I partnered with a woman who was older the first day, and I think the fact that the exercises asked for our ages activated stereotype threat. She didn't show up the next day."

I don't know if that's the case or not, but it woudn't hurt to change the exercises. The "age calculator" and "about me" exercises both end up asking for age.

cc @icyfenix

[AJAX] Add example of using JSON generated from an API

So that students dont think its only static JSON that servers produce.

Can do it on App Engine and set CORS headers perhaps.

Create JS exercise based on name game

http://en.m.wikipedia.org/wiki/The_Name_Game

"A verse can be created for any name, wi

thX as the name and Y as the name without the first consonant sound (if it begins with a consonant), as follows:

(X), (X), bo-b (Y)
Banana-fana fo-f (Y)
Fee-Fi-mo-m (Y)
(X)!

If the name starts with a vowel or vowel sound, the "b" "f" or "m" is inserted in front of the name."

Host jQuery exercises here in flat structure

[Graphics] Add links to WebGL section

http://schteppe.github.com/cannon.js/demos/pile.html

Also https://github.com/bebraw/jswiki/wiki/Game-Engines?utm_source=html5weekly&utm_medium=email

[Backbone] Change return statements to console.log()

For makeSentence example, change from return to console.log() so that output in JS console is seen.

[Storage] Some links to consider

https://developer.mozilla.org/en-US/demos/tag/tech:indexeddb

http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/

http://www.nczonline.net/blog/2012/06/05/working-with-files-in-javascript-part-5-blobs/

http://html5-demos.appspot.com/static/html5storage/index.html#slide48

http://www.html5rocks.com/en/tutorials/file/filesystem/

JS Animation/Events: Improvements

• In this class or previous class, include a slide on debugging with the console - show how it displays errors at the bottom, clicking through to the line number. Maybe explain common errors? (Does a resource exist for that?)
• Maybe show window.innerWidth on window slide, since we use that in the exercise later? (Students figured out how to hard code a number, though).
• Give a refresher of CSS absolute positioning and where the grid starts (either as a slide or just remember to in the notes).

[Backbone] Update comparator unit tests

Change unit tests so that students can use either string or function. Currently, tests only pass if string is used.

[jQuery] Misc slide improvements

• Maybe the chaining slide should be moved back before exercise 1?
• Maybe add a slide or 2 about anonymous functions and callbacks before we show .each(), since that is often the first time they see it.
• Come up with a live coding animation example that always works and link to the site on the slide (jquery.com didnt work today for some reason).

[JS 101] Slow down the second day of lessons

We've had feedback from multiple students that the second day is too fast (even those already familiar with programming). We could slow it down and remove somethings (we could remove Animation and Events entirely, perhaps, and do more DOM exercises). We could break the DOM section up more.

cc @icyfenix

[Graphics] Include actual WebGL code

Right now it's ThreeJS code

[Graphics] Add more links/resources/demos to graphics slides

SVG:
https://github.com/pamelafox/smileyslider
http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg
http://www.carto.net/papers/svg/us_crime_2000/map.svgz
http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg

Canvas Tutorials: (maybe follow-up reading)
http://blog.teamtreehouse.com/how-to-draw-with-html5-canvas
http://msdn.microsoft.com/en-us/hh534406.aspx
http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-Basics-of-Canvas-Drawing

Canvas/fabricJS demo:
http://montage-maker.appspot.com/

CSS3:
http://joshnetherton.com/presentations/remix2012/

Old school graphics:
http://en.wikipedia.org/wiki/Croquet_Project

[jQuery] Events improvements

• On events first slide, add list of other event strings.
• Show event shortcut functions before document.ready slide (button.click, button.hover, etc) because that will look more like document.ready
• Maybe show example of preventDefault on a form submit as well.
• On document.ready slide, add something that would prompt us to talk about the motivation for why we need it.