Resources

This page will be updated as the semester progresses with new links and resources.

Text Editors

Text editors are very much a matter of taste.

That's fine, because there are numerous text editors suitable for front-end development, both free and paid. A good text editor will have:

  1. Syntax highlighting (color coding).
  2. Help you with tabbing and closing tags.
  3. Code folding, to collapse and expand chunks of code.
  4. Edit multiple lines at once.
  5. Popup dictionaries of tag names, attributes and CSS rules.
  6. Many can handle FTP as well, so you can sync and upload your files to your server from right inside the program.

Many students (and web developers) use Brackets or Sublime, which are feature-full, free, and available on all platforms. Paid programs all have a free trial period though, so try a few. Spend a week or so in each as the semester progresses. I personally use Coda, BBEdit, or vim depending on the task.

  • TextWrangler - mac only - Free. Excellent general purpose text editor. Has all the features you need, but not the bells and whistles (autocomplete and tag closing). Very powerful find and replace features.
  • Brackets - mac only - New. Adobe's free and open source player. Not bad, but I've found it still has some quirks.
  • Sublime Text - win/mac - Highly functional. A favorite for many.
  • Notepad++ - win only - Free. Very good windows-only option.
  • UltraEdit - win/mac - Another good option particularly for windows.
  • Coda - mac only - Also very good. Geared specifically toward web developers.
  • BBEdit - mac only - TextWrangler's big brother. Adds a few helpful features, most notably autocomplete dictionaries.
  • Atom - win/mac - Might be worth a try if you're on windows.

Finally, a note about Adobe Dreamweaver, which is installed on all of the lab computers as part of the Adobe suite. Dreamweaver is much better in recent versions, but it has several features that can become a crutch while learning, and actually get in our way. Avoid using Dreamweaver for this class.

Browser Developer Tools

One of the greatest things about the web is that you can freely poke around at the code for any web page.

All major browsers nowadays have a sophisticated collection of built in developer tools that are extremely useful for web development. When activated, they usually open as a pane within your browser window, but can easily pop out into their own window as well.

They make all of a web page's source code easily viewable, and you can even edit and preview code right in the browser.

Tip: Don't get too far ahead of yourself editing code in the browser. Get in the habit of switching to your text editor and updating your code after every couple of changes. Once you refresh the page in the browser, everything goes back to its original state!

Browser
Where to find tools
Chrome
View > Developer > Developer Tools
Firefox
Built-in developer tools under Tools > Web Developer > [ Inspector ]
Firefox
Firebug Addon. The original. Most browser developer tools emulate features originally introduced here. Firebug's features will soon become part of Firefox's native developer tools.
Safari
First, enable "Show Develop menu in menu bar" from the Advanced tab of Safari's Preferences. You'll then find it under:

Develop > Show Web Inspector
Internet Explorer
Nobody does web development in Internet Explorer.

HTML Entities

How do I put quotes between quotes without closing my quotes?!

HTML code obviously uses a handful of characters that have special meanings. < > for tags, "" for attributes, etc.

But what happens when you want to literally display those characters on your web page, when they would otherwise be interpreted as code? And what about symbols and characters that we don't have keyboard keys for, like accented letters, special currencies, or greek letters?

Every unicode character has a code number, and many of them have an abbreviated name. These are called HTML Entities, or character references. Instead of typing the character that you want directly in your code, you use the named or numbered reference to that symbol.

An ampersand & tells the browser you're entering a character reference, and the reference terminated with a semicolon ;.

For example, this doesn't display the way you probably want in a browser:

<p>Only one of these spaces       will show up.</p>

But this does.

<p>But these spaces &nbsp;&nbsp;&nbsp;&nbsp;will.</p>

Here are the symbols you may need to "escape" when you want them to display rather than be interpreted as code. I threw in a few other common ones as well.

Symbol
Name
Entity
Number
 
non-breaking space
&nbsp;
&#160;
&
ampersand
&amp;
&#38;
<
less than
&lt;
&#60;
>
greater than
&gt;
&#62;
"
straight double quote
&quot;
&#34;
'
apostrophe
&apos;
&#39;

©
copyright symbol
&copy;
&#169;
en dash (you can just type this)
&ndash;
&#8211;
em dash
&mdash;
&#8212;
left double quote
&ldquo;
&#8220;
right double quote
&rdquo;
&#8221;

Here is a very useful complete character reference from the W3C, and more information on Wikipedia.

Screenshots

Oftentimes it's useful to "take a picture" of exactly what's displayed on your screen. Fortunately this is easy to do on both Macs and PCs.

Using a program: Macs have an app called Grab.app in the Applications > Utilities folder (spotlight should also find it quickly). Most PCs running Windows Vista or newer have a tool called the Snipping Tool. In Windows 10, open the start menu and search.

Faster than using the programs though, you can just use keyboard shortcuts!

On a mac:

Shortcut
Type of Screenshot
cmd + shift + 3
whole screen
cmd + shift + 4
click and drag portion of the screen
cmd + shift + 4, spacebar
choose a window to take a picture of

Screenshots are saved to the desktop.

On a PC:

Shortcut
Type of Screenshot
PrtScn
"Print Screen" or similar abbreviation, takes a picture of the whole screen and copies to the clipboard. Hint: The new document dialog in photoshop automatically sizes to the contents of your clipboard.
win + PrtScn
Windows 8.1 and 10 only - take a picture of the whole screen, and save automatically to a file. Creates a folder called "Screenshots" in your Pictures folder.
alt + PrtScn
Copies a picture of the currently active window to the clipboard.

The default file type on both systems is png.

CSS Pocket Reference

Can be found on Amazon. This is a really handy pocket dictionary that lists all of the rules and properties for CSS, with helpful descriptions of how to use them.