I use Pinboard to bookmark interesting websites related to ENGL 4814, but I will add the most important resources to this page as the semester progresses. If you’d like me to add a link to this page, just let me know.
Quick links
- Code Bank (Templates and snippets you can use on your projects)
- Reclaim Hosting (Access to your personal site)
- Google Drive (Access to your shared Google folders)
Virginia Tech Resources
- Lynda.com (Free software tutorials)
- InnovationSpace
- Student Software Distribution
- VT Google Apps Portal
Web Development Software
- Komodo Edit (Mac, Windows, Linux; free)
- TextWrangler (Mac; free)
- Notepad++ (Windows; free)
FTP Clients
- FileZilla (Mac, Windows, and Linux; free)
- Cyberduck (Mac and Windows; free)
- Fetch (Mac; free for educational use)
- Fugu (Mac; free)
- Free FTP (Windows; free)
- WinSCP (Windows; free)
- Transmit (Mac; $34 and worth every penny)
Markup Validators and Related Tools
- Unicorn (W3C’s “Unified Validator”; it checks HTML and CSS at the same time.)
- Web Developer Extension (Chrome and Firefox tool that adds lots of helpful features to your browser.)
- Helping Beginners Get HTML Right (Nifty tool for displaying potential markup problems on your pages.)
Typography
- The Elements of Typographic Style Applied to the Web
- Awesome Fontstacks
- Typetester
- The Web Font Combinator
- How to use CSS @font-face
- Font Squirrel
- Google Fonts
- Font Awesome (icon-based font)
- Quinn’s typography bookmarks on Pinboard
Color
- Kuler (for developing color schemes)
- Color Sphere (another tool for developing color schemes)
- Color Scheme Designer (another tool for developing color schemes)
- 0 to 255 (for finding variations on a specific color)
- Color Spire (a tool to help you see how colors look when applied to a typical website)
- Color Palette Generator (creates a color scheme by extracting colors from a photograph)
Images
Public domain and/or Creative Commons images:
Background images:
- BG Patterns (online tool for generating repeating background images)
- Stripe Generator (online tool for generating striped background patterns)
- Squidfingers Patterns (a huge collection of tiled background images)
- Subtle Patterns (a nice collection of minimalist background images)
Personal Page Examples
- About.me Directory
- Flavors.me Directory
- Gallery of one-page personal websites
- siteInspire’s gallery of personal websites
- 40 Excellent Examples of Single Page Websites
- Naz Hamid
- Tim Lum
- Paul Armstrong
- Frank Chimero
- Dan Benjamin
- Lifehacker’s guide to making your own “about me” page
Responsive Web Design
- The Ultimate Responsive Web Design Beginners Resource List (just what it says; lots of great stuff here)
- Responsive Web Design Techniques, Tools, and Design Strategies (great list of resources from Smashing Magazine)
- “Responsive Web Design,” by Ethan Marcotte (the article that started it all)
- “Responsive Web Design: What It Is and How To Use It,” by Kayla Knight
- Media Queries (gallery of responsive sites)
- PXtoEM (online tool for converting pixel values into ems)
Bootstrap Resources
- Bootstrap (the framework we’ll be using in class)
- Bootstrap Starter Files (starting point for Unit #2)
- Bootstrap Expo (gallery of sites built with Bootstrap; the Resources page is especially helpful)
- Built with Bootstrap (gallery of sites built with Bootstrap)
- Bootswatch (free themes for Bootstrap)
- Start Bootstrap (free, more customized, themes for Bootstrap)
- Bootstrap Zero (free themes and templates for Bootstrap)
- BlackTie (free, more customized, themes for Bootstrap)
- Jetstrap (interface-building tool for Bootstrap; free for academic use)
- LayoutIt (another tool for building Bootstrap pages; no registration required)
- Brix.io (powerful tool for building Bootstrap pages; free 14-day trial)
- Bootstrap Magic (web-based tool for customizing Bootstrap’s CSS)
- BootSwatchr (web-based tool for customizing Bootstrap’s CSS)
- Bootply (web-based tool for customizing Bootstrap’s components and CSS)
- “Bootstrap 3.0 Grid System” (YouTube tutorial series)
- “Up and Running with Bootstrap 3” (Lynda.com tutorial series; search for the title after you log in with your Virginia Tech ID)
Tables
- Mr. Data Converter
- No-Cruft Excel to HTML Table Converter
- FooTable (tool for making tables work well in responsive designs)
Wireframing
- Mockingbird
- Balsamiq Mockups
- Gliffy
- Wireframe.cc
- Pencil
- Wirefy
- Wirify bookmarklet
- 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
Inspiration for Your Unit #4 Websites
- StoryCorps
- Sound Portraits
- Radiolab
- Radio Diaries
- Awesome Stories
- On Being
- TED
- The Moth
- Narratively
- PechaKucha
Sample Content for Your Unit #4 Websites
- A collection of high-resolution photos of people, licensed under Creative Commons, by Jonathan Abbett
- Morguefile (free stock photos)
- Stockvault (free stock photos)
- Wikipedia’s public domain image resources
- Lorem Ipsum (for generating “dummy” text)
- Creative Commons search (useful for finding CC-licensed audio and video)
- KeepVid (for downloading YouTube and Vimeo videos; only use on appropriately licensed videos)
Personas
- “Introduction to User Personas” and “DIY User Personas, by Silvana Churruca
- Usability.gov’s overview of personas
- “A Closer Look At Personas: What They Are And How They Work,” by Shlomo Goltz
- A collection of persona formats, by Allison Bloodworth and Daphne Ogle
- A collection of finished personas, by John Fillman (for use as inspiration, not as templates)
- Random User Generator (for assigning names, ages, photos, etc., to your personas)
- A collection of Creative Commons-licensed photos of people for use in personas, by Jonathan Abbett
- UI Faces (for creating user icons and profile photos that can be used on your prototype sites)
WordPress Basics
The best way to get started with WordPress is to set up a site and start experimenting with it. When you get stuck, these sites can be helpful starting points for solving problems and finding answers to common questions:
- The WordPress Codex (the closest thing to an “official” manual for WordPress)
- WordPress Forums
- WordPress Answers on StackExchange
- Smashing Magazine’s WordPress archives
Given WordPress’s incredibly large community of users and developers, chances are pretty good that any problem you encounter has been solved — and written about! — by another WordPress user. As a result, a simple Google/Bing/Yahoo search using plain language (e.g., “How do I hide the search bar in the header of my WordPress site?”) will often be the most effective way to find an answer to your question.
WordPress Themes
All WordPress themes can be customized, but some are much easier to modify than others. If you are new to web design and looking for a theme that can be customized in your browser, look for a theme that has a lot of options in the Appearance > Customize section of your WordPress Dashboard. Other themes might harder to edit, but if you find a theme that’s very close to what you want, it’s fairly easy to change colors, typography, and images. I suggest starting your search with one of these lists:
- “36 Free Responsive WordPress Themes“
- “65+ Responsive Best WordPress Themes 2015“
- “30 Free, Responsive and Stunning WordPress Themes“
- “60+ Free Responsive WordPress Themes 2015“
- “50+ Beautiful & Free Responsive WordPress Themes to Build Awesome Websites 2015“
- Smashing Magazine’s collection of “Most Popular Free WordPress Themes”
The key to finding a good theme is to download, install, and experiment with a lot of themes before you settle on one. When you evaluate themes, test them on multiple platforms and devices, and consider how well they can handle the type of content you’ll be creating. I recommend importing the Theme Unit Test file into your WordPress site in order to get a sense of how themes look on big, complex sites.
WordPress Plugins
Plugins add functionality to your WordPress site. You’ll find an endless supply of plugins on the WordPress site, but you might want to start with a few of the following plugins:
- Jetpack (a collection of plugins that enables many of the features available on WordPress.com)
- My Custom CSS (allows you to create custom CSS rules that override your theme’s CSS without modifying the theme’s files)
- Widget Context (lets you specify which pages display particular sidebar widgets)
- Akismet (greatly reduces “comment spam”)
- Contact Form 7 (creates custom forms that let visitors send you email through your site)
- Google Analytics (adds tracking code to each page to monitor visits to your site)
- Google Doc Embedder (allows you to display MS Word, PDF, and lots of other file types inside your site)
- NextGEN Gallery (simplifies the creation, management, and display of images, especially groups of images)
- PHPEnkoder (protects your email address from being harvested by spambots)
- SimplePie (allows you to import, adjust, and display almost any RSS feed)
- “The 36 Free Plugins That Every WordPress User Could Need“