In Web Development

Web Development Languages

The world of web development can be an overwhelming one. With thousands of tutorials, guides and professionals all telling you about the next ‘must learn’ language or tool. But what do you really ‘need’ to learn? We’ve put together a guide of web languages to learn when you’re starting out as a web-developer.

1) HTML

HTML (Hyper Text Markup Language) is the building blocks of the web and makes up the structure of web pages. Every website you’ve visited on the web will include HTML, making it the first thing you should learn when starting out in web-development. HTML is a markup language meaning that it defines the different types of content that are on the page: headings, text, lists, images, videos etc. Content is marked out using HTML tags, these are easy to learn and are written in plain English, making it great for beginners! Writing valid HTML is important for the success of any website, it also ensures that your website is accessible for all users. You can easily check if your HTML is valid using a free validator tool.

Wherever possible we should always use the HTML semantics. This means using the correct HTML elements such as ‘header’, ‘footer’, and ‘main’ to structure your page, only then using DIV’s as a last resort. HTML is also used to create a hierarchy for your content, this hierarchy is crucial for Search Engine Optimisation (SEO). An example of this hierarchical structuring is HTML headings. These are ranked from <h1> (the biggest heading) to <h6> (the smallest heading). HTML tags add structure to the page and help search engines establish the most important parts. Using well structured HTML semantics also makes your code easier for other developers to read and creates a better experience for users who rely on assistive technologies, such as screen readers.

HTML is what’s known as a client side language, because it is interpreted by the browser without the need for a server. This also means that to get started with HTML all you’ll need is a text editor and an internet browser. Want to see some HTML in action? Right click and select ‘View page source’.

2) CSS

CSS (Cascading Style Sheets) is used to describe the presentation of a webpage and is what’s known as a style sheet language. Colours, fonts and layouts are all controlled by CSS. It allows you to get creative with your website design and create styles that would be impossible using just HTML. A feature of CSS is that you can apply the same styles to thousands of different pages across a webpage. Selectors are used to control how different HTML elements look. When using CSS you can be as broad or specific as you like in terms of what you want that style to apply to on the webpage.

This will change the colour of every bit of text on the page to pink and the font to arial:


body {
  color: pink;
  font-family: arial;
}

This will change the colour of all the h1 tags (main headings) on the page to pink and the font to arial:


h1 {
  color: pink;
  font-family: arial;
}

This will change the colour of the h1 tags inside the page footer to pink and the font to arial:


footer h1 {
  color: pink;
  font-family: arial;
}

You may find quicker ways to write CSS such as using libraries such as Bootstrap or a CSS preprocessor such as SCSS. However, it’s important that you get a fundamental understanding of CSS before you skip to the shortcuts! In the same way as HTML, CSS is a client side language. This means that all you need is a browser and text editor to get going.

3) JavaScript

JavaScript is a programming language that allows you to create interactive and dynamic web pages, adding another layer to pure static web pages created with just HTML and CSS. In simple terms, HTML puts the content on the page, CSS lays it out and makes it looks nice and JavaScript makes it do cool stuff. JavaScript can allow you to create dynamic content and add interactivity to a webpage, this means you could use any JavaScript listeners to detect various inputs, such as a mouse click, a movement of the mouse or a press of a keyboard key to trigger a desired result.

Once one of these events has been triggered you can use JavaScript to change HTML elements or CSS attributes. An example of this could be when a toggle button is clicked it could add and remove classes in HTML to change from a light version of a page to a dark version.

In the same way as HTML and CSS, JavaScript is also rendered client side in the web browser. JavaScript is a powerful programming language that is now used in both front-end development and back-end development. It has endless opportunities with the types of websites and applications you can create with it and is definitely a programming language worth getting to know.

4) PHP

PHP (Hypertext Preprocessor) is a general-purpose scripting language that is widely used in web development that can be used to enhance web pages. PHP is often used to handle user data; you can send form data with PHP, create login areas for users and even manipulate databases. PHP is a popular programming language used by Facebook and many other huge tech giants. WordPress which powers over 30% of the worlds websites is all PHP based, therefore there is a huge amount of value in learning the scripting language. PHP can also help reduce the amount of code you write, especially when building large websites. Let’s say you have a website header and footer, you know that this header and footer will look the same across all 500 pages on your site. Using just HTML you could simply copy and paste the header and footer on all your different pages, but what happens if you need to change a link in your header? This would mean that you have to edit all 500 pages. Using PHP includes it would be possible to store the header and footer in an external file and to ‘include’ this in each HTML file using just one line of code.

include 'header.php';

This would allow you to change just one file to make a change to your header across all pages, making your site more scalable. Using PHP functions such as includes also helps to declutter your code, as web developers we should always try and avoid writing more code than we need, this makes our code easier to debug and much easier to read for other developers. The fact that PHP is run on a server can be a slight barrier to beginners as they may not own a web server. However, it is possible to run PHP with a local web server by using a development environment such as Xampp to run your code. 

5) SCSS

SCSS allows you to break up and maintain your CSS easily by separating different styles into separate SCSS files that link to a main.scss file that usually compiles into one large CSS file that is then linked to in the HTML file. By doing this, it allows you to build and style your website in a more maintainable, scalable and efficient way. With traditional CSS for example you would assign different colours to different elements, these colours are usually either RGB or HEX codes, it’s difficult to visualise these colours in your code when they look something like this #6c7059. With SCSS you can easily create variables to store these colours in, which would look something like this:

$moss_grey: #6c7059;

This not only allows you to visualise the colours in your code but to quickly change them. To make this colour slightly darker would now only require you to change one hex code that is stored in the variable ‘moss_green’. Another great advantage of SCSS is that you can nest elements, this makes writing CSS even easier. An example of this could be if you want the size of the links in the footer to be 14px in size, but you only want the links in the footer to be that size.


footer {
  a {
    font-size: 14px;
  }
}
  

However, you should be careful not to nest too many elements within other elements. This can make your code difficult to read and hard to debug. Web browsers don’t understand SCSS and therefore they need to be converted to CSS to be understood by the browser. When writing SCSS it’s good to use a tool such as Prepros which will convert your SCSS file into a CSS file every time you click save.

That’s the Supremo guide to Web-Development Languages, we hope you found it useful. Want to get started on your next Web Design/Development project? Get in touch with Supremo for a friendly chat!