I have done my research on combining JS and CSS files. I am still a novice when it comes to all of this so the explanation like some of these minifies and compilers at Github and Google don't really make sense in normal English.
I have the following CSS files:
These are my JS files:
Which tool should I use and if someone could explain step by step that would be great.
If you want to just have one big js and cs file then you can just combine them into ones by copying and pasting the content of each file one after another, in the same order you would include them on a page. Keep in mind that you do not need bootstrap if you are including bootstrap.min file after it. It's the same file, only the one with .min in name is minified version of it. Same goes for js files.
Then if you want... you can run a tool for compression like this one: http://refresh-sf.com/yui/
and hope everything works fine.
This recipe can be found in it's original form on Stack Over Flow.