Interactive Writing & Design

Foundation Rubric

Our Foundation project is due next Friday, October 21. Please use the ‘flex grid’ version of Foundation* – you have to go to the ‘downloads’ page, choose ‘custom,’ and then leave everything else checked and click ‘download.’

Content: Feel free to use the same restaurant content as before. If you’d rather lay out a different site for Foundation, just get it OK’ed by me in advance, and that’s fine.

Bells & Whistles: Please use *at least* two elements from Foundation’s Kitchen Sink (or elsewhere – look on CodePen) – that will enhance your page’s appearance. Options include: well, anything – but in class, we added a sticky / fixed header, and some nested rows/columns. You can also use accordions, flex video containers, drop-down menus, media objects (great for menus!), or whatever.

Professionalism: Foundation is a very advanced, production-ready framework – thus, I want your pages to look frikkin’ awesome. Make sure to review your work – check the page at every resolution, make sure all of your images are optimized for the web, add a darn title, for cryin’ out loud!

Grid: The primary difference between Foundation and Skeleton is that F allows you to change your layout at different resolutions (small, medium, large). You are required to change the column layout for at least *one* part of your page (that is, have different values for your ‘small,’ ‘medium’ and ‘large’ classes).

Mockups: I am not requiring that you hand in a mockup, but geez, you should mock up your site before coding it – especially for a framework as complicated as Foundation. Remember that the layout of your site will (potentially) be different at small, meduim and large screen sizes (and it has CSS for you to adjust content for ‘xlarge’ and ‘xxlarge’ screens as well).


*If you have already downloaded the non-flex version of Foundation, consider re-downloading, and then pulling all of the Foundation-specific files out and replacing the ones in your working folder. Be careful not to overwrite ‘app.css’ (where you write your custom CSS) or your ‘index.html’ (where 99% of your actual work will reside).

Posted in Uncategorized | Leave a comment

Foundation Examples (from last year)

Some solid examples of the Foundation project – please note that this assignment  (from last year) required that students not use any content – so they are mostly just colored boxes.

If you think that sounds easy, check these out – they are anything but simple (I still don’t really remember how Henry got that circle in there…)

Megan McGowan’s Foundation site:


Nick Margherita’s:


Henry Kean:

HenryKean (mockups)

Brandon Frye:


Posted in Uncategorized | Leave a comment

Python’s HTTP Server

It will benefit you both now and in the future to know how to simulate a server on your local machine. It is also cool and fun. Steps:

  • Go to and download the latest version (OS X comes with Python pre-installed, but not the latest version – and it doesn’t auto-update). This may require a reboot. (Bookmark all your open Chrome tabs!)
  • Launch Terminal: ~/Applications/Utilities/
  • In the Finder, navigate to the folder you’re working from – where the HTML page is that you want to test on a server.
  • Drag this folder’s icon to the Terminal application in your dock. This will create a new instance of Terminal – you can close the first one.
  • Now, a Python command:
  • python3 -m http.server 8000
  • That should create a faux server from your folder. You can test if it’s working by opening a browser to “localhost:8000.” You should see your index.html page.
  • To load locally hosted content on your phone, find the IP address of your computer on the network: System Preferences  > Network > Wifi > click on ‘Advanced….’ and find your IP address (it’ll look like, but not with 0’s)
  • Open the browser on your phone, and type in the IP address, followed by a colon and 8000. So:
  • , for example
  • You should see your locally hosted content, and can test it on a phone.
Posted in Uncategorized | Leave a comment

Responsive Framework Rubric

We’ll be using three responsive frameworks: Skeleton, Foundation, and Ratchet. To get started, go to each of these websites, download each framework, and organize your folders so you’ve got three unique locations, one for each framework, that are easy to find.

Then pick a restaurant – local or far away, but a real restaurant – and make a website for them. Please note, you will use the same restaurant for both Skeleton and Ratchet. If you choose an existing restaurant that already has an online menu, it’ll make your life easier.

Note that all restaurant sites require a handful of things: open hours, location, and online menu.

For Skeleton, please make a home page for your site that includes open hours, location, an about section, and some imagery. It should also include a navigation. Then make a menu page as well, and be sure to link the two. Your menu does not have to include everything that the restaurant serves. If you would prefer to make a ‘one-page’ site that includes content for both the home page and the menu, that’s fine.

For Ratchet, use the same restaurant content, but lay it out only for mobile. We’ll also make the site have two pages (home, menu). We’ll use push.js to connect the pages.

Be sure to plan out a layout ahead of time, and mock it up. I encourage you to do this digitally, using a base-12 grid template. For Skeleton, you only need to design the page for desktop – Skeleton controls the layout’s degradation into a mobile-friendly version.

For Foundation, that’s not the case – you must plan out / mock up the layout for (at least) three sizes: small, medium and large (you may also want to adjust your layout for extra-large and extra-extra-large, too. See here.).

So, that’s a lot of project. Let’s have the Skeleton / Ratchet versions of your site due by Tuesday, October 11, and the Foundation version due Thursday, October 20.

Posted in Uncategorized | Comments Off on Responsive Framework Rubric

Links from Monday

Using @font-face for embedding your own font:

Using @font-face

The great favicon generator:

All of your options regarding CSS backgrounds:


Posted in Uncategorized | Comments Off on Links from Monday

Flexbox resources

The flexbox ‘cheat sheet:’

A flexbox product page (jackets):

Intro to flexbox grids:

Flexbugs: common flex errors and solutions:

Solved by Flexbox, a site dedicated to showing examples of using flex for common layouts:

One of many flex-themed codepen pens:


Posted in Uncategorized | Comments Off on Flexbox resources

Resume Examples


Posted in Uncategorized | Comments Off on Resume Examples

Resume Rubric

Our Resume project will be due on Friday, September 23. Here’s the rubric, some explanation, advice, etc. Honestly, I try to keep this rubric as flexible as possible, so y’all can exercise full creative control over your project. But here’s a few things you need to do :

  • This is really a layout assignment. Choose either to use Flex or Floats to create your layout. No frameworks allowed. You are strongly encouraged to mock up your layout ahead of time (you do not have to hand in your mockup).
  • Yes, it has to be responsive.
  • Try to make it look as little like your print resume as possible – same content, different presentation.
  • Emphasize the visual – use icons instead of text (when possible), progress bars instead of a list of skills. Consider adding a photo of yourself.
  • Use a favicon
  • Link everything that can be linked
  • Upload the project to a server (probably the student server) and send me a link
  • Use a specified font that fits your content well – using either Google Fonts, Font Kit, or @font-face (CSS)
  • Give your page a title!

Beyond that, some general ideas / suggestions:

  • Consider using a fixed header or sidebar (not required, though)
  • Consider using a JS-based ‘smooth scrolling’ plugin with named anchors (not required)
  • Use one (or both) of the Resume meetings / blitzes happening tomorrow and Wednesday of this week to clean up the content of your resume
  • Consider handing the project in early for some feedback (then re-submitting by the due date)
  • Lost? Look up some examples online (or examples from previous students)

What not to do:

  • Use deprecated HTML, such as <i>, <u>, <b>, <center>, or use a <table> for layout.
  • Make a super-wide page that adds a horizontal scrollbar in most desktop resolutions (max out any width declaration at about 960px)
  • Have your resume look exactly like one of the ones we looked at in class!
  • Create a design that only looks good at a certain screen resolution – think outside of your laptop monitor.



Posted in Uncategorized | Comments Off on Resume Rubric

Flexbox Resources

The CSS-Tricks ‘cheat sheet’ on Flex is here:

A Complete Guide to Flexbox

…and here’s a great tutorial on how to set up a ‘real’ (responsive) page using flexbox:

Designing A Product Page Layout with Flexbox

Some common issues with Flex, and how to solve them:

‘Solved by Flexbox,’ examples of layout solutions with flex:

A cool Flex pen:

Posted in Uncategorized | Comments Off on Flexbox Resources


To embed a local version of a font onto your site (that is, a file you’ve downloaded and put into the root directory of your site):

(taken from

Initially you define the rule, “font-family” is what you want to call the font, “src” is where it can be found, include a “font-weight” (not needed for normal, but required by everything else, bold, thin etc).

@font-face {
    font-family: DeliciousRoman;
    src: url(;

Then just use it like any other font in any other style rule.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

So, find a font you like (from,, Adobe, Google), download it, and give it a shot.  That’s what I did for that ‘Star Wars’ intro site.

Posted in Uncategorized | Comments Off on @font-face