HW08: Philip Design Implementation due Tue 31 Oct 13:20


In this assignment you will:

Allowed and Disallowed Resources

The guidelines for allowed and disallowed resources are the same as given in homework 5.


Using the supplied design files, images, and font details, create an HTML version of the supplied design, matching the design as closely as possible. Only use HTML and CSS. No JavaScript or server-side code. In the CSS code, use Flexbox and do not use any floats or “display: table”.

Design Documents
The target design documents are located at https://josephus.hsutx.edu/classes/w1/philip/design_files/. Here is a breakdown of their contents:
is a Photoshop file if you would like to use this - not required
is a basic layout for the design
shows how the page should function when the screen is wider than the basic layout.
shows how the elements should be re-ordered for small screens using flexbox's order property
shows the 4 primary flexbox elements to create

The images needed to build the page are located at https://josephus.hsutx.edu/classes/w1/philip/images/

Font/Color Info
Details about fonts/colors used:


  1. The page should be fully responsive. The Assessment-wider.jpg file shows how the background should extend for wider screens while what I call the “content frame” has a max width and stays centered.

  2. The top 4 circular images and their titles are links as well as the map. NOTE: The map is only an image and is not an interactive Google Map.

  3. Red paragraph text (not headings) should be links as well as the images under “Helpful Heating and Air Articles”.

  4. Use href="#" for all links so they will be styled correctly.

Grading and Submission

Your solution should be provided in hw08 directory of your workspace. Provide a document named main.html to house your solution.

Your assignment will be graded as follows:

As always, turn in your solution