The Roadmap to becoming a Front-End Developer

#frontend #webdev

So by now, you’ve probably figured out that this internet thing is here to stay. As of May 2019, there are 4.2 billion internet users in the world, and nearly 1.7 billion websites, with the number increasing every second. Every business, brand, and idea has a website. Every thought is instantly shared, every memory recorded, and every click on our smartphones leads us to a new webpage, each with links and buttons leading us onwards to other websites.

Websites are to the internet what oxygen is to the real world, and building websites is one of the simplest and most profitable ways to enter the world of software development.

There are two paths towards becoming a web developer: the back-end or the front-end. Back-end developers build server-side software; they’re responsible for all the performance, stability, security and speed of your site or app, all of which power the front end or user-facing side.

Front-end developers, on the other hand, get to build everything a user – or client – sees, touches and interacts with on the screen, such as layouts, information, engagement, etc. Front-end developers are both creative and tech-savvy, and act as the bridge between designers and back-end programmers.

So, how do you go about becoming a front-end developer? It’s a simple, three-step process:

Understand the basics
Go beyond the language
Trial and error

Step one: Understand the basics

In order to build a website, you first need to have a fundamental understanding of the web, how it is structured, and how your application fits within it. What is the web, what is a server, what is a client, how do various devices communicate with each other, how does the website you build on your computer in San Jose end up on someone’s phone in Shanghai – these are foundational questions about web development which you must have in-depth knowledge of.

Once you have a complete understanding of networks (i.e. IP addresses, internet protocol, packets), databases (i.e. SQL, NoSQL, caching), clients, and servers, you can then move on to the actual basics of web development: coding.

Front-end developers work with the user – or client – facing side of the website. Their code runs on the client’s browser and determines how the website looks (i.e., the user interface, layouts, navigation, etc.), how it requests data from the server, and how it interacts with the client’s machine. The coding languages used to develop the client-facing source code are HTML, CSS, and JavaScript.

HTML (Hyper Text Markup Language) is the foundation of any website. It is the code that describes the content of your page, which is then rendered by the browser. You can use HTML to add text, images, audio, video, and more to your website. HTML is easy to learn and the best part is, you can write it in any text editor. It’s important to remember that it’s not a programming language, but a markup language.
CSS, like HTML, is not a programming language either, but a styling language for HTML. To put it simply, HTML describes the content while CSS describes how the content should be formatted – basically, anything that controls the look and feel of the page. This allows HTML to go back to its original job as a structural language.
JavaScript is where programming gets fun! HTML structures our content, and CSS stylizes it. These are great to create static websites, but when the entire world around us is constantly on the move, why shouldn’t our websites be? JavaScript allows us to implement dynamic elements into your website, such as interactive maps, animations, updates, and more.

Step two: Go beyond the language

Now you know the concepts for how to write basic front-end code to create structured, stylized, and dynamic websites. Let’s see how we can push this knowledge even further.

Web Frameworks make the development and integration of front- and back-end programming easier. A web framework is basically a package of files and folders of standardized code which can be used as a basis to start building a site. In other words, it’s a starter pack that allows you to build on it.

The most common frameworks available to front-end developers are: Angular, React.js, Vue.js, Bootstrap, Semantic-UI, and more. Each framework has its own pros and cons; some are strict and fixed while others are very loose and only give guidelines. Do your research to find the framework that works for you and use them to take your skills to the next level. You can explore working with these frameworks in-depth here.

Command Line basics are essential to becoming a developer. The Command Line Interface (CLI) is a tool into which you can type commands to make the computer performs tasks. Commands can be combined to achieve a variety of outcomes, and since you’re able to communicate with the computer directly, this is the more powerful and efficient way to control your tasks. The most common CLI is the Bash Shell, which is the default on Linux and Mac systems.

Every developer has their own ideas about the best ways to code/program a website, but they all agree that Version Control is the most essential part of building a website. Version Control manages all your project’s files so that you can keep track of all your builds and changes. Git is the world’s most popular version control system due to its flexibility.

It remembers any change ever made to a project, making it easy to revert to earlier versions; it allows for multiple people to work on a project simultaneously, which fosters collaboration and productivity; and it allows you us to work on multiple features at the same time.

You’ve learned the basics of what goes into front-end programming and the skills and frameworks to help you in creating even better websites that are dynamic and versatile. Now, you need to practice working with these frameworks and various tools.

Step three: Trial and error

You know that thing they say about needing 10,000 hours of doing something in order to become an expert at it? They’re right. Once you’ve learned how to code and how to build powerful applications that do exactly what you need them to do, the only way you can get better is to practice.

Build sample websites. That neighbor of yours who wants to be a poet? Help her create an interactive page with a twitter scroll and links to her published works. Your cousin that sells terracotta jewelry on Etsy? Build her website with photos, reviews, testimonials, links to her social media, and more. That friend of yours who wants to be a graphic designer? Write an application that places his graphics and creativity front-and-center.

The more you practice and the more you build, the more intuitive the entire process will become for you. Before you know it, building websites and applications will become second nature.

Step four: Keep learning

Yes, all of the above steps are enough to become a front-end developer. Once you have mastered the fundamentals, built on them, and practiced, you are ready to become a front-end developer.

However, the internet keeps changing and new and more advanced methods of programming launch every single day. It is essential that you keep up-to-date with new technologies and keep learning. This is not to say that what you have learned so far will not matter – your basics will always hold you in good stead. But in order to grow, you must keep track of what is cutting-edge, and update your skills accordingly.

If you want to start your own front-end developer journey, check out Educative’s Become a Front-End Developer track to put what you’ve learned in this post to practice.