web-developer-shortcut
web-developer-shortcut copied to clipboard
rkukuh
A short learning path to become a good web developer
Web Developer Shortcut
Being a good web developer take a years and is a long journey.
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.
This guide, hopefully, could become a shortcut for newcomers. So now you can focus on learning instead of picking study subjects.
Table of Content
Click here to see ToC
- A. Fundamental
- A.1 HTML5
- A.2 CSS3
- A.3 Javascript
- A.4 PHP
- B. Advanced
- B.1 HTML5
- B.2 CSS3
- B.3 Javascript
- B.4 PHP
- B.5 Development Flow
- C. Expert
- C.1 Javascript
- C.2 PHP
- C.3 Development Principles
- License
- Appendix
Prerequisites
Before you start coding, make sure that you already have installed these stuff:
Click here to see Prerequisites
Web Server
Pick one
Recommended Editor
Pick one
- Code Editor : Atom by Github
- Code Editor : Brackets by Adobe
- Code Editor : Visual Code by Microsoft
- Integrated Development Environment : PhpStorm
Get a student license so you can have PHPStorm for FREE for 1 year
A. Fundamental 
A.1 HTML5 
Tutorial
Pick one, then start practicing
Tool
- Validator : W3C Developer Tools
- Scoring : How well does your browser support HTML5 ?
Reference
A.2 CSS3 
Tutorial
Pick one, then start practicing
Guideline
Pick one, then start obeying
- CSS Coding Guide by Google
- CSS Guide by @mdo (creator of Bootstrap)
- Reasonable Standard for CSS Stylesheet Structure
Reference
A.3 Javascript 
Tutorial
Pick one, then start practicing
- Basic Javascript by W3Schools
- Javascript Video Tutorial by thenewboston
- Basic Javascript by Mozilla Developer Network
Reference
A.4 PHP 
Tutorial
Pick one, then start practicing
Reference
- Docs : PHP Official Docs
- Guideline : PHP The Right Way
- Cheat Sheet : PHP Cheat Sheet
Other
- Packages : The PHP League
- Dependency Manager : Composer | Yarn
B. Advanced 
B.1 HTML5
Tutorial
Pick one first, practicing, then continue to the other
Reference
Other
- Tool : Can I Use
- Example : HTML5 Demos
- Cheat Sheet : HTML5 Cheat Sheet
B.2 CSS3
Tutorial
Front-End Framework
Mastering one at a time, then you can continue to learn the others
Prepocessor
Mastering one at a time, then you can continue to learn the others
Reference
B.3 Javascript
Tutorial
Learn them all
- ES2015 Video Tutorial by Laracast
- JS Design Pattern by Oddy Osmani
- jQuery Video Tutorial by thenewboston
Build Tool
Mastering one at a time, they offers similiar goals
Testing
Mastering one at a time, they offers similiar goals
Reference
B.4 PHP
Object-Oriented Programming
Pick one first, practicing, then continue to the other
Mashup API
Pick one first, practicing, then continue to the other
Testing
Pick one first, practicing, then continue to the other
Design Pattern
B.5 Development Flow
Version Control
- Install Git
- Register at Github
- Install one Git Client (I would like to recommend SmartGit)
- Read Git Tutorial by Atlassian or practice Interactive Git Tutorial by Github
Team Collaboration
- Communication : Slack
- Task Management : Trello | Asana
- Project Management : Basecamp (freemium) | JIRA (paid)
Continuous Integration
C. Expert 
C.1 Javascript
Front-End Framework
Mastering one at a time, then you can continue to learn the others
Full-Stack Framework
Mastering one at a time, then you can continue to learn the others
C.2 PHP
Framework
Mastering one at a time, then you can continue to learn the others
C.3 Development Principles
Read them all
License
This work is under Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.
You are free to share and adapt, but MUST give credit back to me.
The cute "Surabaya" city icon above is taken from here.
Appendix
Click here to see
Certification
Nice to Know
- UML
- Domain-Driven Design
- Web Standard by Google
- Test-Driven Development
- Object-Oriented Analysis & Design
Curated Lists
Future
rkukuh