There’s an 8th Edition released in 2013, but we haven’t switched to it yet. I’m sure we will soon, but for the moment, we are using the 7th edition.
Here are a few teaching tips if you are using the 7th edition, as I currently am.
At the time this book was written, there was no <main> element in the spec. I suggest you change the layout suggested in Chapter 3 to use the <main> element for the left column. Use the landmark role role="main" with it.
Chapter 3 contains a clear explanation of the purposes and uses of both the <section> and <article> element. If you want, you can include an example of these two elements inside the <main> element.
Remember that <hgroup> has disappeared from the spec.
The example files all show empty elements such as <img> with a closing forward slash included: <img />. This provides a perfect opportunity to talk about backwards compatibility, XHTML, and some of the personal choices that are acceptable when writing HTML5.
This is a wonderful film everyone should watch, especially young people just starting out making web sites who have not lived through the last 20+ years with Jeffrey as their spirit guide.
The film is one of a documentary series from Lynda.com.Thank you to lynda.com for making this one available in its full length free.
There are many other fascinating documentaries on creative topics at lynda.com/vimeo. You must be a paying member of lynda.com to watch them. If you are, I especially recommend that you also watch Creative Insights: Lauren Bacon on Web Design.
Granted there are many more ways to make an effective and functional website than there used to be. I often steer people away from Dreamweaver toward some other tool when I don’t think they need to know everything you must know to use Dreamweaver properly.
However, that does not mean that the software is past its useful prime. What that article failed to take into consideration is all the site-wide tools and integrated tools that come with Dreamweaver. Dreamweaver does more than just write HTML and CSS. There are tools save a great deal of time for a developer who knows how to use them. There are tools that track links, update links, manage snippets, write JavaScripts, insert jQuery, write PHP. Dreamweaver works with Photoshop and other Adobe tools in ways that save both time and effort. In many ways, Dreamweaver forces developers to use accessible techniques – something other software doesn’t necessarily do.
I’ve certainly aired some complaints about Dreamweaver since Creative Cloud came along. But that doesn’t mean I think it’s irrelevant.
Anyone who doesn’t know enough to built a good website is going to build a bad website whether they are using Dreamweaver or some other tool. If I use Microsoft Word to write a terrible book, is that the fault of Word? Developers have to know what they are doing. When they do, their choice of software is just a choice. That software will do what they tell it to do.
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 Lynda.com, 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.
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.
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.
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.
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
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.
Scope
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.
Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.
The metaphor I’ll use today will be to compare a wrapper div to a fence.
A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]
What does a fence do?
It demarks the edges of your property.
It contains animals or children within a prescribed area. It keeps them from getting out.
It creates a border between one area and another.
It can be plain or decorative.
A wrapper div in an HTML document does the same things but to a layout instead of to actual property.
The wrapper holds a design within certain boundaries.
The various areas of a design cannot escape from the boundaries set by the wrapper.
A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.
With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.
It’s necessary to create the wrapper with a div and an id:
<div id="wrapper">everything on the page goes in here</div>
One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.
If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.
By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.
