👌 IMPROVE: Contribution Docs + Fix Frontend RoadMap (#498)

* 📦 NEW: No auto formatting for JSON in VSCode

* 👌 IMPROVE: lingo for several libraries/software

* 👌 IMPROVE: alt text for Web Developer Roadmap Introduction

* 👌 IMPROVE: alt text for Frontend Roadmap

* 👌 IMPROVE: alt text for Back-end Roadmap

* 👌 IMPROVE: alt text for DevOps Roadmap

*  📖 DOC: make contribution fun again with more details

* 🐛 FIX: names of several libraries/software

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "[json]": {
+        "editor.formatOnSave": false,
+        "editor.formatOnPaste": false
+    },
+}

project/frontend-map.json

@@ -1 +1 @@
-{"mockup":{"controls":{"control":[{"ID":"0","measuredH":"40","measuredW":"149","properties":{"bold":"true","size":"32","text":"Front-end"},"typeID":"Label","x":"563","y":"121","zOrder":"54"},{"ID":"1","h":"74","measuredH":"73","measuredW":"18","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":8,"x":8,"y":0},"p1":{"length":0.4979530082684307,"x":0.45894941634241254,"y":0.19319066147859923},"p2":{"length":73,"x":0,"y":73},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"19","x":"637","y":"47","zOrder":"55"},{"ID":"2","h":"61","measuredH":"60","measuredW":"15","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":2,"x":2,"y":0},"p1":{"length":0.4752342503759216,"x":0.46391752577319545,"y":-0.1030927835051546},"p2":{"length":61.84658438426491,"x":15,"y":60},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"626","y":"177","zOrder":"56"},{"ID":"3","measuredH":"26","measuredW":"147","properties":{"bold":"true","size":"18","text":"Learn the Basics"},"typeID":"Label","x":"589","y":"244","zOrder":"57"},{"ID":"21","measuredH":"25","measuredW":"168","properties":{"bold":"true","size":"17","text":"Basics of JavaScript"},"typeID":"Label","x":"589","y":"424","zOrder":"66"},{"ID":"24","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"556","y":"424","zOrder":"67"},{"ID":"25","measuredH":"25","measuredW":"118","properties":{"bold":"true","size":"17","text":"Basics of CSS"},"typeID":"Label","x":"589","y":"378","zOrder":"62"},{"ID":"26","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"378","zOrder":"63"},{"ID":"27","measuredH":"25","measuredW":"100","properties":{"bold":"true","size":"17","text":"Learn HTML"},"typeID":"Label","x":"589","y":"330","zOrder":"58"},{"ID":"28","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"330","zOrder":"59"},{"ID":"29","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"1"},"typeID":"Label","x":"563","y":"332","zOrder":"60"},{"ID":"30","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"2"},"typeID":"Label","w":"10","x":"563","y":"380","zOrder":"64"},{"ID":"31","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"3"},"typeID":"Label","w":"10","x":"564","y":"426","zOrder":"68"},{"ID":"33","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"322","zOrder":"53"},{"ID":"34","h":"55","measuredH":"54","measuredW":"9","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":3,"x":3,"y":0},"p1":{"length":0.529252928988914,"x":0.510715363718684,"y":0.13884696649562314},"p2":{"length":54,"x":0,"y":54},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"10","x":"655","y":"277","zOrder":"38"},{"ID":"36","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"370","zOrder":"61"},{"ID":"40","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"544","y":"417","zOrder":"65"},{"ID":"44","h":"23","measuredH":"22","measuredW":"48","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":48,"x":48,"y":0},"p1":{"length":0.4652808414804901,"x":0.4652789342214823,"y":-0.001332223147377283},"p2":{"length":22,"x":0,"y":22},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"49","x":"792","y":"320","zOrder":"52"},{"ID":"45","measuredH":"25","measuredW":"322","properties":{"size":"17","text":"Don't worry about making them pretty yet"},"typeID":"Label","x":"859","y":"363","zOrder":"109"},{"ID":"46","h":"4","measuredH":"3","measuredW":"59","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":59,"x":59,"y":0},"p1":{"length":0.4929592777882592,"x":0.4929203539823009,"y":-0.006194690265486749},"p2":{"length":3,"x":0,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"60","x":"794","y":"347","zOrder":"51"},{"ID":"47","measuredH":"25","measuredW":"514","properties":{"size":"17","text":"Dividing page into sections and how to structure the DOM properly"},"typeID":"Label","x":"854","y":"302","zOrder":"110"},{"ID":"48","h":"49","measuredH":"48","measuredW":"61","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":61,"x":61,"y":0},"p1":{"length":0.4585249091872984,"x":0.45522128005575574,"y":-0.054942502032756454},"p2":{"length":48,"x":0,"y":48},"rightArrow":"false","shaLine truncated
+{"mockup":{"controls":{"control":[{"ID":"4","measuredH":"27","measuredW":"79","properties":{"text":""},"typeID":"TextInput","w":"257","x":"410","y":"166","zOrder":"0"},{"ID":"5","h":"147","measuredH":"146","measuredW":"14","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":14,"x":14,"y":0},"p1":{"length":0.5865162746954035,"x":0.5864611260053622,"y":0.008042895442359291},"p2":{"length":146,"x":0,"y":146},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"15","x":"871","y":"3443","zOrder":"1"},{"ID":"6","h":"105","measuredH":"104","measuredW":"33","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":2,"y":0},"p1":{"x":0.6327349725048985,"y":0.3148663169205486},"p2":{"x":0,"y":104},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"34","x":"783","y":"1949","zOrder":"2"},{"ID":"7","h":"147","measuredH":"146","measuredW":"14","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":14,"x":14,"y":0},"p1":{"length":0.5865162746954035,"x":0.5864611260053622,"y":0.008042895442359291},"p2":{"length":146,"x":0,"y":146},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"15","x":"865","y":"3635","zOrder":"3"},{"ID":"8","h":"4","measuredH":"3","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":75.05997601918082,"x":75,"y":3},"p1":{"length":0.3617013511163557,"x":0.36110618684630386,"y":-0.02074100336819713},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"210","y":"3624","zOrder":"4"},{"ID":"9","h":"29","measuredH":"28","measuredW":"204","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":204,"x":204,"y":0},"p1":{"length":0.5395274381637952,"x":0.539516737981374,"y":0.003397936068462103},"p2":{"length":28,"x":0,"y":28},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"205","x":"375","y":"3596","zOrder":"5"},{"ID":"10","h":"5","measuredH":"4","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":75.1065909225016,"x":75,"y":4},"p1":{"length":0.3617013511163557,"x":0.36110618684630386,"y":-0.020741003368197126},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"199","y":"3585","zOrder":"6"},{"ID":"11","h":"7","measuredH":"6","measuredW":"81","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":81.2219182240853,"x":81,"y":6},"p1":{"length":0.39570990272974865,"x":0.3956343792633015,"y":-0.007730786721236948},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"82","x":"193","y":"3544","zOrder":"7"},{"ID":"12","h":"36","measuredH":"35","measuredW":"89","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":95.63472172804184,"x":89,"y":35},"p1":{"length":0.4141690643745274,"x":0.3787677176742842,"y":-0.1675441133931154},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"90","x":"182","y":"3502","zOrder":"8"},{"ID":"13","h":"2","measuredH":"1","measuredW":"190","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":190,"x":190,"y":0},"p1":{"length":0.5395274381637957,"x":0.5395167379813743,"y":0.003397936068462092},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"191","x":"379","y":"3586","zOrder":"9"},{"ID":"14","h":"30","measuredH":"29","measuredW":"176","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":178.3732042656632,"x":176,"y":29},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684620896},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"177","x":"383","y":"3547","zOrder":"10"},{"ID":"15","h":"15","measuredH":"14","measuredW":"207","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":207,"x":207,"y":0},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621147},"p2":{"length":14,"x":0,"y":14},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"208","x":"370","y":"3421","zOrder":"11"},{"ID":"16","h":"15","measuredH":"14","measuredW":"191","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":191.51240168720145,"x":191,"y":14},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.003397936068461866},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"192","x":"376","y":"3397","zOrder":"12"},{"ID":"17","h":"1","measuredH":"0","measuredW":"175","properties":{"color":"2848996","curvature":"0","direction":"top"Line truncated

readme.md

@@ -11,19 +11,19 @@ Below you find a set of charts demonstrating the paths that you can take and the
 
 ## 🚀 Introduction
 
-![](https://i.imgur.com/OZUOUtI.png)
+![Web Developer Roadmap Introduction](https://i.imgur.com/OZUOUtI.png)
 
 ## 🎨 Frontend Roadmap
 
-![](./images/frontend-v2.png)
+![Frontend Roadmap](./images/frontend-v2.png)
 
 ## 👽 Back-end Roadmap
 
-![](./images/backend.png)
+![Back-end Roadmap](./images/backend.png)
 
 ## 👷 DevOps Roadmap
 
-![](./images/devops.png)
+![DevOps Roadmap](./images/devops.png)
 
 ## 🚦 Wrap Up
 
@@ -38,7 +38,15 @@ If you think any of the roadmaps can be improved, please do open a PR with any u
 
 ## 👫 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.		
+> _**PRE-REQUISITE**: The roadmaps are built using [Balsamiq →](https://balsamiq.com/products/mockups/)_
+
+1. 🤔 **WHERE**: Project file can be found at [`/project`](./project) directory
+2. ⬇️ **IMPORT**: To modify any of the roadmaps, open Balsamiq, click <kbd>Project</kbd> ❯ <kbd>Import</kbd> ❯ <kbd>Mockup JSON</kbd>, put the relevant JSON file data from any roadmap in the [`/project`](./project) directory in Balsamiq
+3. 😮 **WHAT**: This will open the relevant roadmap for you. Now update it (double-click to edit text) and make all the changes
+4. ⬆️ **EXPORT**:
+    1. 🖨 **JSON**: Export Mockup to JSON, click <kbd>Project</kbd> ❯ <kbd>Export</kbd> ❯ <kbd>Mockup to JSON</kbd> and update it in the [`/project`](./project) directory
+    2. 🖼 **IMAGES**: Before exporting images, make the background transparent (click <kbd>Project</kbd> ❯ <kbd>Export</kbd> ❯ <kbd>Use Transparent Background</kbd>). Now export the images (click <kbd>Project</kbd> ❯ <kbd>Export</kbd> ❯ <kbd>All Mockups to PNG</kbd>). Update the relevant images (keep the same name so you don't have to edit the `README.md` file) in the [`/images`](./images) directory
+5. 🚀 **PR**: Create a Pull Request for this repository (make sure to explain what you changed in the description)
 
 - Open pull request with improvements
 - Discuss ideas in issues