A1: Responsive Portfolio in HTML and CSS#

Overview#

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.

Re-using a portfolio#

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.

Assignment Details#

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 Validity.

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 section.

  • 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 or navigation bar

  • 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 (see Resources section for links):

  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 (or potential problems) are actually problems. Include separate checker files for each screen in your webpage.

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 screenshot(s) in .jpg format with the matching filename: valid-html*.jpg, valid-css*.jpg, valid-accessibility*.jpg. The “*” is used to designate the page each check refers to.

  • A readme.txt document containing:

    • The number of assignment points you believe you have completed

    • 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

To submit, zip your repository and upload it to Canvas. Any late uploads are subject to the course’s late policy.

If you’re proud of your portfolio, it’s pretty easy to put it online! GitHub Pages is a great place to host a static website. Learn more at the GitHub Pages website. An overview of how to get started with GitHub Pages will also be covered during the week 1 discussion classes.

Grading#

This assignment will be graded on a scale of 13 points, with the possibility of 1 bonus point, broken down as follows:

  • Readme is complete (1 points)

  • Includes basic HTML content (2 points)

  • Includes basic CSS styling (2 points)

  • Includes an advanced feature (2 point)

  • Responsive layout (3 points)

  • Passes three validation checks (1 points)

  • Embracing the spirit of the assignment (2+1 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. A bonus point is possible 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!

If you feel like you don’t have projects to add, think about the projects you have completed in recent courses. Projects can take many forms including reports, mockups, and source code. Any or all of those can be included in a portfolio. Lorem Ipsum or placeholders are also fine for the purpose of the assignment.