Overview 

Portfolio Website

For this project, you will build a personal portfolio site, a static website where you can share the projects that you build in this Path. Typically, a portfolio website will have a main page that features different projects that you’ve built and another page that contains contact information, in case someone wants to reach out to you. Occasionally, there are additional pages for each project, detailing the technology used.

Example Project

Project Objectives:

• Build a website using HTML, CSS

• Add at least one interactive feature using JavaScript

• Use Git version control

• Use the command line and file navigation

• Develop locally on your computer

• Deploy your site to the web using GitHub Pages

• OPTIONAL: Buy a custom domain name and have it point to your GitHub Pages website

Prerequisites:

• HTML/CSS

• JavaScript

• Git and GitHub

• Command line and file navigation

Setup

Going off platform:

You will be doing this project outside of the Codecademy platform, on your own computer.

For this particular project, you will be using your own text editor (we suggest VSCode) and Git version control. If you need help setting up your text editor, read our article about setting up a text editor for web development. If you need a refresher on how to work with Git for version control, review the Git lesson or look at this cheat sheet.

Resources

Debugging Tips + Helpful Resources

Feeling stuck? Try the following:

• Google your question: oftentimes, someone has had the same question as you! Check out websites like StackOverflow and Dev.to to see how other folks have found solutions.

• Read the documentation: make sure to carefully read through the documentation for any languages and libraries that you are using. Oftentimes they’ll have examples of what you’re looking for!

• Rubber ducking: try to explain a problem to a friend or co-worker. Oftentimes you’ll figure out the solution as you’re trying to explain it. And if not, getting another pair of eyes on your code can be helpful.

Check out these helpful resources:

• Thinking About Errors in Your Code Differently

• Intro to Chrome Devtools

• CSS Visual Rules in Chrome Inspector

• Documentation and Research

• Debugging JavaScript Code

Example Code

Want to see an example of how someone else has completed this project? Click this link to download a zip file containing one example solution to this project. Remember: your project doesn’t have to look anything like this! It should be unique to your vision.

If you’re not sure what content to include, use this example as inspiration:

Project Tasks

Keep track of your progress by dragging each task from "To Do" to "In Progress" to "Done" as you work on them. You can also click on a task to see more information about it. 

Plan your project

Visualize your end result. What is it built with? What can it do? Make sure that it satisfies all of the project objectives.

Make a timeline for yourself and avoid the temptation to build things that aren’t required. Setting firm boundaries and deadlines will keep you on track and prevent scope creep.

The following tasks will help you identify natural break points.

Wireframe your website

Using pencil and paper, or a wireframing software of your choice, draft what you’d like your portfolio to look like.

Think about what the main components of the site will be and how you would like to see them arranged on the page. Since you will be building multiple pages, make sure to create wireframes for each page.

Main components that you will want to include:

• A main header

• Navigation to take you to all the pages on your site

• A picture and title for each project

Create files and deploy it locally

On your computer, create a directory to hold your files and create each file. Deploy your code locally to see what it looks like in the browser.

Create an index.html, style.css, and script.js files. If you’re creating additional pages, make sure to add additional .html files to represent that content.

Using the VSCode text editor, write a few lines of HTML code (this does not need to be the start of your project, but it can be if you’d like.) Deploy your code locally by clicking on the index.html file and viewing it in the browser. You’ll want to do this continuously as you work on your project.

Version control

Set up Git tracking in your directory and make sure to add and commit changes as you make them.

Set up Git tracking with

git init PROJECTNAME

Stage changes with:

git add FILENAME

Commit changes with:

git commit -m "MESSAGE"

Build the Home Page

The home page will be the main page that users visit. It should prominently feature your name, along with a selection of several projects that you are most proud of. Each project should have a picture, a summary of the project, and the technology used to build it.

If you’re not sure what content to include, use this example as inspiration:

Your project should not look exactly like this one, but it should help you get a sense of what you might want to include.

Make sure to use your knowledge of semantic HTML.

Build the Contact Page

The contact page includes your email address, as well as any other relevant information such as your LinkedIn profile or a personal photo.

If you’re not sure what content to include, use this example as inspiration:

Make it interactive

Use JavaScript to add interactivity to your website.

You can use JavaScript in any number of ways. Some possibilities are:

• Change the style of a photo when someone clicks on it.

• Enable dropdown menus

• Let users toggle between light and dark mode

Make it responsive

Use responsive design to ensure that your page is viewable on multiple devices (desktop, tablet, mobile).

Use media queries to resize your images when necessary. Consider using different grid arrangements to change the design of your page depending on the device.

Publish to the web

Take what you’ve built and use GitHub pages to share with the world.

Import your local Git repository to GitHub and enable GitHub pages in the repository settings. Make sure to upload the directory with your index.html file to this repository. You can edit the README.md file with an explanation on your project.

Next Steps

Congratulations on building your own portfolio! You’re welcome to expand your portfolio beyond these two pages. For example, you can include a page for each project that you’ve built.