Website Coding 101: Introduction

It’s time to get a bit technical and step into the world of coding with this guide to the language of web development. We’ve stripped down to the basics to bring you simple explanations of the language behind your website – that isn’t English. There are many programming languages out there, each with different functionalities, […]

It’s time to get a bit technical and step into the world of coding with this guide to the language of web development. We’ve stripped down to the basics to bring you simple explanations of the language behind your website – that isn’t English.

There are many programming languages out there, each with different functionalities, and there are more being created every year: JavaScript, PHP, Python, Ruby, C++ to name a few.

You might hear us use the terms frontend code, backend code, stack, framework. In this series we will talk about the meaning behind these technical terms, starting with an overview to gain basic understanding of how they all work together to create your website.

 

blog_diagram

Programming Language

A programming language specifies a set of instructions that can be used to produce various outputs. It consists of a vocabulary and set of grammatical rules for instructing a computer or computing device to perform specific tasks. Each language has a unique set of keywords or “syntax” for organising program instructions – the “semantics”.

Below is a list of top programming languages by popularity in 2017 according to IEEE Spectrum, inclusive of four categories: web, mobile, enterprise and embedded [source: spectrum.ieee.org]

 

MjkyNzIzNQ

 

There is no “best language” that is omnipotent; every language has its strengths and weaknesses. Also not all programming languages are designed for a web environment. With advancements in web technology, it is imperative for every business to have a website that is highly functional and visually attractive using purpose-built programming languages.

 

Frontend, Backend & Stack

Minimal requirements for web development encompasses the following: web design, content creation, programming, network security tasks and client and server side configuration. If you have a content management system or CMS, then it will look after the user and the database as well.

The term frontend refers to the UI (User Interface) and how content is displayed. The term backend refers to everything else – programming, network security tasks, client side or server side scripting and database. While a frontend developer only requires knowledge in HTML/CSS and a few other programming languages, as a backend developer you have to be an expert in one or more complex programming languages such as PHP or jQuery.

If you are fluent with both frontend and backend then you are a full stack developer. The term “stack” refers to the layers of technologies the developer uses together to build a website or application. These layers include client side programming languages, and server side languages, operating systems, and database types.

 

Framework

A framework is the skeleton structure of the programming language. For example, it’s easy to cut a paper into 5cm x 5cm but you need a structure and plan, i.e. a “framework” to efficiently cut 1000 pieces of paper into the same dimensions of 5cm x 5cm.

The framework is a complete set of tools that’s purpose-built to increase productivity and improve the quality, reliability and robustness of an application built with it. Frameworks take the form of libraries, models, application programming interfaces (APIs) and other elements of coding shortcuts so developers aren’t hand-coding web applications from scratch. For example jQuery is a library of JavaScript on which other JavaScript frameworks are built on, created by a former Mozilla engineer as an open source project.

Later in the series we will go into more depth in defining each of the programming languages and how they work together to create your website.

 

Glossary of web terms

API Application Programming Interface: tools for building application software.

Backend: Enabler for a frontend experience like calculations, logic, database interactions,
and performance.

CSS: Cascading Style Sheets: a style sheet language used for describing the
presentation of a document written in a markup language.

Framework: Provide a structure to automate building and deploying web applications.

Frontend: User facing experiences – what the user sees and interacts.

Full stack: Both frontend and backend.

HTML: Hypertext Markup Language: standard markup language for creating web pages
and web applications.

JavaScript: A programming language that is one of the three core technologies alongside
HTML and CSS for web development. Often abbreviated as JS.

jQuery: A library of JavaScript on which other JS frameworks are built.

Stack: Layers of technologies to build a website or application.

UI User Interface: design elements that allow interaction between the user and the
application or device e.g. buttons and menus.