This page is a work in progress.You can help improve it. →

A Spooky Portfolio

For this project, we're going to be starting work on a portfolio website that you can improve over the rest of your career.

Recreate this Spooky Portfolio Mockup

You can find image assets you'll need here

The font used is Josefun Sans.


  • Build on your knowledge of HTML & CSS
  • Implement, from scratch, a given design
  • Use modern techniques layout pages.


  • Recreate this site as close as possible

  • As discussed in class, it is easier to start with the mobile look first and then create the desktop. Follow the requirements in order for this assignment.

  • Remember, start with HTML first and get the content going.

  • You should complete at least the tasks given for explorer mode as listed below before turning in the assignment, as well as before attempting adventure or epic modes.

Explorer Mode

  • Recreate the mobile UI
  • Update your site to be response for tablets
  • Update your site to be responsive for desktops
  • Deploy your site

Adventure Mode

  • Head over to here. There are animations and hover effects that are not in the mock ups. Implement those using only CSS.
  • For the responsiveness of your images, if you used flexbox for explorer mode, now use css grids, if you grids, now use flexbox.

Epic Mode

  • Take the time to personalize the site with information about yourself, links to your projects, and your pictures.
  • Keep it professional, but make it your own.
  • Start to research JavaScript
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.