Five Technologies Every Frontend Engineer Should Know

Published

When I started learning how to code in 2008, the landscape for a frontend developer was very different than it is today. In 2008, it was good to know HTML & CSS (that hasn't changed) and with a little bit of jQuery knowledge and the ability to use the WordPress API and an FTP uploader, you could get by building basic brochures sites for clients, but you couldn't bend the web to your will.

In the last 3-4 years, Frontend Engineering has changed from being more about simply the aesthetics and content and become a role that requires thinking about optimization, data structures and state. If your eyes just glazed over, that's okay, just read on.

I'm going to explain at a very high level the five technologies that are crucial to my day-to-day as a Frontend Engineer with the hopes that it:

  • Gives you starting points for what technologies to learn if you want to pursue becoming a Frontend Engineer.
  • helps Junior Frontend Engineers have a roadmap for what they should already know and what they need to learn.

The Five technologies (mostly languages, if you want to learn about frontend engineering tools, check out this post) every Frontend Engineer should know are:

The really good news is that nothing has replaced html, css or javascript as browser languages since the first browser wars so being able to use them will be useful as long as web browsers continue to exist.

#HTML

html (HyperText Markup Language) is the language that defines the content of the web. A web browser will read an html file and render the content into the browser. If a webpage were a living being, html would essentially be the bones. It gives the webpage structure.

An example of html would look something like this:

And the rendered HTML would look like this:

Hello world! This is a link.

No matter what you're building for the web, if it's in the browser you'll be using HTML, either directly or through a component library or templating language.

#CSS

css (Cascading Style Sheets) is language that gives a website its look and feel. Where html was the bones, css is the skin. Without css a website would simply be text and images: a rendered bland blob of content.

An example of css would be:

So for html like this:

Topics
chaseonsoftware.com is powered by GatsbyJS, GitHub & Netlify.
Find the source for chaseonsoftware.com on GitHub.
👋 Say Hi!