Hello! i also did a Spanish version of this article.
You can follow me on my Github Account.
When you enter in the wonderful world of the web, you realize that development is not just a one technology, in fact, exist a ton of languages, frameworks, libraries that we can use day a day in our development.
Right now, I’m going to introduce you in what order is recommended learn the great mass of technologies that are presented to us.
Before beginning, we are going to define in a short way two basics points and keys to understand that, surely, in a future, im going to make a new article talking more about of each tecnology.
So, we are going to explain two main-roles in development.
Front-End Developer: Is the responsible of the visual part of the site. This is not mean that is only a designer, rather the front-end is responsible to joining the information flow so that it is finally visible to the user.
Back-End Developer: Is the responsible to set a communication with the Front-End. He do all the process the incoming information for do operations that converts a site to a merely functional app.
Although there are many more roles, like, Full Stack Developer, Ninja Developer, etcetera, but we are not going to explain all roles in this article.
Now we can start!
HTML
HTML5: With him we build all the site structure, this means, that by using tags we make all the layout and the template. Is not a programming language, is a Markup Language.
CSS
CSS3: With him we set the design or the style of our web site. At equals that Html, Css is not a programming language, rather is a stylesheets language.
JavaScript
Javascript: Is dificult explain what you can do with him because with JavaScript, you can do all the things. However we will define for what was actually created: for add interaction to the web site, this means, the relation of action-effect.
Right now we are good, this three languages are fundamentals for us and his utilization is essential.
Let’s continue…
Maybe this recommendation is not the most purest, however, is still relatively used.
JQuery
Jquery: For a long time was the most used library of the web. A library is a set of functions for a particular purpose. Jquery is a library written in JavaScript To make dynamic and simple modifications in the DOM, then in an another article we can talk about the Document Object Model.
if you know a lot of this, now you can create static sites, this mean, sites that the information is not changing all ther time. The most important thing is that you know how to program, so, now, we can go the better practises.
Smacss
SMACSS: Smacss is not a language or a preprocessor, is a style guide for our organize Css code. I’m going to write a whole new article talking about this technique.
Others methods to organize your Css:
Using preprocessors:
A Css preprocessor is a tool that permits us writing pseudo-code Css that then is gonna to be converted to a native Css with using a tool or program.
Personally i recommend Sass, but exist too others like Stylus, Less, PostCss, etcetera…
Tools:
They are technologies that try to facilitate various tasks, from minify code, to compress images.
Gulp | Grunt | Npm
Gulp: Is a tool written in JavaScript that facilitate you the automaticatation of comuns tasks in the development of application. Similar to Gulp exist Grunt y npm scripts.
Live Reload
Live Reload: Is a tool/extension that detects your website changes and permits you a real time visualization.
Prepros
Prepros: Is a program that allows you do a lot of actions in a automatic way with not programming necesary, for example compile Sass, minify your code, and more. At Prepros exist others programs, personally, i use a lot a program called Koala.
So now we can choose a framework to get more speed development.
A framework is a set of libraries that we must respect the context for the correct use of them.
Css Frameworks:
Bootstrap
Bootstrap: Is the Css framework most popular and used. It is a framework that focuses on the mobile role at development time, prioritizes and facilitates the possibility of realizing a totally Responsive site, that is, adaptable to different screen resolutions, which is not only a detail.
Foundation
Foundation: Like Bootstrap, exist a framework called Foundation. It is very recommended but is not so used like Bootstrap. My recommendation is that you test both and choose the framework that more likes you.
I use Bootstrap. Now im trying another called Skeleton.
Skeleton
Exist another like Semantic UI, Kube, Sussy, blueprint, purecss, etcetera…
JavaScript Frameworks:
Before choosing a Js framework, i recommend you to have a greatknowledge of JavaScript like language, im not saying that you must be a expert or a super ninja, no, but is recommend to have very present the bases of the language for your adecuation in the framework.
Angular
Angular: Is a very popular framework for the Front-End development. Was created by Google, and allows you create Simple Page Applications.
Ember.Js, Vue.Js, Backbone.Js
Like Angular, exist very popular frameworks like Ember.Js, Vue.Js, Polymer etc...
The same that i said before, test each framework and choose your favourite.
JavaScript Libraries:
React.Js
React.Js: I strongly recommend that you use your time in learning it. React is not a framework, it is a library created and maintained for Facebook for component creations, focused on creating user interfaces (UI).
Polymer.Js
Polymer: Is a librarie used for the front-end development that, whith Html, Css and Javascript allows you to create web components.
While there are more things to learn, such as Browserify, Webpack, Flux, Redux, or to focus on new versions of JavaScript, we will leave it with this. Knowing a library or framework is already more than good. F_or example, you can use Angular but not React or vice versa._
Now we can go to the Back-End: In this case is not necessary to know all the languages or frameworks that I am going to show you, you can test each technology and choose the one who more passion you.
php
PHP: Is a interpreted programming language that works in the server side for the creation of dynamic websites. Right now it is on the 7 version, so is a good language to follow. When you have a good knowledge you can try and go to a framework like CodeIgniter, Phalcon, Yii, Symfony or the most recommended: Laravel.
Django
Python: Python is not a web-oriented language, but exist very cool frameworks to develop our backend. When you have a good knowledge you can try and go to a framework like Flask, Pyramid, Web2Py or the most recommended: Django.
Ruby on Rails
Ruby: The same that happen with Python happen with Ruby. When you have a good knowledge you can try and go to a framework like Sinatra or the most recommended: Ruby on Rails (ROR).
Spring
Java: Hated by many, loved by others, is certainly a very powerful and used language. When you have a good knowledge you can try and go to a framework like Grails, Play or the most recommended: Spring MVC.
.NET
C#/.NET: C# It is an object-oriented programming language, and .NET is a framework. It is possible to program on the server side with ASP.NET.
Go
Go: It is a relatively new language created by Google. It is a language that seems to have a future.
Node.Js
Node.Js: It is not a framework or a library, much less a programming language. Is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Is asynchronous and extremely fast. Personally is my favourite tecnologie in time to build my Back-End. When you have a good knowledge in JavaScript you can try and go to a framework like Hapi, Koa, Sails.Js or the most recommended: Express.Js
DataBases: When talking about web applications, and especially back-end, you should consider the use of database.
MySQL
MySQL: It is a used relational database management system.
MariaDB
MariaDB: It is a database management system derived from MySQL.
PostgreSQL
PostgreSQL: It is an object-oriented and free relational database management system.
MongoDB
MongoDB: It is the leading NoSQL database allowing sites to be more agile and scalable.
Redis
Redis: It is an in-memory database engine, based on hashed table storage.
Firebase
Firebase: It is a mobile platform developed by Google that allows you to develop apps of high quality and speed.
GraphQL
GraphQL: It is a query language to establish a communication by the server.
Learn to consume Api’s, invest your time in learning programming paradigms, for example: Object-oriented, Functional, Reactive, techniques or methods such as: MVC, among others.
And a long Etcetera.
If you read all, you maybe are you like this right now:
However, do not rush into learning everything, in learning you can’t skip stages. Go slow, practise every day, and choose the the tecnologies that you love. improve every day and devote yourself to the technologies you like and help you develop your sites. You do not have to try to learn everything, it’s very difficult, very few people, to say nothing, embrace everything.
For my part I will try to explain in a simple way several of these technologies so you understand them!
Here I leave you a repository of GitHub with a lot of material on the subject!
https://github.com/moklick/frontend-stuff
Please share it!