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:
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 (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 (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:
html like this:
The result would be that every paragraph tag would have a background of “electric blue” (using a hexidecimal color value), the font color would be white and the paragraph will have padding of 1em (which is basically the size of the font inside the paragraph):
CSS is really important for giving visual cues, adding general aesthetics and giving a website the unique qualities it needs to stand out.
node. These are really useful and my guess is that if you do become a Frontend Engineer you’re going to have a hard time getting away with not using them.
Most APIs provided by companies (such as Twitter, Trello and GitHub) are in
json format and many companies are using
json APIs to serve their data to the Frontend, which means Frontend Engineers will be spending a lot of time using
json. @WalmartLabs, for example, is building the entire eCommerce platform on a RESTful
The really cool thing about
git isn’t a language, it is a version control system, a technology that every developer should be using.
git allows developers to keep a history of how their files changed, easily merge other developer’s change, revert a project to a specific state in the history and define stable versions of a project.
Note: a lot of new developers use the term
git interchangeably with github.com. Github.com is one place where a developer can keep their projects that are version controlled with
git, but it isn’t explicitly related to
Markdown is the easiest technology to learn in this list, but it’s one of the most prolific technologies on the internet. Markdown is a really simple syntax that allows anyone to write text that can be easily converted into
Markdown is the language of documentation, so if you’re working on a project that will be used by someone else, most likely you’ll be (should be) writing documentation and doing it in Markdown.
An example of markdown would be:
Which would render to the following
The basics are outlined on the Daring Fireball Markdown Basics page.
These five languages are core to what I do on a daily basis and knowing these languages will make you both a powerful Frontend Engineer and a huge asset to any organization building for the web.
Are you interested in learning the skills required to be a frontend engineer? Let me nkow in the comments below!