
The most essential list of resources for Front-End beginners - daviddiasfront
https://github.com/thedaviddias/Resources-Front-End-Beginner
======
sillysaurus3
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](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://github.com/preboot/angular-webpack)):

[https://i.imgur.com/vb4uDMw.png](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](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.

------
michaelwu
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.

~~~
nallerooth
+1 for eslint.

When it comes to typescript, however, I believe that it's better to learn pure
javascript first. Understanding -why- typescript is useful has a lot of value,
and saying that you know typescript without having spent time using javascript
would raise all kind of warning flags during an interview (focus on what's
cool/trendy over deeper knowledge and a lack of desire to fully understand the
environment in which you work, to mention some).

Also, a beginner frontend developer who reads a list of HTML tutorials will
probably not spend a lot of time in "huge projects" in the beginning of their
career.

~~~
daviddiasfront
@michaelwu, tried to keep it simple for a beginner, and I tried to follow the
"web developer roadmap 2017".

ESLint and typescript are more for an intermediate IMO, another list will
follow this one and will surely mention ESLint and TypeScript.

~~~
nallerooth
That's understandable, and to some degree a good decision. But then eslint
sometimes help you understand why something is broken, which is especially
beneficial to beginners.

Whether to include eslint or not may be worthy of discussion, but since both
options have valid points I'll be happy to leave this discussion as is.

------
petercooper
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.

~~~
daviddiasfront
Your welcome! Don't hesitate to do a PR. Which newsletter are you managing?

~~~
petercooper
From that list, I edit Frontend Focus and JavaScript Weekly.

~~~
daviddiasfront
Awesome, I subscribed these newsletters since a long time. Really good job!
I'm always recommending these newsletters to my team / students. For people
who don't spend a lot of time doing research (some students and professionals
I know), it's a great way for them to have a short "overview" of what is
happening and which articles are more interesting at the moment. Please keep
it up!

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

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

~~~
petercooper
As an Englishman, I think it's probably for the best. No-one would recognize
the English flag anyway, and the UK flag looks kinda bleugh at small sizes.

~~~
Omnius
It just indicates that its English with the proper spelling of words. Color,
Grey, Coffee (tea <\-- doesn't even look like the correct word).

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

~~~
exodust
"Can't do much without those"... Speak for yourself. Anything in frontend is
possible without ever touching Node.

~~~
nallerooth
It is possible, but it's not the usual work flow for frontend developers
(given the huge number of installs of things like react, angular, etc).

~~~
exodust
Sure, and I'd like to learn it I guess, but I'm too busy looking at
interesting stuff in frontend like working with audio and getting webgl things
happening. Frontend has diverse meaning these days.

