$24
Homework 1 Introduction to HTML & CSS Solution
1 Assignment Objectives
The goal of this assignment is to sharpen your skills in HTML5 & CSS3. There is no JavaScript in this assignment. While this assignment is to be completed individually, you are permitted (and encouraged) to use online resources like Mozilla’s MDN. You will make a website that will resemble the following:
2 Setup
For this assignment, you will be making two files, index.html and styles.css for your website. Inline styles (styles within html) are not allowed and will result in point deduction. Your CSS must be linked in a link tag within the head element. In addition, you should add a helper JavaScript library that we provide that can assist you on your progress. You can do the following:
<!DOCTYPE html
<html
<head
...
<link rel="stylesheet" href="style.css"
<script src="https://tidepod.fun/hw1_helper.js" async</script
</head
<body
...
</body
</html
3 Tasks
This assignment is broken up into three sections. For each section, you will be given an example photo, and will have to implement the HTML and CSS for it. First and foremost, you must have an h1 element containing the text ”CS 146 Resources” and aligned to the center on the top of your webpage, before your first task. In addition, you must give your body element a grey background.
Each task section should be contained within a div element with a class name content and has the following properties:
Background color white
Margin vertical margin of 16px, and auto for horizontal
Vertical padding of 16px
Box shadow with an offset of x and y as 0px, a 4px blur radius, and a black color
Border radius of 4px
Width of 600px
3.1 Task I: Calendar
For this first task, you will be making a calendar with the various TA’s office hours, using a table element.
The elements required for the Calendar task are:
Centered h2 element with the text ”CA Office Hours”
A table element (have the borders collapse) with a body containing:
– 6 table headers (5 for the days of the week) with a width of 100px
– table rows with a bottom border that is thin, solid and has the color #CCCCCC
– the first column should have td elements with the different times
– for each TA pair, make a td element that has a class name event, whose CSS has white text, each block having a different background color, a border radius of 6px and spanning 2 columns
3.2 Task II: Links
The next task will be a list of hyperlinks to useful resources.
The elements required for the Links task are:
Centered h2 element with the text ”Useful Links”
An unordered list (with a list style of square) that contain (at least) the following hyperlinks:
– Github ! https://github.com/
– MDN Web Docs ! https://developer.mozilla.org/en-US/
– Canvas ! https://sit.instructure.com
3.3 Task III: Cats
The final task is to add some cute cat photos (dogs are allowed too).
The elements required for the Cats task are:
Centered h2 element with the text ”Cat (Or Dog) Pictures”
At least 5 cat or dog photos from external websites that have a height and width of 140px
4 Helper Checklist
We’ve also included a helper OSD that checks off various tasks when you complete them. When you have the proper website structure, it should look like this:
If you are missing elements or did them incorrectly, it will tell you what you did wrong:
Also, you can open your browser’s web console to see some additional error output:
If you don’t know how to open your console, here’s how to do so:
Chrome
– Windows: Ctrl + Shift + J
– macOS: CMD + Opt + J
Firefox
– Windows: Ctrl + Shift + K
– macOS: CMD + Opt + K
5 Submission
Upload a zip file to Canvas containing your index.html and styles.css files and name it:
LastName_FirstName_Assignment1.zip.
Good Luck!
4
