Portfolio

Goals

  • Establish a site for your NMI Portfolio
  • Create the portion of your portfolio for this class (NMIX 4110: New Media Production)

Guidelines

Broadly, your NMI Portfolio should present a clear, compelling look at the work you’ve done to earn your certificate. If done well, your NMI portfolio should be something you’re excited to share with potential employers1. A few considerations:

Submission

  • Link to your portfolio (or host it at!) yoursite.com
  • If your NMI portfolio lives within a broader online portfolio:
    • Be sure that the NMI portfolio is its own clearly marked section.
    • Each page in your NMI portfolio section must be easily navigated to from any other page in the NMI portfolio section.
    • It’s up to you how publicly (or not) to feature your NMI portfolio section on your site. While I of course hope you’re super-proud of your NMI coursework, I understand if you would rather highlight other material on your landing page, navigation, etc. All I need is a URL.

General

  • Visuals visuals visuals! Don’t just link to a website you’ve made—share a screenshot of that site that links to it instead, etc.
  • Throughout, don’t simply list what you’ve learned / completed (“I learned how to use Bootstrap 4.0”). Instead, focus on:
    • The application (“I learned how to quickly build responsive websites using front-end frameworks such as Bootstrap 4.0”)
    • The transferable skills and concepts (“I learned how to explore documentation for a large framework” or “I learned how to customize off-the-shelf frameworks”)
    • Your specific process of learning these skills (“I struggled at first to understand how to combine multiple CSS classes to achieve the results I wanted, but once I  grasped that concept, it enabled me to build exactly the site I envisioned.”)

Main / Landing Page

  • The main / landing page will concisely summarize your work toward the certificate as a whole. It should probably contain a few selected visuals, links, etc. that you’d like to feature drawn from all of your courses, as well as clear, obvious links to your work in each class you’ve taken for the certificate.
  • Thus, it follows that each upper-level class you’ve taken to complete the certificate should have its own page that’s easily navigated to from any other page on the site.

Course Pages

  • Each course page should have a short introductory paragraph or two summarizing the major learnings / projects from the class
  • You are not required to post or feature every project or assignment from the class, but you almost certainly should include your final project as well as most of the major projects
  • Include anything else you think might be helpful!

Dates

  • Rough draft due in class Wednesday 4/18
  • Final portfolio due:
    • 11:15: Fri., April 27, 12-3pm
    • 1:25: Wed., May 2, 12-3pm
    • 2:30: Fri., April 27, 3:30-6:30pm

Grading

10 points

7 quantitative points:

  • Portfolio clearly linked to from yoursite.com
  • Portfolio contains certificate-wide landing page
  • Portfolio contains course-specific page
  • All portfolio pages easily accessible from all portfolio pages
  • Writing on site is clear, concise, and well-edited
  • Writing transcends simple itemized listing of skills learned / projects completed
  • Site leverages visuals whenever possible and appropriate

3 qualitative points


  1. and maybe also your mom

JavaScript Algorithm Challenges

  • Complete 2-3 (ideally 3; 2 is acceptable if you’ve been moving a little more slowly with JavaScript) of the FreeCodeCamp Basic Algorithm Scripting challenges
  • Create a simple page at yoursite.com/nmi/4110/project-four (hand-coded or a Bootstrap / Bootstrap-template based page is fine)
  • Link to your FCC profile showing the completed challenges
  • For each challenge, post
    • Its title
    • The code you submitted for the solution
    • A brief paragraph highlighting what you learned from completing the challenge (ex.: how to read JavaScript function documentation, a better understanding of creating complex functions, etc.)

Final Project

Goals

Create a project on the web that

  • combines multiple skills and technologies we’ve learned this semester
  • follows the best practices we’ve covered for those technologies
  • stretches you 15-20% past what we’ve already covered / what you know you can accomplish for sure
  • strategically uses (at least a little) fancy JavaScript
  • includes a brief (450-750 word) critical reflection on what you built and what you learned from building it
  • you can’t wait to show off to others

Dates

  • Proposal due in class Friday 4/6
  • Final submission due:
    • 11:15: Fri., April 27, 12-3pm
    • 1:25: Wed., May 2, 12-3pm
    • 2:30: Fri., April 27, 3:30-6:30pm

Project Menu

Choose one of the following for the final project:

Choose your own adventure

Have a great idea that doesn’t fit one of the options below? Go for it! Just make sure to discuss the idea with me as soon as possible so that we can make sure it’ll satisfy the goals of this project.

Publication-style CMS Mastery

Learn to wield WordPress like a pro.

Create a new WordPress installation. Pick out a theme. Populate the site with meaningful content. But most importantly: get to know WordPress inside and out. Leverage plugins to add new functionality. Master menus, categories, templates, and even users. Bring it all together to create a beautiful publication.

WordPress feature links:

Fun WordPress tutorials:

Speculative Redesign

Choose a site you know well, and build it better.

Reorganize the content, add new features, update the visual design, but above all else, make informed choices that actually (or at least arguably) improve the experience of using the site.

Freelance / friends and family project

Have a friend who’s an amazing author but doesn’t have a place on the web to showcase her work? A family member who runs a business but whose website looks like it was last updated before you were born? Build them a brand new site!

Make it beautiful and functional, and probably make it with WordPress so that they can maintain and update it after you hand it off. This project will also present an opportunity to try your hand at user research and at client communication.

Advanced JavaScript

Go deeper with JavaScript. You might:

 

Grading (25 points total)

Post your work to mysite.com/final-project

Project proposal (0 points / -2 points)

The project proposal will be shared verbally in class, but you should have written notes to guide you. If your proposal clearly defines the project you’re considering, you earn 0 points. If your proposal fails to convey a sense of preparation and consideration, you will lose up to two points off your final grade

Final project (18 points)

The entire final project will be graded qualitatively with an eye specifically toward the project goals. The correct posture for this project is not “What do I need to do?” but rather “How awesome can I make it?”

Specifically, I’ll be looking for thoughtful selection and use of the skills and technologies we’ve learned, designs that follow best practices we’ve covered, independent learnings integrated into the project, a bit of JS thrown in for good measure, and a clear commitment to quality, polished work.

Critical Reflection (7 points)

This should live somewhere on your final project site itself, most likely in a subtle (but clearly discoverable) link in a menu or footer. It’s also your best chance to guide me through your project make sure I see and understand the amazing work you’ve done.

In roughly a page and a half to three pages, walk me through what you built, what you learned from doing so, the challenges you faced, and the things you’re particularly proud of. Feel free to make liberal use of screen captures, code samples, and of course, quality, well-edited prose.

Presentations

Presentations will be given during the final exam period. Guidelines are as follows:

  • Plan on approximately five minutes for your presentation: about 3.5-4 minutes of actual presenting, with about a minute for Q&A afterward.
  • The goal is not to give a comprehensive tour of every single part of your site. Instead, aim for the following breakdown:
    • A brief (30-40 second) refresher on topic / goals of your site
    • 2-3 minutes giving a guided tour of a few (2-5) highlights from your site. These could be design features you’re proud of, tricky technical challenges you overcame, ways you served client needs, etc.
    • 60 seconds or so reflecting on learnings from this project. Focus on transferable learning (skills, habits, etc. you developed) instead of specific technical achievements (I learned how to build this specific layout, etc.). Feel free to include some general reflections on learnings from the course, as well.
  • This isn’t a public speaking course, so don’t feel stressed out about memorizing what you’re going to say word-for-word. However, do rehearse a couple of times (even three times through will take only 15 minutes!) to make sure you know the flow of your presentation, are good on time, etc. Feel free to use notecards, etc. if you’d like.

WordPress Variety Pack

Due: 3/9

Create three separate WordPress installs on your server. Then, use a different theme on each install to create:

  • A simple app site
  • An e-commerce site
  • A news publication

Structure:

  • Each install should be done in a separate folder inside yourdomain.com/nmi/4110/project-three. Example:
    • project-three/app
    • project-three/commerce
    • project-three/news
  • At the root of your project-three folder should be an extremely simple index.html linking to each of the three sites

Grading:

  • Each site is worth 3.25 points1 and will be evaluated on the following criteria
    • Appropriateness of theme to site purpose
    • Intelligent use of WordPress features (plugins, widgets, etc.)
    • Overall quality of execution

Site specific details:

  • App site
    • This should be the simplest of your sites, maybe even close to a one-pager
    • Focus on sharp design, CTA (“Download now!”), etc.
  • E-commerce site
    • You don’t need to build an entire store, but there should be a homepage, a page listing multiple products, and a product detail page
  • News publication
    • As with the e-commerce site, I’d like to see a home page with multiple stories (posts, not pages, of course!) and one or two story pages fleshed out

  1. If you do the math, you’ll note that 3 x 3.25 = 9.75, which is, obviously, .25 less than 100. We’ll give you the last .25 for free. 🙃

Bootstrap Triptych

Annunciation Triptych

As with the triptych above, we’re going to create a three-paneled look at the same subject. That is, you’re going to create the same single page three separate times. Each version of the page—what we’ll call a “panel”—will contain the same content, but will be created differently. Some details:

  • For content, you may choose any unified topic you’d like (it could be giraffes, NBC’s The Good Place, your portfolio, whatever, really.)
  • Every panel must include:
    • A navbar, including
      • A site title
      • A site logo, if you’d like
      • Links to all three panels in each panel
    • A jumbotron / hero section
    • A call to action button
    • A portion of the page that has more than one column in a horizontal layout
    • Images
    • A non-system font
  • All panels must meet the following criteria:
    • Thoughtful responsive design throughout, including:
      • Optimization at minimum for mobile and desktop
      • Responsive images
    • An eye toward aesthetics

Panel One (due Wednesday 2/27)

In Panel One, you’ll create your site from scratch, using only standard Bootstrap components. Your focus is learning how to achieve the layout and look you want using standard components.

Panel Two (due Friday 3/1)

For Panel Two, you’ll take your content from Panel One and place it in a theme/template of your choosing. However, in this panel, you may edit only the content (HTML) of your template, not the appearance (CSS). This panel should take the least time of the three, and is really intended primarily as a record of your progress from Panel One to Panel Three.

Panel Three (due Friday 3/8)

In this panel, you’ll take what you created in Panel Two and customize every detail just the way you’d like—colors, images, layout, etc. The end result should be a fantastic-looking Bootstrap page that, while bearing a resemblance to Panel Two, looks uniquely yours.

Organization

Use this folder structure to organize Project Two. Download the .zip file and place its contents in your project-two folder on Dropbox. Then, copy files from here to your server as they’re ready.

On the main index.html, you’ll create a small cover page / reflection for the project. In the reflection, you discuss:

  • New skills acquired
  • Struggles faced
  • Things you’re proud of
  • Additional things you’d like to learn / work on in the future

Artisanal hand-crafted small-batch locally-sourced bespoke website

Write a three-page website entirely by hand.

Quantitative evaluation (7 points)

One point will be earned for completing each of the following:

  • Sensibly named files
  • Properly formatted HTML and CSS (indented code, etc.)
  • A minimum of three pages, all linked together so that the user can always reach any other page from any given page.
  • All CSS in an external stylesheet
  • Use of semantic div tags styled with css to organize content
  • Each page must contain at least one image, appropriately sized
  • Implements accessibility best practices

Qualitative evaluation (3 points)

These points are earned by demonstrating a high overall level of quality. Ways you may earn these points include:

  • Attention to typography (Google Fonts, typographic scale, typeface pairings, etc.)
  • Overall aesthetics
  • Use of advanced CSS visual presentation techniques (CSS graphics, animations, Bézier curves, etc.)
  • Use of responsive web design principles

Submit by uploading to yoursite.com/nmi/4110/project-one

(Download the entire file structure for your NMI Portfolio here and then upload to the root of your domain.)