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. 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. Front-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. Back-End Developer: Although there are many more roles, like, , etcetera, but we are not going to explain all roles in this article. Full Stack Developer, Ninja Developer Now we can start! HTML 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. HTML5 : CSS 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. CSS3 : 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. Javascript : 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 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 . Jquery : 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 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. SMACSS : Others methods to organize your Css: BEM , OOCSS , etcetera… Using preprocessors: A Css preprocessor is a tool that with using a tool or program. permits us writing pseudo-code Css that then is gonna to be converted to a native Css Personally i recommend , but exist too others like , , , etcetera… Sass Stylus Less PostCss Tools: They are technologies that try to facilitate various tasks, from minify code, to compress images. Gulp | Grunt | Npm Is a tool written in JavaScript that facilitate you the automaticatation of comuns tasks in the development of application. Similar to Gulp exist y Gulp : Grunt npm scripts. Live Reload Is a tool/extension that detects your website changes and permits you a real time visualization. Live Reload : 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 . Prepros : 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 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. Bootstrap : 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. Foundation : I use Bootstrap. Now im trying another called . Skeleton Skeleton Exist another like , etcetera… Semantic UI, Kube, Sussy, blueprint, purecss 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 Is a very popular framework for the Front-End development. Was created by , and allows you create Angular : Google Simple Page Applications. Ember.Js, Vue.Js, Backbone.Js Like Angular, exist very popular frameworks like etc... Ember.Js , Vue.Js , Polymer The same that i said before, test each framework and choose your favourite. JavaScript Libraries: 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 for component creations, focused on creating user interfaces (UI). React.Js : Facebook Polymer.Js Is a librarie used for the front-end development that, whith Html, Css and Javascript allows you to create web components. Polymer : While there are more things to learn, such as , 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._ Browserify , Webpack , Flux, Redux , or to focus on new versions of JavaScript 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. Now we can go to the Back-End: 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 or the most recommended: . PHP : CodeIgniter , Phalcon , Yii , Symfony Laravel Django 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 or the most recommended: . Python : Flask , Pyramid , Web2Py Django Ruby on Rails The same that happen with Python happen with Ruby. When you have a good knowledge you can try and go to a framework like or the most recommended: . Ruby : Sinatra Ruby on Rails (ROR) Spring 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 or the most recommended: Java : Grails , Play Spring MVC . .NET C# It is an object-oriented programming language, and .NET is a framework. It is possible to program on the server side with . C#/.NET : ASP.NET Go It is a relatively new language created by . It is a language that seems to have a future. Go : Google Node.Js It is not a framework or a library, much less a programming language. 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 or the most recommended: Node.Js : Is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Hapi , Koa , Sails.Js Express.Js When talking about web applications, and especially back-end, you should consider the use of database. DataBases: MySQL It is a used relational database management system. MySQL : MariaDB It is a database management system derived from MySQL. MariaDB : PostgreSQL It is an object-oriented and free relational database management system. PostgreSQL : MongoDB It is the leading NoSQL database allowing sites to be more agile and scalable. MongoDB : Redis It is an in-memory database engine, based on hashed table storage. Redis : Firebase It is a mobile platform developed by that allows you to develop apps of high quality and speed. Firebase : Google GraphQL It is a query language to establish a communication by the server. GraphQL : 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!

Flow

Facebook

Google

Koala

Microsoft

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The big road to become a great Web Developer

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Germán Cutraro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The big road to become a great Web Developer

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Germán Cutraro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES