└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Web Developer Shortcut 2 | 3 | Being a good web developer take a years and is a long journey. 4 | 5 | While other guide refers to so many resources that overwhelming for most of newbie, this one contains at most 3 most-referenced resources per study category per subject. 6 | 7 | This guide, hopefully, could become a shortcut for newcomers. So now you can focus on learning instead of picking study subjects. 8 | 9 | ## Table of Content 10 | 11 | >
12 | > Click here to see ToC

13 | > 14 | > * A. [Fundamental](#a-fundamental-) 15 | > * A.1 [HTML5](#a1-html5-) 16 | > * A.2 [CSS3](#a2-css3-) 17 | > * A.3 [Javascript](#a3-javascript-) 18 | > * A.4 [PHP](#a4-php-) 19 | > * B. [Advanced](#b-advanced-) 20 | > * B.1 [HTML5](#b1-html5-) 21 | > * B.2 [CSS3](#b2-css3-) 22 | > * B.3 [Javascript](#b3-javascript-) 23 | > * B.4 [PHP](#b4-php-) 24 | > * B.5 [Development Flow](#b5-development-flow) 25 | > * C. [Expert](#c-expert-) 26 | > * C.1 [Javascript](#c1-javascript-) 27 | > * C.2 [PHP](#c2-php-) 28 | > * C.3 [Development Principles](#c3-development-principles) 29 | > * [License](#license) 30 | > * [Appendix](#appendix) 31 | >

32 | >
33 | 34 | 35 | ## Prerequisites 36 | 37 | Before you start coding, make sure that you already have installed these stuff: 38 | 39 | >
40 | > Click here to see Prerequisites

41 | > 42 | > ### Web Server 43 | > _Pick one_ 44 | > * [XAMPP (all OS)](https://www.apachefriends.org/index.html) 45 | > * [Valet (Mac only)](https://laravel.com/docs/5.4/valet) 46 | > 47 | > ### Recommended Editor 48 | > _Pick one_ 49 | > * __Code Editor__ : [Atom by Github](https://atom.io) 50 | > * __Code Editor__ : [Brackets by Adobe](http://brackets.io) 51 | > * __Code Editor__ : [Visual Code by Microsoft](https://code.visualstudio.com) 52 | > * __Integrated Development Environment__ : [PhpStorm](https://www.jetbrains.com/phpstorm) 53 | > _Get a [student license](https://www.jetbrains.com/student/) so you can have PHPStorm for FREE for 1 year_ 54 | >

55 | >
56 | 57 |
58 | 59 | # A. Fundamental 60 | 61 | ## A.1 HTML5 62 | 63 | ### Tutorial 64 | _Pick one, then start practicing_ 65 | * [Basic HTML by W3Schools](https://www.w3schools.com/html/default.asp) 66 | * [Basic HTML by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) 67 | 68 | ### Tool 69 | * __Validator__ : [W3C Developer Tools](http://w3c.github.io/developers/tools) 70 | * __Scoring__ : [How well does your browser support HTML5 ?](http://beta.html5test.com) 71 | 72 | ### Reference 73 | * [HTML Cheat Sheet](https://hostingfacts.com/wp-content/uploads/2016/06/hf-html-cheat-sheet.pdf) 74 | * [HTML Reference by W3Schools](https://www.w3schools.com/tags/default.asp) 75 | 76 | ## A.2 CSS3 77 | 78 | ### Tutorial 79 | _Pick one, then start practicing_ 80 | * [Basic CSS by W3Schools](https://www.w3schools.com/css/default.asp) 81 | * [Basic CSS by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS) 82 | 83 | ### Guideline 84 | _Pick one, then start obeying_ 85 | * [CSS Coding Guide by Google](https://google.github.io/styleguide/htmlcssguide.html#CSS) 86 | * [CSS Guide by @mdo (creator of Bootstrap)](http://codeguide.co/#css) 87 | * [Reasonable Standard for CSS Stylesheet Structure](http://rscss.io) 88 | 89 | ### Reference 90 | * [CSS / CSS3 Cheat Sheet](https://websitesetup.org/wp-content/uploads/2016/10/wsu-css-cheat-sheet.pdf) 91 | * [CSS Reference by W3Schools](https://www.w3schools.com/cssref/default.asp) 92 | 93 | ## A.3 Javascript 94 | 95 | ### Tutorial 96 | _Pick one, then start practicing_ 97 | * [Basic Javascript by W3Schools](https://www.w3schools.com/js/default.asp) 98 | * [Javascript Video Tutorial by thenewboston](https://www.youtube.com/playlist?list=PL46F0A159EC02DF82) 99 | * [Basic Javascript by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 100 | 101 | ### Reference 102 | * [JS Cheat Sheet](https://www.cheatography.com/davechild/cheat-sheets/javascript/pdf) 103 | * [JS Reference by W3Schools](https://www.w3schools.com/jsref/default.asp) 104 | * [JS Reference by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) 105 | 106 | ## A.4 PHP 107 | 108 | ### Tutorial 109 | _Pick one, then start practicing_ 110 | * [PHP Video Tutorial by Laracast](https://laracasts.com/skills/php) 111 | * [PHP Video Tutorial by thenewboston](https://www.youtube.com/playlist?list=PL442FA2C127377F07) 112 | 113 | ### Reference 114 | * __Docs__ : [PHP Official Docs](http://php.net/manual/en) 115 | * __Guideline__ : [PHP The Right Way](http://www.phptherightway.com) 116 | * __Cheat Sheet__ : [PHP Cheat Sheet](https://www.cheatography.com/davechild/cheat-sheets/php/pdf) 117 | 118 | ### Other 119 | * __Packages__ : [The PHP League](https://thephpleague.com) 120 | * __Dependency Manager__ : [Composer](https://getcomposer.org) | [Yarn](https://yarnpkg.com) 121 | 122 |
123 | 124 | # B. Advanced 125 | 126 | ## B.1 HTML5 127 | 128 | ### Tutorial 129 | _Pick one first, practicing, then continue to the other_ 130 | * [HTML5 Tutorial by HTML5Rocks](https://www.html5rocks.com/en/tutorials/) 131 | * [HTML5 Video Tutorial by thenewboston](https://www.youtube.com/playlist?list=PL081AC329706B2953) 132 | 133 | ### Reference 134 | * [HTML5 by W3C](https://www.w3.org/TR/html5) 135 | * [HTML5 vs HTML4 by W3C](https://www.w3.org/TR/html5-diff) 136 | 137 | ### Other 138 | * __Tool__ : [Can I Use](http://caniuse.com) 139 | * __Example__ : [HTML5 Demos](https://html5demos.com) 140 | * __Cheat Sheet__ : [HTML5 Cheat Sheet](https://websitesetup.org/HTML5-cheat-sheet.pdf) 141 | 142 | ## B.2 CSS3 143 | 144 | ### Tutorial 145 | [CSS3 Tutorial by W3Schools](https://www.w3schools.com/css/css3_intro.asp) 146 | 147 | ### Front-End Framework 148 | _Mastering one at a time, then you can continue to learn the others_ 149 | * [Bootstrap](http://getbootstrap.com) 150 | * [Foundation](http://foundation.zurb.com) 151 | * [Material Design by Google](https://getmdl.io) 152 | 153 | ### Prepocessor 154 | _Mastering one at a time, then you can continue to learn the others_ 155 | * [LESS](http://lesscss.org) 156 | * [PostCSS](http://postcss.org) 157 | * [SASS/SCSS](http://sass-lang.com) 158 | 159 | ### Reference 160 | * [SASS Guideline](https://sass-guidelin.es) 161 | * [You Might Not Need JS](http://youmightnotneedjs.com) 162 | * [CSS3 Reference by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3) 163 | 164 | ## B.3 Javascript 165 | 166 | ### Tutorial 167 | _Learn them all_ 168 | * [ES2015 Video Tutorial by Laracast](https://laracasts.com/series/es6-cliffsnotes) 169 | * [JS Design Pattern by Oddy Osmani](https://addyosmani.com/resources/essentialjsdesignpatterns/book) 170 | * [jQuery Video Tutorial by thenewboston](https://www.youtube.com/playlist?list=PL6B08BAA57B5C7810) 171 | 172 | ### Build Tool 173 | _Mastering one at a time, they offers similiar goals_ 174 | * [Gulp](https://gulpjs.com) 175 | * [Webpack](https://webpack.github.io) 176 | * [Browserify](http://browserify.org) 177 | 178 | ### Testing 179 | _Mastering one at a time, they offers similiar goals_ 180 | * [Mocha](https://mochajs.org) 181 | * [Jasmine](https://jasmine.github.io) 182 | 183 | ### Reference 184 | * [EcmaScript 6 Features](http://es6-features.org) 185 | * [The State of Javascript](http://stateofjs.com/2016/introduction/) 186 | * [EcmaScript Comparison Table](http://kangax.github.io/compat-table/es6) 187 | 188 | ## B.4 PHP 189 | 190 | ### Object-Oriented Programming 191 | _Pick one first, practicing, then continue to the other_ 192 | * [OOP by Official PHP Docs](http://php.net/manual/en/language.oop5.php) 193 | * [OOP by PHPEnthusiast](http://phpenthusiast.com/object-oriented-php-tutorials) 194 | * [OOP by Codecademy](https://www.codecademy.com/courses/web-beginner-en-bH5s3/0/1) 195 | 196 | ### Mashup API 197 | _Pick one first, practicing, then continue to the other_ 198 | * [OAuth](https://oauth.net) 199 | * [Google API](https://developers.google.com) 200 | * [Facebook API](https://developers.facebook.com) 201 | 202 | ### Testing 203 | _Pick one first, practicing, then continue to the other_ 204 | * [PHP Unit](https://phpunit.de) 205 | * [Behat](http://behat.org/en/latest/) 206 | 207 | ### Design Pattern 208 | [PHP Design Patterns](https://github.com/domnikl/DesignPatternsPHP) 209 | 210 | ## B.5 Development Flow 211 | 212 | ### Version Control 213 | 1. Install [Git](https://git-scm.com) 214 | 2. Register at [Github](https://github.com) 215 | 3. Install one [Git Client](https://git-scm.com/downloads/guis/) (I would like to recommend [SmartGit](http://www.syntevo.com/smartgit/)) 216 | 4. Read [Git Tutorial by Atlassian](https://www.atlassian.com/git/tutorials/what-is-version-control) or practice [Interactive Git Tutorial by Github](https://try.github.io/levels/1/challenges/1) 217 | 218 | ### Team Collaboration 219 | * __Communication__ : [Slack](https://slack.com) 220 | * __Task Management__ : [Trello](https://trello.com) | [Asana](https://asana.com) 221 | * __Project Management__ : [Basecamp](https://basecamp.com) (freemium) | [JIRA](https://www.atlassian.com/software/jira) (paid) 222 | 223 | ### Continuous Integration 224 | * [Travis CI](https://travis-ci.org) 225 | * [Jenkins](https://jenkins.io) 226 | 227 |
228 | 229 | # C. Expert 230 | 231 | ## C.1 Javascript 232 | 233 | ### Front-End Framework 234 | _Mastering one at a time, then you can continue to learn the others_ 235 | * [React by Facebook](https://facebook.github.io/react) 236 | * [Angular by Google](https://angular.io) 237 | * [Vue](https://vuejs.org) 238 | 239 | ### Full-Stack Framework 240 | _Mastering one at a time, then you can continue to learn the others_ 241 | * [Meteor](https://www.meteor.com) 242 | * [MEAN](http://mean.io) 243 | 244 | ## C.2 PHP 245 | 246 | ### Framework 247 | _Mastering one at a time, then you can continue to learn the others_ 248 | * [Laravel](https://laravel.com) 249 | * [Symfony](https://symfony.com) 250 | * [Zend Framework](https://framework.zend.com) 251 | 252 | ## C.3 Development Principles 253 | _Read them all_ 254 | * [Joel's Test](https://www.joelonsoftware.com/2000/08/09/the-joel-test-12-steps-to-better-code) 255 | * [Scrum (Official Guide)](http://www.scrumguides.org/scrum-guide.html) 256 | * [Software Body of Knowledge](http://www4.ncsu.edu/~tjmenzie/cs510/pdf/SWEBOKv3.pdf) 257 | 258 | # License 259 | 260 | This work is under [Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)](https://creativecommons.org/licenses/by-sa/3.0/) license. 261 | You are free to __share__ and __adapt__, but __MUST__ give credit back to me. 262 | 263 | The cute "Surabaya" city icon above is taken from [here](http://www.imgrum.org/media/1021770744169286352_701246585). 264 | 265 | # Appendix 266 | 267 | >
268 | > Click here to see

269 | > 270 | > ## Certification 271 | > * [W3Schools' Online Certification Program](https://www.w3schools.com/cert/default.asp) 272 | > * [Front-End Professional Certificate Program by W3C](https://www.edx.org/professional-certificate/front-end-web-developer-9) 273 | > 274 | > ## Nice to Know 275 | > * [UML](http://www.agilemodeling.com/essays/umlDiagrams.htm) 276 | > * [Domain-Driven Design](https://martinfowler.com/tags/domain%20driven%20design.html) 277 | > * [Web Standard by Google](https://developers.google.com/web/) 278 | > * [Test-Driven Development](http://agiledata.org/essays/tdd.html) 279 | > * [Object-Oriented Analysis & Design](http://www.tutorialspoint.com/object_oriented_analysis_design) 280 | > 281 | > ## Curated Lists 282 | > * [HTML5](https://github.com/diegocard/awesome-html5) 283 | > * [CSS / CSS3](https://github.com/sotayamashita/awesome-css) 284 | > * __Javascript__ 285 | > * [Learning](https://github.com/micromata/awesome-javascript-learning) 286 | > * [Resources](https://github.com/sorrycc/awesome-javascript) 287 | > * [PHP](https://github.com/ziadoz/awesome-php) 288 | > * [MySQL](http://shlomi-noach.github.io/awesome-mysql) 289 | > * [Laravel](https://github.com/chiraggude/awesome-laravel) 290 | > * [Symfony 2](https://github.com/theofidry/awesome-symfony2) 291 | > * [React](https://github.com/enaqx/awesome-react) 292 | > * [Angular](https://github.com/AngularClass/awesome-angular) 293 | > * [Vue](https://github.com/vuejs/awesome-vue) 294 | > 295 | > ## Future 296 | > * [HTML 5.2](http://w3c.github.io/html) 297 | > * [You Dont Know JS: ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) 298 | >

299 | >
300 | --------------------------------------------------------------------------------