Home Page
Articles & Quick Reference Lists
Link Description
List of HTML Tags An alphabetical list of all HTML tags.
The CSS Box Model The CSS box model is a crucial paradigm to understand. It defines the basic properties of a box: margin, borders, padding, and content.
CSS Layout An overview of CSS Layout Strategies, including floats, positioning, tables, lists, Flexbox, and Grids.
Block vs. Inline Discusses the differences between display: block; vs. display: inline vs. display: inline‑block; with examples of each.
Flexbox Examples A demonstration of Flexbox.
JavaScript Videos List of JavaScript Videos by Doug Crockford.
DOM Manipulation DOM manipulation in plain JavaScript without jQuery.
Built-In JavaScript Functions A complete list of JavaScript classes, properties, and functions that are built into them browser by default.
To-Do List Things I want to add to this notebook.
HTML Page Templates
Summary Links Description
An Empty HTML Template GitHub | GitHub Raw | Live A basic, empty HTML template with head sections to fill in for scripts and stylesheets.
An Empty HTML Template
(with onDocumentReady)
GitHub | GitHub Raw | Live A basic, empty HTML template plus installation of a function that runs after the page is loaded (similar to jQuery's $(document).ready() function).
2-Pane, Vertical Template
GitHub | GitHub Raw | Live A simple 2-pane layout arranged vertically with a top and bottom pane.
2-Pane, Vertical Template
(Top/Bottom using iframes)
GitHub | GitHub Raw | Live Same as the basic 2-pane vertical template, but with the bottom pane containing an iframe.
2-Pane, Horizontal Template
GitHub | GitHub Raw | Live A simple 2-pane layout arranged horizontally with a left and right pane. This is accomplished using inline-block display attributes and floats.
Web Resources
Link Description
VanillaJS Overview
What is VanillaJS? What, you've never heard of the amazingly powerful VanillaJS Framework? Well, you're not alone. Here's what StackOverflow has to say about it.
http://plainjs.com A good resource on writing plain HTML and JavaScript (without jQuery)
http://vanilla-js.com A comprehensive guide to the VanillaJS Framework, complete with a customizable, downloadable distribution of the framework. Includes some performance benchmarks comparing VanillaJS to jQuery.
Online Tools for Web Developers
http://beautifytools.com A great collection of online tools including beautifiers, minifiers, CSS preprocessors, unit converters, text converters, code validators, cryptography tools, code editors, string utilties, web utilities, SEO tools, and IP tools.
https://jsonformatter.curiousconcept.com A JSON Formatter and Validator.
Fonts and Text Resources
https://www.fontsquirrel.com A huge list of free fonts
HTML Special Characters A great list of special characters usable from HTML. Each entry shows a large graphic depecting the symbol, and the Unicode, Hex Code, HTML Code, and HTML Entity names. Characters are categorized by: Arrows, Currency, Letters, Math, Numbers, Punctuation, and Symbols.
Unicode Character Table A full list of Unicode characters depicting in a two-dimensional table organized by hex code.
Greek Letters Greek letters in HTML, XML, TeX, and Unicode
Unicode Character Code Chart The Unicode 10.0 Character Code Chart provided by unicode.org
Unicode Character Database The Unicode Character Database provided by unicode.org
W3Schools Icons Tutorial W3Schools has a very nice tutorial and reference section for icons, including a complete list of icons from Font Awesome, Bootstrap, and Google's Material Design.
Font Awesome Font Awesome is, well ..., awesome. A collection of 675 commonly used icons delivered as a single font, and usable directly from the CloudFlare content deliver network if desired.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Other Very Handy Web Resources
http://caniuse.com An excellent resource to check for browser compatibility against the feature you wish to use. Without a framework like jQuery to handle browser compatibility issues for you, you'll want to be more vigilant about considering browser compatibility issues.
https://css-tricks.com A good web site for tackling thorny and tricky CSS layout challenges.
Content Delivery Networks
Google Hosted Libraries Libraries hosted by Google.
cdnjs.com A comprehensive CDN for JavaScript Frameworks used by over 320,000 web sites. Very handy when you want to quickly prototype a web site and fiddle with a framework without downloading or deploying it manually.
List of Other CDNs A good list of other open source content delivery networks, from the MaxCDN blog.
Reference Material for Web Developers
https://developer.mozilla.org A fabulous resource for web developer technical information, well-organized, cleanly designed, and freely licensed and redistributable content. You can even create an account and start contributing to this great body of work.
https://w3schools.com Another amazingly voluminous resource on all manner of web technologies. I use this web site a lot, along with the Mozilla Developer Network above. I think the content is copyrighted, however, so be careful about redistributing it.
https://www.w3.org For the most fundamental resource of all, you can't get any more foundational than the W3C comittee.
https://www.ietf.org Ever want to peruse those wonderful RFC documents that you might run across once in a while. Well, the Internet Engineering Task Force (IETF) is for you.
https://www.whatwg.org The Web Hypertext Application Technology Working Group (WHATWG) is another great web site that tracks the evolving standards of HTML and related web technologies.