Merge 6c4386ed7d into 16a04a7137

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+._*
+Thumbs.db
+*.sublime-project
+*.sublime-workspace
+.idea

README.md

@@ -1,51 +0,0 @@
-![Web Developer Roadmap](http://i.imgur.com/GyvcunJ.png)
-
-> Roadmap to becoming a web developer in 2017
-
-Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops guy. I made these charts for an old professor of mine who wanted something to share with his college students to give them a perspective.
-
-If you think that these can be improved in anyway, please do suggest.
-
-## 🚀 Introduction
-
-![](http://i.imgur.com/bHXFInv.png)
-
-## 🎨 Frontend Roadmap
-
-![](http://i.imgur.com/ppkDVJp.png)
-
-## 👽 Backend Roadmap
-
-For the backend, personally I would prefer Node JS and PHP-7 for the full time plus I have been experimenting lately with Go and I quite like it. Apart from these, if I have to choose another one, I would go for Ruby. However this is just my personal preference, you can choose any of the shown languages and you will be good.
-
-![](http://i.imgur.com/64Ibv6E.png)
-
-## 👷 DevOps Roadmap
-
->Will be added any minute now.
-
-<br>
-
-## 🚦 Wrap Up
-
-If you think any of the roadmaps can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
-
-## ☑ TODO
-
-- [X] Add Frontend Roadmap
-- [X] Add Backend Roadmap
-- [ ] Add DevOps Roadmap (in progress)
-- [ ] Add relevant resources for each
-
-## 👬 Contribution
-
-The roadmaps are built using [Balsamiq](https://balsamiq.com/products/mockups/). Project file can be found at `/ROADMAPS.bmpr`, open it in balsamiq, do the necessary modifications and create a PR.
-
-- Open pull request with improvements
-- Discuss ideas in issues
-- Spread the word
-- Reach out to me directly at kamranahmed.se@gmail.com or on twitter [@kamranahmedse](http://twitter.com/kamranahmedse)
-
-## Licence
-
-[![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](http://creativecommons.org/licenses/by/4.0/)

project/disclaimer.json

@@ -0,0 +1 @@
+{"mockup":{"controls":{"control":[{"ID":"119","h":"274","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"911","x":"223","y":"170","zOrder":"0"},{"ID":"120","measuredH":"40","measuredW":"170","properties":{"bold":"true","size":"32","text":"Disclaimer!"},"typeID":"Label","x":"245","y":"190","zOrder":"1"},{"ID":"121","measuredH":"32","measuredW":"856","properties":{"size":"24","text":"The purpose of this roadmap is to give you an idea about the landscape and to"},"typeID":"Label","x":"245","y":"246","zOrder":"2"},{"ID":"123","measuredH":"32","measuredW":"833","properties":{"size":"24","text":"guide you if you are confused about what to learn next and not to encourage"},"typeID":"Label","x":"245","y":"282","zOrder":"3"},{"ID":"124","measuredH":"32","measuredW":"825","properties":{"size":"24","text":"you to learn what is hip and trendy. You should *grow some understanding* of"},"typeID":"Label","x":"245","y":"317","zOrder":"4"},{"ID":"125","measuredH":"32","measuredW":"816","properties":{"size":"24","text":"*why one tool would be better suited for some cases than the other and*"},"typeID":"Label","x":"245","y":"353","zOrder":"5"},{"ID":"126","measuredH":"32","measuredW":"710","properties":{"size":"24","text":"*remember hip and trendy never means best suited for the job*"},"typeID":"Label","x":"245","y":"389","zOrder":"6"}]},"measuredH":"444","measuredW":"1134","mockupH":"274","mockupW":"911","version":"1.0"}}

readme.md

@@ -0,0 +1,55 @@
+![Web Developer Roadmap](https://i.imgur.com/oxsayps.png)
+
+> Roadmap to becoming a web developer in 2018
+
+Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. I made these charts for an old professor of mine who wanted something to share with his college students to give them a perspective.
+
+<sub>Check out my [blog](http://kamranahmed.info) and say "hi" on [Twitter](https://twitter.com/kamranahmedse).</sub>
+
+## Disclaimer
+> The purpose of this roadmap is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would better suited for some cases than the other and remember hip and trendy never means best suited for the job
+
+## 🚀 Introduction
+
+![](https://i.imgur.com/OZUOUtI.png)
+
+## 🎨 Frontend Roadmap
+
+![](./images/frontend-v2.png)
+
+## 👽 Back-end Roadmap
+
+![](./images/backend.png)
+
+## 👷 DevOps Roadmap
+
+![](./images/devops.png)
+
+## 🚦 Wrap Up
+
+If you think any of the roadmaps can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
+
+## ☑ TODO
+
+- [X] Add Frontend Roadmap
+- [X] Add Backend Roadmap
+- [X] Add DevOps Roadmap
+- [ ] Add relevant resources for each
+
+## 👬 Contribution
+
+The roadmaps are built using [Balsamiq](https://balsamiq.com/products/mockups/). Project file can be found at `/project` directory. To modify any of the roadmaps, open Balsamiq, click **Project > Import > Mockup JSON**, it will open the roadmap for you, update it, upload and update the images in readme and create a PR.		
+
+- Open pull request with improvements
+- Discuss ideas in issues
+- Spread the word
+- Reach out with any feedback [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social&label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse)
+
+## Sponsored By
+
+- [Hackr.io - Find & Share the Best Online Programming Courses & Tutorials](https://hackr.io)
+- [Highig - Think and its done](http://highig.com/)
+
+## License
+
+[![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)