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. 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.
- 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.
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