Smallcaps is not the same as uppercase. Even if you can simulate smallcaps using uppercase letters (similar to simulating italics or bold), fonts that employ smallcaps are specifically created to maintain proper balance and weight.

Furthermore, it’s important to use glyphs as intended with proper formatting. This is a small detail, but in the CNN example, a double-hyphen is incorrect. An emdash should be used instead and without the spaces. Many CMSes and blogging software, WordPress included, are able to convert typographic shorthand like double– and triple-hyphens and convert them to their proper glyphs. An old but timeless article: Typography Matters covers this topic. Also it wouldn’t hurt to look at print style guides such as the Chicago Manual of Style.

Also not mentioned but useful to know is to make sure that when using justified text (most everything is on the web is flush-left), that it should be used in combination with hyphenation. See wp-Typography for example.

As for the top-10 list (I disagree that Dreamweaver should be on the list), it’s important that the imagery is consistent. The Photoshop icon sticks out like a sore thumb. Also if the list is ordered, it would make sense to provide some way to indicate that it is ordered like numbers. That sets it apart from an itemized list.

I like Georgia since it is one of the better looking serif fonts among the web core fonts. However, since this is supposed to be a post about modern typography, the author should have mentioned upcoming font-embedding technology that would allow the use of much better looking fonts than Georgia.