I don't know if this is appreciated here, but you see this in other forums. Below is a list of tools I have collected and use frequently. I thought it might be helpful for others. If you would like to add to this list just post below and I will update it.
Google Calculator - https://www.google.com/search?q=calculator Just search calculator. Better yet, just type the math problem into the address bar when your search engine is google. I like this better than my os calculator.
PX to EM Converter - http://pxtoem.com/ Pixels, EMs, Percents, Points... It's all relative.
Dirty Markup - https://www.10bestdesign.com/dirtymarkup/ Hubspot's old design manager used 4 space tabs, the new one uses 2 space tabs, my notepad uses 8 space tabs and my text editor uses etc. Also there are times when you have to go through svg markup, someone elses markup, or generated markup. This tools is great for setting markup straight. pay attention to the settings on the sidebar though, in most cases you will want the output to be code fragment, full page adds html, head, and body tags.
DiffNow - https://diffnow.com/ Paste a different version of a script to each side, submit, and DiffNow will tell you the difference. If you have ever fumbled script versions like I have then you know the power in this.
JSFiddle - http://jsfiddle.net/ I still prefer to build my modules in JSFiddle then plug them into Hubspot. Having hte preview on the same page and not having to worry about all of the skipping and freezing bugs makes it so much faster to get the functionality squared away.
w3schools.com - https://www.w3schools.com/ try searching 'text-align w3schools' in google. This is how I quicky reference html and css directly from w3schools in google. The first result is your uncle, and he will tell you what you need to know.
Google Maps API Styling Wizard - https://mapstyle.withgoogle.com/ I read a book on the Google Maps API a couple a years ago and it kind of became my thing to deliver cleverly style maps to my clients. This app lets you choose your styles then gives you the json to use in your google maps function.
Codecademy - https://www.codecademy.com/ Free educational platform for coding. Work in real modules with guided instructions, hint, and live preview. I have spent hundreds of hours on the site.
CodeWars - https://www.codewars.com/ Not for the meek. You have to pass a test in your chosen language before being allowed access. Battle it out with a large community of developers by solving coding problems of different difficulties and in different languages. It's free.
Coggle - https://coggle.it 'a freeware mind-mapping web application'. hierarchically structure information (like a site map) through branching.
Toggl - https://toggl.com/ Mostly because it rhymes with Coggle. Also I use this for time management.
freedcamp - https://freedcamp.com/ I've used all of the project management softwares. Some are great but expensive, others are horrible and expensive. I prefer freedcamp and it's comparable functionality, along with all of its add ons.
Just a word of caution on the media queries on that page, while they're useful if you're building say a web app that has to look a certain way for specific devices. You really should be using media queries that are not that limiting, and are design specific not device specific. Even says it on the page.
Though CSS-Tricks itself is probably the best resource on the whole list.
Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.