Exercise
Go to http://mxtoolbox.com/DNSLookup.aspx and test out searching for various domains. Have a look at some of the IP addresses associated with that domain. Test what happens when you put that IP address directly into your URL bar on your browser. Notice how the domain is simply a name for the IP address of the server. By doing this exercise, you are effectively replicating the first steps that the browser takes whenever you visit a webpage.
In this book, we will be focusing on the front-end spectrum of the landscape. We will be learning about HTML, CSS and JavaScript, before using these tools to build a webpage. These front-end languages are comprehensive enough to allow us to build a static website with interactive elements that could be used for a number of different scenarios.
Table 1.1 Tools and languages glossary
Static website |
A static website is a website that has content that does not change dynamically. It is not connected to a database, and as such the information is written directly into the HTML and will not change unless the web developer changes it manually by altering the code |
Languages |
In computer programming terms a ‘language’ is a set of defined commands, used as a method of giving instructions to a computer |
Remote server |
A server that is not directly accessible to a user physically, usually located in another building and sometimes in another location entirely |
FTP |
File Transfer Protocol – a standard network protocol used for transferring data between a client and a server |
Debugging |
The process of locating and removing errors from our website |
, you could learn an easy-to-use CMS, such as WordPress, and create dynamic websites for any situation.
A website is written in a number of different text-based languages, such as HTML, CSS and JavaScript.
In order to write these languages that will be interpreted by the computer, we need to use a text editor. There are many different text editors available for use in web design. While the reality is that you could write a website using nothing more than the standard notepad application included with all installations of Microsoft Windows, this would not be ideal for your website as you wouldn’t be benefiting from the additional features that come with a highly specialized text editor, purpose-built for computer programming.
A relatively new text editor that has quickly become something of an industry standard is Sublime Text (https://www.sublimetext.com/). Sublime Text is a free application (albeit with an option to pay to remove an infrequent reminder popup), and it is full of features that make it perfect for web development – including the ability to install plugins to improve your programming experience.
We will be using Sublime Text throughout this book, and introducing some power-user tips throughout to help you to get the most out of the software. While you do not have to use Sublime Text, it is recommended that you use it for the duration of this book as it will give you an understanding of how text editors are used in web development and also some of the plugins that are most commonly used. This understanding of how to enhance your experience of using a text editor along with an awareness of the most useful and popular plugins, can then be taken over and used on any other plugin-based text editor you wish to use going forward, such as Brackets or Atom.
As I explained earlier, websites are hosted on web servers. Because web servers are (mostly) remote servers, we need a way to communicate with the web server and deploy our website files to it.
For this we use an FTP (file transfer protocol) client. An FTP client is an application that allows you to transfer files between your computer and a remote computer (in this case, our server) via the FTP. Effectively an FTP client allows us to connect to the server and then move files to and from it, just as you would a folder on your own hard drive.
As with text editors, there are many different variants of FTP clients that can be used, but we will be using a free software that is widely adopted across the landscape called FileZilla. FileZilla works on both Windows and Mac and supports a wide array of features, though in this book we will only be using the base features required for us to get our website online, such as connecting to servers, transferring files and setting permissions.
Simply put, web browsers are responsible for presenting the websites that we build. For the end user, this is the main role of their web browser so they are generally happy with any of the modern web browsers that are available. However, for a web developer, there is more to consider when selecting a web browser. When developing for the web, we need a method of debugging our code and inspecting exactly what is going on.
As such, modern web browsers contain a mode that most end-users will never use and are mostly unaware of, responsible for the debugging of the website. Each browser has its own version of a debugger, mostly referred to as the ‘inspector’ or ‘inspector tools’. This mode is where a web developer will be spending most of their time when debugging their website in the browser and as such, is a huge influencer when deciding which browser to use.
Once again, we will be using the most widely adopted browser for web developers, which is Google Chrome. Chrome has a fantastic set of developer tools at its disposal, which are invaluable to the modern developer.
It is important to note that each web browser has its own set of rules and standards for displaying content, which means that a website will render differently in each browser. As such, we must install and test our website in the current most popular web browsers to ensure that our website renders correctly.
Currently the most popular web browsers, as mentioned previously, are:
We should therefore aim to install and test our websites on all of these popular browsers.
The modern web is a very visual medium. Where websites once had to use images sparingly, if at all, owing to slow internet connection speeds, with the vast improvements made to internet speed over the past decade, websites can now justify including a lot of media and don’t have to worry as much about their page loading speed. Search for the 2005 BBC homepage and compare it to the same site just five years later in 2010. Web technology advances every single day, which is what makes being a web developer such an exciting career. With this recent trend towards particularly media-rich websites, housing a lot of images and video, it is important that we are able to create and manipulate media for use on our website.
A common tool for the modern web developer is an image editor. While this is not completely essential, it is highly recommended. An image editor has many uses for a web developer: it allows us to crop, resize, edit and optimize images for the web. This allows us to have much more control over the media used on our website, and in turn, helps us to build a better website.
Free options for professional image editors are limited, though they do exist. GIMP, for example, is a cross-platform image editor which is more than up to the task of manipulating images for the web – though it is far from being the most widely used tool for image manipulation in web design. That title belongs to Adobe Photoshop. Photoshop is a brilliant tool that has been used by web developers for many years. With fantastic image optimization settings, it allows us to create website-ready graphics with relative ease. Photoshop offers a free trial, which will allow you to test out the software for 30 days.
Photoshop is not essential for you to complete this book as the assets will be provided for you ready for use. However, it is still recommended that you read the Photoshop section closely to understand why image editors are used in web development.