INF 133 - User Interaction Software - Fall 2018


A1: Responsive Portfolio in HTML and CSS

Due Saturday, October 13th, 4:00am

In this assignment, you'll make yourself a basic portfolio online. Portfolios are useful for showing potential employers the skills you've picked up in coursework, internships, side projects, etc.

Starter code

A starter repository is on GitHub Classroom.

Git and GitHub

Git is the most prevalent version control software today. GitHub is a popular hosting service for Git projects, and includes many social networking features. Git and GitHub are different products! Git is freely-available open source software, while GitHub was acquired by Microsoft for $7.5 billion in June 2018.

Most Git repositories are managed with your favorite terminal. GitHub provides some resources for picking up Git. The cheatsheet can be a particularly useful reference.

GitHub also provides desktop apps for managing Git repositories on macOS and Windows. These have the classic advantages and disadvantages of interfaces. The desktop apps have a much shallower learning curve and make completing simple tasks easier, but lack expressivity for the more advanced Git and GitHub features. You're welcome to choose either a desktop app or the terminal in this class.

The desktop apps automatically install Git. It's also possible to install Git on its own, such as with the Debian package manager on Linux or via HomeBrew for Mac.

Requirements

There are three main categories of requirements: Content, Responsiveness, and Validatity.

Content

The content requirements for your portfolio are intentionally flexible. We hope you embrace the assignment and make something of high enough quality to use as you search for internships or jobs.

You must include basic HTML content (at least 3 of the following):

  • At least one image, with descriptive alt attribute(s)
  • Appropriate headings and paragraph text
  • Links to external page(s)
  • Multiple pages, with appropriate navigation between them
  • Semantic HTML tags like aside or footer
  • Adding custom icons from Google Material Icons or Font Awesome

You must also include basic CSS styling (at least 2 of the following):

  • Modifying padding and margins to indent content and enhance readability
  • Modifying link, text color, or other colors to be visually appealing, perhaps with one of the pallette creators in the resources tab
  • Leveraging Bootstrap CSS helpers such as image shapes and table layouts to display content in a more interesting manner
  • Adding custom font(s) from Google fonts to add more personality (make sure to include appropriate fallbacks)

Finally, you must include at least 1 more advanced feature which goes beyond modifying text and block layouts, such as:

  • Creating a table with multiple columns and rows which can be read via a screen reader
  • Creating a more complex page layout, such as including a sidebar
  • Embedded HTML5 media, like video or audio, with fallbacks
  • Leveraging nested selectors to specify format
  • A contact form which leverages HTML forms

We're extremely open to other ideas. Contact the course staff if you have an idea which doesn't fall into one of the above categories, and we'll update the lists. Take this as an opportunity to be creative. Feel free to build off online examples which use JavaScript or HTML or CSS tags that we didn't cover in lecture.

Responsiveness

Your portfolio must look good on a range of screen dimensions. Think about readability and the flow of the page on different screens, and consider what content you might want to hide or reformat in non-desktop environments. Take a look at how different pages you visit rework their content on mobile and desktop. Prior to implementing, consider sketching on paper how you envision your portfolio looking for a few different types of screens.

You are not required to use Bootstrap, but it provides useful tools (e.g., the Grid System)for making responsive pages. Google Chrome and Mozilla Firefox have great tools for emulating a range of screen sizes, but both note limitations in properly emulating all devices. We'll test your portfolios with these browser tools rather than on a range of real devices.

We will evaluate responsiveness based on your portfolio's readability, navigability, and content choices in a range of screen sizes.

Validity

The page(s) you generate must also pass three validation checks:

  1. The HTML must be well-formed, validated by W3C.
  2. The CSS must also be well-formed, validated by W3C.
  3. The page must pass accessibility guidelines, validated by AChecker and/or Wave (submit the AChecker validation, but perhaps try Wave too).

The checkers vary in stringency. Aim to resolve all of the errors, but think through whether the warnings are actually problems.

If you've made yourself a portfolio for another class or as a side project, it may fill the requirements for this assignment. It must be made from scratch; it cannot be made using a site creator like Weebly, Wix, SquareSpace, etc. It also must be responsive and pass the validation checks, and consider adding a feature or two to embrace the spirit of the assignment. Contact the course staff if you have questions about using a portfolio you've already made for this assignment.

If your previous site fits the requirements, submit it as though you made it this quarter, but indicate in your readme.txt that you're submitting a portfolio you made before this course. Describe what you changed to pass the validation checks and any features you've added to enhance your portfolio.

Submission

Your repository should be organized as follows:

  • An index.html file containing your webpage's root.
  • Any additional .html and .css files as necessary.
  • For each validation check, include a screenshot in .jpg format with the matching filename: valid-html.jpg, valid-css.jpg, valid-accessibility.jpg.
  • A readme.txt document containing:
    • A list containing the basic HTML content, CSS styling, and advanced feature you included in your portfolio
    • How long it took you to complete the assignment
    • A list of urls of the online resources you consulted
    • A list of classmates or other individuals you consulted

Your code repository on GitHub Classroom is your submission. The service will take the latest snapshot of your repository as your submission. Any commits made after the deadline are considered late and are subject to the course's late policy. It's great to continue updating your portfolio, but give us a week or two to grade it first!

If you're proud of your portfolio, it's pretty easy to put it online! ICS gives all students space to post portfolios or other webpages. Follow the directions here to get your page online. This assignment does not rerquire you to make your portfolio public, but we encourage you to consider it.

Grading

This assignment will be graded on a scale of 10 points, broken down as follows:

  • Includes basic HTML content (2 points)
  • Includes basic CSS styling (1 points)
  • Includes an advanced feature (1 point)
  • Responsive layout (2 points)
  • Passes three validation checks (1 points)
  • Embracing the spirit of the assignment (3 points)

Toward the last category, we hope you take this chance to make a portfolio you'd want to use beyond this assignment and will reward the students who embrace the opportunity the most. We therefore expect the median and mode for this category to be 1 or 2 points. We will reserve the last point for particularly exceptional portfolios. 0 points can be used in cases where the minimum specifications around content, responsiveness, and validity have been reached, but the design of the portfolio would not impress a prospective employer.

Embracing the opportunity can mean adding multiple advanced features. Or it could mean following principles of good design which you may have discussed in other courses or seen on webpages you visit regularly. In either case, we will evaluate how well these additions enhance your portfolio. It's one thing to add random videos and tables or make a single-page scrolling website. It's another for those features to add value for a potential employer.

In prior courses, you've been asked to follow good principles for indentation, naming variables, commenting, etc. We expect you to do the same in this course, but aim to avoid being draconian in our enforcement of these principles. Egregiously poor formatting, completely uncommented code, etc. may incur a small penalty (e.g., -1 point), but we expect this to be rarely applied.

Finally, note that the grading only evaluates the code written to generate your portfolio and how it appears visually. We're not looking to evaluate how interesting your bio is or the accuracy of your project descriptions (though of course, a potential employer would!). If you find that you're running out of time, think about whether Lorem Ipsum text or placeholder images could help. Be sure to acknowledge your sources!