🧠Knowledge Series #3: Front End Technologies Explained

Understanding the role of HTML, CSS and Javascript in building products

🔒The Knowledge Series is a series of easy to read guides designed to help you plug the gaps in your tech knowledge so that you feel more confident when chatting to colleagues. Clearly explained in plain English. One topic at a time.

 If you’re a free subscriber and you’d like to upgrade to receive them you can do so below. Or you can find out more about paid access here.

---

Hi product people👋,

Rich from the Department of Product here! In this edition of the Knowledge Series we’re going to explore the most important things you need to know about front end technologies. We’ll use this as a base from which we’ll build upon in later series so that you can have more confident conversations with more technical colleagues.

This guide isn’t going to turn you into a front end software engineer, but it will give you an overview of the core technologies used in front end development, along with some real world examples of how each of these technologies might be applied. 

Coming up:

1. How the web works

2. HTML, CSS and JS explained

3. How technical should you get?

4. Tools and resources for developing some basic front end skills

---

How the web works

What happens when you type a website address into your browser? To understand how front end technologies work, it’s helpful to firstly get a basic understanding of how the web itself works.

Let’s imagine you type substack.com into the browser. There’s a bunch of different technologies that work together to ensure you get to the right location, but we’ll focus on the most important concept to get started: the client server relationship.

Client server relationship explained

You may have heard engineers refer to something happening on the client side or something happening on the server side. What’s going on here?

Think of the client as the thing that’s making the request to the website you’re visiting. The client is your browser. Your browser, and the machine you’re using, is making a request to a server somewhere to access a website.

If that’s the case, your machine and the browser you’re using has made a request to the server. The server responds to your request and points you in the right direction.

These requests are known as HTTP requests.

An HTTP request sends a request to a server and the server responds with a response code to tell the browser if all is OK with the request. 

The server will respond with a code. Here’s a sample of some of the most common codes a server will respond with:

Server codes

• 200 – successful response

• 500 – server side error

• 400 – there’s problem on the client side

The most important takeaway here is to understand that some technologies will run on the client side and some will run on the server side. What does that mean?

It means some technologies, namely HTML, CSS and javascript are client-side technologies. This means they run inside your browser.

Where front end technologies sit in the tech stack

Front end technologies are used for rendering the front end - or the bits users actually see. A product’s tech stack can be a complex combination of a bunch of different types of technologies.

This is of course, completely dependent on the product, but most tech stacks will comprise of some sort of combination of the following:

• Front end technologies - HTML, CSS, Javascript (this includes frameworks - more on this later)- for rendering the UI and what the user interacts with 

• Back end programming languages (Node, PHP, Ruby on Rails etc) - for implementing business rules and logic plus the functionality of the application

• Database - for storing data relating to the product e.g. ecommerce businesses storing product information - and also the storage of customer data

• DevOps related tools for managing releases and internal infrastructure

Some teams will split their engineers into back end and front end developers, others will hire ‘full stack’ engineers who can essentially do everything. 

Some teams will even go a step further and hire the true tech unicorns: full stack developers who can also do product design. These are a rare breed, though, and whilst they’re possible to find, they’re not common.

So now that we know a little bit more about where front end technologies sit in the tech stack, let’s delve into a bit more detail and explore each of the technologies:

1. HTML

2. CSS

3. Javascript

HTML, CSS and JS explained