The Webmaster

Web Development

Web Development Glossary

Jonathan Griffin
Oct 14, 2022
1 min read
Progressive JPEG Images

Developers, like any specialized industry, has its own unique set of terminology, definitions, and abbreviations.

This Development glossary contains some of the most common terms you are likely to need to know when developing your website, either with a developer or yourself.

A B C E H L M R U W

A

Agile Development

What is Agile Development?

Agile development is a buzzword commonly thrown around by web developers as the new modern way of working. Agile development is where a team of developers will work on the project for a set time (usually weekly), during which time they will roll out specific features.

A sprint will usually involve all five stages of development, including designing, development, testing, deployment, and review.

API

What is an API?

API stands for Application Programming Interface and is an interface that defines how interactions can happen between two software intermediaries. An API is entirely custom and can determine the type of calls that can be made, how to make them, and the data format used.

It is better explained using an example. A weather service may want to make their data available for other apps and services to consume. Instead of allowing those apps to connect to their database, the weather service publishes an API. The app can query the API to request the relevant data and consume that data in its own app. You can visualize this in the diagram below:

API.

B

Back End Development

What is Back End Development?

Back End development relates to the server-side of development, focusing on the application’s nuts and bolts and how it works. Back end development usually relates to the server and database and the application’s code that communicates between them.

Browser

What is a Browser?

A browser is an application that you use to access websites. Examples include Microsoft Edge, Chrome, Firefox, and Safari. It is good practice to check your website in each of the main browsers (Cross Browser Testing) to ensure compatibility.

Bug

What is a Bug?

A bug, or software bug, is an error or flaw in a computer program that causes it not to function as intended. We recommend using a bug tracker such as GitHub to manage and track any bugs you find.

C

CSS

What is CSS?

CSS, or Cascading Style Sheets, is a declarative language used to style elements on a webpage via style declarations. These style declarations ultimately control how a web page will look.

A CSS style declaration contains a property and its values. For example, to set a paragraph to have red text, you will set the <p> element’s color property to the value red. See below:

p {
    color:red;
}

E

EM

What is EM?

An EM (Emphemeral Unit) is a unit of measurement relative to the font size of its parent. As such, when the parent font size changes, the size of the child font changes automatically.

You can use our EM to PX calculator to calculate the pixel size of a font from an EM value. Alternatively, here is the formula for EM to PX:

Formula: Size in EM * parent font size in pixels

Example: 2em * 16px = 32px

H

HTML

What is HTML?

HTML is short for Hypertext Markup Language and is the standard markup language used when creating web pages. HTML is comprised of the following:

  • Text content - What the user sees.
  • Markup - How the user sees the text content.
  • References to other files - HTML can reference other documents or files, such as /images, videos, stylesheets, and javascript.
  • Links - Links to other pages.
<!DOCTYPE html>
<html>
<head>
  <title>Page Title - Shows in the Browser bar</title>
</head>
<body>
  <h1>Main Heading</h1>
  <p>Paragraph.</p>
</body>
</html>

HTML Comments

What are HTML Comments?

HTML comments are comments in your source code inserted using a HTML comment Tag. Comments inserted this way are hidden, and do not show to your users.

<!-- This is a single line comment -->

L

Lazy Loading

What is Lazy Loading?

Lazy loading is a strategy of delaying the loading of assets, such as images, until the user requires them. An image, for example, maybe set to load only when the user scrolls down the page and they come (or about to come) into view.

There are a variety of techniques, including native HTML and many JavaScript libraries. One of the simplest ways to implement lazy loading is to use the loading attribute.

M

Mobile-first

What is Mobile-first?

Mobile-first design is where a designer will start designing a website for mobile devices first, after which they will move up the screen sizes and adapt it for tablets and desktops.

Prioritizing the mobile design first prevents designers from running into space limitations. They can ensure that all the critical elements of a website are prominently shown on the smallest screens from the start.

R

REM

What is REM?

An REM (Root Emphemeral Unit) is a unit of measurement relative to the font size of its the root element, which is the <html> element. If the <html> element has no font-size set, the browser default of 16px is used.

You can use our REM to PX calculator to calculate the pixel size of a font from an REM value. Alternatively, here is the formula for REM to PX:

Formula: Size in EM * base font size in pixels

Example: 2em * 16px = 32px

U

UGC stands for User Generated Content, and a UGC Link is generated by the user. Examples of UGC Links include forum links and blog comment links.

UI Design

What is UI Design?

UI design is short for User Interface design. UI design relates to how you interact with the website. It includes all the interactive elements such as swiping motions, scrollbars, clickable elements such as buttons, and more.

The goal of UI design is to provider a positive experience for the website visitor, and is a cruicial subset of the overal User Experience (UX).

UX Design

What is UX Design?

UX design is short for User Experience design. UX designers work on providing a great user-friendly experience for website visitors. UX designers focus more on the user’s journey through the website and helping them to achieve their goals.

This differs from UI design which focuses more on how the website looks and how the end-user interacts with it.

W

Wireframe

What is a Wireframe?

A wireframe is a rough page layout or blueprint of your website. It shows how your content will be arranged, including navigation and how the components interconnect. It helps designers communicate to their clients how the website should be structured without investing too much time with the design elements.

WYSIWYG

What is WYSIWYG?

WYSIWYG stands for What You See Is What You Get and is pronounced “wiz-e-wig.” A WYSIWYG is a graphical interface that allows you to modify content on your website without any HTML knowledge. If you need something bold or underlined or made a heading, you can highlight the text and click a button in the toolbar.