Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Front end developer is a lucrative profession to be in.

It’s also fun and rewarding as front end features are built and bugs are being fixed.

In this article, we’ll look at the skills needed to become a front end developer.

The Basics

Front end development is all writing front ends for web apps.

Therefore, the first thing we must know is how the Internet works.

We should start by learning about HTTP, DNS, and how browsers work.

These are important to know to get our web front ends to work and gives decent performance.

Once we know how the Internet works, then we’ve to learn how to create documents we display in the browser.

We learn about HTML and CSS.

HTML is the language to describe our page so that we can see content in our browser.

Once we learned HTML, we learn CSS so that we can style our content and create layouts.

HTML is semantic which means it describes what’s on the page.

We got to know semantic HTML tags.

Then we learn about forms and form validation since forms are everywhere in web apps.

And then we learn about things like accessibility and SEO, which are important but not the core knowledge.

Accessibility makes sure that everyone including disabled people can access our page.

SEO makes sure that our app shows up in the early pages in search engines.

There’s also a lot to learn about CSS.

Flexbox makes layout easy.

Grid lets us create a responsive layout without using 3rd party libraries.

We got to learn the conventions and best practices for each so everyone will be happy working with our code.

Version control is also important since it’s the only way we can revert our code if something is wrong.

If we didn’t check our code into a repo, then we can’t revert them.

It’s also the only way for different team members to merge their code together.

JavaScript

Once we learned the basics, then it’s time to learn JavaScript.

JavaScript turns our web pages into an app.

It makes our code dynamic.

This is where the main part of development.

We start with the basics by learning about variables, functions, and operators.

Then we learn about how to create objects and work with them.

We learn how to do various operations with them like adding or removing properties and assigning values to them.

And then we learn about more advanced object-oriented features like classes and constructors.

Once we did that, we learn about loops.

Learning about modules is also very important since modern apps are modularized.

Then we learn about recent popular browser APIs like the Fetch API and more.

Also, we got to learn about the DOM so that we can manipulate page elements dynamically.

And with that, we got to learn about event handling so that we can listen for user interactions.

Once we learned about browser-side JavaScript, then we got to learn about advanced topics.

Advanced Topics

Once we learned the basics of JavaScript, we got to learn about more advanced topics so that we can work on production-quality apps.

They include package managers like NPM or Yarn.

Many apps are built with frameworks like React, Vue, and Angular, so we got to learn those.

Web components are a standard that lets us make reusable components that are native to browsers, so that’s also a useful topic to learn.

CSS preprocessors make our lives easier when creating CSS, so we should ones like SASS.

Once we learned all that then we can learn the libraries associated with frameworks.

Testing

Testing is also important to make sure we don’t break anything.

Popular testing frameworks include Jest for running unit and integration tests.

End to end tests simulate with the user does automatically and we can write with frameworks like Selenium or Cypress.

Conclusion

There’re many things to learn to become a front end developer.

We got to know how to write production-quality code and tests.