Web Dev Independent Project #5 – Portfolio Page

Project: Building a Personal Portfolio Page

This project will take you off-platform and get you started in your own developer environment! Never done that before? Not to worry - we’ve shared some resources to help you down below. This project can be completed entirely on your own - or, you can join our Community Discord and find someone to work with! Jump to the community support section to hear more about this.

Not sure what kind of content you want to include on your portfolio site? Check out these examples for inspiration!

Quick tips:

  • Keep it simple and maintainable. Leave the complexity for your projects; your portfolio site itself should be simple, easy to navigate, and easy for you to edit and add to over time as you make more projects.
  • Pay attention to detail! Design, layout, and spacing matter. Employers do not want developers who will write messy code.
  • Make sure that your name and your contact information is listed prominently, especially if you want your portfolio site to help you generate job leads.
  • The more related work experience you have, the more important it is to emphasize that on your site and in your resume. If you’re just getting started with programming or working in technology, your side projects are your experience, and they should be highlighted as much as possible.
  • The more technical the role you’re applying for is, the more important it is for your sites to be deployed, and for you to share the GitHub links in your profile. Your potential employers will want to actually take a look through the code that you’ve written. If you’re applying for more tech adjacent roles, like product manager or technical marketer, screenshots of projects or demo videos may suffice.
  • If you’re pressed for time, look around online for templates that you can work from and edit. You can also check out Dribbble for inspiration on how you want to design your portfolio.

Overview

Objective

Build a portfolio page that will serve as your online resume and display projects that you have worked on.

Pre-requisites

In order to complete this project, we suggest that you have familiarity with the content in the following courses or lessons on the Codecademy platform:

  1. Learn HTML
  2. Learn CSS
  3. Intro To Javascript
  4. Working with jQuery

Suggested Technologies

  1. Flexbox or CSS Grid
  2. CSS3 Animations

Project Tasks

Get started - hosting your project

Since you won’t be completing this project in the Codecademy learning environment, you’ll need to find somewhere else to host your project! We’ve listed our recommendations below. For more specific information on the set-up involved with either of these resources - visit our forums guide.

  • Repl.it: If you’re not quite ready to get into all of the nitty gritty details of setting up your own local developer environment, Repl.it is an amazing online tool that can help you spin one up a web-based development environment with the click of a button. For this project, you’ll need a Repl.it environment that supports HTML, CSS and JavaScript.
  • Visual Studio Code: If you’re excited & ready to set-up your own local environment, we’ve got your back too. Visual Studio Code is a popular open source text editor that you will set-up & configure on your own device and can be used to develop websites and applications locally before pushing to production.

Basic Requirements

  1. FEATURE: Create a homepage for your portfolio

  2. Links to professional social media accounts (i.e LinkedIn, Github, Stackoverflow etc). Use vector icons for these links.

  3. Add an introduction describing your development experience.

  4. Add a headshot of yourself.

  5. FEATURE: All pages should be responsive when viewed from a mobile screen.

  6. Elements that were displayed next to each other horizontally in desktop view should rearrange to be displayed vertically.

  7. Assets (images, icons, etc) should resize as appropriate.

  8. FEATURE: Create a page where your professional resume can be viewed and downloaded from.

  9. FEATURE: Integrate Bootstrap, a CSS library into the user interface.

  10. Bootstrap is a great tool for making sites like this visually appealing without writing tons of CSS from scratch. For now, get started with Bootstrap with this lesson and check back soon for a whole course on Bootstrap.

Additional challenges

  1. FEATURE: Create a page to list all your projects

  2. Each project should contain the following information:

1. Screenshot of the project (if available)
2. Link to the Github repository (if applicable)
3. Link to where the project is deployed (if applicable)
4. Short description of the motivation behind the project
  1. FEATURE: Use CSS3 animations to animate the each project so hovering over it enlarges the screenshot to center view.

Resources & Support

Project-specific resources

General Resources

  1. How to get set-up for coding on your computer
  2. What you need to know about Git, GitHub & Coding in Teams
  3. How developer teams work
  4. First steps in tackling a group project
  5. Resource on writing pseudocode to get started with off-platform projects
  6. Video on how to use Chrome dev tools
  7. Resource on writing pseudocode to get started with off-platform projects

Community Support

Looking for additional help or someone to work with (or somewhere to brag about your finished project)? Join our Community on Discord to meet other learners like yourself!

Once you’re done…

Share in the Forums for feedback and to see some other ways of solving this problem!