How to become a front-end hero

Get an overview of all the essentials required to be productive in a modern front-end-end stack. Find the correct path and kickstart your career!

Front-end-end development is booming! Nowadays, almost every business owns a web application. Web applications ease continuous delivery and support multiple devices, an important aspect of IoT (Internet of things).

For a long, JavaScript was not considered a serious programming language by many enterprise developers. Often it was seen as a “script kiddy” language. With the new requirements, JavaScript has evolved a lot. Modern front-end development contains much more than classic web development with just HTML, CSS, and JavaScript.

Since modern front-end-end development has evolved so much, it can be challenging for newcomers or developers who want to switch to front-end-end to get an overview of what to learn and which technologies are essential in a modern front-end-end stack. But don’t worry. 😉 This blogpost will give you a summary of the most critical technologies you should learn if you want to become a front-end-end hero. 🦸

The fundamentals of every web application

Front-end-end development still consists of three basic technologies. HTML, CSS and JavaScript. Those build the foundation of every web application and are essential to understand if you want to become a front-end-end developer. Each of those technologies has a different purpose:

  • HTML: structure of the website
  • CSS: styles of the websites
  • JavaScript: Logic of the website

HTML — the structure

HTML stands for “Hypertext markup language” and is the standard markup language to create websites. HTML uses tags to create a structure of the web page. A list of all common tags can be found here.

Each tag can have attributes. Those attributes can be used to control the behavior of the elements. The most common attributes are class and id. Furthermore, attributes are an excellent way to ease the querying of HTML elements in your JavaScript or add CSS styles.

HTML attributes. Use a class to categorize HTML elements

We use the class attributes to categorize all buttons as primary. This form of categorization now allows us to drop in some CSS to style all the primary buttons.

CSS — the styles

CSS stands for “Cascading Style sheets” and defines how our HTML elements are displayed and laid out on the page. A CSS stylesheet consists of multiple CSS rules. Each rule has the following base structure:

Example CSS rule to change the color of all buttons to “white.”

Each selector queries one or multiple HTML elements and applies the defined style rules to it. In this case, we query the button element and change it’s color to white.

CSS has a lot of concepts. And there’s a lot to discover. However, I would recommend you to take a look at Flexbox. Flexbox is very powerful and, in my opinion, currently the best way to create layouts and align-items.

An HTML element that has the CSS rule display:flex will be converted into a flex container and define a main-axis and a cross-axis.

illustration of Flexbox main-axis and cross-axis

Flexbox defines two properties, align-items and justify-content that allow us to layout child Elements across those axes. The elements can be laid out at the start, center, or end. Further, Flexbox is also able to distribute the remaining space evenly between or around children automatically.

DOM 🌳

DOM stands for Document Object Model and represents all HTML elements in a tree structure. When an HTML document gets loaded, it gets parsed into a DOM tree, which then serves as an interface between HTML and JavaScript.

We can use JavaScript to query, manipulate, add, or delete those DOM notes.

JavaScript

JavaScript is the most important technology you need to learn if you want to become a front-end-end developer. It is used to build more than 95% of all web pages out there and is currently the most popular programming language.

Formerly known as the language of the web, JavaScript has become the language of everything. It’s not only used during the development of web pages but also during development time. Nowadays, complex build and development tools are entirely written in JavaScript.

EcmaScript is the standard behind JavaScript. There are various versions of JavaScript with different concepts. Each EcmaScript version introduces new features. If you want to learn JavaScript, I would recommend you start with ES5. ES5 will teach you all the core concepts of JavaScript when it comes to prototype inheritance, this binding, and function scope.

After that, I would recommend you to take a look at ES6. ES6 was introduced in 2015 and added a lot of new features, syntactical sugar, and also a couple of concepts like classes and block scope that bring JavaScript nearer to the ideas of traditional programming languages.

At this point, it may be hard to imagine what I mean by that. Let’s have a look at a concrete example. Imagine we have a ironMan object, and we want to extract its properties into variables. Let’s start with the ES5 version.

Storing object properties in variables in ES5

And now, let’s take advantage of the syntactic sugar offered by ES6 🍬. Let’s have a look at a nice ES6 feature called “object destructuring.”

Extracting object properties into variables using ES6 destructuring

“Object destructuring” allows us to use a shorthand syntax to take out object properties and store them in variables. Also, ES6 introduced constants(const). Which is a new way of declaring read-only variables.

Chrome developer tools

Like it or not, as a programmer, no matter what language you use, there will be a time where you need to debug. Debugging in web development differs from the debugging of other languages like Java. In front end development, the runtime isn’t a virtual machine, but the browser.

Therefore, we debug using the Chrome developer tools. The debugging experience in the browser is pretty similar to the one from IDEs. We first set a breakpoint in our source code and can start interacting with the page. We also get a step over or step in button.

The Chrome developer tools are not only useful for debugging. They are also handy for performance analysis, SEO analysis, memory analysis, or inspecting HTTP requests.

TypeScript — JavaScript with types

I love JavaScript and the dynamic of it. But, I also felt the pain of realizing big enterprise projects with JavaScript. The fact that JavaScript is an untyped language can make your life as a developer very hard.

Imagine you implement a UI component that calls a customer service.

Straightforward JavaScript service that returns anything 😉

You know that this customer service will deliver a Customer. But you have no idea what kind of properties the customer object contains. Does it include a firstname a name or a lastname. We don’t know. 🙈 The only way to figure out the properties is by looking at the API docs.

Let’s check ou the same code in TypeScript.

TypeScript interfaces can be used to type customers

As the name indicates, TypeScript adds types to JavaScript. First, we know that our getCustomer method returns a Customer. But, the great thing is that we now have type safety. So if we would call this method, store the customer in a variable and then try to access a property, we would get nice Intellisense.

Furthermore, we would also get a compilation error, which means that our application would not build if we would access a wrong property.

Node & NPM

For decades JavaScript was known as the language of the web. With the release of Node, JavaScript has become the language of everything.

In a nutshell, Node is a JavaScript runtime. Before Node, there was only one JavaScript runtime, the browser. With this new runtime, we can run JavaScript in a terminal, server, or even in IoT.

Front-end-end development is very fast. Therefore, it’s not surprising that today we have a lot of server-side JavaScript Frameworks and tons of development tools that we use in our daily work to automate and simplify tasks.

NPM — the node package manager

The runtime isn’t the only incredible thing node offers. Additional to the runtime, it also offers a package manager called NPM. NPM isn’t just any package manager; it’s evolved to be the most significant code repository on earth. It’s an excellent way for developers to publish and share any JavaScript code.

NPM contains a package for almost everything. Usually, you start by browsing packages on npmjs.com.

Illustration of the “svg-to-ts” package on the npm website

Once you found a suitable package, you can open up a terminal and use the node package manager (npm command) to install a package to your local project.

npm i svg-to-ts

Once you installed a dependency, it will be added to a package.json. A package.json is a file that defines all the dependencies and versions used in this project. It also distinguishes between dependencies and devDependencies.

Dependencies and devDependencies are listed in the package.json

Installing and managing your dependencies is fantastic. But, NPM offers, even more, namely “scripts.”

NPM script is the tool to use when handling front-end-end development tasks like serving a page, running tests, transpile or compile code to build a production bundle.

NPM scripts can be used to run binaries. It can be used to handle any automation.

Inside our package.json we can create any script we want. Those scripts consist out of a name and a command which usually is an executable binary.

Each npm script can be run from the terminal with the following command.

npm run scriptname

Scripts can even be combined or executed in parallel. Running and combining scripts gives us the power to automate any development task.

Frameworks

Using Vanilla JS for simple web pages can be pretty cool. However, it can be pretty cumbersome once you encounter a more significant project.

  • you manually have to handle DOM manipulation
  • you have to solve many technical issues yourself
  • no standardized way of approaching things

Frameworks provide you with a lot of concepts and out of the box solutions so that you can focus on implementing features instead of losing time to solve technical issues.

There are many JavaScript frameworks out there. From my experience, the most popular three are React, Vue, and Angular. Frameworks are very sophisticated and can, for sure, not be explained in a blog post. But the following should give you a brief overview.

Angular

Angular is a Typescript based open-source web application framework that helps us create unique single-page applications (SPAs) developed by the Angular team at Google.

Angular is more than just a framework; it’s a platform. It offers an out of the box solution for many requirements and comes with a very opinionated architecture which is very sustainable in more significant projects.

React

React is an open-source library that is developed by Facebook and mainly used in high traffic applications such as Twitter or Facebook itself.

Compared to Angular, React is extremely unopinionated. This offers more flexibility but also increases the challenges since you have to solve many things yourself.

Vue

Vue is an open-source framework created by an ex-engineer from Google, Evan You.

Vue has a lower learning curve but also a lower community and smaller Ecosystem than React and Angular.

Cool stuff — teach me more!

Does your team come from the backend and want to transition to modern front-end-end development? Do you want to learn more about the content described above and get some hands-on experience?

Don’t hesitate and contact Tomas Trajan or me. We offer a one-day front-end hero workshop for development teams that want to transition to front-end-end.

If you want to master Angular or State Management, you should reach out to us for one of our other workshops.

🧞‍ 🙏 If you liked this post, share it and give some claps👏🏻 by clicking multiple times on the clap button on the left side.

Feel free to check out some of my other open-source libraries.

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store