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:

• https://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.

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

HTML (Structure):

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

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

• https://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):

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

• https://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

JavaScript (Functionality):

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

• https://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:

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

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

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

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

Some Tools:

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

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

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

• https://stackoverflow.com/questions - 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!