How To Be a Front-End Engineer That Stands Out
In this article we will talk about what you need to learn to be a front-end engineer that stands out from others. And of course, we’ll share resources as well 😉
📝 Notice: Note that the headings are not sorted in any particular order. You can learn the mentioned concepts in any order you wish
It doesn’t matter whether you are front-end or a back-end engineer, you must have at least some basic CS knowledge. If you have a degree in Computer Science or similar major, then you already are one step ahead of others. If you don’t have a degree in CS or you are coming from completely different major, then I would recommend starting with CS50: Introduction to Computer Science course by Harvard University on edX (it’s free). After finishing that course, if you want a little deeper knowledge then you should enroll to Computer Science: Algorithms, Theory, and Machines course by Princeton University which is completely free on Coursera.
As a front-end developer who hated CSS for a long time, I would recommend stop hating and start learning. If you are starting from scratch, start watching CSS - The Complete Guide 2021 (incl. Flexbox, Grid & Sass) course by Maximilian Schwarzmüller and Manuel Lorenz. This course will strengthen your basic CSS skills and you will no more hate CSS. If you already have some intermediate CSS knowledge then definitely watch Advanced CSS and Sass: Flexbox, Grid, Animations and More! course by Jonas Schmedtmann as well. This course will teach you internal workings of CSS, how to work with SASS, build tools and much more to level up your CSS confidence.
Git is the most popular Version Control System that almost every software engineer uses in daily basis. However, most people haven’t used any Git commands except
clone. But do you know how to rebase? Have you ever resolved a merge conflict? Do you use
stash or do you know how yo squash commits locally? Have you ever got stuck in detached head state?
To start with basic Git skills visit Git How To and start reading (and of course doing) from first section. To get deeper knowledge on Git, its plumbing commands and internals, definitely watch Git In-depth course by Nina Zakharenko on Frontend Masters.
Learning how the tools that you’re using works internally, will always boost your self-confidence. When we write web applications, we don’t always think about what browsers do and sometimes we torment them with the things we do. To get familiar with internal workings of browsers, read How Browsers Work: Behind the scenes of modern web browsers article by Tali Garsiel and Paul Irish. If you are even more curious and want to write your own browser, then Let’s build a browser engine! series by Matt Brubeck will be a good start for you.
0 == "0" is
0 ==  is
"0" ==  is
To get more knowledge on engine internals, you can follow Benedikt Meurer, Franziska Hinkelmann and watch their talks on YouTube:
- Benedikt Meurer: A Tale of TurboFan: Four years that changed V8 forever
- A Tale of Types, Classes, and Maps by Benedikt Meurer · JSCamp Barcelona 2018
- Mathias B, Benedikt M - JS Engine fundamentals [AgentConf]
To stay up to date with the engines, you should follow their official blogs and read them regularly.
For web performance related stuff you should follow Addy Osmani on Twitter and read his blog posts on Medium and on Google Developers.
Accessibility (often abbreviated to A11y—as in “a” then 11 characters then “y”) in Web development means enabling as many people as possible to use Web sites, even when those people’s abilities are limited in some way6. This is the topic that most front-end developers overlook. The idea is very simple as W3C states:
“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”
Accessibility should be in mind while developing your web application. The questions you may ask to yourself are:
- Can a user without a mouse use my web app? - the answer is keyboard accessibility
- Are users who use devices with different screen sizes (mobile, tablet, desktop) able to use my web app easily? - the answer is responsive design
- Are people with different visual deficiencies (blindness, color blindness, blurry vision etc.) able to use my web app?
- Can deaf people watch video on my website and understand it? - think of providing text alternative for time-based media
To make your web app accessible, there are lots of things that you should consider while working on your project. To get familiar with these concepts, I highly recommend to read web accessibility tutorials on Mozilla Developers Network.
For Vue, take a look at these courses on Vue Mastery:
- SMOOSHCAST: React Fiber Deep Dive with Dan Abramov
- Build your own React by Rodrigo Pombo
- Building a Custom React Renderer | Sophie Alpert
- Overreacted by Dan Abramov
Let’s say you’re writing a React app. You will probably use
You probably have heard of Docker, Kubernetes and other fancy stuff. But have you ever had any experience with them? You may know what they are but to make sure, you should at least learn Docker, be able to dockerize your application or even run it on a local single node Kubernetes cluster. If this sounds interesting I highly recommend you to watch Docker and Kubernetes: The Complete Guide course by Stephen Grider. This course will teach you Docker, Docker compose, Kubernetes and you will even have chance to gain some experience with Google Cloud and AWS.
Are you a front-end engineer who does not know what SQL is? Stop right there and start working on a back-end environment to have a little experience. It might be NodeJs, Go, Java, Python or PHP but you have to learn how to write APIs, how to authorize API users, how to create database and how to query database using SQL. Learn REST standards, be able to write REST APIs, get your hands on some GraphQL and so on.
If you look at some job descriptions from big tech companies, you will see a sentence like “Experience in one or more of object oriented programming languages such as Python, Java, C++”. So learning a back-end language won’t hurt you. Personally, my advice would be to learn a strictly typed programming language like Java or Go. If you are brave, you can even try C 🤓
Know the web, learn its components and be aware how all these stuff work together. I recommend to follow Hussein Nasser’s YouTube channel. You can get lots of useful information from him. Some sweet playlists from Hussein Nasser are:
- Backend Engineering
- Network Engineering
- HTTP and HTTP/2
- Web Sockets
- and many more on the channel.
You may encounter same videos in different playlists but that’s okay.
I agree that there are a lot of things to learn but you don’t need to rush. We didn’t even talk about cyber security, operating system concepts, design patterns, programming language paradigms like OOP and FP, Linux, command line etc. So, there are plenty of time ahead of us and learning journey will never end. Even after you have 15 years of experience, you will still learn something new every day. Learn, be humble and accept that no one knows everything and we’ll always have something to learn. Good luck on your journey! If you think anything is wrong with this article, do not hesitate to create an issue or contact us. And of course, grow and GO UP! ❤️
- Wikipedia contributors. (2021, July 11). Front-end web development. Wikipedia. https://en.wikipedia.org/wiki/Front-end_web_development
- Nix, E. (2018, August 31). The World’s First Web Site. HISTORY. https://www.history.com/news/the-worlds-first-web-site
- Hoffmann, J. (2017, October 23). A Look Back at the History of CSS. CSS-Tricks. https://css-tricks.com/look-back-history-css/
- Accessibility | MDN. (2021, June 10). Mozilla Developers Network. https://developer.mozilla.org/en-US/docs/Web/Accessibility