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.
- Doing the right thing matters.
- Doing the right thing means developing competence.
- Doing the right thing means living in community.
- Doing the right thing means finding moral, effective, and correct solutions.
- Doing the right thing means honoring God in all we do.
So, do this assignment in a way that demonstrates integrity, develops
competence, is correct, and honors God ... because what we do matters!
In completing this assignment you MAY use/access the following resources:
- The quick reference guides below (which include the printed guides
handed out in class):
- VSCode Editor in its default configuration, including the Prettify extension
- The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NbiLvs4ceGnmTtuY1ymz3H136u4N2tjPgD9_g9QT6iE/edit?usp=sharing
- Your own course notes
- Your instructor
- Discussions about the assignment with other students as long as you
never look at the working code of another student. Another student should
never tell you what to type and you should never tell another student what
to type.
- Websites that provide general instruction on HTML and CSS as long as they are
not targeted specifically to the assignment on which you are working. As an
example, if you want to learn about techniques for applying a color scheme
to a web site, this is a good thing to look up. If you are looking for a
solution to a specific Javascript programming exercise given in a homework
assignment, that is NOT something you should look up. REMEMBER: The goal is
for you to become proficient, so you need to figure some things out.
- Examples provided at: https://josephus.hsutx.edu/classes/w1/source/
You may NOT use/access:
- Resources not expressly listed above, including, but not limited to,
the following ...
- Code-producing extensions to VSCode that are beyond the default
configuration (such as CoPilot).
- Code produced by code-generating tools (ChatGPT as one example).
- Code produced by other people (including classmates) that is targeted
to solve the specific assignment you are working on.
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.
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:
- The goal is not to make a page that looks like the Canvas page. The goal
is to mimic their layout. The
canvas_solution.png file shows my
solution to this assignment to give an idea of what I'm looking for.
- You can use any combination of inline or document-level CSS that you
want.
- Start by making the correct number and set of relationships among the
various rectangles, giving the ids, classes, or semantic names that
help identify which rectangle is which. You may find it helpful to give
each rectangle its own unique background color so you can see them.
- Give the page a max width of 1024 pixels and set box sizing to border-box
for all elements. Use percentages as widths.
- In the leftmost rectangle (w/ HSU logo and purple background) you should
make an attempt to set the width to be similar to what you see on the page.
I have provided the HSU logo and logos for Dashboard and Courses in the
document. Try to get the background, text, width, images to be in the ball
park of the actual Canvas site. NOTE: To set the color of an SVG image
via CSS you can set its “fill” property to the desired color.
- NOTE: to create a button in HTML use:
<button>Click Me</button>
- In the menu (Home, Announcement, etc.) just create two or three menu
items using anchor tags (no need to try to match colors, spacing, etc.,
unless you just want to for fun).
- In the other rectangles you can use some combination of h1, h2, and
paragraph tags (lorem ipsum is fine), just to create placeholders for
the various rectangles.
When you finish this exercise, commit and push your work.
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). |