Front-End Resource Roundup

Note: this is a list of resources I've used for clients in the past to help other developers beginning to learn front-end tools get up to speed Here is a list of resources for you to use to become more familiar with html, css & javascript. The resources are categorized by the amount of time or difficulty required for adequate digestion of the information. The easiest/shortest is surfing , resources you can skim through in minutes as you need them. Next is snorkeling , resources better digested over a period of about an hour or more to really go through Lastly, deep diving , resources that cover topics in depth in several hours or more (this doesn't mean you can't pick and choose chapters or sections as you need them, though!).

General Resources:

• http://www.w3schools.com/ - surfing - this is a general reference for many web technologies. It is a great reference. it may be the overall best resource on the web for all things web development related.

• http://webdesign.tutsplus.com/category/tutorials/htmlcss-tutorials/ - snorkeling - great video tutorials as well as articles

• http://coding.smashingmagazine.com/ - snorkeling - a great place for more specific posts

• http://alistapart.com/articles - deep diving - this is a site that goes more in depth into concepts as well as specific code examples

HTML (Structure):

• http://www.w3schools.com/html/ - surfing - the w3cschools html section

• http://www.htmldog.com/guides/htmlbeginner/ - surfing - a great beginner resource (this site also has intermediate and advanced tutorials)

• http://www.codecademy.com/tracks/htmlcss - surfing - deep diving - take these courses for as long or short as you want

• http://www.abookapart.com/products/html5-for-web-designers - deep diving - read this great, yet short, book on HTML5 for a comprehensive explanation of next-gen practices

CSS (Appearance):

• http://www.w3schools.com/css/- surfing - a popular resource to use at any time to review a css property

• http://www.htmldog.com/guides/cssbeginner/ surfing - also can find intermediate-advanced sections here

• http://css-tricks.com- surfing - snorkeling - without a doubt the best site regarding CSS out there. A great resource on anything html/css/js related. Covers a lot of advanced topics

• http://www.abookapart.com/products/css3-for-web-designers - deep diving - covers the next generation of css layout/appearance

JavaScript (Functionality):

• http://www.w3schools.com/js/ - surfing - best way to get started

• https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started - snorkeling - a good resource that has some helpful info along with code examples

• http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/ - surfing - deep diving - nettuts has a great article here on ways to get going with JS

• http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742 - deep diving - A great JS book that really helps one to start to understand the language

UX/Usability/Best Practices:

• http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/ - surfing - great beginner resource here

• http://webstandardssherpa.com/ - surfing - some hits and misses here

• http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/ - surfing - an easy resource to refer to for specific elements

• http://bradfrostweb.com/blog/ - snorkeling - Brad has intermediate to advanced UX topics covered

• http://www.lukew.com/ff/- deep diving - Luke is great, but a lot of stuff ventures into UX theory-ish stuff

• http://www.labor.ny.gov/ux/ - surfing - deep diving - This is the NYS dept of labor UX site, this is an awesome resource

Some Tools:

• http://codepen.io/ - use this site to fiddle around with code easily and see the output without having to create html pages, etc.Very handy!.

• http://jsfiddle.net/ - same basic concept as codepen, but more geared towards JavaScript

• http://foundation.zurb.com/ - Foundation 4 front-end framework

• http://stackoverflow.com/ - great forum, the most trusted on the web. use this to search for questions people have already asked, or pose your own

Don't be intimated by the vastness of the resources outlined here. We suggest for each topic you want to dive in to, take a look, see what appeals to you, and jump in. Then, over time, periodically refer to the deep diving sections to further your skills. I hope this is helpful! Enjoy!