Exercise
Before we can progress, we must ensure that we are working in the same, or a very similar, environment. As such, at a minimum you need to install the following applications on to your computer:
Optionally (but highly recommended) you can install the following:
If you are working on a Mac (and so using macOS), you will be unable to install Internet Explorer as a native app on your machine. While in this book it is not essential for you to have Internet Explorer installed in order to progress through the course, in the real world you will still need to test in Internet Explorer so you will need a way of accessing your website using this particular browser. One method of doing this is by using the Remote Desktop application and virtual machines to test using Internet Explorer on a Windows instance. You can find out more about this on the Microsoft Internet Explorer blog page: https://blogs.msdn.microsoft.com/ie/2014/11/02/announcing-remoteie-test-the-latest-ie-on-windows-mac-os-x-ios-and-android.
You may have heard the terms ‘front-end’ and ‘back-end’ when discussing web development. These terms are used to describe the two different aspects of the programming of a website. Front-end is responsible for creating everything that a user sees and interacts with in their browser, while back-end concerns itself more with the information itself and generating dynamic information that the front-end then displays. Let’s break this down in more detail below.
In a nutshell, the front-end is everything that the user sees. This includes the design of the site, but also how the user interacts with the site. Popups, input fields, buttons and menus are all front-end components that would be built by a front-end web developer. The front-end uses a small number of languages to achieve these results. They are as follows:
HTML (HyperText Markup Language) is the one of the main languages in web design. It is the code that is interpreted by your browser and tells your browser what to display. HTML is not a programming language, but a ‘markup language’. HTML is used for describing your webpage: it tells the browser what is a heading, what is a paragraph, what is an image, what is a list and so on. It simply describes and breaks up your content. HTML elements are the building blocks of your website.
CSS (cascading style sheets) is responsible for describing to your browser how the HTML elements should be displayed. CSS defines how everything appears. It defines colours, sizes, positions and much more. CSS can be very powerful and can change the whole look of a website in just one line of code.
JavaScript is a programming language that runs in the browser. It is responsible for adding interaction to webpages. JavaScript is the only true programming language that can be interpreted and executed by a browser, meaning JavaScript is the only way of giving programming instructions to the browser. JavaScript is commonly used to manipulate the elements defined in your HTML. Some typical examples of how JavaScript is used in web design are as follows: checking form entries are valid before submitting the form, updating content on a click of a button, and triggering popups.
Back-end development concerns itself with more behind-the-scenes logic. In its simplest form, back-end development comprises a server and a database. The code that the back-end developer writes will execute on the server, rather than in the browser. The back-end developer will also be responsible for the database, which is where the website data is stored. For the sake of simplicity, think of a database as a big spreadsheet, which can be accessed and have information pulled from it at will to be given to the front-end to display. The back end is responsible for storing the information given to it by the front-end. Forms you complete on a website, for example, will be handled by the back-end and stored in a database.
There are many different languages that can be used on the back-end, such as Java, PHP, .NET, Ruby, Python, Perl and many more. Each of these languages is dynamic and they all run directly on the server and do not interact in any way with the browser. Each language is described as a ‘scripting language’ as files are written as scripts which are then run on the server and return an output. Effectively a script is a series of instructions for the computer/server to carry out in a specific order.
You may have heard about CMSs (Content Management Systems) such as WordPress, Joomla, Drupal, etc. These systems bridge the gap between front-end and back-end; they run on the server and are written using a back-end language (typically PHP). However, they allow a front-end developer to carry out typically back-end functions by using an interface that runs in the browser. For example, a CMS will allow a front-end developer to easily store and read information from a database and output it using front-end languages such as HTML, CSS and JavaScript.
We have learned the technical difference between the internet and the World Wide Web. We have explored exactly what a webpage actually is and briefly introduced the main construction language of web design (HTML). We also explored the most popular web browsers and looked at the intricate connection between servers, domains, subdomains, URLs and IP addresses. We then learned the role the DNS plays in that connection and then put everything together to understand what is happening every time we visit a webpage, and just how that webpage reaches our web browser. You should now have a base understanding of the key principles that underline how the World Wide Web works, which will form the foundation for the rest of this book.
In this chapter we also learned about the modern web landscape and the essential tools used to create some of the web experiences we see on a daily basis. We explored why it is important to install more than one web browser, and understood some of the benefits of using a specialized text editor for web design. We introduced FTP clients and touched upon why it is important for a web developer to use an image editing application.
You should now also understand the difference between the front-end and the back-end and have an understanding of the languages that reside on either side of the spectrum. We looked at how CMSs fit into that landscape and their role in the web industry. We also introduced the main languages used in front-end web development and their role within the browser.