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 Back End 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.
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 Tech Recruiter Certification Program get the knowledge you need to facilitate the hiring process and speak to developers in their own language.
Continue Your Learning
What we’ve just covered is merely the tip of the iceberg. We’ve created a handy Tech Cheat Sheet to be an additional resource for you. Our Tech Cheat Sheet goes more in depth on what tools engineers are using, definitions you should know, and how to apply your new tech know-how in conversations with candidates. Download our Tech Cheat Sheet and start making better tech placements today.
About Recruiting Innovation
Recruiting Innovation is an industry-leading online tech recruitment training platform. Focused on teaching the technical concepts and key roles in the software development lifecycle to tech recruiters and sales teams, Recruiting Innovation’s online training programs help teams make better tech hires, faster.