HW02: Inline CSS and Colors due Tue 12 Sep 13:20


In this assignment you will practice building two layouts. Getting the sections of a site to show up where you want them is a big part of building a web page.


In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.

So, do this assignment in a way that demonstrates integrity, develops competence, is correct, and honors God ... because what we do matters!

Allowed and Disallowed Resources

In completing this assignment you MAY use/access the following resources:

You may NOT use/access:

Failure to abide by these guidelines will result in a zero for the assignment and the incident will be reported to the university provost as a violation of the university academic integrity policy. A second incident of academic dishonesty (whether from this course or another computer science course) will result in an F in the course.

Part 1: Mimic a Design from Canvas

Visit: https://josephus.hsutx.edu/classes/w1/source/hw02/

In this directory there is one HTML document and three image files. Copy canvas.html from josephus into your hw02 workspace.

Take a look at the canvas_image.png file which contain a screen shot of a page in the Canvas LTI. On paper make a simple sketch of rectangles that you see in the image.

Next visit canvas_layout.png in which I have made (ugly) highlights of the rectangle I see.

Modify your copy of the canvas.html page to create a design that mimics the rectangles I identified. Here are the guidelines I want you to follow:

When you finish this exercise, commit and push your work.

Part 2: Layout Your Home Page

Try your best to achieve the goal layout on the home page of your personal project that you started in the previous homework assignment. Use the techniques we have introduced. As much as you are able, use selectors rather than inline CSS. If you can't figure out how to select something, then inline CSS is fine.


Your work will be grades as follows:
canvas.html 12 pts For full credit complete each step listed above to mimic the design of the Canvas assignments page.
home.html 12 pts For full credit you should have a layout similar to your original design sketches, using primarily selectors for CSS commands. The site should still adhere to your color scheme (again mostly using document-level CSS).