Introduction to Interactive Design
World Wide Web
Zoom ↗

Resources

The technologies, languages, and libraries introduced in class are all well-documented online. If you are having difficulties, please take time to first troubleshoot online by yourself. Good programming is good searching.

Searching

You are not expected to memorize everything we discuss or immediately know how to build out your particular ideas. There is a wealth (an excess?) of information on web development: tutorials guides, “BEST” practices... The ability to search and sift through up-to-date and reliable information on sites like Stack Overflow or elsewhere is key. Really the ability to search for technical information quickly, thoroughly and efficiently is an essential skill of web development.

Materials

For this course, make sure your computer has the following:

  1. Zoom (Participants will receive an up-to-date password as an email the morning before each class.)
  2. A modern web browser: either Firefox or Chrome. Or Canary if you prefer.
  3. A reliable code / text editor: Atom, Brackets, Visual Studio Code, or Sublime Text. There are others too, take your pick. A good text editor for reading and writing code might have such useful features as Syntax Highlighting, Autocomplete, or Advanced Find and Replace functionality. Personally, I use Atom.
  4. Have a fully charged machine (and maybe a charging cable). We’ll be doing quite a lot of typing...

Platforms

Codecademy is an online learning platform with free and paid courses in numerous languages.

General Assembly has a course in HTML, CSS, and JavaScript called Dash.

Collaborative coding, Glitch, could be useful, too.

Debugging

Online Code Playgrounds

For isolating, testing, collaborating, and iterating code snippets:

General Overviews

HTML

HTML stands for Hypertext (HT) Markup Language (ML). 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.

JavaScript

JavaScript is the programming language of HTML and the web. Interaction with the user, animation, etc., are all done with JavaScript.

Possibly the best resource for learning modern JavaScript is a site called javascript.info.

Git, GitHub, Terminal, and UNIX

Git is a free and open-source version control system to keep track of (and share) changes in files.

GitHub is a for-profit, cloud-based computing service to help developers store and manage code: tracking and controling changes and allowing for collaboration.

Markdown

Markdown is a markup language that easily lets people add semantic formatting (like headings, lists, etc.) to text documents. Often it’s used on the backends of websites or in readme files. Markdown files have the extension .md or .markdown.

If you want to create a site that uses markdown, try making it with Jekyll or Gatsby, or another CMS. Note these sites might require some special configuration to run on Netlify.

Generally Useful

Keyboard Shortcuts

Keyboard shortcuts can be a useful tool. With limited real estate on screens and multiple applications open, it will 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, and a macOS.

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

Atom

Cut: ⌘X
Copy: ⌘C
Paste: ⌘V
Save: ⌘S
Save As: ⌘⇧S
Close Window: ⌘W
Switching between tabs: ⌃tab
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

To automatically close HTML tags (Atom): https://atom.io/packages/autoclose-html

For a full list of shortcuts, go to File / Preferences / Keybinding.

Tip: you can also drag your project folder into your text editor for quick access to all of its files and directories.

Google Chrome and Firefox

macOS General