└── README.md /README.md: -------------------------------------------------------------------------------- 1 | #A curation of resources for Web Developers 2 | 3 | ## Regular Visits 4 | * [Web design weekly](http://web-design-weekly.com/) 5 | * [Sidebar](http://marvelapp.github.io/devices.css/) 6 | * [AWWWards](http://www.awwwards.com/) 7 | * [A list apart](http://alistapart.com/) 8 | * [The Neo Design](http://theneodesign.com/) 9 | * [Codrops](http://tympanus.net/codrops/) 10 | * [Scotch.io](http://scotch.io/) 11 | * [CSS tricks](http://css-tricks.com/) 12 | * [TechCrunch](http://techcrunch.com/) 13 | * [SitePoint](http://www.sitepoint.com/) 14 | * [Smashing Magazine](http://www.smashingmagazine.com/) 15 | * [Speckyboy](http://speckyboy.com/) 16 | * [Vandelay design's blog](http://vandelaydesign.com/blog/) 17 | * [Hack design](http://hackdesign.org/) 18 | * [Line 25](http://line25.com/) 19 | * [Web Dev Snippets](http://www.webdevsnippets.com/) 20 | * [Codular](http://codular.com/) 21 | * [Lonely pixel](http://www.lonely-pixel.com/) 22 | * [SiteBuilderReport](http://www.sitebuilderreport.com/blog) 23 | * [Codacy](http://blog.codacy.com/) 24 | * [Code School Blog](http://www.codeschool.com/blog/) 25 | * [Web Designer Depot](http://www.webdesignerdepot.com/) 26 | 27 | ## Tutorials 28 | * [Hack design](https://hackdesign.org/) 29 | * [Tutsplus](http://code.tutsplus.com/) 30 | * [Tutorialzine](http://tutorialzine.com/) 31 | * [Codeplayer](http://thecodeplayer.com/) 32 | * [Dive into HTML5](http://diveintohtml5.info/index.html) 33 | * [HTML5 Rocks](http://www.html5rocks.com/) 34 | * [Code Bright for Laravel PHP](http://daylerees.com/codebright) 35 | * [PHP the right way](http://www.phptherightway.com/) 36 | * [Human JavaScript](http://read.humanjavascript.com/ch01-introduction.html) 37 | * [User managaement in node.js](http://devcenter.kinvey.com/nodejs/guides/users) 38 | * [node.js guides](http://devcenter.kinvey.com/nodejs/guides) 39 | * [Learn AngularJS in 30 minutes](http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/) 40 | * [5 practical AngularJS examples](http://tutorialzine.com/2013/08/learn-angularjs-5-examples/) 41 | * [Getting started with OAuth](https://oauth.io/getting-started?javascript&php) 42 | * [Jekyll resume](https://github.com/philipithomas/jekyll-resume/) 43 | 44 | ## Workflow 45 | * [Thoughtbot's Playbook](http://playbook.thoughtbot.com/) 46 | * [Web dev checklist](http://webdevchecklist.com/) 47 | * [Pre-deploy checklist](http://www.codelord.net/2014/01/15/my-pre-deploy-checklist/) 48 | * [Visual Designers Checklist for the Web](http://webdesignerschecklist.com/) 49 | * [Desktop development with HTML5, CSS3 and JavaScript](http://www.tidesdk.org/) 50 | * [Apache Cordova - platform for building native mobile applications using HTML, CSS and JavaScript](http://cordova.apache.org/) 51 | * [PHỞ - automated workflow for front-end developers](http://pho.madebysource.com/) 52 | * [Yeoman - the web's scaffolding tool](http://yeoman.io/) 53 | * [Periodic table of web design process](http://i.imgur.com/hqGsw2k.jpg) 54 | * [How to start a web design project](http://designmodo.com/web-design-project/) 55 | * [Finding a winning workflow for frontend development](http://blog.slant.co/post/95896285907/finding-a-winning-workflow-for-frontend-development) 56 | 57 | ## Business 58 | * [Freelancer life](http://papermine.com/pub/917#cover) 59 | * [Simple contract template](https://www.docracy.com/3884/contract-of-works-for-web-design) 60 | * [33 ways to get more clients](http://blog.slant.co/post/95896285907/finding-a-winning-workflow-for-frontend-development) 61 | * [Avoiding client headache](http://uxmovement.com/resources/how-to-avoid-client-headache-as-a-freelance-designer/) 62 | * [Don't screw up client presentations](https://medium.com/@monteiro/13-ways-designers-screw-up-client-presentations-51aaee11e28c) 63 | * [Starting and running your own business](http://www.jamesaltucher.com/2013/08/the-ultimate-cheat-sheet-to-starting-and-running-your-own-business/) 64 | * [Business Validation Cheat Sheet](http://s3.appsumo.com/ValidationCheatSheet.pdf) 65 | 66 | ## Tools 67 | * [10 essential tools for startups](http://despreneur.com/10-essential-tools-for-startups/) 68 | * [uiFaces - sample avatar mockups](http://uifaces.com/) 69 | * [Adobe Kuler color wheel](https://kuler.adobe.com/create/color-wheel/) 70 | * [Daux.io - documentation generator](http://daux.io/) 71 | * [Online style guide generator](http://stylifyme.com/) 72 | * [SEO site checkup](http://seositecheckup.com/) 73 | * [Developer and power users tool list for windows](http://www.hanselman.com/blog/ScottHanselmans2014UltimateDeveloperAndPowerUsersToolListForWindows.aspx) 74 | * [Vagrant](http://www.vagrantup.com/) 75 | * [Forp - PHP Profiler](http://forp.io/) 76 | * [RawGit - easy CDNs](https://rawgit.com/) 77 | * [SinglePafe.guru - singlepage design made easy](https://www.singlepage.guru/editor.html) 78 | * [Reveal.js - HTML presentations made easy](http://lab.hakim.se/reveal-js/#/) 79 | * [Firebase - store and sync data in realtime](https://www.firebase.com/) 80 | 81 | ## Cheatsheet 82 | * [20 Useful HTML5 Code Snippets You Should Know](http://www.realcombiz.com/2014/02/20-useful-html5-code-snippets-you.html?m=1) 83 | * [Responsive breakpoint cheatsheet](https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf) 84 | * [AngularJS cheatsheet](http://www.cheatography.com/proloser/cheat-sheets/angularjs/) 85 | * [SEO periodic table](http://searchengineland.com/download/seotable/SearchEngineLand-Periodic-Table-of-SEO-2013-large.png) 86 | 87 | ## Design 88 | * [A baseline for Front-End developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) 89 | * [Gestalt Principles](http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/) 90 | * [The role of visual design](http://www.lukew.com/ff/entry.asp?1915) 91 | * [Clean up your mess](http://www.visualmess.com/) 92 | * [The boring Designer](http://blog.capwatkins.com/the-boring-designer) 93 | * [Paralyzed by choice in Front-End development](http://modernweb.com/2014/03/31/paralyzed-by-choice-in-front-end-development/) 94 | * [How to cultivate culture in online communities](http://www.sitebuilderreport.com/blog/6-ways-to-cultivate-culture-on-a-website) 95 | * [Most common technical interview questions for front end developers](http://www.frontendjournal.com/most-common-technical-interview-question-for-frontend-developers/) 96 | * [10 best free ebooks for designers](http://despreneur.com/10-best-free-ebooks-for-designers/) 97 | * [Google's best practices for modern web development](https://developers.google.com/web/fundamentals/) 98 | * [Google design principles ands material design](http://www.google.com/design/) 99 | * [User Personas](https://www.flickr.com/photos/jasontravis/sets/72157603258446753/) 100 | * [Briefbox - practice design briefs](http://briefbox.me/) 101 | 102 | ## UX and UI 103 | * [10 differences between UX and UI designers](http://www.thedesignpotato.com/10-differences-between-ux-designer-and-ui-designer/) 104 | * [UX crash course](http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals) 105 | * [Google's UX design approach](http://www.fastcodesign.com/1672657/google-s-dead-simple-tool-for-making-ux-decisions-2-jars-of-marbles?utm_source) 106 | * [Flat UI Colors](http://flatuicolors.com/) 107 | * [Good UI - tips for building good UIs](http://www.goodui.org/index_v2.html) 108 | * [Free UX Resources](http://uxmessiah.com/free-ux-resources-part-1/) 109 | * [User onboarding teardowns](http://www.useronboard.com/onboarding-teardowns/) 110 | * [A/B testing with PHP](http://phpabtest.com/) 111 | * [Google Content Experiments](https://support.google.com/analytics/answer/1745147?hl=en&ref_topic=1745207&rd=1) 112 | 113 | ## CSS 114 | * [CSS guidelines](http://cssguidelin.es/) 115 | * [GitHub's style guide](https://github.com/styleguide/css) 116 | * [Groupbuddies Sass project architecture and style guide](http://blog.groupbuddies.com/posts/32-our-css-sass-project-architecture-and-styleguide) 117 | * [CodePen's CSS](http://codepen.io/chriscoyier/blog/codepens-css) 118 | * [Medium's CSS](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06) 119 | * [GitHub's CSS](http://markdotto.com/2014/07/23/githubs-css/) 120 | 121 | ## Templates, Frameworks and Components 122 | * [Layers CSS](http://www.wework.com/magazine/knowledge/google-degree-resources-transformed-web-dev/) 123 | * [Flat UI](http://designmodo.github.io/Flat-UI/) 124 | * [PixelKit Bootstrap UI kits](https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits/) 125 | * [Bourbon - Sass mixin library](http://bourbon.io/) 126 | * [Simple CSS spiners](http://tobiasahlin.com/spinkit/) 127 | * [20 Free useful flat HTML templates](http://despreneur.com/20-free-useful-flat-html-templates/) 128 | * [Web and mobile GUI templates](http://speckyboy.com/2014/01/15/50-best-web-mobile-gui-templates-2013/) 129 | * [CodyHouse - A free library of HTML, CSS, JS nuggets](http://codyhouse.co/) 130 | * [HTML5 up - spiffy templates](http://html5up.net/) 131 | * [20 Free useful flat HTML templates](http://despreneur.com/20-free-useful-flat-html-templates/) 132 | * [Web and mobile GUI templates](http://speckyboy.com/2014/01/15/50-best-web-mobile-gui-templates-2013/) 133 | 134 | ## Inspiration 135 | * [AWWWards](http://www.awwwards.com/) 136 | * [Codrops' playground](http://tympanus.net/codrops/category/playground/) 137 | * [Panda - Collections for designers](http://usepanda.com/app/) 138 | * [Minimalist Gallery](http://www.siiimple.com/) 139 | * [Collection by #2E353F](https://dribbble.com/colors/2E353F) 140 | * [Beautiful sites for Open Source projects](http://beautifulopen.com/) 141 | * [Moodboard](http://www.gomoodboard.com/) 142 | * [Uber](https://www.uber.com/) 143 | * [Hyperakt](http://hyperakt.com) 144 | * [Jacob Tomlinson's minimal blog](http://www.jacobtomlinson.co.uk/) 145 | * [Jason Cha's DailyBible](http://jasoncho.ca/portfolio/dailybible/) 146 | * [Iuvo's playground](http://www.iuvo.si/play) 147 | * [JS demos](http://davidwalsh.name/codepen-demos) 148 | * [Flat Surface Shader demo](http://matthew.wagerfield.com/flat-surface-shader/) 149 | * [A collection of active backgrounds](http://codepen.io/collection/ACqoJ/) 150 | 151 | ## Plugins 152 | * [Shepherd - Guide your users through a tour of your app](http://github.hubspot.com/shepherd/docs/welcome/) 153 | * [HTML5 slider with range support](https://github.com/fryn/html5slider) 154 | * [jQRangeSlider](http://ghusse.github.io/jQRangeSlider/demo.html) 155 | * [Chosen - Better select boxes](http://www.webdevsnippets.com/) 156 | * [Selectize - textbox and select hyrbid](http://brianreavis.github.io/selectize.js/) 157 | * [Datatables](http://datatables.net/) 158 | * [You might not need jQuery](http://youmightnotneedjquery.com/) 159 | * [Masonry](http://masonry.desandro.com/) 160 | * [MixItUp - filtering and sorting](https://mixitup.kunkalabs.com/) 161 | * [jQuery FocusPoint](https://github.com/jonom/jquery-focuspoint) 162 | 163 | ## Icons 164 | * [Font Awesome](http://fortawesome.github.io/Font-Awesome/) 165 | * [Gemicon](http://gemicon.net/) 166 | * [Batch](http://adamwhitcroft.com/batch/) 167 | * [Iconic](https://useiconic.com/open/) 168 | * [Ionicons](http://ionicons.com/) 169 | * [Fontelleo - icon font generator](http://fontello.com/) 170 | 171 | ## Fonts 172 | * [Typ.io - Fonts that go together](http://www.typ.io/) 173 | * [Beautiful Web Type](http://hellohappy.org/beautiful-web-type/) 174 | * [Google web fonts typography](http://femmebot.github.io/google-type/) 175 | * [Open Sans](http://www.google.com/fonts/specimen/Open+Sans) 176 | * [Lato](http://www.google.com/fonts/specimen/Lato) 177 | * [Best new web fonts of 2013](http://typecast.com/blog/best-new-web-fonts-of-2013) 178 | * [Blokk font](http://blokkfont.com/) 179 | * [Fresh free fonts](http://theneodesign.com/fresh-free-fonts-2014/) 180 | * [10 commandments of typography](http://www.designmantic.com/blog/wp-content/uploads/2014/04/font-infography.jpg) 181 | 182 | ## Stock images 183 | * [Unsplash](https://unsplash.com/) 184 | * [Gratisography](http://www.gratisography.com/) 185 | * [Splitshire](http://splitshire.com/) 186 | * [Raumrot](http://www.raumrot.com/10/) 187 | * [Death to the stock photo](http://deathtothestockphoto.com/) 188 | * [The stocks](http://thestocks.im/) 189 | 190 | ## Other curations 191 | * [Backend development bookmarks](https://gist.github.com/dypsilon/5819528) 192 | * [50 CSS Libraries, Frameworks and Tools from 2014](http://speckyboy.com/2014/06/02/css-libraries-frameworks-tools/) 193 | * [Web Field Manual](http://webfieldmanual.com/) 194 | * [Tevko's resources](https://github.com/tevko/Resources) 195 | 196 | ## Javascript 197 | * [Idiomatic JS](https://github.com/rwaldron/idiomatic.js) 198 | * [Make your own AngularJS](http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html) 199 | * [JavaScript Garden - Documentation on JavaScript quirks](http://shamansir.github.io/JavaScript-Garden/en/) 200 | * [JavaScript hacks explained](http://blog.mdnbar.com/javascript-common-tricks) 201 | 202 | ## Other 203 | * [Choosing the right hosting](http://www.pintsizedgiants.co.uk/blog/8/choosing_the_right_hosting) 204 | * [HTML/JS/DOM/CSS hacks](http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about) 205 | --------------------------------------------------------------------------------