Adventures in Website Design && Development – 5/8/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

In the last installment, we talked about style guides and the importance of writing clean, neatly formatted code. Today, we will discuss a close relative, an older cousin, so to speak, of code style guides: reference guides.

Come on, admit it. You do not know every trick, function, and method in the book. I certainly do not. There is always going to be information you do not know, either from having not learned of it before or forgotten it from not using the knowledge (very often). What about the small details CSS often has (I am looking at you, shorthand animation property)? While someone probably can name them all in the correct order, chances are it is not you. πŸ˜› This is where the beauty of reference guides shine; they contain all the little bits of information you do not know.

Yea, but what are the most trustworthy reference guides out there? Surely not every site I come across can be completely trusted.

Correct, not every site can be called correct, and there are some that are more reliable than others. That is where today’s edition of Adventures in Website Design && Development takes over. I will be showing you some of the best of the best reference guides on the Web and briefly explaining why they have earned that title.

On your marks, get set, start learning!

MDN (Mozilla’s Developer Network)

As far as reference guides go, Mozilla’s Developer Network (commonly referred to by its acronym MDN) could be considered the king of them all. The brainchild of Mozilla, creator of the Browser That Rocked The Web Browser World (better known as Mozilla Firefox or just Firefox πŸ˜› ) and maintained by Mozilla employees and the knowledgeable community (thanks to its little known secret of being a wiki), you will find absolutely everything you ever wanted to know about HTML, CSS, and JavaScript, from the happily removed <blink> tag to the potentially great CSS border-image property to the always should be used JavaScript Strict mode and everything in between. You can even look up the answer to the shorthand animation property order question I posed in the introduction. MDN has a reputation for its quality, correct, and browser-agnostic content (contrary to what some may think, it does not solely focus on Gecko compatibility but instead has equal information for all browsers). Although some pages is missing minor details, need a technical review, needs revising due to updated browser compatibility or a finalized spec, a bit of cross-referencing with other reputable sources can clear everything up for you. Their examples can be a bit confusing, you will they are not that bad if you actually read them and not hastily skim it. πŸ˜› Honestly, all these things are a minor thing in comparison to the greatness known as MDN. This is why MDN is my top pick for reference guides and referring to specific HTML, CSS, or JavaScript-related stuff in conversations and tutorials, and it should be yours too.

WPD ( is another reference site like the mighty MDN, but what makes WPD stand out are the names behind it, like the W3C, Adobe, Google, Mozilla, Microsoft, and others. While the WPD is highly incomplete and needs a lot of people and a lot of content to even begin to match the comprehensiveness of MDN, it is still a great place to perform cross-referencing with other guides, and has the potential to become a powerhouse for teaching Web technologies.

Internet Explorer Dev Center

The Internet Explorer Dev Center, a subsection of the Microsoft Developer Network (also commonly referred to by its acronym, MSDN), while primarily focused on developing Windows 8 Modern (“Metro”) apps using HTML, CSS, and JavaScript, also serves as a decent cross-reference guide for the other guides. Also, you will find (almost) all things Internet Explorer-related here (you really think Microsoft will list all the flaws in their browser? πŸ˜› ), leaving you very little excuse to not have your site support at least Internet Explorer 10.


Technically, CSS-Tricks is not a reference guide but a blog containing posts, tutorials, and demos on virtually every CSS topic there is, from image lazy-loading, SCSS vs. LESS CSS preprocessor comparison, even tricks to styling an <hr> tag. You can find practically every topic you can think of here, most of which comes with real-life examples and code examples you can drop straight into your code (with proper attribution, of course ;P ). I have found CSS-Tricks to be very accurate and helpful in pretty much every situation (on the top of my head, I cannot think of a time CSS-Tricks has not been helpful). The writers also provide cross-browser compatibility notes when possible, including vendor prefixes and sometimes Internet Explorer 8 notes (those are usually older posts). Use CSS-Tricks as a companion site to MDN and the WPD. Use the last two for technical knowledge, and if you need a real-world example or the examples provided do not help, look it up on CSS-Tricks. You might just be surprised by what you find.

Next time on Adventures in Website Design && Development, I hope to writing on a more real-world topic, complete with a live demo, explanation of what is going on, and everything like that! πŸ˜€ It will be really exciting (at least for me)! πŸ˜€