I’ve been a web developer in Surrey for many years. It often conjures images of sitting in front of an array of screens, fiercely tapping away on a keyboard whilst staring deep into page upon page of code. Think of the Matrix films.
Don’t get me wrong, I’d love a set-up like this whilst working. Multiple screens do actually totally help to see various windows and applications open. And we do sometimes spend hours staring at code.
I often get asked what the hell am I doing as a web developer, or how it all works. So here I’ll try to break down the tasks involved in web development and explain some of the common terms you may hear. There are things we might know how to do but we generally don’t, like setting up your email or providing the services of an IT support company.
Before I start, let’s be clear – done properly, web development is hard. Coding languages are forever evolving and changing. I learn something new every day I work with code, and I enjoy the mental challenges it provides. But you have to accept that you’ll never know everything.
Also when I say web development, I’m not talking about using any sort of visual page builders. In this article I’m talking about, for example, building a custom WordPress theme or custom website.
Different types of code require different parts of the brain and different ways of thinking. Let’s look at the key areas of web development.
Web Developer: The ‘Front-end’
When you hear the phrase ‘front-end development’, this refers to the part of the website that the web site visitors see. It’s how the site looks and interacts with the users.
For example, it could be the website navigation, the layout of the page and the footer. It’s the colours, typography and images you see. Front-end development is what works with your browser, it predominantly uses the following core coding languages. Remember we love a good acronym:
1 HTML
Hyper Text Markup Language
The building blocks of your website. It consists of various elements within your webpage that break up the structure.
The most recent version of HTML5 is semantic, so its different types clearly explain to the browser and the developer what they are.
For example, you might have a site header <header> which will include your logo and maybe your site’s navigation <nav>.
Then down the page we can break it up into sections <section> or articles <article>.
Then at the bottom of the page, we might have our footer with contact details and other navigation <footer>.
HTML includes limited information about how things should look, that’s where CSS comes in.
2 CSS
Cascading Style Sheets
CSS provides information on the aesthetics and to some extent interactivity of an HTML element.
Most web front-end developers in Surrey you speak to love CSS.
For example take our <header> element. By referencing it by element type, a ‘class’ or ‘id’ we can make it do things.
We can apply a class to multiple elements throughout a page, but an id should be unique and used only once per page.
So for example, take the following header HTML element (hold on to your hat, we’re going to learn some code):
<header id=“my-header” class=“full-width”>
My Site Title
</header>In our header element, we have the words My Site Title.
Say we wanted to reference this in CSS, we could do the following:
header {
}
#my-header {
}
.full-width {
}The id # is unique, so any CSS properties you list here will only refer to that one element.
Your page might have multiple header elements, so anything here would apply to all headers.
The class you can apply it to any element throughout the page. So properties you add here will apply to all elements regardless of their type or id.
Worth noting that a property applied via id will override a class property.
So let’s look at some simple CSS properties to give you an idea of what you can do.
header {
font-size:22px;
}
#my-header {
background:#000;
color:##FFF;
}
.full-width {
width:100%;
}This would make all headers use a font size of 22px. The header with the id of ‘my-header’ will have a black (#000) background with white (#FFF) text. It will be 100% wide (along with any other element which has that class).
You can also reference colours by RGB values. Not everything with code is #000 and #FFF!
CSS can also help create animations, provide hover states, and help change how things look on different screen sizes from laptops to phones. It interacts with images, so you can create backgrounds and sprites.
Think of CSS as helping you colour in your (HTML) drawing.
You may have heard of SCSS or LESS – these are basically slightly different ways of approaching CSS, for example allowing you to nest styles, work with variables or by creating separate CSS files for individual pages of the site. But they ultimately format the code into CSS.
On a website, CSS can be loaded in two main ways. Usually, all CSS for a site is contained with a stylesheet, a separate file(s) which contains just CSS, and is loading alongside your HTML.
Alternatively, CSS can be loaded in line with the HTML, so properties are actually coded within the element. This might look something like this:
<header id=“my-header” class=“full-width” style=”background:#000; color:#FFF;”>
My Site Title
</header>This has pros and cons. When done in certain ways it can help a website load quicker, especially if you are optimising to load the top part of a webpage first (the ‘above the fold’ content). Some CSS files can be thousands of lines long, so their loading can block a page from rendering quickly.
3 JS
JavaScript
Not to be confused with coffee, Javascript is a more complex language that allows for some more complex functionality to be performed in the browser.
You may have heard of jQuery, this is a library of Javascript functions which is designed to make it easier to implement on a website.
Some examples of jQuery implementations include a slider, scrolling effects, manipulation of HTML elements (eg adding or removing CSS classes, IDs or properties), creation of Cookies, and even pop-up windows.
Like CSS, jQuery is usually kept within its own separate file which is loaded with the HTML and CSS, but scripts can also be directly embedded into the HTML.
When loading jQuery files, a site may often use multiple files for different functions, and the HTML head will list three files out and load them individually.
Now jQuery is great. But a single error in one piece of jQuery can break a page – once the browser comes across an error, it prevents it from loading any more jQuery scripts on that page. So if the layout is depending on it, this will cause problems. And a mistake could be something as simple as a missing colon!
For the user to be able to browse the site the web browser executes the above 3 front-end languages on the user’s computer.
Web Developer: ‘The Back-end’
The phrase ‘back-end development’ refers to the part of the site the developers and website owners see, it’s what provides the complex functionality a site may have, eg a content management system like WordPress.
Back-end coding languages are performed server-side, ie where the website files are hosted.
There are 2 main back-end languages we commonly use:
1 PHP
Hypertext Preprocessor
Php is a widely-used open-source scripting language which can be embedded into HTML.
Its most common use is with a CMS such as WordPress, where it interacts with a MySQL database, pulls required information and displays it within the HTML.
For example, the page may request a list of the 5 most recent blog posts. Php will visit the database, find the blog posts, and then bring them back to the HTML. Our CSS will then tell it how to look. Easy right?
Php is also great for manipulating this data. You can perform math, store and manipulate variables, create conditional logic, loop through arrays of data, and even manage ‘sessions’ on a site with a login capability.
Again you don’t want to go losing that colon as it will break the page.
2 MySQL
My Structured Query Language
Although it sounds the most complex, in many ways it’s the type of information most IT-literate people can understand.
A MySQL database is essentially a huge spreadsheet with multiple tables and rows of data.
You can query this data with PHP and a SQL query which looks something like:
SELECT * FROM tablename WHERE something EQUALS something else
The database will only store text-based information. When other data is needed such as videos or images, the database stores the location of the file rather than the file itself.
The database itself is never seen by the front-end user, they just see the results of the database queries which are created to bring the required data to the webpage.
Conclusion
As you can see there is a lot to think about with web development. Even though a huge portion of time is spent building things, a big part of web development is about fixing bugs and getting things to work in a particular way.
We have to make sure a website provides the best user experience possible as well as making sure our code is secure, accessible, optimised and up to date.
No two websites are the same, and each one presents its own programmatic challenges which must be overcome.
To be a good web developer, I believe you need to be pragmatic, and able to think logically as well as creatively to solve those problems you encounter. You also need patience, an eye for detail, and lots of coffee.
Get in touch today if you are looking for a web developer in Surrey.
