Hello there,
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?
Start with HTML, add CSS, then move on to vanilla JavaScript (including ES6). Don't start with frameworks and libraries before you know the trinity. I'd actually say that HTML and CSS are more important as fundamental skills - if you don't know what HTML tags are for, you'll waste a lot of time recreating functionality in JS. If you don't know how CSS works, you'll spend a lot of time debugging simple problems... and so on.
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 .htaccess file.
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.
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.
IMO you need to focus on learning 3 technologies: HTML, CSS, and JavaScript.
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 ;)
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.
Well I am no expert but I can suggest what to do since I do full stack javascript. Here is a list of what I would learn in order of importance.
You should strive to get a taste of it all if or at least most popular items because most jobs offer these.
Ember JS
Angular JS 1
Angular JS 2
Typescript
React JS
I mentioned learning CSS before and this is where this comes in.
Bootstrap
Google's Material
This is something you should take a look at. It always your best interest to learn more than just your job.
Node JS
Express JS
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 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
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 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.
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.
This YouTube channel and this Medium blog is good to start from
While I am wholeheartedly on board with React, Redux and GraphQL, I think the most important thing to learn is JavaScript, which is no easy task, especially with ES2015 being such an enormous update. Once you know the language inside and out, learning nearly any framework or library is very easy.
Beyond that, like I said, React, Redux and GraphQL are all amazing cutting edge technologies that are a blast to work with.
K
Ha!
Rangaraj Shanmugam
To start Front end development, you just need some basic knowledge in HTML(HTML5), css(css3), javascript, jQuery. but to master it, you need to practice a lot in the above technologies. nowadays, you can see a new framework every day. so pick a framework/library in javascript like angularjs, react js. and master in it. so if you have very good knowledge in one framework, i think it won't be difficult to learn another one. also it is useful to understand some css frameworks like bootstrap or foundation. it is good to have some knowledge in css preprocessors like SASS,Stylus,LESS.
Try to do as much as hobby projects as you can. All the best.