The most essential list of resources for Front-End beginners

Try webstorm:

   brew cask install webstorm

It'll look like this: https://i.imgur.com/z2euynI.png

Now tap the shift key twice. It'll pop up omni completion. You can type any partial filename, any partial symbol name, etc, and it will take you to it.

Note the ten thousand quality of life improvements. Example: when looking at a CSS file, #ff0000 will render with a red background color. (The background color of the text is literally the color that the text represents.) And clicking on it brings up a color swath.

Changes appear on your website as quickly as you can type. When you're editing solely HTML and CSS, there's no such thing as a refresh. No need. You just type.

Here's an Angular 2 project (https://github.com/preboot/angular-webpack):

https://i.imgur.com/vb4uDMw.png

It's a bit hard to tell, but webstorm has deep awareness of what your code represents. Notice the tags like "description", "moduleDef", "assertion", etc. Those are hints about what each function expects.

Want to see documentation? Hover your mouse over any symbol. For example, hovering over "it" gives:

https://i.imgur.com/4Xv4BMb.png

I could go on for days. You may have heard of the Brackets IDE, but in my opinion webstorm completely wipes the floor with them. Live Edit (hot reload) is far better... Actually, rather than list out ten things, I'll just say "everything is far better."

Not everything I've demoed here is turned on by default. You should expect to put a day or two of work into configuring your editor. But once you do, you'll be a monster of productivity.

Have I mentioned that Webstorm has a Vim plugin? Preferences -> Plugins, "vim", search, install, done.