Resources
This page contains resources for students. The best resource is the class community--make friends in class, trade numbers, and ask for help!
Becoming a super programmer isn't about knowing all the answers; it's knowing how to find answers.
This class encourages personal research of problems, an essential skill in the modern world, and especially applicable to programming. Most problems you'll encounter have been solved by someone else, and a strategic search on Google should yield an answer. For auditory learners, YouTube has an enormous number of tutorials on every subject.
Contents
- HTML & CSS
- Block programming
- JavaScript
- Canvas JS
- Phaser JS
- Sprite and image editing
- Simple project ideas for games and puzzles
- Simple project ideas for websites and apps
- Advanced project ideas
- Text editors for coding
- Coding challenges and problems
- What should I do after this class is over?
HTML & CSS
- Tutorials Point HTML tutorial
- Free Code Camp (HTML/CSS/JS tutorial)
- Codecademy HTML/CSS tutorial
- w3schools CSS tutorial and properties reference
- w3schools in Chinese
- Color picker tool
- Bootstrap, a tool to ease modern web development
- Bootstrap templates
Block programming
JavaScript
- HTMLDog JS beginner tutorial, simple, clear and accessible
- Codecademy JS interactive tutorial
- The Modern JS Tutorial
- 30 Days of JS Challenge
- JS best practices
Canvas JS
- Simple grid game tutorial
- Breakout game tutorial
- Comprehensive canvas tutorial and reference from MDN
- Coding math, detailed videos devoted to canvas game physics and animations.
- In-depth RPG game tutorial
- Canvas animation basics video tutorial with simple physics and a particle system, part 1 and part 2
- More basic canvas programming video tutorials
- The Making of an HTML5 Platform Game video, which covers some advanced concepts.
- Canvas cheat sheets and quick reference:
Phaser JS
- Make your first Phaser game
- 2D Platformer in Phaser
- Zeke Chan has a ton of excellent Phaser tutorials for games such as Pong, Asteroids, platformers, etc.
- Phaser basic examples from photonstorm
- Flappy bird in Phaser tutorial. This site has many Phaser resources.
- Tutorials on adding states (such as a title screen or game over screen) to a Phaser game: here and here
- Mission Bit Phaser template
- Phaser entity component systems
Sprite and image editing
- Free online sprite/image editors:
- Gimp (requires installation)
- Rawgit and Cloudinary are image hosting sites that may come in handy for your Codepen projects.
- Making an animated sprite in JS canvas
- Good graphics: so easy a blind man could do it, an inspirational video presentation filled with adroit advice.
Simple project ideas for games and puzzles
- 49 Ideas for Game Clones to Code, a really superb resource
- Microsoft Entertainment Pack has a ton of classic game ideas
- Snake or Surround
- Minesweeper
- A clone of Flappy Bird or similar sidescroller
- Pong, complete with handy Phaser tutorial or Canvas tutorial
- Space Invaders, Missile Command or Centipede or similar 2D shooter/ tower defense game
- Breakout/Arkanoid
-
Sokoban,
15-puzzle,
Klotski,
or similar transport puzzle
- Alan Hazelden's site has a bunch of inspirational Puzzlescript-based Sokoban-esque projects.
- Puzzlescript tumblr, super inspirational for transport game fans!
- Tic Tac Toe
- Lights out
- Build a typing game which evaluates speed and accuracy
- Simon, Concentration or similar memory game
- Hangman, Mad Libs or similar word game
- 2048, Nim, Bagels, or similar number game
- Battleship
- Lunar Lander
- Dots and boxes
- Yahtzee, Craps or dice-based games
- Atari Archives: BASIC games -- note: these games are written in the BASIC programming language, but the ideas can be implemented in JavaScript.
- 8-bit software archive contains more Atari game ideas from old books.
Simple project ideas for websites and apps
- Just build websites contains a ton of original ideas
- Design and build a personal website
- Create your own resume/portfolio; add interactivity
- Create an animation or visual art piece in a webpage. Here are some useful libraries for graphics:
- ProcessingJS
- PaperJS
- d3, for data-based visualizations
- threejs, useful for 3d graphics
- toxiclibs, useful for non-colliding physics systems (chains, kinematics, cloth, water, etc)
- Create an educational app like a math quiz or flash cards
- Create a mock e-commerce site
- Create a paint/drawing program
- Create a terrain generator or editor
- Make an interactive website modeling something from the real world like fridge poetry.
- Explore cryptography with algorithms like ROT13
- Make a blog, perhaps with Jekyll
- Design a to-do list app or task planner
Advanced project ideas
- A platformer like Mario. Consider using a library such as Phaser to handle physics. Here are a couple of non-library tutorials:
- Tetris
- Pac Man
- Gorillas
- Lemmings
-
Abstract strategy games:
- Checkers
- Backgammon
- Reversi/Othello
- EinStein würfelt nicht!
- Chess or chess variants such as Hexapawn
- Connect 4, which is a common interview question for tech jobs, along with many other of these game projects!
- A Roguelike or other ASCII game
- Poker, Solitaire, Blackjack, or other playing card games
- Domino-based games
- A twitch game such as Super Hexagon
- Maze generator and/or solver
- Kakuro, KenKen, Sudoku or similar logic puzzle
- Write an algorithm to solve the 8-queens puzzle, Tower of Hanoi puzzle, or Latin square puzzle. There are a lot of algorithms that may inspire a project.
- Write a Markov generator and investigate natural language processing.
- Write a generative art app that creates, for example, poetry from spam emails.
- Write a clone of a board game such as Stratego, Monopoly, Risk, Scrabble or Ricochet Robot. Once you implement a basic version, try adding a computer AI!
- Write a cellular automaton such as Conway's Game of Life or Langton's ant.
- Write your own physics simulation (say, of a ball bouncing) and integrate it into Pinball, Marble Madness, or a game of your own creation. Alternately, use a pre-existing physics library such as matter.js or box2d.
- Design a custom micropost app (like Twitter).
- Consider a "Twitch plays..." app like Twitch plays Pokemon (or something similar).
- Web app using data from Google or another website, for example, food locations or crime map of a city. Use D3.js to create a visualization.
- Explore NodeJS and SocketIO
- Write a Twitter bot and deploy it on Heroku
- Explore a JS framework like React, Vue, Angular, Backbone or Ember.
- Write your own text editor program or compression utility.
- Check out topics and tutorials on The Coding Train Youtube channel, which is one of my favorite resources.
- dan-ball and y8 have a huge number of games to draw inspiration from.
- Nifty project ideas from Stanford
- Interactive fiction archive, which may inspire a text-based game or MUDs (RPGs).
- List of open-source video games to draw inspiration from
Text editors for coding
- Codepen, web-based front-end IDE
- JS Fiddle, same as above
- repl.it, useful for running small scripts in a variety of languages
- Neocities, a fun, retro web host and IDE with a social component
- Glitch, same as above
- Atom, a full-featured offline editor
- Sublime Text, same as above
- Brackets, useful for launching Phaser games but a little clunky to code in for some folks
- Notepad++, a simple, no-frills editor for Windows only
- vi, my editor of choice, but has a steep learning curve
Coding challenges and problems
What should I do after this class is over?
- Study and build projects independently using the resources on this page and following free online tutorials. Put your projects on Github.
- Do an internship. Here are some resources:
- Enroll in two year college courses, such as those at City College of San Francisco.
- Enroll in free (or cheap) online courses from a site like Udacity, Udemy, or DataCamp.
-
For seniors:
- Enroll in a coding bootcamp. Here's a breakdown of those offered in SF. There are also many available over the internet.
- Enroll as a CS major or minor in a four year college such as UC Berkeley.
- 42 has a tuition-free summer bootcamp for high school students here in the Bay.
- Surf meetup.com and attend classes, talks, and hackathons in your area.
- Attend classes for free and hang out at Noisebridge Hackerspace.
- Get involved with Black Girls Code or Girls Who Code.
- Teach a Mission Bit class!