Web Design Explained: Code Languages

Curious about coding? This is our beginner’s guide to coding languages!

June 14, 2021 | Posted in: Web Design

In popular culture, “writing code” is referred to generically and often leads people to believe that websites, apps, and operating systems are all written in a singular special language. However, there are actually around 250 well-known coding languages. The type of code we use for websites is vastly different from the code that powers your smartphone or your car’s infotainment system.

Even within a single website, there are several different languages being utilized by every page of the site. Our developers are all fluent in a minimum of six languages, several of them also knowing a handful of others that periodically come into play.

The basic building blocks of a website

To build a no-frills website, you can actually get away knowing two simple languages. They are written intuitively and surprisingly easy to learn. If you’ve ever contributed to an online forum with “WYSIWIG” editing or taken an online college class, you will be surprised to see how familiar basic HTML looks.

HTML

“Hyper Text Markup Language” is the standard markup used for creating websites and web pages. Released in 1993, HTML is an evolving language that contains just about all of the written content you see on a website. HTML also allows web developers to display images, include links, and much more.

Here is a sample of HTML:

<p>This is a paragraph with no formatting.<p> <p>The last word in this paragraph is a <a href="https://rangemarketing.com">link</a>.</p>

CSS

“Cascading Style Sheets” is a language used to style HTML content. Within CSS documents, website developers declare fonts, colors, spacing, and sizes of the elements displayed on their website. The newest version of CSS more advanced features like animations and gradients.

Here is a sample of CSS that would customize the sizing, color, and font of the HTML example:
p { font-size: 16px; color: black; font-family: Arial; }

Advanced code languages used in modern builds

While you can technically build a complete and stunning website using just HTML and CSS, our developers use the additional languages listed below to add more functionality and optimize their workflow. Pure HTML and CSS sites are “static” and we exclusively build “dynamic” websites. The main differentiator is that static websites have a single file for each webpage and a dynamic site shares files across multiple pages. Building a dynamic website is more complicated but they are significantly more efficient and easier to maintain.

For example, a static website might have dozens of files with names like “about-us.html” and “contact-us.html,” all of which contain a copy of the navigation menu. If you wanted to remove a link from the menu, you would have to manually delete it from each individual page. If that same site were built dynamically, a single file called header.php would contain your nav menu. If you wished to remove a link, you would only need to do so within that single file. Changes to header.php would instantly effect every page on the site because those pages are dynamically pulling in the shared code within header.php.

PHP

One of the key ways we build dynamic websites is through our use of the scripting language called “Hypertext Preprocessor” or “PHP.” Initially released in 1994, PHP has become a dominant programming language on the web. Platforms like WordPress run exclusively on the newest version of PHP and use it to provide files and chunks of code as they are needed. One of the key features of PHP is that it contains “logical operators.” This might sound confusing, but it’s actually quite simple. Within the code, our developers can use terms like “if” and “or” to determine what is shown to the visitor. A simple example of putting logic into play would be:

“If the user is viewing the homepage: show the image slider, if not: show them the title of this page.”

Here’s how that would look in the PHP code behind a WordPress site:

if (is_front_page()) { show_slider(); } else { the_title(); }

JavaScript

JavaScript or “JS” is another programming language we use on every website we build. Unlike PHP which runs server-side, JavaScript is a “just in time” language meaning that it begins processing when a page is loaded. JS is a great way to add things like a live chat widget. Once the page is loaded, we can use JavaScript to initialize the chat software and respond to what a user enters into the chat box. Regular HTML doesn’t have the ability to change after the page is loaded, but with JavaScript we can program the site to continually change based on user input.

Here’s an example of some JavaScript code:

if (confirm("Start Chat")) { txt = "Welcome to our live chat. You are now chatting with Diana..."; } else { txt = "Let us know if you have any questions. We are here to help!"; }

SCSS

“Sass” is a stylesheet language that basically allows developers to write CSS as if it were a programming language like PHP. Sass is not for beginners but can be a great way for high level coders to style their web projects. There are two versions of Sass, the newer of which is SCSS. Our developers use it to take their stylesheets to the next level with variables, special functions, and greater organization across large projects.

Note that browsers like Chrome and Safari do not actually read Sass: They are served a complied version of all the styles in regular CSS files and the Sass files are only seen by the developers. Everything written in Sass stays organized for humans, while highly-compressed CSS files are shown to the browser. It may sound like a lot of unnecessary complexity, but this style of workflow makes website changes much simpler and improves website load times.

The example shown highlights how the SCSS syntax reduces redundancy. The first block of code shows traditional CSS and the second shows the same styles written in Sass. In a simple example like this, it can be tough to see how SCSS would offer any time savings. Imagine a website with 1000s of lines of code that all declared the color red for different types of text and a client who has chosen to switch their colors around. With CSS you would need to individually edit each of those styles, but in SCSS it would be as simple as changing the value of “primary” at the top of one file.

CSS



button {

 color: blue;

}

button:hover {

 opacity: .5;

 color: red;

}

button > .arrow {

 opacity: .5;

 color: red;

}

CSS



$primary: red;

$hover: .5;

button {

 color: blue;

&:hover { color: $primary; opacity: $hover; } > .arrow { opacity: $hover; color: $primary; } }

jQuery

Much like Sass is to CSS, jQuery is an extension of JavaScript. This language is technically a “JavaScript Library” that comes packed full of extra features and functions. At the end of the day, everything written in jQuery technically gets converted back to JavaScript, but writing in jQuery can help keep files human readable and editable. jQuery can be thought of as a shorthand version of JavaScript where common functions can be called upon with a standardized set of abbreviations.

Here is a sample of jQuery code that would respond to a button click by fading in a new text box:

$('button').click(function(){ $('#faded').fadeIn (); });

Replicating that same functionality in JavaScript would be extremely lengthy:

Looking to learn more about building websites?

This post is part of our Web Design Explained series, dedicated to help make web design terminology more understandable for clients, community members, and anyone else who is curious. Follow us on Instagram to stay up to date on new posts like this! If you’d like to take a coding class, we recommend Codecademy which is a self-paced and free online resource. Their HTML & CSS Course is a great place to start learning basic website coding.

Let's get started.

We Can't Wait to Meet You.

We will take a close look at your business and your current website. One of our experts will contact you with informed analysis and a plan to grow your business. Request a free analysis:

Range Marketing

50 Lakefront Blvd

Suite 214

Buffalo, NY 14202

(716) 240-9140