resources.md

Resources by Category

Here is a big dump of lots of resources for front-end devs.

My Atom Setuphttps://code.visualstudio.com/Download

Here's how I have Atom configured on my machine:

https://github.com/tiy-durham-fe-2015/curriculum/blob/master/atom-cheat-sheet.md

Git

Good tutorial:

https://www.atlassian.com/git/tutorials/setting-up-a-repository

CSS/HTML

Tools

Microsoft's code editor: https://code.visualstudio.com/Download

CSS triangle generator: http://apps.eky.hk/css-triangle-generator/

Text shadow, and other cewl stuff: http://www.css3generator.in/text-shadow.html

Media queries (responsive) for standard devices: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Test for browser support: http://caniuse.com

Lorem ipsum: http://meettheipsums.com/

CSS reset: http://meyerweb.com/eric/tools/css/reset/

Scale calculator for headers, line-heights, etc: http://type-scale.com/

Simple grid system:

• http://jeet.gs/
• http://susy.oddbird.net/
• http://neat.bourbon.io/

Find related products: http://www.producthunt.com/

Animations:

• http://www.justinaguilar.com/animations/index.html
• http://ianlunn.github.io/Hover/
• http://daneden.github.io/animate.css/
• http://leaverou.github.io/animatable/

Start a server in any directory on Mac:

python -m SimpleHTTPServer 8000

Preprocessors

• http://learnboost.github.io/stylus/
• http://sass-lang.com/
• http://lesscss.org/

Frameworks, grids, etc

• http://purecss.io/
• http://getskeleton.com/
• http://susy.oddbird.net/
• http://thoughtbot.com/open-source
• http://getbootstrap.com/
• http://foundation.zurb.com/

CSS guidelines: http://cssguidelin.es/

SCSS guidelines: http://sass-guidelin.es/

CSS Specificity rules:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Color scheme design:

• http://design-seeds.com
• http://colorschemedesigner.com/csd-3.5/
• http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• https://color.adobe.com

Sketching, drawing:

• https://inkscape.org/en/
• http://bohemiancoding.com/sketch/

Tutorials & Articles

HTML element categories: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

CSS/HTML tutorial:

• http://learn.shayhowe.com/html-css/
• http://howtocodeinhtml.com/

Responsive tables: https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/

Advanced CSS selectors game: http://flukeout.github.io/

Layout tutorial: http://learnlayout.com/no-layout.html

Optimal line-lengths: http://baymard.com/blog/line-length-readability

Font-sizing explained: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

The Golden ratio: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

CSS tips, tricks, and references: http://css-tricks.com/almanac/

The power of CSS illustrated:

• http://a.singlediv.com/
• http://www.csszengarden.com/

Intro to OOCSS: http://www.codersgrid.com/2013/05/10/how-to-code-better-css/

Video tutorials on all things web-programming: https://www.bento.io/

Free Images

• http://www.pexels.com/
• https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b
• https://www.haikudeck.com
• https://unsplash.com/

Fonts

• http://fontsquirrel.com
• http://google.com/fonts

Icon fonts:

• http://iconmonstr.com/
• http://app.fontastic.me/
• http://fontello.com

Some curated lists of web fonts:

• At the bottom of this article: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
• http://hellohappy.org/beautiful-web-type/
• http://www.typewolf.com/
• http://femmebot.github.io/google-type/
• http://www.webdesignerhub.com/free-retro-style-fonts/

Pretty sweet nav menus:

http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

Inspiration

• https://www.pinterest.com/search/pins/?q=interface%20design
• https://dribbble.com
• http://zurb.com/patterntap
• http://littlebigdetails.com/
• http://html5up.net/
• http://codepen.io/patterns/
• http://squarespace.com/
• http://thoughtbot.com/
• http://line25.com/
• http://land-book.com/
• http://www.awwwards.com/

JavaScript

Tutorials & Articles

Good intro to JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

Thorough documentation of weird JS behaviors and gotchas: http://bonsaiden.github.io/JavaScript-Garden/

Complete reference: http://devdocs.io/javascript/

Contrasting jQuery with basic JavaScript: http://youmightnotneedjquery.com/

Learn JS by playing games: http://www.jsdares.com/

Intro to functional programming: http://scott.sauyet.com/Javascript/Talk/FunctionalProgramming/

JS style guide: http://javascript.crockford.com/code.html

A quick overview of JavaScript: https://slides.com/concise/js/fullscreen#/

Node: http://nodeschool.io/

Angular: https://egghead.io/technologies/angularjs

Learn algorithms: https://www.khanacademy.org/computing/computer-science/algorithms

Libraries

jQuery http://jquery.com/

lo-dash, a set of useful helpers: https://lodash.com/

Lazy evaluation: http://danieltao.com/lazy.js/

Functional constructs in JS: http://ramdajs.com/docs/

Advanced physics library: http://brm.io/matter-js

Scrolling effects: https://github.com/gopatrik/space.js

Books http://eloquentjavascript.net/

Visualizations on the web: http://chimera.labs.oreilly.com/books/1230000000345/index.html

Cool extension to D3: http://riccardoscalco.github.io/textures/

Rich text editor: http://www.alohaeditor.org/

WebGL (3D on the web): http://webglfundamentals.org/

Rendering HTML with WebGL (this is crazy): https://github.com/PixelsCommander/HTML-GL/blob/master/README.md

OAuth handiness: http://adodson.com/hello.js/#hellojs

Mighty morphin DOM: http://www.rich-harris.co.uk/ramjet/

Native Mobile

https://www.nativescript.org/

Git

Git cheat sheet: https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf

General Tech

Blogs & News

• https://news.ycombinator.com/
• https://signalvnoise.com/
• https://robots.thoughtbot.com/
• http://www.joelonsoftware.com/
• http://alistapart.com/

Gulp stuff: https://developers.google.com/web/fundamentals/tools/build/setupbuildprocess?hl=en

Avoiding complexity: http://www.theeffectiveengineer.com/blog/hidden-costs-that-engineers-ignore?utm_source=Founder+Weekly+Newsletter&utm_campaign=1a5eed15d1-Founder_Weekly_Issue_163_December_31_2014&utm_medium=email&utm_term=0_286b01fd3e-1a5eed15d1-331306269

Interviewing

Getting an interview

Post your resume online!

• http://indeed.com
• http://dice.com

Prepping for an interview

Solve problems to keep your skills and brain sharp

• https://www.interviewcake.com/free-weekly-coding-interview-problem-newsletter?a=a&utm_source=coderbyte
• http://coderbyte.com
• http://www.toptal.com/javascript/interview-questions

Google "ACM programming competition problems", and try solving some of the problems you find

Design

Free resources for designers:

https://medium.com/@ingojoseph/free-design-resources-187bb30cc762

UX:

http://uxmyths.com/

Google design guidelines:

http://www.google.com/design/spec/material-design/introduction.html

Here are some books. These aren't technical, so probably won't help you immediately with the IronYard course, but are great resources to help clarify your thinking on design. I'll be bringing these into the IronYard, so look for them there when the cohort starts.

Don't Make Me Think

Any of Edward Tufte's books

The Design of Everyday Things