Introduction to Web Development

A Brief History

90's: Emergence of web 'browsing'. Display of static text, images. required long and expensive development. (the first web page)

Early 2000's: Development becomes cheaper and easier as 2nd generation tools such as development environments emerged. Increasing sophistication of search engines, web applications and dynamic page generation. Strengthening of web protocols and standards.

Late 2000's: Sophisticated web applications and content management systems allow general web development without a deep learning cycle. Social media and blogging platforms enable anyone with an internet connection a web presence. 

Now: Development for multiple platforms. Explosion of mobile computing and 'apps'. Ubiquitous use of 'cloud' resources, cheap server access, mature open source content management systems.

What is web development? 

A web developer is concerned with four aspects of a site.


Content is the raw material of a website. It consists of text, images, and other media such as video clips or sound files. Producing good web content is different from producing print content. A web page can be re sized, scrolled and can contain movies, sound files, links to other pages. and interactivity. People generally browse a web page, scanning a few key items then moving on, and they rarely read it word for word. In general have important content at the top of your page. Have clear headings and subsections, reinforce the text content with images. 


Design elements include things like background images, color schemes, text fonts borders and decorations. They should compliment and not distract from the content of the page. It should direct attention to and reinforce the content. Ground up design can be complex, considering that it must work on a variety of devices (screen sizes and resolutions, mouse or touch) and deal with a huge number of parameters (text fonts and sizes for every style for instance and every possible screen resolution) For this reason nearly all design systems are based on a set of templates that deal to various degrees with some of these issues.


This is one of the things that distinguishes the web from print. Architecture is how you organize the information on your site. Good architecture enables users to access the most important information with the least amount of clicks. How you name and structure menu items, what menus appear where on your site as well as how you categorize your sites content are key architectural decisions.



Increasingly web sites are becoming web applications. This includes things like user membership systems, shopping carts or forums and chat rooms. Often consists of modular add in components or plugins.  

Internet Basics

Setting Up a web Host and Domain

Approaches to Web Development

From the ground up

This means starting with a minimal set of 3rd party code, and programming the sites  using languages such as , HTML/CSS, JavaScript, PHP, MYSQL. Usually done using a client side code editor or IDE Pros: Can achieve unique appearance, functionality. Allows complete control of your website, and if done well, a high level of security. Cons: Very time consuming to build and difficult to learn. Generally requires a team of developers for  projects.

Tutorial - Build a simple web page.

Using a client side software (IDE - Integrated development environment)

Using this approach you install software on a computer, giving you a visual interface, and a set of tools, for working with your website. Pros: Allows visual control of site elements, reduces the need for coding. Maintains a local set of files.  Cons: Software can be expensive, requires installing and working on a limited number of machines, moderate learning curve.




Using a Content Management System (CMS) on your own server.

CMS's act as a framework for content and include an editor and a simple method for posting content to your site. They are web applications that run through a web browser.There are a huge array of CMS's and they have range of qualities, features and prices  Pros: Eliminates the need for coding. Relatively easy to build and maintain, ability to incorporate a high degree of functionality and complex architectures. Cons Some loss of control stylistic elements, can be slow to run, reduced security in some instances.


Ideal for sites with more complex architecture's and functionality. Moderate learning curve to set up. Easy to update and add content, large library of templates and plugins. Open Source

Very popular, easy to set up. Ideal for blogging sites. Lacks some of the depth and versatility of Joomla



Blogging and site builders hosted by someone else.

There are a huge variety of free hosted platforms each with there own audience and features. Pros: Easy and can be quite impressive for simple sites Cons: Little or no control over style and layout, may include ads, insecure, often 'a worldwide license to use, host, store, reproduce, modify, create derivative works..' (Google)

Hosted version of (it is run on a server owned by Wordpress). It lacks some of the features of, but is a good indication of how and blogging systems in general work. Free for basic site.


Google's free and popular blogging platform. 


Very easy to set up. Free for basic site.