🧠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

HTML, CSS and Javascript make up the essential skill set of a front end engineer. Without a solid understanding of each of these, front end development is almost impossible.

Some backend focused engineers really dislike working with CSS and most front end engineers won’t touch the backend. Full stackers though, will spend their time split across all 3.

HTML - the structure 

This is a page without HTML. I’ve stripped out all of the HTML elements to leave the text behind.

It’s pretty ugly, isn’t it?

And the reason for that is that the browser doesn’t know what elements are on a page. 

HTML works using elements. Think about something like your CV / resume in a Word or Google Doc and how you might add relevant bits of information to it and you’ll have a pretty good idea of what HTML elements are.

What might be included on a resume?

• A header

• A sub header

• A paragraph of text

• Links

• Images (possibly, we’ve all seen the ones with photos on).

In HTML land, these would roughly translate into HTML elements that would render on a web page.

HTML tells your browser which elements are on the page. Without HTML, the browser doesn’t know what exactly is in the document. Here’s the same example as previously, but this time using HTML:

You can see some elements. A header, a paragraph of text, a bullet list item and so on. HTML is an absolute must-have for modern products and it lays the foundation for other fancy things. Think of HTML as the scaffolding upon which other parts of the front end are built. 

HTML hands on - snippets to practise

If you want to learn a bit of HTML yourself, here’s a few snippets you can practice. First up, you’ll need a text editor, so grab yourself a download of Sublime Text (it’s free). 

Paragraph element

HTML works by ‘wrapping’ tags around elements so that browsers can understand what to render. This is how a paragraph of text would be written in HTML, for example.

Image element

HTML elements can also have attributes. In this example we’re using the following to render an image:

• <img> tag to tell the browser this is an image

• Src attribute to tell the browser the location of the image

• Alt attribute to tell the browser what text to display (this is used for accessibility purposes and SEO)

Header element

Headers are used to denote headers on a page and there are 6 to choose from. Just as you’d do in typography or writing a document, you’d use headers hierarchically depending on the elements you want to include on a page.

These are just some sample snippets. For a full list of HTML elements you can check out the W3 guides. 

CSS - the style

HTML is responsible for the structure of a page and CSS is interested in 2 things:

1. Styles

2. Positioning

CSS works with HTML to make web pages and applications look visually appealing or match brand guidelines.

CSS stands for cascading style sheets. Style sheets are separate documents or sheets that work directly with HTML to change how a page looks to a user. A product might have one or multiple different stylesheets but as a general rule, the fewer stylesheets, the better.

Stylesheets change the way HTML elements look on a page and the browser interprets both HTML and CSS to decide how a page should look.

Let’s explore the two main practical applications of CSS in a bit more detail.

Styles

Some of the things you can do with CSS include:

• Set the font family

• Make text bold

• Change the background color

CSS does this via stylesheets. A stylesheet is a document which outlines all of the styles for a web page as we’ve mentioned. And the syntax for each stylesheet comprises the following 3 parts:

1. Selector

2. Property

3. Value 

Selectors tell the browser what it is you’d like to change. Going back to our resume example, if you wanted to change a header or a paragraph of text, how would you do it? You’d click your mouse over the element you wanted to change, select it and make the necessary changes. CSS works in the same way, except instead of dragging a mouse over your selection, you declare the HTML element you want to change: