Lab 1 (pdf)

In this lab we will learn some basics of HTML and CSS by editing an existing webpage to change its format and presentation. This lab has two parts:

Checking out the project

In order to work with the project, you need a couple of steps steps:

We will now follow each of these steps

Now you have a local copy of your project. To work with it, you should do two things:

You will be editing this project for your lab assignments. When you are ready to submit your assignment, follow the following steps:

To test this process, DO this right away! Add your name at the appropriate spots in the two files (html and css), save and create and push a commit as described above.

Details on the CSS tasks

For this part of the lab, you should have sample.html open in the browser, and you should be editing ourModifications.css. We have provided all the “selectors” you will need, you will just need to fill in the rules as per the instructions. You will need to consult the CSS reference along the way.

A lot of these ask you to set colors. You can use any number of color pickers that are available online.

Check your progress by refreshing the html page on the web-browser and seeing how it looks.

  1. There is a rule that catches the element with id of main. In that rule you will need to:
  2. There is a level 3 heading rule. In it you will need to:
  3. There is a rule for list items that are inside of the element with id main. In that rule:
  4. There is a rule that catches the items with a class of “remove” that are within a list item. In that rule:
  5. There is a rule that matches the list items when one hovers over them with the mouse. In that rule:
  6. There is a rule targeting the “ul” element that is the list. In that rule:
  7. There is a rule targeting an element with class “edit”. In that rule:
  8. There are two rules targetting buttons, one targetting them all the time, and one targetting them only when you hover.

Details on the HTML tasks

In this part of the assignment we will practice by adding new HTML elements into the sample.html file. Namely, our goal is to create a table of the tasks.

  1. Start a new div tag below the previous main div tag, and set its id to "taskTable".
  2. We will now create a table into this tag. A table starts with a table tag, so create such a tag inside your newly created div tag.
  3. The first tag inside a table is typically the tag that specifies the headings of the table. This is called a thead tag. Go ahead and add this tag inside the table tag now.
  4. Inside the thead tag create a tr tag. This creates a “table row”.
  5. Inside this tr tag, add three th tags one after the other, whose contents say “Task”, “Due Date” and “Completed”. You should now see the three headings show up at the bottom left of the screen, this is where our table shows up right now.
  6. After the closing of the thead tag but within the table tag, start a tbody tag. This will contain the data rows of our table.
  7. In this tbody tag, add at least four tr tags, corresponding to four tasks. Each tr tag should contain three td tags, the first tag containing the task’s text, the second containing a due date and the third containing “yes” or “no” depending on whether the tasks is completed or not. Choose whatever 4 tasks you want. You should now be able to see these rows of data in your table.
  8. To the opening tr tags for your four data rows, add class="..." attributes to them as follows: If the due date of the task is within the next 3 days, add the class “urgent”. If the task is completed, add the class “completed”. (you may need to add both in some cases, separated by space). If none of your task due dates and completions fit into this, change them to make things a bit more interesting. It is OK if some of your tasks don’t get any class attribute.

Now we will add some css rules to format this table a bit. The following should be added near the bottom of the css file.

  1. Create a new rule that targets the table element. In it:
  2. Create a rule that targets all td and all th elements (you can do this by separating them with comma). In it:
  3. Create a rule that targets all th elements. In it:
  4. Notice the very light white spacing around the cells. This is a special behavior for tables. To disable it, go back to the table rule you created a couple of steps above and add a border-collapse: collapse; entry in it. You should see that slight spacing disappear.
  5. We now want to color the entries based on whether they are urgent or not. Create a “tr.urgent” rule, which targets the urgent row entries.
  6. Set a rule that targets the tr rows that are completed.
  7. Add a hover effect on the td elements, to change their background color when we hover over them. You will notice this works even for the urgent rows. Think about why that is. How does the browser decide which of the two background colors to use.