Enhancement 1
Purpose
This enhancement is a review of the concepts, skills and techniques that should have been learned in CIT 230 - Web Frontend Development. It requires you to build a template and home page from that template for a ficticous web site - Acme, Inc.
Notice!
All html and css must be of your own creation.
No outside templates or frameworks are acceptable for this enhancement or future enhancements in the course.
Video Overview
This video provides a brief demonstration of what your finished enhancement should look like and how it should behave once done with the enhancement.
https://youtu.be/SltEnubvPms
Assumptions
This enhancement assumes that you can code semantic and valid HTML5, CSS3 (including the use of media queries and responsive layouts) and implement the basic design principles of Proximity, Alignment, Repetition and Contrast. In addition, basic usability concepts can be implemented readily. The review materials listed in the overview page are meant to help brush up with these skills as needed.
Download
A zip file containing a base folder along with subfolders of starter assets should be downloaded, unzipped and placed in your htdocs folder. All subsequent work with the Acme web site will be performed here.
Tasks
Build a Template
You are to build a generic template for the Acme web site (a template contains no content, it is a resource from which actual content pages, known as views, can be built).
See the illustration below:
The template must:
1 use the .php file extension,
2 use HTML5 semantic structures (header, nav, main and footer) for page sectioning,
3 include the viewport meta element,
4 include the media="screen" attribute for the css link element,
5 use the color scheme shown:
6 use fonts of your choice, but they should fit the cartoon look and feel,
7 be fully responsive to a variety of devices so that the content loads without horizontal scrolling or zooming (see the video illustration below),
8 use usability concepts, the minimum expectations are:
▪ links contain title attributes
▪ images contain alt attributes
▪ fonts are easily read and contain clear contrast between background and foreground colors
▪ headings form a meaningful document outline with no levels being missed
9 use external CSS for all styling. The CSS must:
▪ be stored in the provided css folder,
▪ start with a mobile first approach,
▪ be responsive to varying screen sizes of a variety of devices,
▪ use media queries for responsive layout only for larger screen sizes,
10 use modularization for common content (e.g. Page header, navigation and footer) by:
▪ Creating a "common" folder to store the common content code snippets (modules).
▪ Create a separate code snippet for the acme header, navigation and footer and store each into the "common" folder.
▪ Follow the directions in the "Modularizing Common Content" activity to implement the modules into the template.
▪ Be sure to thoroughly test that the code from the code snippet modules get delivered to the template file, and later to the actual web pages (views) that you build using the template.
11 weigh less than 400Kb total weight, and
12 be valid HTML5 and CSS3 code.
Build the Acme Home View
Having built the template, you will now use it to build the Acme home view. The view must:
1 be named "
home.php" and be stored at the root of the acme folder,
2 contain the content as shown in the images below (a text file with the text content is included in the download) and images are found in the images folder, Acme home - Large Screen
Acme home - Mobile Screen
3 Write your CSS to position the page content to match as closely as possible the provided images of the
home.php view in both large screen and mobile screen layouts.
Delivery term: Not specified