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:

1. Have syntax highlighting (color coding).
2. Help you with tabbing and closing tags.
3. Support code folding, to collapse and expand sections of code.
4. Edit multiple lines at once.
5. Include autocompletion for tag names, attributes and CSS rules.
6. Offer powerful find and replace functionality, including grep/regex.
7. Possibly handle FTP as well, so you can sync and upload your files to your server from right inside the program.

The industry standard of late is Visual Studio Code, which is feature-full, free, and available on all platforms. Paid programs all have a free trial period though, so try a few once you're comfortable with CSS. Most of the time I personally use BBEdit or Vim, depending on the task.

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 focuses heavily on templating and tooling that can be confusing for beginners. Avoid using Dreamweaver for this class.

Helpful Links ⤒

• Can I Use - Check the current browser support for any CSS property or HTML feature.
• Mozilla Developer Network (MDN) - Incredibly comprehensive documentation, with examples and compatibility tables. Most often when looking up definitions or usage of something in HTML or CSS, I simply search "MDN <term>" for the answer.
• HTML Validator - Check your HTML syntax using this W3C tool.
• CSS Validator - Check your CSS syntax using this W3C tool.
• W3 Counter - Global Browser and Platform Market Share
• statcounter - Global Browser and Platform Market Share
• Chrome CSS Usage - CSS Feature Usage based on Chrome's anonymous usage statistics

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 the major browsers nowadays have a sophisticated collection of built in developer tools that are extremely useful. When activated, they usually open as a pane within your browser window, but can easily pop out into their own window if needed.

They make all of a web page's source code easily viewable, and you can even edit and preview certain code changes live 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!

MDN has a good instructional article on how to Examine and edit CSS in the Firefox dev tools (the other browsers are similar).

Find and Replace (PRCE/Grep/Regexp) ⤒

Regular expressions are an extremely powerful tool for finding and transforming text. Learning regular expressions in depth is definitely beyond the scope of our class, but here are some of the most common and useful character classes. Don't forget to turn on the checkbox for grep/regexp in the find and replace dialog of your text editor.

BBEdit's help manual has an excellent section on regular expressions if you're interested in learning more. It is linked for quick access from the table of contents page under Help > BBEdit Help. In versions >13.0, BBEdit also has a "grep playground" that helps you learn by live preview, and predefined examples.

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, via keyboard shortcuts or screen capture applications included with macOS and Windows.

On a mac:

Macs have an app called Screenshot.app which lets you take images or videos of the screen, a given window, or a cropped selection.

Screenshots are saved to the desktop. Full Apple help article on screenshots here.

On a PC:

Most PCs running Windows 10 have a tool called the Snip and Sketch. Open the start menu and search.

Full Microsoft help article on screenshots here. If you take a lot of screenshots or have advanced workflow needs, try ShareX!

If you need to take a screenshot of an entire web page, Firefox and Chrome dev tools both have options for taking a single screenshot of the entire current page.

• Instructions for Firefox
• Instructions for Chrome

Monospace Fonts

Below are a selection of beautiful, modern monospaced fonts for coding and writing. None of these are bitmap fonts, and several have variable font variants.

As always, check the licensing terms before distributing, uploading, or publishing content using these fonts. They are all, however, free to use on your personal computer and text editor of choice.

Here's an article comparing several of these to Fira Code (2023).

Open Source

• Fira Code - This is a forked version of Fira Mono. It includes code specific ligatures and a slanted variant that come text editors are capable of displaying. This is a very popular coding font.
• Commit Mono - "an anonymous and neutral coding font" with many Open Type features and "smart kerning", which shifts letters within their monospace block for better readability.
• Victor Mono - "Slender, crisp, narrow"
• Cascadia Code - Microsoft's new default monospace font.
• Inconsolata - A humanist monospace font, my personal favorite.
• Recursive - A highly versatile variable font with a monospace axis.
• Hack - Also available on Adobe Fonts
• IBM Plex - Also available on Adobe Fonts
• iA Writer fonts - Based on IBM Plex, monospace and duospace variants. Also, variable font versions.
• Source Code Pro - Look for it in Adobe Fonts, or download from Github or Google Fonts
• JetBrains Mono
• Anonymous Pro
• mplus - Also available through Adobe Fonts

Closed Source

• SF Mono (Apple) - Installed on macOS systems but only available in Terminal and Xcode by default. You can download and install it "proper" from Apple, or get the ligaturized version on Github.
• Operator - from Hoefler&Co. Beautifully designed typeface for people who write code.

VSCode Color Themes

Outside of the themes that ship by default with VSCode, here's my personally curated collection of 3rd party color themes.

• Tomorrow and Tomorrow Night
• Base16 Themes (large collection)
• Night Owl
• Nord
• Cobalt2
• Monokai Pro - the only one here that isn't free. Very nice though. Includes icon set.

Javascript Plugins and Libraries

There are tons of javascript plugins and libraries to add all sorts of functionality to your web sites. Some have to be paired with jQuery, and some can function on their own. Here are a few useful and popular plugins:

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.

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

Useful Mac Apps ⤒