In this article, we will look at:
These six, curated modules will teach you how to make your own websites from scratch or gain a richer understanding of web dev.
In web development, developers either work on the front-end or the back-end. The front-end refers to any part of your website or application the user interacts with. When you visit a website, all you see, from the header down to the content, and all the interactions are part of the front-end. This includes the buttons, forms, images, layout, and basically everything you can see and use on the website.
On the other hand, the back-end is what happens under the hood. This includes everything that happens on the server-side, databases, and everything the user does not see behind the scenes. For example, if you have an Instagram account, you can log in and see your feed, followers, and pictures. You know Instagram stores all your data, including your password on its servers, but can you see those servers? No. So, that’s the back-end.
Front-end frameworks are pre-packaged code you can use to build user interfaces faster. They allow you to organize the design elements of your web applications and come with pre-built components like buttons, forms, navigation bars, and more. Popular examples here include React.js, Vue.js, etc. Conversely, back-end frameworks allow you to build robust APIs, work with web services, and databases. You can use them to handle multiple HTTP requests and connect with any database you want to use.
Using a front-end framework has plenty of advantages, and most developers will encourage you to use them. Some of the advantages are:
For instance, in React, we can create a component like so:
Here, we have built a small component we can use throughout our website instead of creating yet another copy of the same piece of code as we would in plain HTML/CSS. How great is that?
Another popular front-end framework is Angular. Created by Misko Hevery and Adam Abrono in 2009 as a side project, it is currently maintained by Google. Its current version, released May 2019 is called Angular 8 and built entirely with Typescript. The framework features differential loading, lazy loading syntax, and builder and workspace APIs.
With Angular, you can use HTML for your templates and bind the HTML to express your components clearly. It also helps you reduce the amount of code you have to write with its data binding and dependency injection, all in the browser. Some notable companies with Angular in their tech stack are Google, Udemy, and Amazon.
Become a frontend developer without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient. And with Educative’s organized learning path, you’ll always know what to learn next.
Backbone.js is another frontend framework that allows you to structure the code you write in the Model View Controller pattern. In this framework, the view also doubles as a controller, and it listens to events that happen in the DOM and passes them to the models as needed.
Ember is a user-side front-end framework for creating single-page web applications with complex user interactions. It’s mostly used for its scalability and flexibility. Created in 2011, it has a small but active community and gives the ability to write structured, organized code. It’s a Model View Controller framework that developers used to build user-side web applications. It uses a route as a model and handlebar template as views, and the controllers manipulate the data in the model. Some notable companies with Ember in their tech stack include Square, Twitter, and Groupon.
Initially created in 2012, Meteor is an isomorphic framework written in Node.js, so it can be used for both the user-side and server-side of your application. It is best suited for rapid prototyping and can be used for both mobile and web applications.
With Meteor, you can build a full-stack application without needing to integrate with another framework. It is easy to pick up and gives you access to a ton of useful libraries with different functionalities you can use to get your app up and running.
Becoming a front-end developer is a great way to jumpstart your career. Get started learning about the basics of web development and front-end frameworks with Educative’s Become a Front-End Developer Learning Path. With this learning path, you’ll be making beautiful apps in no time!
Join a community of 500,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.