Category: General

Project Folders

Each of your assignments should be placed in your server in folders named "assignment1", "assignment2", etc. This way, when we go to grade projects, we can just head to yourdomain.mynmi.new/assignment1 and not have to hunt around for differently-named projects.

Additionally, each of your project folders 1 should contain three folders: css, img, and js. Put you CSS files in css, your images in img, and your Javascript in js; your HTML goes in the main project folder.

Naming Files

In HTML (and CSS, and JS, for that matter), file names are case sensitive, meaning that File.html and file.html are two different files.

You also should avoid spaces and most punctuation. Even though Finder will handle these just fine, they might cause some problems with certain OSes and web browsers.

Finally, there's one magic file name in HTML: index.html. In any given folder, a web browser will first look for and open index.html. This means that if you point a web browser to example.mynmi.net, the browser will check to see if there's a file at example.mynmi.net/index.html, and if there is, it'll open it.

Why does this matter? For all of your assignments 2 for this class, be sure to name the main page of each project index.html.

Indenting Code

Developers will get into huge arguments about how, exactly, you should do this, but the essential thing is that whether you're writing HTML or CSS, you consistently indent your code.

Why? To save your future self from misery. When it comes time to find an error, your life will be infinitely easier if all your work is clearly and consistently indented.

Except WordPress—WordPress creates its own very specific folder structure↩

Except for anything involving WordPress—it takes care of this stuff for you↩

Even if you've been using a Mac for a while, chances are you can learn to use it more effectively and efficiently1.

Initial Set-up

Enable right-click - You'll work so much more quickly with this enabled. Go to: System Preferences > Mouse / Trackpad > Secondary Click.

Set up Hot Corners - This is one of the biggies for taking advantage of all the drag and drop niceties the Mac offers. Go to: System Preferences > Mission Control > Hot Corners. I set the bottom-left corner to Mission Control and the bottom-right corner to Desktop.

Set up DropBox - If you already have an account, add it to your classroom computer. If not, create an account here.

Set up Finder as God intended - Your Finder window should look like this:You should also, for this class, click ⌘ + , and set "New Finder windows show..." to Dropbox.

Set you Dock to the left, shrink it down a bit, and remove (either by right-clicking or, more satisfyingly, by clicking and dragging toward the middle of your screen until a dust cloud appears) any applications you won't be using every day.

Keyboard Shortcuts

You must must must must must learn to use keyboard shortcuts to use a computer at all efficiently. You'll have to force yourself to do this at first, but once you learn these, you'll wonder how you lived without them.

System-level

⌘ + C - Copy

⌘ + V - Paste

⌘ + X - Cut

⌘ + S - Save

⌘ + Q - Quit the current application

Shift (Hold down) + Arrow - Select text

⌘ + Shift (Hold down both) + Arrow - Select text until end of line

⌘ + Tab - Alternate between current and previous applications

⌘ (Hold down) + Tab - Select among open all applications

⌘ + ` (To the left of the 1 key) - Switch among open windows within an application

⌘ + Space - Open Spotlight (Quickly find and open applications and files)

Google Chrome

⌘ + T - Create a new tab

⌘ + R - Refresh the current tab

⌘ + Shift + T - Reopen closed tabs

⌘ + 1, ⌘ + 2, etc. - Switch to the

Keychain Access

Using Spotlight (⌘ + Space), open Keychain Access to securely view any passwords you've stored on your computer. Click the checkbox to "Show password" and then enter your user password (the one you use to log on to the computer) to display the password.

Heck, even I can still learn to use a Mac more effectively and efficiently↩

Browser

Google Chrome - Don't use Safari. Firefox is okay, if you have specific reasons you want to use it. But for simplicity's sake, let's all use Chrome.

Text Editor

Brackets - A great open source text editor from Adobe (weird, I know). Most relevantly for this class, includes syntax highlighting and good preview tools, but a lot of other nice stuff, too.

FTP

Cyberduck - Weirdly, you pay for this tool in the Mac App Store, but you can still download it for free straight from their website.

Image Editing

Photoshop - Still the industry standard, but fairly expensive to install on your own computer. If you want to use it on your own machine, the Creative Cloud Photography plan ($10/month) is probably your best bet.

Pixelmator - A strong challenger to Photoshop. Not as full featured, but more than you'll need for this class.