Note: Links have been omitted from this page.

Unit 1: Get an overview of this course, the Internet and the web

In this first unit, you get an overview of how this course works. Then you'll read some resources that define the Internet and the World Wide Web generally and get an overview of what a web browser does. You'll understand what happens when you click on a link and view a website. You'll read about some of the key figures in the rise of the Internet and the World Wide Web.

Use the Course Overview to see how this course is set up.

Use the Readings and Brief Quiz to get some background on the Internet and the web and take a simple brief quiz.

unit1_date: recommended due date for Overview Course and Internet
Unit 2. Get a W3schools account and create a simple web page

In this unit, you pick out an web page editor and create your first web page based on models provided and send it by e-mail attachment to your instructor. If you wander into serious web design worlds, you will see IDE. That means integrated development environment, and it refers to a web page editor with lots of additional useful features. Visual Studio Code and Sublime Text are two well-established examples. But the list is growing!

Here's what to do for this unit:

  1. W3schools Spaces Review. The Wheelchair Guy.
  2. To set up an account at W3schools, go to and create a free account. This video walks you through the steps:    account_setup
  3. Next, see how to do basic tasks in your W3S Spaces account: simplepage
  4. Create your first web page in your W3schools Spaces or at your preferred web host:
  5. Create a simple web page: video: Transcript: Simple Web Page
  6. Send the URL of your web page by e-mail attachment to your instructor at Your instructor will review, point out any problems, enabling you to revise and resend.
  7. Use the Final Project Startup study guide to start think about the final project you'll do for this course. You can be building it as you work through the following units so that it won't be such a giant project seven werks from now. And of course you can change your mind.
unit2_date: recommended due date for Overview Course and Internet
Unit 3. Get an introduction to Sublime Text, and add basic HTML tags to your web page

You've now seen how you can create and edit files in W3schools Spaces. But you really need a full-function integrated development environment like Sublime Text or Visual Studio Code. Sublime Text is a better choice because Visual Studio Code is overwhelming at first.

  1. Use this video to install Sublime Text on your computer along with Emmet.
  2. Use this video video to get a quick introduction to Emmet.
  3. Watch this video which shows how to create a simple web page in Sublime Text.

To create simple web pages, you need only a handful of HTML tags. In this unit, you practice using that handful of tags and see how they work.

Use the Basic HTML Tags study guide to get some practice with common HTML tags.

unit3_date: recommended due date for IDE editor, basic HTML tags
Unit 4. Add links between and within web pages

One of the great advantages of web pages is their ability to link to other web pages. This creates the world-wide "web" that is expressed in the name World Wide Web. This unit guides you through the creation of a variety of links to other people's pages as well as your own.

Use the HTML Linking study guide to see how to create hypertext links between web pages.

unit4_date: recommended due date for links
Unit 5. Get an introduction to Cascading Style Sheets (CSS)

Before going much further, we need to get into CSS, which enables the X in XHTML and moves all the formatting out of the .html file.

Use the CSS Introduction to learn some of the basics of using CSS in your web pages.

unit5_date: recommended due date for Cascading Style Sheets
Unit 6. Specify fonts and colors; add images

In this unit, you see how to control or change the fonts and color in your web pages as well as add images.

Use the Fonts, Colors, Images study guide to see how specify fonts and colors in your web pages as well as add images to them.

unit6_date: recommended due date for fonts, colors, images
Unit 7. Create common types of lists for your web page

In this unit, you'll see how to create a variety of vertical lists: bulleted lists, numbered lists, lists that restart at 1 or a different number, lists that have indented paragraphs within them, lists that use different indentation and margins, and lists that use interesting graphics for the bullet symbol.

Use the Lists study guide to see how to make many different types of lists.

unit7_date: recommended due date for lists
Unit 8. Create tables, boxes, and borders in your web pages

In this unit, learn how to create a variety of tables in your web pages: tables with or without captions (titles); tables with columns centered or right-aligned; tables with subcolumns or subrows; indented or centered tables; tables with grid lines hidden. Also in this unit you will learn how to add images to your web pages and how to format them in various ways.

Use the HTML Tables to learn the basics of creating tables in HTML and CSS.

Watch this link about why tables can be bad in web pages.

Use the HTML Tables, Boxes, Borders to learn the standard method to avoid using tables solely for formatting purposes.

unit8_date: recommended due date for tables, boxes, borders
Unit 9. Add Interesting Buttons to Your Web Pages

Now and then, you may encounter a situation in which you have a link (created by input(as shown below)—which is messy, tacky looking. You can use the button tag to make the link look like a buttton.

Use the HTML/CSS Buttons to learn the basics of creating linked buttons on your web pages

unit9_date: recommended due date for buttons
Unit 10. Add audio and video to your web pages

No longer can you have an attractive, interesting web site without audio (such as podcasts) and video (typically MP4s). In this unit, you link to audio and video in one or more web pages.

Use the Audio & Video to see how to use HTML5 functions to add audio and video to an HTML page or site.

unit10_date: recommended due date for audio and video
Unit 11: Use tooltips and popups in your web pages

Although popups have been scorned because of their commercial overuse, they can play a useful role in your web sites. Similarly, tooltips provide useful information when a visitor hovers over something in a web page tagged as a tooltip. Take a look at an example of what you'll accomplish in this unit.

Use the Tooltips & Popups study guide to see how to create these useful additions to an HTML page.

unit11_date: recommended due date for tooltips and popups
Unit 12: Forms for web pages

Forms are those dreadful things we have to fill out all the time at doctors' offices. HTML5 provides a number of useful enhancements. Still, you need some real programming to get and use data from these forms—which this unit provides.

Use the HTML Forms to practice the basics of HTML5 forms.

unit12_date: recommended due date for web page forms
Unit 13: Build a responsive, tri-pane web page

A "tri-pane" web page is possibly the most common web-page design right now and has been for some time. It consists of a "banner" that spans the entire width of the page, a narrow vertical pane (about one-third of the page width) that typically provides menu links, and a broader vertical pane (the rest of the page width) for the main page content.

A "responsive" web page is one that resizes properly according to the device on which it is used. The three standard sizes are large-size screens (standard desktop), medium-size screens (think tablets), and mobile-phone size screens.

Use the HTML Responsive Tri-Pane study guide to see how to create a responsive tri-pane page.

unit13_date: recommended due date for tri-pane web page
Unit 14: Create web pages with responsive images & responsive fonts

Use the Responsive Images study guide to create web pages with images and fonts that reformat nicely to the size of the device they arr being viewed in.

Use the Responsive Fonts study guide to create web pages with images and fonts that reformat nicely to the size of the device they arr being viewed in.

unit14_date: recommended due date for responsive images, fonts
Unit 15: Use Bootstrap menus

In this advanced unit, you explore dynamic menus as enabled by Bootstrap 3 (or 4). Bootstrap menus provide a much more compact way of tying together the pages of your web site.

Note: There is no video for this unit. If you need it, let me know!

Use the Bootstrap Menus study guide to learn how to create Boostrap menus with drop-down submenus.

unit15_date: recommended due date for Bootstrap menus
Unit 16: Build a web page with an "accordion" function

An "accordion" displays drop-down text, images or both when you press a link. A common use for accordion functions in web pages is the FAQ. You might have a rather lengthy list of questions, and to save on screen area, the answer to a question displays in a drop-down when you click a question link.

Use the Web Page Accordion study guide to create a web page in which sections expand to reveal more information and images when hovered over or clicked.

unit16_date: recommended due date for accordion
Unit 17: Build a web page carousel

A "carousel" is a revolving, repeating display of images.or even text. You may remember the carousels used for slide shows back in the day. The carousel can run either manually (you press an on-screen button to go to the next image or text) or run automatically.

Use the Carousel study guide to see how to set up a web page carousel.

unit17_date: recommended due date for carousel
Unit 18: Create a hero image; autonumbering

In a webpage featuring a "hero" image (also known as a "banner" image), the top quarter, third, or even half of the page is covered by a large image and introductory text. CSS enables autonumbering of headings and figure captions.

Use the Web Page Hero Image study guide to see how to set up a simple web page that features a hero image.

Use the Autonumbering Headings study guide to see how to automate the numbering of headings.

Use the Autonumbering Figure and Table Captions study guide to see how to automate the numbering of figure and table captions.

Use the Autonumbering Decimal Lists study guide to see how to automate the numbering of decimal lists.

unit18_date: recommended due date for hero image; autonumbering
Unit 19: Create a long-scrolling web page

You see a lot of these "landing" pages where you scroll, scroll, scroll. This unit shows you a simple way to achieve that.

Use the Long-Scrolling Web Page study guide to see how to make users scroll for seeing ever!

unit19_date: recommended due date for long-scrolling web page
Unit 20: Get an introduction to Grid and Flexbox

CSS Flexbox and CSS Grid are two powerful ways to control arrangement, sizing, alignments of objects on a web page and to achieve responsiveness.

Use parts 1 and 2 of this introduction to Flexbox:

  1. Flexbox—Part 1 study guide to see how to set up a web page for flex box functions.
  2. Flexbox—Part 2 study guide to see how to add flex box functions.

Use the Grid Introduction, part 1 study guide to see how to set up web pages with simple grid functions.

unit20_date: recommended due date for Grid, Flexbox
Unit 21. Solve Large Image and Lengthy Text Problems

Sometimes, an image or a strip of text you want to display is too big for your web page and so you have to display a smaller one which is too small to be readable. The solution for this problem is to enable the user to hover over the smaller image or a "hover here" and to display the larger image or text.

Use the Large Images study guide to see how to pop up a larger version of an image on a web page.

Use the Lengthy Text study guide to see how to pop up a large chunk of text on a web page.

unit21_date: recommended due date for large images, lengthy text
Unit 22: Create your final web site project

In this final unit of this XHTML/CSS course, you create a website (multiple linked web pages) in which you demonstrate most of what you have learned to this point. It's time show off what all you've learned and know!

Choose on of the following based on the units you've studied in this course:

Use the Final Project A study to see the recommendations for creating an HTML site that will represent most of what you know and have learned in this course.

Use the Final Project B study to see the recommendations for creating an HTML site that will represent most of what you know and have learned in this course.

unit22_date: recommended due date for web site project
Complete this course by unit23_date

Information and programs provided by