The Personal Website Project

Purpose

The Personal Website Project (PWP) is designed to be an exercise in front end web design and development: HTML5, CSS3, Bootstrap, jQuery/JavaScript, UX & UI Design, and the creation of a simple, SECURE contact form using PHP, jQuery, Swiftmailer and Google reCAPTCHA.

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), thrid 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 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, JavaScript/jQuery and PHP.
  • Project will feature a fully responsive, mobile-first User Interface.
  • Successful use and integration of Twitter Bootstrap v4.x as a front-end framework.
  • Successful use of Git version control software.
  • One functioning PHP-driven contact form utilizing Swiftmailer, jQuery Validate, and Google reCAPTCHA.
  • 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 three Milestones. Milestones 1, 2α and 2β 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, PhpStorm 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 2β

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 2β Documentation.

Milestone 3/Final Deliverable

Your Personal Website Project will need to be completed and deployed live to your web host and availble at your own personal domain by the due date listed below. This will be before Capstone Demo Day. Be prepared to give a brief demo of your Personal Website Project on graduation day. There will also be an opportunity to demo your PWP on Capstone Demo Day as well, if you are interested. This is a chance to discuss your front-end development work and design choices. This should be creative, fun, and casual. View Milestone 3 Documentation.

Timeline, Deliverables, & Due Dates

Milestone Deliverables Due Date
Milestone 1
  • Toolchain setup.
  • Directory structure setup.
  • Purpose, Audience, Goal.
  • Persona.
10/18/18
Milestone 2α
  • Wireframes
  • Proposed content strategy.
11/01/18
Milestone 2β Mid-development checkins/code review. Prep for live deployment to web host. 11/15/2018
Milestone 3
(Project Due)
Your site must be fully operational and deployed live on: 11/28/18