CSS

Student Starters

You will have an opportunity to do a starter today.

Task 02.02

Class Website link for Task 02.02

This task is very simplistic. This should not take too long to get done.

You need only to submit the Task 02.02 as detailed in the class webpage to get full credit for this week.

Extra Practice is a good idea

In my experience significant numbers of students find the shift to developing a website in the next recitation to be a bit overwhelming. Especially as this is a fully remote synchronous class. Therefore, I will not wrap up class early, but I will introduce a very low-code, basic "EZ Template" with a built-in top navigation bar.

This is not a very advanced theme, so you might want to choose a better theme for your 02.03 project. However, some past students have really made this theme work well for their needs.

Next week we will move onto looking at more powerful themes. We will focus mostly on giving you chance to change the CSS in this template.

Another benefit: This template will introduce you to the major structural requirements you will need to address in building your site.

You are highly encouraged to stick around for the remainder of the session and get some template hacking experience. If you find success with the EZ Template, you may post it for your 02.02 credit. (You will have to connect a style sheet, so it accomplishes the same objective and will give you a valuable overview for next week.)

EZ Template

1. Download the 02.03 Gradesheet so that you can begin to understand the requirements of what you need to do for the project.
2. Take a look at the finished sample site on my opal account.
3. Make sure to right click on every page and see how the navigation is different for each ACTIVE page. This is critical to grasp. This relies on an a css class of .active.
4. We will "snag" some code and see how easy it is to customize a site.
5. Download the template at EZ-template Repository on GitHub if you want to understand concepts more fully; just follow the instructions on the github main page.

The template on GitHub only has a working home page which is the index.html file. However, you can actually gain a huge jump today by "snagging" the code.

tip

In this case, this is not cheating, it is a strategy for getting you "better absorb" a very complex learning situation.

Either way, the goal of this exercise, and practice, is to show you how to create multiple pages from this template or any other template. You will see how the CSS file controls all of the colors and fonts to customize the template to suit your needs.

As you change the look and feel, be sure to have a goal to make your site colors and typography easy to read and meet accessibility guidelines. (we will cover that in a later recitation).