White Buffalo Website Template
Welcome to the White Buffalo website template. The code for this website is heavily commented so you will know how to use this template with a minimum knowledge of HTML/CSS. For level of expertise it targets a student who has taken the Intro to HTML/CSS class offered by Girl Develop It. It is written in PHP and heavily relies on Twitter Bootstrap. See the About page for instructions on how to use this template.
Why use this template?
This template is a responsive website targeted to students of HTML and CSS. It will work on desktops, laptops, tablets, and smartphones. It has been heavily commented so that a student with a bit of HTML/CSS knowledge can use it. One key benefit of using this template is that is avoids using redundant code in the header, navigation, and footer of the website with PHP. It also features a nice set of Javascript games, and two styles of Bootstrap photo galleries. The Javascript games are based on tutorials found on the World Wide Web.
How can I get the template? Simply fork it from Github.
Have questions? Send an email to susan@whitebuffalosolutions.com.
WEBSITE ORGANIZATION
This template uses the PHP function require_once to avoid duplication of content that goes on more than one web page.
header.php
This file contains the website meta data and links to the css files used throughout the website.
nav.php
This file contains the website navigation and header images. The template default includes a php script that gives you the option to have one header image on the home page and a smaller header image on all other pages. The default setting for the navigation bar keeps the nav bar static on the page with a shadow to show that the rest of the website will scroll underneath it.
footer.php
This file contains the content of the footer.
js-files.php
This file contains links to the javascript files used throughout the website. The javascript files include jQuery and Bootstrap.
FOUR INTERACTIVE ACTIVITIES
Fun Quiz
This is the classic multiple choice quiz. Users receive feedback as they answer each question and a final score at the end of the quiz. It is based on the tutorial by Flash By Night.
Picture Quiz
This is a picture quiz. Users read the question and then click or touch the picture they select. They receive feedback as they answer each question and a final score at the end of the quiz. It is based on the tutorial by Flash By Night.
Puzzle
Similar to a jigsaw puzzle, the javascript code scrambles the image. Users touch two squares to trade their places. This quiz is based on the tutorial by Brad Manderscheid and posted on Tuts+.
Word Find
This word find game is based on the code by Ryan Fernandes and is covered by an MIT license. It has a lot of bells and whistles. As users find a word, there is an animation to cross it off the list of words.
Other Features
Contact Form
The contact form uses PHP to send an email to a designated email address with the information on the form. It is heavily commented so that a user without knowledge of PHP will be able to modify it for their use. No mySql is used for this form.
