An introduction to web development

At Graphic Peel, we build beautiful, fully functional websites by combining high quality artwork with outstanding coding. If you want to learn the basics of web development, I guarantee that this article will be of help.

Websites consist of various resources that are stored on computers. I’m not talking about regular computers, of course, but about computer servers, which are connected to the Internet at all times. To get access to these resources, people utilize specialized applications called “browsers”. You are using an Internet browser such as Google Chrome or Mozilla Firefox to read this article right now.

To get to our site, you may have typed in its URL into the browser’s top bar, or you may have clicked a search engine result. The browser has sent its request to a domain name server, which has translated the user-friendly graphicpeel.com name into our site’s IP address, telling your computer the destination of the desired resources. Once that your browser has determined the proper IP address, it has connected to the server that stores our site, requesting the content of this page. The information retrieved from the server was sent back to your browser, which has translated the received series of bytes into texts, images, and so on. This is, in a nutshell, the entire process that takes place anytime you access a particular website page.

The web developer creates the website resources, the information that is stored on those Internet-connected servers. A typical site will always make use of Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) files.

HTML serves as a foundation for all websites; any site, no matter how big or small, utilizes some HTML. People can build simple, and yet fully functional sites by using HTML alone, to give you an idea. However, if you want to create complex sites that include interactive elements, can process visitor requests, and so on, you will want to use another programming language in conjunction with HTML - PHP or JavaScript, for example.

CSS files help websites look nice when they are loaded in a web browser. Sites that utilize great looking fonts and advanced animations make heavy use of Cascading Style Sheets.

To create the needed code, it is recommended to use a specialized editor, which can understand the syntax of the desired programming language. While it is possible to code a complex site using a simple text editor such as Notepad, you can get access to a set of useful features and significantly reduce website development time by using a specialized editor such as Notepad++, etc.

Everything starts by designing the front end, the things that your visitor is supposed to see after the requested resources are loaded in his/her browser. The developer will often start the project by making use of already available resources: stock photos, existing videos, Lorem Ipsum text, and so on. Then, as the project progresses, these dummy resources will be replaced with original content, which was created by a graphic designer. Front end resources and coding are all about making the site look as nice as possible; they don't provide any functionality.

Back end coding ensures that all those pretty menus, resources and user interfaces are fully functional. I am talking about complex database queries which are triggered when the user utilizes the website's search button, looking for a particular product that has a rating of at least 4 stars out of 5 and a cost below $20, for example. Or about the code that saves the data that was captured by a lead generation form into a database table, and then emails the same information to one of the sales agents.

I think you've got the idea: back end coding can be ugly, because it does all the heavy lifting, but it is necessary. You could get away with a site that's ugly and does what's expected from it, but you wouldn't want to own a site that looks pretty and doesn't fulfil its purpose, right? Fortunately, at Graphic Peel we take care of both these aspects.

Having a responsive site is essential these days; people continue to use computers to access websites, but many of them use mobile devices now. Your website should be able to detect the device's screen resolution, and then display an appropriate version which is optimized for desktops, tablets and phones. To see how this works, open Graphic Peel on your desktop PC, your tablet and your smart phone; you will see that the layout will be different each time, providing all the expected functionality.