When you think about a website or an online application, like a calculator or ecommerce website, then you are looking at web development in action. All these things need a web developer to produce code that will show these websites and applications in your browser (Chrome, Internet Explorer, Firefox etc).
There are lots of jargon phrases and words that could confuse even the experienced web person and the reason for this is that this topic is fairly complex. You have servers, different coding languages, code for the browser or the server, different browsers, different devices, domains etc etc etc. The list goes on. Someone who deals with all these aspects is called a Full Stack PHP Developer. Some developers just focus on one element, maybe putting the design into code, dealing with the server set up or working on the functionality.
Either way most of what I have put above is fairly technical, I get that. Which is why I want to run through each component for you to try and explain what goes on.
I think the key to this though is that web development is what allows you to have pages and functionality online. It is that broad and covers that much stuff, which is why it is easy to get confused. Lets dig into it, section at a time.
Above we have covered, at a high level, what Web Development is but why do we need it, after all you can go onto Wix and drag and drop your way to a new website? This is true but there are limitations with any website builder and the website builders themselves need to be built!
Think about anything you see online from WordPress websites to custom functionality that allows you to do all your accounting in the browser, like Xero. All this takes web development.
So why? Well I guarantee if you want to do anything online there will be web development behind it all. Thats why... to do anything online you first need someone to build it.
I have put this section next as this is physically what allows you to see things. Think about servers like you would your computer and documents. A server is a machine that holds files and folders for people to access via the internet. Every website and every bit of functionality you hit online is stored on a server that you remotely access at home, work or on the move.
There are huge server rooms all around the world, with machines holding websites and information available for you to see the websites and access the functionality.
Domain Names / Website Addresses
When you load a website you use an address, like google.com or amazon.com. These are called domain names or website addresses. Every website has them to make it easy for you to find them.
These work by connecting the address of a server to a readable name. Lets see if I can make this easy...
- You go to a website like GoDaddy and you purchase/register a domain name, lets say mywebdevelopment.com
- You configure the domain name to point to your server (this is done using IP addresses (these are just unique numbers). This IP address/number is provided/configured at your server and you configure your domain on the website you purchased it from, in this case GoDaddy.
- Once these are connected, whatever is on the server will be displayed on the domain name
It gets more complex than that as one server can hold lots of websites on different domains but for them moment, that should be enough information to show you what's going on.
Frameworks - Laravel
Like everyone else web developers and engineers like to make life as easy and as painless as possible. So they use frameworks to cut down on the amount of time it takes to write code. So rather than writing 50 lines to execute a task they can write 5 and get the same job done.
This speed helps to keep project costs down, decrease project delivery time and keep the developers mental health positive...
Server Side / Back End Code - PHP
You may have read, seen or been confused by the term server side development. In simple terms this just means functionality that happens on the server before information is displayed on your screen. So when you submit a form for example and it goes to the server to process and then you get redirected to a thank you page. The bit that happens between hitting the button and getting to the thank you page is at the server. So an email will be triggered for example to whoever the form notification goes to.
If we did everything in the browser then your machine would have a lot to cope with and this is not the best solution. So PHP code for example is run on the server.
Browser / Front end code
There are multiple things that happen in your browser, like how the web page looks and some interactions. This code is done in the browser rather than on the server. So the server holds the code, you load a page and then this code comes to your browser and it interprets the code and displays/actions it accordingly. There are several different elements to this and I have broken them down into the following headings -
This is the structure of the page. What goes on the page in what position. Columns, lists, titles, paragraphs, etc etc. Think of the HTML like the skeleton of the page.
This is the style of the page. How does it look, colours, fonts, position, size etc. This is what makes the page look nice.
Databases - MySQL
We have talked about code, functionality, storage and some other elements but we have not touched on data yet. Data is stored in a database. Think about it like a complex Excel spreadsheet. It holds information that the code can pull and use. It might be numbers, product information, email addresses, user login details or many other things. Any information that is held and needs stored will go to the database.
Cookies & Temporary Storage
Not everything goes to the database though, think about temporary information. For example if you are shopping on an ecommerce website and you add items to the basket. These items might be stored in temporary local storage, rather than them being held long term in the database. Some information is only needed for a short period of time so your browser holds this information and deletes it after a short period of time. This time frame can be a default setting or be controlled via the website code. It is disposable information. These small tasks allow you do things that appear fast and easy (populating your basket as a guest). These would become harder otherwise as you have to login and save things to the database every time. This overcomplicates things and also puts more pressure on the server, which isn't needed. This is all to make your experience faster and more enjoyable.
Cookies are also used a lot to personalise your experience, remembering information so next time you don't have to provide it, keeping things relevant to you. All clever stuff.
Don't Forget The Other Skills
Every project has a vast array of skills needed, some technical, some creative and some softer skills. There are many other elements that go into a web development project over and above the actual coding and I have listed some below.
Keeping the project on track and within scope. The scope is just what was agreed at the start. if you asked for a fiesta and changed your mind to a ferrari then you have changed the scope. This can easily happen within a web development project. Features and functionality can be adding along the way and unless this is properly managed a project can run over budget and well over time.
Agile & Waterfall / Flexible & Traditional
There are different methods and ways to manage a project and two Schools of thought. There is the flexible agile approach which embraces change through development to keep things on track, within budget and fit for purpose. There is also the traditional waterfall approach which has a start and end and no flexibility in the middle.
Most people these days use some form of Agile approach as it is seen as far more effective. I have added this in just as a reference point for you. You can then Google it for more information if you want to learn more.
Business Analyst / Specifier
Figuring out what you actually need at the start is vital and is so often fast tracked. This, in my view, is the most important stage. Get this right and your project will run so much smoother. If you don't pick the requirements up at the start and they come up later it can mean reworking code which adds on time and budget. This stage is worth every penny and every hour that is invested into it, from everyone involved.
Think about it like this - if you start building a fiesta and half way through the build you are told it needs to travel at 200 miles per hour you will have to start from scratch again, on everything. This can be applied to web development, if the specification and requirements change mid project, everything changes.
Quality Control / Testing
Quality control and testing happens all the way through development and then there is a final round when it is all complete. A good software team has process and method to how they manage this so that issues are resolved as the project moves along. Saving time at the end.
This is the same as manufacturing, you check and test as you make a product and then have a final sign off at the end. To ensure it is fit for purpose and made to specification.
Generally speaking the client, you, would be involved in the testing to ensure it meets your requirements. The web development is put onto a test website address for you to see, before it is published to the world.
Staging Environment / Test Domain
As I just mentioned through the development the software is put onto a test website address for you and the project team to view while in development. This is called a staging environment, development domain or test domain. This will be hidden from Google and only shared with the project team.
Before the coding starts someone has to put together the architecture for the coding to work around. If you build a house with no plans it won't be a very good house. Same theory goes with web development. There are different pages, lots of data and other functionality. It needs a plan for how all this will work together and be structured. This is the job of the software architect.
Web / Graphic Designer
Making everything look amazing is the designer. They pull designs together based on the requirements. These are then given to the developers, along with the specification to build the project. Within the specification wireframes are often produced. These are just quick sketches of what needs to go where on a page. These then help the designer to ensure the design has things in the right place.
A graphic designer may do multiple designs for different pages, different size devices, different options etc.
Training & Documentation
Don't forget documentation and training. This is very important so you can maintain and use your new functionality. This may be done by a dedicated trainer or by the developer. It depends on the team size.
I hope this gives you some insight into the volume of skills and work that goes into every web development project. If you have any questions or thoughts please feel free to give me a shout using the contact form. My name is Jonathan and I look forward to hearing from you.