Added npm problem fixes

Author: jonasschmedtmann

README.md

@@ -12,34 +12,38 @@ Plus, I made all the course slides available for download, to make it easier to
 
 **A:** If you're new to GitHub and just want to download the complete package, hit the green button saying "Clone or download", choose the "Download ZIP" option, and you're good to go.
 
-### Q2: I'm stuck in one of the projects. Where do I get help?
+### Q2: One of the NPM packages is not working (compiling Sass, live-reload, etc). How to fix it?
 
-**A:** Have you extensively tried fixing the problem on your own? If you failed at fixing it, please post a detailled description of the problem to the Q&A area of that video over at Udemy, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help as fast as possible! Please don't send me a personal message on Udemy to fix coding problems.
+Unfortunately, this is quite common. I listed some possible fixes [in this document](npm-fixes.md).
 
-### Q3: You keep mentioning your resources page. Where can I find it?
+### Q3: I'm stuck in one of the projects. Where do I get help?
+
+**A:** Have you extensively tried fixing the problem on your own? If you failed at fixing it, please **post a detailled description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help as fast as possible! Please don't send me a personal message or email to fix coding problems.
+
+### Q4: You keep mentioning your resources page. Where can I find it?
 
 **A:** It's on my website at <http://codingheroes.io/resources>. You can subscribe for updates 😉
 
-### Q4: What VSCode theme are you using?
+### Q5: What VSCode theme are you using?
 
 **A:** I use Oceanic Next (dimmed bg) for all my coding and course production. [Here is my complete VSCode setup](vscode-setup.md).
 
-### Q5: The videos don't load, can you fix it?
+### Q6: The videos don't load, can you fix it?
 
 **A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy's platform, and sometimes they have small technical issues like this one. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us). Also, don't forget to select the HD option in the video player.
 
-### Q6: Are the videos downloadable as well?
+### Q7: Are the videos downloadable as well?
 
 **A:** Yes, I made all videos downloadable on the Udemy platform so you can learn even without an internet connection. To download a video, use the settings icon in the right bottom corner of the video player.
 
-### Q7: I love your courses and want to get updates on new courses. How?
+### Q8: I love your courses and want to get updates on new courses. How?
 
 **A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/newsletter). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥
 
-### Q8: Can I connect with your other students in some way?
+### Q9: Can I connect with your other students in some way?
 
 **A:** Yep, I thought about this! I started quite an active Discord chatroom for you to chat with other students, help each other out or just hang out with like-minded people. You can [join using this invite](https://discord.gg/0ocsLcmnIZqxMSYD).
 
-### Q9: How do I get my certificate of completion?
+### Q10: How do I get my certificate of completion?
 
 **A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the small trophy icon on the course overview page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).

npm-fixes.md

@@ -0,0 +1,51 @@
+# Possible fixes for common problems with NPM packages
+
+## Q1: My Sass isn't compiling at all or the `-w` flag is not working
+
+### Solution 1
+
+This may be because you're using a different `node-sass` version than the one I use in the videos. Please uninstall `node-sass` with:
+
+`npm uninstall node-sass --save-dev`
+
+Then install version `4.5.3` with;
+
+`npm install node-sass@4.5.3 --save-dev`.
+
+### Solution 2
+
+This is more of a workaround if Solution 1 doesn't work. You can install a package called `nodemon` to run node.js code directly. Install it with:
+
+`npm install nodemon --save-dev`
+
+Then in the `package.json` file, change the `watch:css` task to:
+
+`"watch:sass": "nodemon -e scss -x \"npm run compile:sass\""`
+
+### Solution 3
+
+If you're using VSCode, the defualt autosave setting is that it saves your file each time you stroke a key. This made me run into some errors in the videos. The fix is to change the autosave setting to `onFocusChange`. You can do so by copying the following instruction to the settings (panel on the right side):
+
+`"files.autoSave": "onFocusChange"`
+
+## Q2: Autoprefixer isn't working on Windows
+
+On Windows you will have to escape the `"` in the autoprefixer task, just like this:
+
+`"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.concat.css -o css/style.prefix.css"`
+
+## Q3: General problems
+
+If your NPM packages don't work at all, please make sure you have at least node `v6.x.x` installed on your computer. You can check your verison with `node -v`.
+
+You can also try setting all your NPM packages to the same versions used in the videos. I works like described in **Q1** of this document (`node-sass` example). These are the versions I used in the videos:
+
+```
+"autoprefixer": "^7.1.4",
+"concat": "^1.0.3",
+"node-sass": "^4.5.3",
+"npm-run-all": "^4.1.1",
+"postcss-cli": "^4.1.1"
+```
+
+I will keep this document updated if more issues arise.