Responsive Web Design with PHP Scripting
30% of Semester Grade
Quick Links on this Page:
- Project Phases and Grading
- Technical Requirements
- Uploading to Class Server
- Useful Project Resources
You will create a completely responsive website, featuring a minimum of 4 pages, that uses a foundation-level php ‘include’ file template system. Additionally, you will be required to implement several custom PHP functions to automate portions of the site, as well as develop a basic content strategy for the topic you choose for the site design. Although this project is highly technical, you will also be graded significantly on visual design sophistication and relevance to the topic.
Progressive Phases and Due Dates
This project has some progressive ‘phase’ due dates and tutorials on how to develop specific stages of the site. This structure aims to help students stay on track with the completion schedule and to successfully implement all requirements.
Topic / Content Options
Because this is a labor-intensive project, the instructor will provide you will some different topic options, along with “client” content and direction. If you don’t find any desirable for your portfolio needs, you can propose a new option to the instructor.
- Create a fully responsive, mobile-first website
- Successfully implement various PHP scripts
- Successfully implement a php template system, along with a library of user-defined functions
- Evaluate and successfully execute any necessary changes to HTML and CSS to accommodate scripting
- Successfully integrate all required components into an intuitive, user-friendly, and visually appealing design
Project Phases and Grading
This project will have different grading components and phases. Click the desired phase requirement or grading summary section below to view the complete process information for each.
***IMPORTANT: Be aware that the Phase-3 point assignment is primarily dependent on the PHP Requirements all working well within the site. Do not underestimate how much neglecting the required functions will impact your grade. Phase-3 is worth HALF of this full project’s grade.
HTML Requirements (PHASES 1 + 3)
- HTML5 with proper markup
- Meta tag to limit viewport width and scaling
- Minimum of one Google Web Font with at least two styles or font-weights
You must use following elements at a minimum:
- DOCTYPE (HTML5)
- meta (for viewport device width)
- link (for external css and font links)
- h1, h2
- nav (with a nested unordered list for links)
- one or more of the following in the article: ul, ol, dl+dt+dd
CSS Requirements (PHASES 1 + 3)
- Minimum of 1 Google font with two styles or weights
- All css must be in external sheet unless inline or embedded styling needs to dynamically generated on select pages/areas of the site.
- @viewport and @-ms-viewport CSS selectors (see demo for more info)
- Fluid layout design (layout components mostly in % and ems)
- Create a custom graphic for your page banner that can scale up to a large screen size without losing too much quality.
- Make all images placed in the HTML with the ‘img’ tag scalable in your css. They can have a max-width, though.
- Use a CSS3 transition on at least one element
- Use at least one of the following: box-shadow, text shadow, border-radius
- Be sure to style fonts with attractive line-height, weight, spacing, etc. Do not leave default values. Also, be sure to optimize font sizes for each responsive view if necessary for optimal viewing.
- Be cognizant to apply margins and padding to page elements with sound design principles. Do not leave defaults. These will also likely change in different responsive views.
- PHASE THREE : STYLE ALL IMAGES AND GALLERIES that are dynamically generated by the displayImages() function. Do not leave them haphazardly floating without “clears” or marginless. Make them attractive.
- PHASE TWO/THREE : Lightbox and Cycle2 jQuery plugins for thumbnail image and carousel image galleries. If you want to deviate from the tutorial to use a different js plugin for similar functionalities, that is fine as long as it is completely functional. STATIC, NON-DYNAMIC GALLERIES ARE NOT ACCEPTABLE.
PHP Scripting Requirements (PHASE 3)
Note: It will save you LOADS of time and frustration to create section “A” below before items in section “B.”
- Make header include file (contains doctype to end of repeatable header section)
- Make footer include file (contains repeatable footer through closing html tag)
- Replace the include content in each page with the appropriate “include()” command so that headers and footers in every page are called from one header and one footer source file.
Based on the class lesson demonstrations, create functions that do the following:
- function that generates page title AND the banner’s h2 (page identifier) based on filename. Be sure to strip “.php” and replace any underscores or hyphens with a space using str_replace(). This should have a condition that also assigns a new display name for the index page. Store the actual function in the “functions.php” page.
- dynamic copyright function that is called in the footer. Store the actual function in the “functions.php” page.
- at least two pages should include some implementation of the displayImages() function that you created, but you must use all gallery function methods.
- These galleries should pull images automatically from the file system as in class demonstrations.
- You are required to use each implementation of the function a minimum of one time somewhere in the site. There are four implementations:
- random <img> image placed in HTML
- random css background image
- lightbox thumbnail gallery
- cycle2 plugin slideshow carousel
- !!!!Static html galleries (hard-coded) will not be accepted. This represents a LARGE portion of the grade!
- Store the actual function in the “functions.php” page.
(Note: all required functions above must be stored in “function.php” page, that is to be included in the top-loading include template file, such as the “head.inc.php” page.)
Although you are required to upload your final work to the class server for final grading in your student directory, it is highly recommended to periodically upload your files to the class server to test them and make sure that you don’t run into unexpected issues.
A common issue you might run into on the class server:
Problem: “I uploaded my work to the server but it’s not there when I look for it in a web browser.”
- Possible Answer: Be sure that you placed your work via FTP in your student class server directory: “/project1/” folder. If you name the folder ANYTHING else, the student launch page will have a broken link to your project. Be sure to name your entry file “index.php” and not something else, like “home.php”.
Troubleshooting and instructor help
If you are requesting help from the instructor with your code, you must first upload the work on the class server before contacting her. Do not email files or copy and paste code in emails. The instructor needs to see your complete website environment to efficiently assess most problems.
Please use the appropriate “TECH HELP” weekly discussion board in Canvas to see if anyone else already had the same questions as you. If you don’t find a resolution there, please post your new question, as other students might have immediate solutions for you before I am able to respond.
Useful Project Resources
Practice Lessons related to this project:
THE PHP PROCESS EXPLAINED
LESSON 01: GETTING STARTED WITH PHP
LESSON 02: DATA TYPES
LESSON 03: DATA TYPES – STRINGS
LESSON 04: ARITHMETIC OPERATORS, INTEGERS, AND FLOATS
LESSON 05: BOOLEANS AND NULL
LESSON 06: CONSTANTS
LESSON 07A: ARRAYS OVERVIEW
LESSON 07B: ARRAY FUNCTIONS
LESSON 08: LOGICAL EXPRESSIONS
LESSON 09 : LOOPS OVERVIEW
LESSON 09b : INCLUDE FUNCTION DEMONSTRATIONS
LESSON 10 : FUNCTIONS
CREATING A GALLERY FUNCTION
CSS Basic Review on Layout
- Mobile-First Responsive Web Design (good article by Brad Frost)
- http://redmelon.net/tstme/box_model/ (Need a review on the box model? This is a great interactive diagram.)
- http://www.barelyfitz.com/screencast/html-training/css/positioning/ (This is a great explanation of positioning with css.)
CSS3 Design Tools
Here are some good CSS3 resources to help you design quickly without too much focus on fussy raster image creation details (drop-shadows, rounded corners, etc).
- CSS Reset: http://www.cssreset.com/
- http://html5css3box.com/rgba/ ***This one is awesome and links to a lot of other tools, too!
- Font Shorthand Order
- CSS3 Transitions
Free Web Fonts
Background Image Patterns:
Free Stock Images (great for textures, etc.):
Awesome Color Palette Tool
http://paletton.com/ ***This site will generate hexadecimal values for you for all color samples.