Personal Website Project Overview

Purpose

The Personal Website Project (PWP) is designed to be an exercise in front end web design and development: HTML5, CSS3, Bootstrap,JavaScript, and UX & UI Design.

Upon successful completion of the PWP, you'll have a simple one-page static website that you can include as part your portfolio and professional package.

The PWP is strictly front end in scope, so there will be no MySQL database(s), third-party API integrations, or back end application(s) as a part of this project.

You'll also create your Personal Website Project yourself - from concept to live deployment. While the use of third-party JavaScript/jQuery plugins for interactive UI components will be allowed with proper attribution, no third party themes or pre-built HTML and CSS design files are allowed on this project.

Project Requirements

Successful completion of the PWP is a Deep Dive Coding graduation requirement. In order to pass, all of the project requirements must be met or exceeded.

Fully detailed documentation of all technical requirements for each Milestone of the PWP can be found in the Personal Website Project Evaluation Rubric.

  • Project will be designed and coded by the student using valid HTML5, CSS3, and JavaScript.
  • Project will feature a fully responsive, mobile-first User Interface.
  • Successful use and integration of Twitter Bootstrap as a front-end framework.
  • Successful use of Git version control software.
  • Design must meet a professional standard that is cohesive with the student's documented project goal.
  • All code must adhere to the Deep Dive style guide and best practices as outlined here: Coding Style Guide.

Project Milestones

The Personal Website Project will be broken down into four Milestones. Milestones 1, 2 and 3 will require approval and sign-off by your instructors before you can proceed to work on the next Milestone.

Milestone 1

You'll create a new GitHub repository and WebStorm deployment, and set up your project's directory structure as instructed. You will also outline a specific purpose, audience, goal, and a Persona for your Personal Website Project. View Milestone 1 Documentation.

Milestone 2

You'll create a content strategy for your project. You'll also begin designing your User Interface by creating wireframes for your site's layout (for both desktop and mobile devices). After this is done and meets instructor approval, you'll begin to develop your site. View Milestone 2 Documentation.

Milestone 3

This milestone is a mid-development check-in/progress review. You'll meet one-on-one with your instructors to talk about how your project is going. If everything is looking good, we'll prepare you to deploy your project live to your own domain name and web host. View Milestone 3 Documentation.

Milestone 4 and Final Deliverable

Your Personal Website Project will need to be completed and deployed live to your web host and available at your own personal domain securely using https by the end of the project. This will be before the final day of class. You will also give a brief demo of your Personal Website Project on graduation day. This is a chance to discuss your front-end development work and design choices. This should be creative, fun, and casual. View Milestone 4 Documentation.

Timeline, Deliverables, & Due Dates

Milestone Deliverables Due Date
Milestone 1 - Toolchain setup.
- Directory structure setup.
- Purpose, Audience, Goal.
- Persona.
Thursday of Week 2
Milestone 2 - Wireframes
- Proposed content strategy.
Thursday of Week 3
Milestone 3 - Mid-development check-ins/code review.
- Prep for live deployment to web host.
Tuesday of Week 5
Milestone 4 (Project Due) - Fully operational site
- Live deployment
- HTTPS (SSL) encryption
Thursday of Week 6