Errata

Learning Web Design

Errata for Learning Web Design

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
Printed Page 26
Under HTML documents heading, 2nd Para

Take a look at index.html......


The actual file is kitchen.html

 Anonymous  Apr 09, 2018 
Printed Page 66
Left-most side of page

On Page 66, the descriptions of the images in Figures 4-16 and 4-17 are swapped, and do not correctly correspond either with the images to which they pertain or the text.

 Luke  Sep 12, 2016 
Printed Page 107
Exercise 6-1

The exercise text says 'Make the list item "Epicurious" link to its web page at www.epicurious.com following my example, but the example shows The Food Network item being linked, not Epicurious.

 David Gray  Mar 22, 2017 
Printed Page 129
Figure 6-12

Two icons, for instructions.html and intro.html, should have dotted lines connecting them to the icon for the examples folder.

 Tom Gutnick  Sep 23, 2021 
Printed Page 219
top

The side note "Style Sheet Hierarchy" implies that embedded style sheets always override linked external and imported style sheets. However, my experience is that the style sheet "closest to the content" overrides all those listed before it, regardless of the type of style sheet it is. Therefore it is quite possible for the rules in a particular linked external style sheet to override conflicting rules in any other linked, embedded, or imported style sheet, if that external style sheet is listed last in the doc head. (Assuming there are no !important declarations in earlier conflicting rules.) I believe this just reflects the order in which the browser reads the style sheets, not any inherent weight associated with style sheet type (!important aside).

If I'm correct, that would also make the first paragraph on pg 218 in error: "Embedded style sheets that appear right in the document in the style element have more weight than external style sheets."

Am I misunderstanding something?

 Anonymous  Nov 15, 2013 
Printed Page 251
last paragraph of the section "rule order"

in the explanation of the example with different text colors you state
"Because that rule came last, it's the winner, and what h1 will be blue."
in this case it is the inline-style, which overwrites the declarations in the embedded stylesheet. but the reason for that is not "rule order" but the specificity of the inline style, which is much higher.

 Anders Neumann  Jun 09, 2020 
Printed Page 398
first CSS rule on page 398, with selector #container:after

The first CSS rule on page 398 (for clearfix) has extraneous declarations that cause incorrect output (i.e., they produce an extra box with a dashed outline below the two paragraphs).

To fix this, this rule should not contain declarations for background-color and border, because these declarations already apply to the CSS rule on page 397 for #container. Instead, it should only contain the following:

#container:after {
content: " ";
display: block;
clear: both;
}

Or possibly also the padding, since it wasn't previously declared, like this:

#container:after {
content: " ";
display: block;
clear: both;
padding: 1em;
}

But the padding is unnecessary and only serves to give the :after block area some height.

 Anonymous  May 23, 2022 
Printed Page 483
Question 3b

var foo = 5;
alert(foo++);

The question on page 483 asks the reader to work out what will be displayed. The correct answer is 5 (because 'foo' is evaluated as 5 and *then* incremented), but the answer given on page 580 is 6.

An introduction to Javascript probably shouldn't be teaching the difference between post-incrementing and pre-incrementing, so a better question could simply be:

var foo = 5;
foo++;
alert(foo);

(or, given that 3a also involves addition, use foo-- instead).

 James  Nov 10, 2016 
Printed Page 518
Top paragraph

216 should be 2(superscript)16

 James  Nov 10, 2016 
PDF Page 578
Answers number 8d and 12c

1) The answer 8d
It is asked to make a 400-pixel-wide image to display at 500-pixel-wide. I understand that it is required to change the width (horizontal size) of the image rather than its total size .
Therefore, the answer transform: scale(1.25); should be transform: scaleX(1.25);

2) The answer 12c
The question: Wait 2 seconds before running the animation
The answer animation-duration: 2s; should be correct animation-delay: 2s;

 titochan  Feb 02, 2018 
Other Digital Version 6594 of
Exercise 11-1 twenties.html

in the twenties.html file image section it there was a missing </p>.

<p><img src="twenties.gif" width="90" height="140" alt="20s closeup. If you are not seeing this image, check to make sure the file twenty_20s is in the same directory as this document" /><p>

it should be for html xhtml:

<p><img src="twenties.gif" width="90" height="140" alt="20s closeup. If you are not seeing this image, check to make sure the file twenty_20s is in the same directory as this document"/></p>

or for html5

<p><img src="twenties.gif" width="90" height="140" alt="20s closeup. If you are not seeing this image, check to make sure the file twenty_20s is in the same directory as this document"></p>

 Jonathan Klemm  Dec 06, 2016 
Other Digital Version 12314
Top

66% Location 12314 of 18873

ul {
width: 1000px;
height: 100px;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-perspective: 600;
-moz-perspective: 600;
-perspective: 600;
}

it should be
ul {
width: 1000px;
height: 100px;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-perspective: 600px;
}

perspective of the transform must have the px if its not a zero number or use percentage.
https://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transform-3d.html

 Anonymous  Jan 04, 2017 
Other Digital Version 12789
Step 1: Adding basic styes

68% Location 12789 or 18873

There is missing style code

ul { list-style-type: none;
... }
ul li { clear: both;
... }

there should be a spacer

ul { list-style-type: none;
... }
li { margin-bottom: 1em;
... }
ul li { clear: both;
... }

without the margin bottom 1em the Name, Email, Telephone and Your Story have no spacing.

 Jonathan Klemm  Jan 05, 2017