Roadmap to becoming a kickass Front End Engineer

Front End Developers are one of the most sought-after devs in the Tech world. With the rise of modern javascript frameworks like React, Vue, etc, demand for frontend engineers has exponentially increased in the last few years.

Modern web development needs a deep knowledge in various areas apart from HTML, CSS & JS. Here is a step by step guide to become a kickass Front End Engineer:

• HTML: Learn about different attributes, elements, html5 features, how iframes work, canvas, different events, forms, validations, etc.
• CSS: CSS is so vast that a lot of companies have specialized UX Engineer positions that deal with just HTML and CSS in the application. When getting started with CSS, try to build UI clones of some popular websites. Pixel perfect design is something that you should aim for. In terms of topics, a few include box model, flex, CSS animations, selectors, responsive design, etc.
• Javascript: Javascript is the core of any web application. Getting started with Vanilla JS before jumping on to frameworks is crucial to have a solid base. Learn to create a fully functional web app with plain JS. It should have DOM manipulations, API calls, dynamically creating elements on the UI, and functionalities like searching, sorting, filters, paginations, etc. Read my post on web assignments for Frontend Interviews for top tech companies. Make sure to understand these 100 Javascript interview questions to excel in your front-end interviews.

Now you know HTML, CSS, and Javascript but that’s not enough to become a modern web developer. You should also learn the following:

• Browser Technologies: Before you get started with the rest of the stuff, having an understanding of how the browser works is a must. Read as much as possible about browsers including some of these,
  • DOM tree creation process.
  • Dev Tools: Mastering browser dev tools will take you a long way. It will help you debug your code easily, understand the javascript call stack, measure the performance of the website, understanding the types of storages available in the browser, and analyzing API calls on the network tab.
  • HTTPS: HTTPS offers additional security over HTTP. Here is an interesting article on that.
  • What happens when you type a Url in the browser?
• React/Vue/Angular: Once you have developed a stronghold on Javascript, start with any of these frameworks. My preferred choice is React as it has maximum demand in the market. While you will be developing mostly in the functional components using React Hooks, make sure you understand class components as well. Learn React’s architecture and react reconciliation process. Also, use Redux or Context Api for state management. The best way to observe the advantage of React is to use it to create the same projects that you did with plain JS.
• JS Tools: Once you have mastered the above, you are basically comfortable in development. Now the focus should be on optimizing the app and making coding easier with help of some existing tools & libraries. Read and use the following:
  1. NPM: Getting started with React will also introduce you to Node Package Manager. NPM is a software registry where developers share/borrow packages. You can use npm to install a lot of frameworks and libraries. Try to understand how npm works, how anyone can publish a package in NPM and go through popular javascript libraries on NPM.
  2. Eslint: Eslint is a code linter in Javascript that enforces predefined coding style guidelines. Consider it as a set of rules to maintain consistent coding standards.
  3. Webpack: Webpack is a javascript module bundler. It takes all the javascript modules in your app and generates one(or a few) files. Webpack creates a dependency graph to resolve dependencies among different modules. Webpack also has other important features like hot reloading, tree shaking(dropping unused imports), running a server, etc. Try to configure webpack in your project. If it’s already there then try to play around and understand the config file.
  4. Husky: Husky is pre-commit hook that runs certain commands every time you try to commit something. EsLint can be added as a requirement for Husky.
• GIT/SVN: Code management tools are used to maintain huge codebases with different contributors. Learn about GIT commands and make a habit to use Github for even small projects. This will increase your exposure to git commands. Some of the most used commands are commit, pull, push, rebase, checkout, etc.
• Hosting the application: Use Vercel/Netlify/Firebase to host your projects. Idea is to get familiar with the process rather than the platform.
• Unit Testing: Jest is a javascript testing framework that can be used for writing unit tests. In all good organizations, you are supposed to write unit tests for every piece of code you contribute. Functions are easier to test compared to naked code as you know what to expect in return for each set of arguments. Try to write Unit tests for your components & functions. More about Jest.
• E2E Testing: Cypress.io a popular framework for writing end-to-end automation tests. E2E tests will help you mimic the user’s experience for each feature on the browser. It is important to run E2E, Unit tests every time you merge your current branch to the main/master branch. This will make sure that your changes are not breaking any other feature.

Once you are comfortable with above skills, modern web development will become a lot easier. These are also in demand skills by most of the the top tech companies for Front End Engineer roles.

Going ahead:

• Typescript: Javascript is a loosely typed language. Typescript is a superset of Javascript that helps us eliminate type errors in our app during development. It also has a class, module, and interface support which woos developers from other languages. Typescript offers static typing which will significantly decrease errors in your website. Frontend developers have started moving to typescript in the last few years.
• CSS Frameworks: Master at least one CSS framework to decrease your development time. Some of these are Bootstrap, Tailwind, Antd, MaterialUI, etc. Make sure to start using CSS Frameworks only after you have learned CSS.
• SASS/SCSS: SASS/SCSS will make your CSS more dynamic. You can obtain a function-like behavior in CSS by using SASS. Some of the features of SASS/SCSS include variables, mixins, nesting CSS, modularizing your CSS, etc. Using a CSS preprocessor will significantly reduce the lines of code your write in CSS.

Please share this blog if you enjoyed reading about the roadmap to becoming a kickass Front end engineer. Follow me on Twitter to stay updated. Don’t forget to read about my past interview experiences.