In this assignment you will:
- Apply HTML and CSS knowlege to a real-world problem.
- Create a responsive page in accordance with a pre-existing design.
- Match page as closely as possible to a provided image.
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:
- Assessment.psd
- is a Photoshop file if you would like to use
this — not required
- Assessment.jpg
- is a basic layout for the design
- Assessment-wider.png
- shows how the page should function when
the screen is wider than the basic layout.
- Assessment-mobile-element-order.png
- shows how the elements
should be re-ordered for small screens using flexbox's order
property
- Assessment-flex-regions.jpg
- shows the 4 primary flexbox
elements to create
- Images
- 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:
- The page should be fully responsive with support for a minimum of three
widths. The Assessment-wider.jpg file shows how the background
should extend for wider screens while the “content frame”
has a max width and stays centered.
- The content frame will be 1204 pixels in the widest view. NOTE: This is
not a typo ... it is 1204 and not 1024. When calculating the width of
various elements (like the circle images, for example), you'll want to
measure the width of the images (using Gimp, perhaps) and then divide by
1204 to get the width of the image as a percentage of the entire panel.
When Philip did these calculations he did not round his percentages to
the nearest percent. Instead he kept the percentage to as many decimal
places as were generated by the calculation.
- 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.
- Red paragraph text (not headings) should be links as well as the images
under “Helpful Heating and Air Articles”.
- Use
href="#" for all links so they will be styled correctly.
- IMPORTANT: In doing this exercise think of the goal as generating a page
that matches the image down to the pixel level. That is, we're not trying
to just make a page that looks about the same ... we want the page and
the image to be indistinquishable! You may not be able to get them
perfectly aligned, but that should be the goal.
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:
- (10 pts) Page displays all elements (and no Javascript or frameworks).
- (10 pts) Design is responsive and behaves well across multiple browsers down
to a minimum width of 320px.
- (10 pts) Some specific styling considerations:
- Is there a body margin (white space around entire document)?
- Does the content stay in the middle as the screen expands and
background color stretch to edge of screen?
- Is the main content element width exactly 1204px?
- Are things in the right place?
- Do elements align correctly across sections? (middle section
image aligning edges with bottom section left image)
- Are images and content regions the right size?
- Are margins and padding correct for all elements?
- Are the fonts correct? (Font family, Size, Color, Line-height,
Weight, Text decoration)
- Is the “Read More” at bottom of section or is it inline with
text?
As always, turn in your solution by pushing it to bitbucket before the due date.