Articles & Quick Reference Lists
| Link | Description | |
|---|---|---|
| HTML | ||
| List of HTML Tags | An alphabetical list of all HTML tags. | |
| CSS | ||
| 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 | ||
| 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. | |
| Miscellaneous | ||
| 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 (Top/Bottom) |
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 (Left/Right) |
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 |
| Icons | |
| 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.
|
| 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. |