Resources

All technologies introduced in class are well documented online. If you are having difficulties, please take time to first troubleshoot online by yourself.

Downloads

You should make sure your computers have:

Self Help

If you can describe your problem in words, you're already halfway there.

Getting started

For a good general overview:

HTML

HTML stands for Hypertext Markup Language. It's used to structure a webpage and its content. HTML is not a programming language, but a markup language.

CSS

CSS stands for Cascading Style Sheets. It's a series of rules used to style a webpage. Like HTML, CSS is not really a programming language—it's a style sheet language.

Webfonts

JavaScript and jQuery

JavaScript is the programming language of HTML and the web. Interaction with the user, animation, etc., are all done with JavaScript. jQuery is a library, or set of helpful add-ons, to the JavaScript programming language. In general, jQuery is much better at giving you immediate, visual results than regular JavaScript. In this class, it's likely you'll use a mix of basic JavaScript and jQuery.

Git, GitHub, Terminal, and UNIX

Git is a version control system to keep track of (and share) changes in files. We'll be using GitHub and GitHub Pages to host our class sites. We'll be using Git and communicating with GitHub via the terminal, running on UNIX.

Debugging

Online tools

For isolating, testing, and iterating on pieces of code:

General

Keyboard Shortcuts

Keyboard shortcuts can be a useful tool. With limited real estate on screens and multiple applications open, it’ll become important that you can quickly interact with your code, in plain text, the web inspector and in the browser. These are some common shortcuts, grouped by application, that you might want to use while working. This list is by no means all-inclusive and will change based on your own machine's keyboard, applications, user settings, and operating system.

These shortcuts are meant for the software most of us are using in this class: Google Chrome, Atom or Brackets, and macOS.

⌘  the Command Key symbol
⌥  the Option Key symbol
⇧  the Shift Key symbol
⌃  the Control Key symbol

Atom and Brackets

  • Cut: ⌘X
  • Copy: ⌘C
  • Paste: ⌘V
  • Save: ⌘S
  • Save As: ⌘⇧S
  • Close Window: ⌘W
  • Switching between tabs: ⌘⌃ arrow keys`
  • Delete forward: fn del
  • Multiple Select: ⌘ click
  • Highlight text: ⇧ arrow keys
  • Highlight to end of line: ⇧⌘ arrow keys
  • Highlight to end of word: ⇧⌥ arrow keys
  • Comment out highlighted text: ⌘/
  • Find a folder or file in the project: ⌘P
  • Automatically close HTML tags (Atom): https://atom.io/packages/autoclose-html

In Atom, for a full list of shortcuts, go to Atom / Preferences / Keybindings.

To explore, install, and manage packages, go to Atom / Preferences / Packages.

You can also drag your 'interactive' folder into your text editor for quick access to all of its files and directories.

Google Chrome

  • Open the Inspector: ⌥⌘I
  • Open the JavaScript Console: ⌥⌘J
  • View page source: ⌥⌘U
  • Full Screen: ⌃⌘F
  • New Window: ⌘N
  • New Incognito Window: ⌘⇧N
  • New tab: ⌘T
  • Switch between tabs: ⌃tab
  • Close tab: ⌘W
  • Refresh the page: ⌘R
  • Hard refresh: ⌘⇧R
  • Show/Hide the bookmarks bar: ⌘⇧B
  • Zoom in: ⌘+
  • Zoom out: ⌘-
  • Back in history: ⌘[
  • Forward in history: ⌘]

macOS General

  • Switch between applications: ⌘ tab
  • Spotlight (quick find an application): ⌘ space
  • Screenshot of whole screen: ⌘⇧3
  • Screenshot a selected part of screen: ⌘⇧4
  • Screenshot a selected application: ⌘⇧4 space
  • Add an emoji ⌘⌃ space

Lynda.com

All students at Yale have free access to Lynda.com, a website that contains thorough online video courses for all skills learned in this course. Access Lynda here:

Lynda's Yale Portal

Recommended:

Advice

While general overview of skills are given in class, the best learning happens alone through practice over time.

Since the web and its constituent code are constantly changing, there is no one resource that is best. Instead, students should aim to absorb resources from a variety of sources, putting them to use through trial and error.

If you find yourself stuck while writing code (which is extremely common–even for the best programmers), first try breaking your problem down into smaller, more manageable parts. Search Google or Stack Overflow for how to solve those parts, one at a time.

Remember that most of the time spent writing code will be fixing bugs. In fact, learning how to debug is what programming is all about! (And sometimes bugs will allow you to discover something new and never seen before.)

And remember—sure, it's fine to shut yourself away to learn something new and technical, especially in the beginning when you need a certain skill level merely to get by. But also, balance your study by talking to people! The internet is about connection and support through that network of people. If you feel comfortable, show a classmate or friend something you’re making.