Intro to the Web Developer Toolbar

I always tell students to use the Web Developer Toolbar developed by Chris Pederick. It’s free, it works in Firefox, Opera, or Chrome and it’s very helpful.

This short video explains a bit about it. Although it’s talking about Joomla specifically and is an ad for, it’s still a good video. You hear Jen Kramer doing the description. It’s almost the same speech that I give students when I introduce them to this tool, so I thought it was worth sharing with you.

Review: HTML & CSS: Design and Build Websites

HTML and CSS: Design and Build Websites
by Jon Duckett is from Wiley & Sons (2011). This book is a little old (4 years) but I was so impressed with the JavaScript book by the same author and in the same format that I requested a copy from the publisher for review.

Everything I said about pedagogy and color coding in the review of the JavaScript book applies to this book as well. In fact, this book is where the author first honed the techniques used in presenting information so simply and clearly.

An infographic page from the book

A diagram and infographic page from the book

Simple illustrations with color coding and annotations for every point are used to teach the coding rules.

A reference page shows the HTML (or CSS) and the results of using it.

A reference page shows the HTML (or CSS) and the results of using it.

The reference pages are also color coded, with HTML shown in blue and CSS in pink as well as results examples.

As with the JavaScript book, all the code is downloadable. And, as with the JavaScript book, the language used to explain each concept is exceptionally clear and simple. Here’s a quote from the page introducing CSS.

CSS Associates Style Rules with HTML Elements

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

The book went completely through all the HTML it included (page structure, text, lists, links, images, tables, forms, audio and video and a few other bits of HTML) before getting to any CSS. Normally that would bother me, but it worked in this book. The CSS part of the book included color, text, boxes, lists, tables, forms, layout, images and some info on layout using HTML5.

Where the book is a little out of date is the information about HTML5. It’s no fault of the author, it’s just that the book came out in 2011. A few things are included (like hgroup or codec issues with video elements) that have gone away, and a few things that are more recent (like the main element) didn’t get mentioned. I reduced the star rating on the book because of that, but if I’d seen the book and reviewed it 4 years ago, I would have given it 5 stars. I simply want anyone who buys and uses it now to be aware that small parts of the book in the HTML 5 descriptions are different now. The book is still a perfectly good way to learn HTML and CSS – in fact, the book is an excellent way to learn HTML and CSS.

A review by Virginia DeBolt of HTML & CSS: Design and Build Websites (rating: 4 stars). The rating is based not on the quality of the book but on the fact that some of it is a little out of date.

Summary: Detailed, careful, guide to HTML, CSS and more.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Here is my review policy. Links to Amazon are affiliate links. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

What’s going on at UNM Continuing Ed?

UNM Continuting Education

There are several changes at UNM in the Digital Arts program in Continuing Education where I teach. There are new classes and new certificates.

There are many certifications you can earn at UNM Continuing Education. Of interest are Graphic Design, Web Design, Web Developer, Multimedia, Social Media, Web Administrator and several others.

Some classes available this fall include Website Marketing and Search Engine Optimization and Starting a Digital Business.

For fall, I’ll be teaching Beginnning HTML, Creating and Maintaining a Website, Facebook, HTML & CSS, Creating a WordPress Blog, and Principles of Accessible Web Design. Come join me!

Download the full Fall Digital Arts Schedule (PDF).

Review: JavaScript & jQuery: Interactive Front-End Web Development

JavaScript & jQuery: Interactive Front-End Web Development by Jon Duckett is from Wiley & Sons (2014). This book earns high praise from me as educationally sound. It reminds me a little of the Head First series of books, except this book isn’t silly. But it does use a number of interesting techniques to help you learn that are based in sound pedagogy.

Color Coding

There’s color coding for everything, which helps some people learn. Diagrams and infographics are on a dark background. Within the page itself, various elements are also color coded.

An example diagram page

Background pages and examples are on a light background.

An example page

An example page

Again, there is color coding within the page itself.

Reference pages are on a gray background with HTML, CSS, and JavaScript codes all shown in different colors. There are also separate color schemes for introductory pages and summary pages in each chapter.

Clear Language

The language is plain, very careful, easy to understand by anyone. Every single detail is explained in clear, simple sentences. It’s a masterpiece of clear writing. For example, here’s the initial description of jQuery:

jQuery is a JavaScript file that you include in your web pages. It lets you find elements using CSS-style selectors and then do something with the elements using jQuery methods.


Beyond the pedagogy that went into presenting the material in the book in a way that makes it easy to grasp, there is also the scope of the book. It covers more concepts than I’ve seen in a book of this type. It covers all the JavaScript basics, the Document Object Model, jQuery, Ajax & JSON, APIs, error handling and debugging, filtering, form enhancement and more. The book is over 600 pages long.

The examples are real world with downloadable code. The code shown in the book is  annotated (and color coded) with every detail fully explained. The output for every code example is pictured next to it.

Programming books often make my eyes cross and close automatically, but this one kept my interest. I learned many new things about topics that I hadn’t really understood before. I’d recommend it for independent learning. The exercises and examples in the book would also work as a classroom text for a JavaScript class.

Summary: Detailed, careful, guide to JavaScript, jQuery and more.

A review by Virginia DeBolt of JavaScript & jQuery: Interactive Front-End Web Development (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Images ©

What are Implicit ARIA Roles?

For a while now, I’ve been seeing mentions of implicit ARIA roles as something web designers and developers should be aware of and know how to use.

In the case of ARIA roles, the word implicit means that the browser interprets certain HTML elements semantically and treats them as if an ARIA role were assigned to them. In these situations, the web designer does not specifically need to add the role attribute to the element. The addition of the ARIA role is considered redundant in some situations.

If you do add the role information, it does no harm, but, in my opinion, it’s best practice to know when you do need to add it and when you don’t.

For elements that have been around for a while, say the a (anchor) element, the browser implicitly assigns a role="link" attribute.

For the newer HTML5 semantic structural elements, browsers already have some of the roles built in. This improves as browsers add support. A header element that is not a descendant of an article or section element is implicitly assigned role="banner". A footer element that is not a descendant of an article or section element is implicitly assigned role="contentinfo". There are a number of other cases like this as browsers add support for HTML5. They are detailed at the W3C in two tables. This table shows strong native HTML semantics with default ARIA semantics. Just under it, this table lists the default implicit ARIA semantics for many other elements, along with any restrictions that apply.

In addition to the information at the W3C, check out this article by Steve Faulkner: HTML5 Accessibility Chops: When to use an ARIA role.

Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel

The Structure category of DW’s Insert panel

There are some helpful HTML5  choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.