An Intro to Front End Technologies: HTML, CSS, & JavaScript

An Intro to Front End Technologies: HTML, CSS, & JavaScript

In the world of software development, what’s built falls into two categories: everything that’s seen by the user and the processes happening in the background. What we see and interact with as the visitors of a website, or as the end user of a mobile app, is considered front-end technology. All the behind-the-scenes activity that delivers the data and the speed with which that data is delivered falls into backend technology and devops.

In this post, we’ll dive deeper into the three main front end technologies you should understand as a developer or when recruiting front-end developers.

 

Front End Technologies in the Developer “Stack”

The front end stack is made up of many different languages and libraries. While these vary from application to application, there are only a few generic languages understood by all web browsers. These three main front-end coding languages are HTML, CSS and JavaScript.

Together, they create the underlying scaffolding that web browsers use to render the web pages that we interact with every day. All other libraries and front-end engineering are built upon these three main languages, which makes them must-have skills for any front-end developer.

 

In fact, you can think of a webpage like a house. The initial UX design is the blueprint. HTML is the basic structure of the house. The CSS is the paint, fixtures, and other aesthetic decisions that make the house look attractive. And finally, JavaScript is the inner workings of the house (lights, heating, water) that we, the owner or renter, use and enjoy.

 

HTML

HTML is the first layer of any website and creates the code version of a wireframe on a webpage. These wireframes exist for the styles in CSS and all the bells and whistles in JavaScript.

 

The letters in HTML stand for Hypertext Markup Language. The markup piece of the name is the most important to remember, as markups are the proper name for HTML elements, which are also called HTML tags. HTML as a whole is the markup that creates the basic elements we view on a website.

 

However, it’s important to remember that HTML isn’t particularly intelligent. It doesn’t make decisions or capture information on its own. It simply renders the scaffolding of the web pages.

 

CSS

 

Cascading Style Sheets, or CSS, is what gives our HTML visual appeal and draws in the user. To put it simply, style sheets dictate the presentation of HTML elements on a page.

CSS is what makes everything not look like a white background with a bunch of Times New Roman texts and blue hyperlinks. Have you ever tried to load Amazon on a bad day and see nothing but a white page with a huge list of black texts, some blue links and nothing else? That’s Amazon loading without styles. Styles are what transition beautiful designs onto a site.

 

A new trend with styling is to use what is called a CSS pre-processor. These include Less, Sass and stylists. Pre-processors are scripting languages that compile to CSS for the browser and are very popular as they expedite the development process. They accommodate some programming logic.

CSS pre-processors consolidate styling through “usability” and scale easily for use with large websites. Most front-end engineers of all levels have experience with pre-processors due to their power and flexibility to suit all scenarios, from building small single-page websites to enterprise applications such as Groupon or NBCUniversal.

 

JavaScript

 

JavaScript is a runtime language for web browsers. This means that when you open a web page, the page will load both the foundational JavaScript that is standard with the page and any new JavaScript added to a page. The new JavaScript will load in parallel with it and can perform actions and make decisions.

JavaScript differentiates from back-end languages such as Java or Ruby in that it’s visible to the user and is not compiled ahead of time to run secretly behind the curtain. It’s the true programming language of front-end engineering and the underlying language that ties everything together.

A great example of JavaScript in action is OpenTable. Once we decide, “I want a table for two at 7 P.M. in Seattle on July 25th,” a list of restaurants with tables to reserve shows up. From here, we can look at a map with a list alongside it.

The map with all the restaurants is actually Google Maps with custom JavaScript built on top of it. When we click on a map marker, we get a little flyout with the restaurant information on the map and the list of available locations automatically scrolls to the restaurant at the location we clicked on. If you click on a time listed for a particular restaurant, you’re taken to a reservation page with the restaurant’s information and the time you select. All of these custom elements, interactions, and transitions on the site use JavaScript.

Since all the necessary JavaScript is already loaded on the page, we as users don’t experience any lags or stutters when we click on a map marker. The code is already in the browser and ready to go.

 

Understanding the Front End Stack as a Recruiter

 

It’s helpful to understand these types of front-end interactions. Why? Because the next time you look at a candidate’s online profile, you can make an informed guess on what was built using JavaScript and ask the candidate, “I see a lot of powerful user interactions here. Did you build those using JavaScript?”

This demonstrates credibility as it communicates that you understand how the web works, recognize the abilities of a candidate, and aren’t making an assumption that a candidate may have to correct and educate you on later. It starts a conversation around what technologies a front-end engineer is excited about and used on that project.

 

But a high-level intro like this isn’t all you need to dive into front-end technologies and bring in top talent. Check out our “full-stack” class on front-end recruitment to get the knowledge you need to facilitate the hiring process and speak to developers in their own language.