Introduction to Interactive Design:
World Wide Web

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.

Office Hours

If you're stuck, have questions, need some 1:1 debugging help or just want to chat about your ideas, I’m available for office hours Mondays and Wednesdays from 1–3pm EST. Send me an email and we can set up a time to talk.

Desk Crits

In addition to my office hours, Anna has time slots available for Desk Crits Mondays, Tuesdays, and Wednesdays over the next few weeks. It's required that you sign up for at least 2 of these desk crit sessions before the end of the course. Signups can be found in our class Paper folder.

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, etc. Know that the web is always under construction, and so what was best in 1996, 1992, 2008. 2016, or 2020, might or might not have changed. The ability to search, sift through, and test for up-to-date and reliable information on sites like Stack Overflow and elsewhere is key. You’ll quickly find that the ability to search online 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 link and meeting password the morning before each class.)
  2. A modern browser with good development tools like a page inspector, JavaScript console, and responsive design mode. Either Firefox or Chrome. Or Canary if you prefer.
  3. A reliable code text editor. It will be useful to have one with features or extensions available such as language-specific syntax highlighting, code auto-completion, or Git integration. Some popular ones today include Visual Studio Code, Atom, and Nova.There are plenty of others, so take your pick. In class, I’ll be using VSCode.
  4. Have a fully charged machine (and maybe a charging cable). We’ll be doing quite a lot of typing... along with a relatively stable Internet connection during class times.

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, iterating, and sharing 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

VSCode or 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 / ⌥ 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 Preferences / Keybinding or Keyboard Shortcuts.

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

Firefox and Chrome:

macOS General: