The most essential list of resources for Front-End beginners

Equally important is a good webdev IDE. I say this as a hardcore vim/emacs user.

Try webstorm:

   brew cask install webstorm

Then run `webstorm foo/` to open the webapp located in folder foo. It works with basically every type of webapp in existence.

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.

Interesting that there is no mention of eslint. I've always found that the best way to learn a new language is to immediately install the linter and its associated plugin for whatever IDE you're using for instant feedback about potential anti-patterns / dangerous code while you work. Also curious that there's no mention of typescript: a lot of companies have already made the transition because it makes huge projects much easier to manage and read.

Thanks for linking to our newsletters! Just one note, the internal link at the top goes to anchor "newsletter" but it's missing the "s" for the link to work. I'll do a PR later if you don't catch it.

The list was added on Product Hunt . You are welcome to support it! https://www.producthunt.com/posts/front-end-beginners-essent...

I'm just disappointed the american flag is used to dictate english articles...

Nice list. I’d also add Node and NPM since you can’t do much front-end without those these days.