This ten-week project guides students through building their own personal portfolio website. There are some general requirements (see below) but the assignment is purposefully open-ended to showcase each student's creativity.
- Project is published on public GitHub repository
- Repository includes one
index.html
file at root-level - Repository includes one or more
.js
files - Repository includes one or more
.css
files - Webpage contains header navigation menu with the following:
- Student's name
- Link to "About" section
- Link to "Experience" section
- Link to "Skills" section
- Link to "Projects" section
- Link to "Leave a Message" section
- Webpage contains "About" section with the following:
- Level-two heading
- One or more paragraphs of text
- Webpage contains "Experience" section with the following:
- Level-two heading
- List of previous work experience in a styled grid layout; OR
- One or more paragraphs of text (if student has no previous work experience)
- Webpage contains "Skills" section with the following:
- Level-two heading
- List of skills in a styled grid layout (inserted via JavaScript)
- Webpage contains "Projects" section with the following:
- Level-two heading
- List of public repositories retrieved from GitHub API via Fetch
- Webpage contains "Leave a Message" section with the following:
- Level-two heading
- Form with "Name", "Email Address", and "Message" fields
- Submit button
- Form submit event listener that adds message to list (see "Messages" section)
- Webpage contains "Messages" section with the following:
- Level-two heading
- List of messages (see "Leave a Message" form) in a styled grid layout; each list item has the following:
- Message text
- Name of message author with "mailto" link to email address
- "Remove" button that deletes message from list
- Webpage contains footer with the following:
- Copyright text with current year (inserted via JavaScript)
- Social media links (e.g. LinkedIn, GitHub, etc.)
- Webpage layout adjusts responsively for various devices sizes (mobile, tablet, desktop)
Here is an example portfolio that demonstrates all the requirements above: View website
Created by Code the Dream