This assignment continues the use of CSS selectors provided in an external
document. Finally, you will use a validating parser to check your code.
This assignment continues the work started on lab day. Continue to refer to
the diagram provided in
https://josephus.hsutx.edu/classes/w1/source/images/poemlayout.jpg.
As with lab day instructions this diagram serves to provide the big-picture
structure of the assignment while the instructions below contain the specifics.
All CSS commands should be placed in the external document (i.e., do not
use any inline CSS). Make the following changes to your HTML document started
in lab day:
- (3 pts) Provide a logo or image in the left panel of the header. The
image should be sized appropriately.
- (1 pt) Give a title to the page in an h1 in the center header panel.
Title should be something about poems. Apply a CSS border of your
choosing to the h1 tag.
- (2 pts) Put some contact info as an unordered list (ul) in the right
header panel. Give your name a different color/look than the rest of
the entries.
- (2 pts) Modify your menu to remove the underlining of the links and
be sure to specify a hover option so the links should change color when
hovered over with a mouse.
- (2 pts) In the aside add haiku of your choosing. Be sure to include
title, author, and use proper formatting.
- (2 pts) Customize the content and look of the footer which will identify
you as the brilliant builder of the page.
- Set the max width of the page to 960px instead of 800px. Also set
the min width to 400px.
- (6 pts) Add media queries to provide at least two breakpoints in the
page so that the page looks nicely formatted for various screen sizes all
the way down to a typical phone screen. Feel free to consult
responsivelayout.jpg
for one idea of layouts for various screen sizes.
- (2 pts) Once you have the page looking the way you want. Take a moment
to check the validity of your code by running it through the W3C Markup
Validation Service: https://validator.w3.org/. Make whatever changes
are recommended until there are no errors. NOTE: Warnings and Info messages
are okay.
We are going to start organizing your personal site a bit. Inside the hw03
directory create a folder called mysite. Within mysite create subfolders
called images and css. The HTML files for your project should be in
mysite. The images for your site should be in mysite/images and all
CSS documents needed by your site should be found in mysite/css. Go ahead
and get all the files for your site set up according to this plan.
Next, modify your site so that all CSS commands are issued in an external CSS
document found in the mysite/css directory. When you finish with this
transformation there should be no inline CSS commands and no style section
at the top of the HTML code and the site should look just as it used to.
NOTE: You do NOT need to create media queries to handle mobile layouts on your
personal site as part of this assignment.
All work should be committed and pushed before the due date. Your homework will
be graded as follows:
| Part 1 |
20 pts |
| Part 2 |
10 pts |
| Total |
30 pts |
As always, have fun!
