What languages, frameworks and libraries should I learn in order to start front-end development?
I want to start front-end development. So, my question is what is the list of languages, frameworks and libraries I should be familiar with?
Executive Product Leader & Mentor for High-End Influencers and Brands @ mevrael.com
- Repeat 1st until you won't master it
- Node, npm, some build tools like rollup.js with at least babel plugin
- Learn how to write custom node scripts and automate your front-end. Don't use gulp/grunt/bower/whatever
- Don't learn any frameworks, learn software architecture and engineering principles, paradigms, design patterns, best practices, algorithms. Take a look onto MVC.
- For styling start from SASS but keep learning all the latest CSS standards and features. Take a look into ITCSS and BEM. Browse the source code of Bootstrap 4, try to configure BS4 with SASS and write custom code on top of it.
- For HTML - HTML5, HTML5.1, Web components, Web accessibility, start using semantics as much as possible, custom tags and attributes are ok.
- Try to build your own simple tempalting engine to understand how it works
- Try to build own small framework/library, you can take a look into source of Monkberry, Vue.js, React
- Try to build own simple routing, you can also play with latest browser History API and pushState
- Try to build custom vanilla JS simple app like TodoMVC from scratch
Now you can waste time learning any of thousands of frameworks around but I believe you won't finish my starter list until you will find a job as a jr. front-end engineer where you will have to learn some tools, frameworks which company is using anyway.
@mevrael ah I see. I guess it is true that most source code is not written to be read over with complete understanding. Docs definitely do help. I do want to create my own CLI for some projects but I think I still haven't rooted my knowledge yet. I guess your list is more like an overall than just getting started. I do wish to still meet some of these goals myself.
While the others wrote great answers, I really want to encourage you to use the Hashnode search before asking a question, because we already have some stuff to read over here, for example:
Let me make a tl;dr for you:
- There are only three things to learn, which are standardized: HTML, CSS and JS.
- Forget about frameworks and libraries for now. You will not learn the essence with them and you will never become good if you only rely on tools without knowing the basics. Libraries will come and go, but the basics will always be the same. You should only learn a library or framework to abstract away tedious stuff you already know and understand and only if it solves a particular problem! Look, learning tools at your stage is like trying to take a shortcut in a race. You will see results faster, but you will never be the best runner and there will be some point where you will not be able to use a shortcut any more; that might be the most crucial situation and you are going to fail then. For example when you learned Angular, but the company really needs some React. There are millions of libraries. Learning one will get you nowhere, when another one is a better fit for the job. Choose the tool for the job.
- Do not learn stuff you do not need. For front end, you will not need any knowledge about HTTP, server-side programming, like Node.JS, or databases. Learning stuff like that will just keep you away from things you really should learn. Also forget about some fancy programming patterns. Only learn a pattern when you need it in a particular situation. Learning for the sake of learning will only result in you forgetting the stuff quickly so you will have to re-learn things.
There are many ways how to go about learning the ropes, but there is only thing which you always have to do: Stay at it and practice practice practice.
All of the tools, frameworks, libraries, and best practices built on top of them will be much easier to pick up and use, or create for yourself if you have a thorough understanding of the 3 languages the web uses.
I would recommend not getting distracted by learning frameworks or plugins right now. If you have knowledge about the foundation of how the web works, then you will be able to pick up new tools and frameworks with as much difficulty as you would putting on a shirt in the morning. And you may change your tools nearly just as often as you change your shirt, but HTML, CSS, and JS will always be constant ;)
- you can't get anywhere without this.
- again this important to understand core mechanics of front end dev.
- The most important one. I see everyone saying to learn ES6 here but in reality not all browsers support that. You should learn ES5 so most tutorials or classes you find go over this. Once you have this ES6 is a easy.
You should strive to get a taste of it all if or at least most popular items because most jobs offer these.
- Now when I started I learned this second but its strict styling gives you a better build without making so many mistakes at first and starts you off with some structure. Use the CLI.
Angular JS 1
- Now I know angular 2 is out. But many and I mean many jobs ask for this and it is I think a good thing to learn this before learning Angular 2. You will love Angular 2 after learning Angular JS. I suggest not spending too much time here. Just get the basics and move on.
Angular JS 2
- Now this is were new magic comes into play. Typescript 2.0 really bring this framework into the new age of front end. Now As you can see there is a new thing here so look below.
- Most people will argue you should learn this before the other languages. Really it is a personal preference for me to learn it here. Reacts JSX files to me seem backwards to the days that HTML and JS were in the same files. And well they are again. However I would recommend React with Typescript. Since after all React is JS you can use Typescript.
I mentioned learning CSS before and this is where this comes in.
- Is actually a framework but you can just use the CSS like many devs and if you use Angular there is Angular UI which pairs well with bootstrap to have a more complete feel. Angular 2 however will have a good point in using bootstrap with its component based approach.
- To me this has surpassed bootstrap in many ways but it is a little difficult to take in after learning bootstrap. It's very much a completely new approach.
Try to learn
This is something you should take a look at. It always your best interest to learn more than just your job.
- This also is something that is very different in different projects. But it is easy to learn its basic structuring. This is sits on top of Node JS and well you can think of it as connecting your server to your front end.
because every project has them, maybe just read over the docs if not dive in and use them in your personal projects, highly recommend making your own projects. If you want to see some example work check out my github. me.
- I prefer
- Angular 2 uses
- I think was used on Angular 2 Release Candidates but havent checked out A2 full release yet.
- Just a very usefull package manager. You can use others though. This is just specific for NodeJS.
- This is actually really important and most people don't stress this. There are other similar things out there but if you really want to get involved in the community of devs this is the place to be.
I never had anyone lay out a list of things and reasons of why I should learn certain things. I hope this gives you a good outline of how I learned to be a developer. I have been programming for 4 years now. I know some 15? .. 16? languages. Not fluent but I can dabble in many.
I hope this helps :D
I’m a software engineer working on the web, specializing in React & GraphQL. Avid functional programmer and aspiring data scientist
Beyond that, like I said, React, Redux and GraphQL are all amazing cutting edge technologies that are a blast to work with.
There are many different frameworks and libraries and learning everything is practically impossible. If you want to become productive quickly, I would recommend narrowing down the list and picking the best candidate. Other answers provide some very good pointers. I would like to add my own framework to that list - Cx.
I started teaching myself this about 18 months ago, here is what I found:
HTML, CSS and Vanilla JS is first. Only do this for 6 months.
After that I started drawing circles, the inner circle is point one: HTML, CSS and JS.
When I was researching and learning this, I frequently came in touch with words I didn't know. When I was researching css, I saw the words "Sass" and "Less" so added those to my next outer circle. When researching JS I saw words like Babel, TypeScript, so I added those to the circle too.
Then when I reseached "Sass" and "Less" and saw words like "Gulp" and "Grunt", I didn't know what those were, so added them to my next outer circle. When diving deeper into HMTL I saw the word "Jade" (now called Pug) and added it to the next circle.
Then I saw "React", "Angular" etc. etc.
This meant that I kept circling between the three components that make up the web, HTML, CSS and JS, not loosing touch with any of them just spreading my wings further into the technologies that are built upon those three.
Of course I also hit (and am still hitting) absolutely devastating "brick-wall-moments" where I just thought "I won't go any further I can not learn this", but keep at it, water cuts stone because of it's perseverance, not because of it's power.
Try to do as much as hobby projects as you can. All the best.
If you skimp on the basics you'll never really master the advanced stuff. I'd even go as far as saying you shouldn't go beyond HTML/CSS/JS until you are actually frustrated enough to know why people made frameworks and libraries in the first place.
After the trinity I still wouldn't jump into frameworks - first learn a task runner. Learn git and bash if you haven't already.
I'd suggest going with the NodeJS stack; so you're looking at NodeJS, NPM and Grunt or Gulp. Learn how to use those to do common website tasks like minifying and concatenating CSS and JS.
Learn a good templating language for HTML. Learn a preprocessor for CSS. Still stick to vanilla JS. By this stage you will have the skills to efficiently create and maintain a simple, static website. Learn how to deploy it with SFTP, then automated deployment processes. Learn to hack on your
Sooner or later you'll get tired of static content and want to pull data from some endpoint... and after that, frameworks and libraries will come pretty easily.
Above all: make stuff. Have fun.