Project 1: Dynamic Web Site

Port a small static website (4-6 pages) to a dynamic (server-side) website implemented in PHP.

Learning Objectives

Deadlines & Receiving Credit

Milestone Points Grading Method Slip Days Deadline
Milestone 1 (p1m1) 15 Feedback (completion) Not Permitted 2/6, 4:00pm
Milestone 2 (p1m2) 15 Feedback (completion) Not Permitted 2/13, 4:00pm
Final (p1fin) 100 Rubric Maximum: 2 days 2/20, 4:00pm

No slip days permitted for milestones. Late submissions will receive a 0.

Milestones are graded twice. First for feedback (completion grade only). Lastly, for points at the final submission (via rubric). All work is graded via rubric for points at the final submission. Use your milestone feedback to improve your final grade; revise milestone work prior to final submission.

Completion credit will be awarded so long as you made a good faith effort to complete the milestone’s requirements. Very obviously incomplete milestone submissions will receive a 0 for the completion grade.

Milestone feedback is not a pre-grade. This feedback is designed to catch large problems (which we sometimes miss). Regardless of the feedback (or lack of feedback) that you get, you are responsible for meeting all of the project’s requirements for the final submission.

Failure to push your submission to GitHub is equivalent to not submitting the assignment. You will receive a 0. It is your responsibility to verify that you submitted your assignment.

Git Repository & Submission

Clone Replace YOUR_GITHUB_USERNAME in the URL with your GitHub username. This is usually your NetID.

Submit all materials to your GitHub repository for this assignment. See in your Git repository for submission instructions for each milestone. Never email your submission to the instructor.

You are required to sign the submit-*.md files. Only sign a submission file when you are ready to have your submission graded. If a submit-*.md is signed, we will begin grading the submission at the deadline. If we begin grading your submission, we will not accept any late submissions via your slip days. After the late deadline (deadline + permitted slip days), we will grade all submissions for partial credit regardless of a signed submission file.

Your submission time is based on the time of your last push (not commit) to GitHub. If you push anything after the deadline, then your assignment is late. Your late submission will be graded if the assignment permits slip days and you have available slip days. Otherwise you will receive a 0. A screenshot of the commit times from GitHub is not proof of on time submission; GitHub does not show push times, it shows commit times.

Tip: Commit and push your changes every time you work on your project. Every time you commit and push you store your changes on the GitHub server. This acts as a back-up for your work. It also means that if you forget to submit before the deadline, there’s something already on the server that the TAs can grade for partial credit.

Documenting Design (Design Journey)

The design process is the most important part of designing and coding a web site. You will document your design process in the design journey: documents/

The design journey must be written in Markdown. The following links are Markdown references:

You will need to include photos of your hand-drawn sketches in the design-journey. Take a picture of your sketches (I recommend the Microsoft Office Lens app) and place the image files in the documents directory and link them in your Design Journey. DO NOT PLACE DESIGN JOURNEY IMAGES IN THE WEB SITE’S IMAGES DIRECTORY and vice versa!

We will grade your in Markdown Preview. Everything, including images, must be visible in Markdown Preview. If it’s not visible in Markdown Preview, then we won’t grade it. We won’t give you partial credit either. This is your warning.

If you included images in your design journey, they must be visible in Markdown Preview. No credit will be provided for images in your repository that are not properly linked in Markdown. No credit will be given for design work not included in the documents/ file; do not rename this file or put your answers in another file! Remember to check and test all assignment submissions!


Port an existing static website (4-6 pages) that you’ve created for a specific target audience to a dynamic website implemented with PHP that now supports two different target audiences.

Existing Site

Design Requirements

Design Process Requirements

Partial Requirements

Sticky Form Requirements


Coding Requirements

Best Practices

As a professional web developer, your boss will not give you a rubric telling you that your design needs to be aesthetically pleasing or that you need to name the main HTML file index.php. It is expected that you know the standards, conventions, and expectations of your field. I expect the same in this class. This write-up may not explicitly state these expectations and we will deduct points if you fail to follow them.

As a reference, here are some of these expectations that you should already know:

Milestone 1: Plan your Web Site

For Milestone 1, you will identify your existing site that you will port. You will also identify your two target audiences and refine the existing design in support of both audiences.

Copy Your Existing Site into Your Repository

Copy the contents of your existing web site into the root of your repository.

Your Milestone 1 submission must have the original web site’s files to receive credit. Do not yet convert your site to use PHP. Just commit and push the existing website’s HTML, CSS, and images. That’s it!

Existing Design

Document the existing design in the Milestone 1 section the design journey: documents/

DO NOT COPY ANY EXISTING DESIGN RESOURCES/TEXT INTO THE DESIGN JOURNEY! Your design journey must be 100% original to this class.

You should document the existing site’s target audience, their needs, and sketch the existing design.

A word about sketches: Sketches are quick and help you generate ideas that will improve your overall design. You should sketch on paper. Sketching using a computer program takes too long and misses the point of sketching.

Your sketches don’t need to be polished. The lines don’t need to be straight. You don’t need to write out all text; squiggly lines are okay to represent text so long as the text isn’t necessary to understand the design. You should only use one color. The idea here is to generate ideas.

Take a picture of your sketches (I recommend the Microsoft Office Lens app) and place the image files in the documents directory and link them in your Design Journey. DO NOT PLACE DESIGN JOURNEY IMAGES IN THE WEB SITE’S IMAGES DIRECTORY!

Everything, including images, must be visible in Markdown Preview. If it’s not visible in Markdown Preview, then we won’t grade it. We won’t give you partial credit either. This is your warning.

Refined Design

Plan the refined design that will support both target audiences. Complete the Milestone 1 section of the design journey: documents/

You should document the second target audience, their needs, and then refine your design.

Remember here, the design process is what’s important here. While the final result is important, what really matters is that you show us how your final result came to exist. Thoroughly document the evolution of your refined design.


Plan out the partials you will implement in the next milestone in the design journey.

Milestone 2: Draft Website

For Milestone 2, you will finish your PHP templates and plan your sticky form in the design journey.

Port your Site to PHP

Port your existing site to PHP. Rename HTML files to have a .php extension and implement your partials. Make sure you include the following line of PHP code on the top of every page (not partial): include("includes/init.php");

Implement your Refined Design

Implement the your refined design. Move content around, update the navigation, change the styling, etc.

At this point your website should be mostly done except for the sticky form. This means your content should be in place. Your navigation should work. Your CSS is mostly there. The website should look like it’s coming together.

Sticky Form

In the design journey, plan out your sticky form. After planning it, start coding it. It doesn’t need to be sticky yet. The error messages don’t need to work yet. You don’t need to validate the inputs yet. At a minimum you should echo() the inputted values on the confirmation page.

Final Submission: Complete & Polished Website

For the final submission, finish implementing your refined website and complete the design journey. Your final site should be complete and polished. Your form should be sticky and provide server-side only validation to missing inputs (No JavaScript, No HTML required, etc.)

Tell us how your complete and polished website meets the needs of your target audiences in the design journey. Also take this time to reflect on your experience of building this website.