Academics

Students’ Portfolio Project

The final project for Web Design & Usability required students to design and code their own portfolio site. The goals were to learn HTML, CSS and responsive design. The final site needed to be fully functional across multiple devices. Minimum deliverables should include a homepage, an about page, and a portfolio section with at least four projects to showcase.

To help students put together their portfolio site, I gathered the following questions:

  1. What’s the purpose of your portfolio? (Get hired, showcase your work, get freelance projects, get to know you, gain reputation, communicate)
  2. Who is your portfolio for and who is not for?
  3. What type of work would you like to focus on?
  4. Does your portfolio showcase the type of work you want to do?
  5. Does your work present design as a problem-solving methodology?
  6. Does your work reflect strategic thinking regarding the chosen subject?
  7. Does your work demonstrate high level of typographic execution?
  8. Does your work tell a story?

With this project, the concentration is on coding. We zipped through the mockups and jumped right into the coding. I planned out plenty of studio time for students to work on in class. Because I had 19 students, I allowed them to work on their own if they felt comfortable with the codes. That way those students needed help could come to class so I could work one on one with them. In the last few weeks, we stayed until 11pm (an hour over the regular class time) to code. I was glad that they were passionate about the project.

Start simple was the key element that I kept reminding students. They needed to create clean HTML5 markups with ARIA roles and clear CSS. Once they get the basics, they could add JavaScript or more fancy interactivity. Some students started out with frameworks and jQuery. Once they were stuck on something and weren’t able to customize the codes to get what they wanted, they had to start over from scratch. Doing so taught them the important lesson of progressive enhancement.

At the end, many students didn’t get as far as I would like them to be, but they managed to create fully responsive functional web site for their portfolio. My hope is that they could take what they have learned in class and continue to improve their project.

Here are some of the students’ sites available online:

Neha’s project was different from the rest of the students. She is more advanced in front-end development. Since she already had a portfolio and didn’t to redo it for the class, I suggested that she put together a site that showcase all of the students’ site. I gave the complete freedom to develop the site. She ended up using way too much JavaScript and jQuery for a simple page, but she was able to apply some nice interactivity.

Final Thought

Teaching this course had been a learning experience for me. There are things that I can improve. Even though I detest quizzes and exams myself, I should have incorporate them into the course to make sure that the students read the book and understand the codes. I could spend more time doing workshops and demos to help them learn. The first two projects, which focused on design and usability, went quite well. The third project, which included coding, were stressful. If given opportunity, I will teach again.