Week 6 - Notes

Page layout has a lot of information, but you do not need to memorize this. (I will probably say this frequently.) Doing the Hands-On Practice exercises throughout the chapter will more clearly show you what is going on in the information being conveyed in the chapter.

General Collected Thoughts

Very important: removing the underline with CSS in hyperlinks/URLs will be frequently required in all subsequent chapters - this is the most important takeaway from Section 6.7. Also, the removal of list markers in unordered lists is mentioned here, too.

Section 6.8 covers interactivity of the mouse (i.e., hovering, keyboard focus, and if you already visited the hyperlink). (Did you hear that? You don't need to implement this with tracker-heavy JavaScript!)

Random note: I will just say it here, because there is not an easy place to put this fact - this book tells you to rewrite your Practice exercise HTML from scratch more often than it should. I have no idea why, but this manual "resourcing" is more tedious and time consuming rather than being conductive to learning. I will not indicate everywhere where you can do this, but always do a self-check before starting from scratch if you can reuse the latest completed Practice exercise as a skeleton to do the next Practice exercise, especially if the book does not say to reuse prior HTML.

Learn how to retab in Vim on any chapter provided templates for Practice exercises - ideally with macros. (I am saying this with the power of in hindsight). The example solutions and provided templates tab in a very Windows-like mindset. Tabbing is done on an ad hoc and visual basis and not in a convention that offers consistency. I know tabbing does not affect the rendering of HTML and CSS, but it keeps the HTML code, as a markdown language, readable and does not promote students to go on to blindly rely and use minified CSS themes from Google or something like that.

Only use the "4-value" abbreviation convention, shown below, if you wish to set a CSS rule and then forget it/effectively never change it again. It turns out that, despite Chapter 6 encouraging you to learn and start using this convention, is actually counterproductive later down the road for the subsequent chapters (because you start giving some top/bottom/right/left border some unique and nonsymmetric properties, so it turns out to be tedious for going back to do bespoke and narrow-scope CSS edits).

[Add hand drawing of the 4 value abbreviation]

Some Typos and Mistakes I Noticed

Besides the usual run-off TTF code sections, there are a few typos and other minor errors that caused me a bit of confusion.

• In Figure 6.18, the displayed picture is either weird or wrong. If I recall correctly, the figure looks nothing like what that point in Practice 6.3 is supposed to look like. (I am talking about the copy of the book from Library Genesis, since I did not want to be online 24/7 when writing HTML on BryteWave.)
Both solution files for Practice 6.3 left the "i"s out of "is" in the second instance of "This is a sentence."
• In Practice 6.8, it should have mentioned that all picture files are of the same dimensions, so that we do not have to manually check the dimensions of each picture - not all of us use sxiv or whatever to quickly obtain all image dimensions via a 1-liner command on the CLI...
• Practice exercise 6.10 should have specified that the box shadow should be dark grey (#828282) with a blur radius of 5px and that light grey background is #030303.
• In the JavaJam assignment, the picture height should actually be 175px (cross referenced by HIREZ's assignment when the site was active) instead of 250px. IIRC, 250px will heavily distort the pictures.