What to expect

What this course is

Rather than cover HTML and CSS separately, we will consider the interplay and coordination between the two languages by discussing them in interleaving modules. The table below indicates the main language covered in each of the course modules.

Module Language Description
1. Overview Introducing the course
2. Elements HTML Breaking a web page into pieces
3. Attributes HTML Customizing elements by adding detail
4. CSS basics CSS Adding a bit of style
5. More elements HTML Further types of HTML building blocks
6. Layout CSS Placing elements on a page
7. Selectors CSS Choosing what to style
8. Position CSS Positioning elements
9. Forms HTML Constructing a form
10. Cascading CSS Handling conflicting styles
11. More to explore HTML CSS Considering further directions

What help is provided to keep track of two languages?

  • We use colour-coding so that HTML has one colour (like this: <p>) and CSS has another (like this: font-size).
  • Material from earlier modules appears in the table of symbols and terms with built-in meanings in HTML or CSS, accessible from the Help page.

The material is reinforced along the way by a blend of informational pages (like this one), quiz questions with feedback, examples, and exercises.

There is not that much difference between the examples and the exercises, since all the demonstrations can be edited (giving you a chance to change them and practice concepts in any way that you like) and all exercises appear with solutions. These too can be edited so that you can extend and alter them to enhance your understanding.

Modules vary in length and in the types of pages included. Don't be surprised if longer modules are at times faster to complete than shorter modules.

What this course isn't

This course isn't long enough or deep enough to discuss all aspects of web design, such as the aesthetic side, except to mention that they shouldn't be ignored. Here are a few points to consider:

  • Be sensitive to the reader's bandwidth. The amount of time it will take to load a page will depend not only on what material you include (such as lots of detailed photographs) but also on decisions you make in how to put it together.

  • Be sensitive to the reader's device. Remember that web pages will look different on different types of devices.

  • Be sensitive to the reader's needs. Think about information you can include for readers with visual impairments, such as text that can be detected by a screen reader.