You've learned a lot this semester: from basic command line tools to complex git workflows, from HTML semantics to organizing large pages and projects, from simple text formatting with CSS to all the ways to make the same layout with different properties.
Now you'll put it all together and build your own portfolio website!
Remember this exercise? I want you to plan your portfolio in the same way. If you don't know what a portfolio is, here are some of my favorite examples of designers and developers:
Of course, these are from professionals. I won't compare your portfolio to theirs, and neither should you! Portfolios are a medium to show what you are capable of. They are a place for you to experiment with new techniques and prove that you can use the tools and languages that are listed on your resume. Use these websites as inspiration for what you hope to learn and be able to build soon. Here are some examples of students portfolios from previous years:
To plan your site, follow the same exercise in the MDN article above and plan out all of your pages on paper. Think of this as a rough draft. Here are some things you should think about:
Follow this article to set up your repository. It's incredibly important that you follow their directions or else your project will not be deployed properly! We will discuss Github Pages in class, but this is a service that serves your git repo at a specific URL so your HTML files will become a real website!
| Standard | Does Not Meet Standard | Meets Standard |
|---|---|---|
| Project Planning | Lack of effort in creating personalized content. Minimal attempt at designing layouts. Plan asks more questions than it answers. | Planned content is high quality and personalized. Designs show an attempt at distinct layouts for distinct content, but also show a cohesive and consistent site. |
| HTML Syntax | The code contains a multitude of errors: misspellings, unclosed tags, malformed attributes, or overlapping tags. | The code passes validation and shows a thorough understanding of the rules of syntax. |
| HTML Semantics | Content is commonly described by improper tags when a better tag would suffice. | Content is well described by tags and the student has shown effort in finding and understanding the appropriate tag. |
| CSS Syntax | The code contains a multitude of errors: misspellings, improper punctuation, non-existent properties or property values, or incorrect values for a given property. | The code passes validation and shows a thorough understanding of the rules of syntax. |
| CSS Quality | Styles contain many irrelevant, unused, redundant, or incorrect styles. The rules work against the cascade and frequently overwrite each other. | Styles are not over or under engineered, meaning there is just enough CSS to display the styles without redundancies or irrelevant rules. |
| Code Style | Code is illegible, poorly indented, or messy. | Care has been taken to ensure human readability. |
| Deployment | The site hasn't been deployed to a URL or there are an abundance of broken URLs for links and/or images. | The site has been deployed to a URL and there are no broken links. |
| Project Structure | Files for code and other assets are disorganized, poorly named, or are not separated into distinct parts. | All files are in a proper directory organized by context and all names are meaningful. |
| Content | There is minimal content, either copy or images, or the content is a poor quality or is not personalized to the individual. | There is sufficient high-quality content to show your distinct personality and skill set. |
| Git Workflow | Commits are few and far between, have unclear messages, or contain sloppy snapshots of development. | Commits are frequent, contain a small amount of related work, and their messages describe the exact work done. |
The portfolios will be due by midnight on Sunday, Oct. 13th. Make sure you've commited all your changes, pushed them to Github, and merged them into the master branch so that they'll be live on your production site!
We will show off our creations in class the following few days. Each of you will get to walk us through your site on the projector and share your thoughts on the project. Here are some questions I'll ask you: