Given your knowledge of web design principles, HTML, CSS, and Bootstrap, you will create a static website that serves as your personal portfolio.
This portfolio will showcase your skills, projects, and experiences and serve as a professional online presence. It should be visually appealing, well-organized, and easy to navigate. Your portfolio should be published online using GitHub pages.
Before starting on your portfolio, you should research and gather inspiration from existing personal portfolio websites. Consider the layout, color scheme, typography, and overall design aesthetic that you would like to incorporate into your own portfolio. You should create wireframes or use Figma
Working independently, create a collection of static content and styling files that:
yourusername.github.io
In addition to the portfolio itself, you must also submit a brief design report explaining your design decisions. This report should be between one (1) and three (3) pages in length. It should include:
This report should be submitted as a PDF file along with your portfolio files.
As befitting a design class, this assignment is fairly open-ended. There is no "one true path" to creating and styling the required pages. Thus, this project requires you to tap your inner creativity and problem-solving.
Under-specification is fairly indicative of the real world. Clients will often expect you to "read their mind" to deliver a product that meets their needs. This can definitely be frustrating at times, but it is also a good lesson to learn early. It will help you be a high-quality developer who gains a positive reputation with clients.
A keen eye for detail and a creative spirit is also key here. Look through example page designs and see what you like and dislike. The Hello Web Design book has a number of references you can use as a starting point. Ultimately, you will want your portfolio to be a reflection of you as a person.
You may use outside references to complete this assignment. Be sure to keep a running list of citations as you work on this project. You may also use AI to assist you with styling. Be sure to keep a running list of all prompts that you use and provide these as part of your references (along with AI platform used).
Begin by creating a folder on your computer with the following
name: yourusername.github.io. Replace
yourusername with your actual GitHub username. For
example, my GitHub username is kevinaangstadt, so I
would create the folder kevinaangstadt.github.io.
This folder will serve as the root directory for your portfolio
website.
Open this folder in Visual Studio Code. Switch to the Git tab and
click the button to initialize an empty Git repository. Next,
create a new file named index.html and start building
your portfolio website.
Create a commit and publish your repository as a
public repository on GitHub. From the GitHub
interface, follow the steps we used previously to enable GitHub
Pages for your repository. Your portfolio website will now be live!
Be sure that you are submitting to the correct assignment on Gradescope! Further, be sure to make sure that you submit all required files. Don't wait until the last minute to submit (you can resubmit up to the deadline).
Submit the following:
*.html: all HTML files needed for your static pages
*.css: any additional CSS files you may have needed.
*.md: any markdown files you may have used (e.g., for Jekyll)
Make sure that your files are submitted with a folder structure identical to your development machine. You will likely want to use relative URLs for assets.
To upload folders to Gradescope, you can either make a Zip file of your project (you should be able to do this on both Mac and Windows by right-clicking on the folder containing your files). Alternatively, you can use the Gradescope feature to upload a git repository.
Final Project Grading (out of 25 points):