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)
<blink> tag to the potentially great CSS
WebPlatform.org 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
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)! 😀