Introduction to Web Development 2

A Brief History

Early 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 three  elements of a website.

  1. Content: 
  2. Design: Layout, colors, text styles, backgrounds
  3. Architecture: Links and menus, applications.


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 resized, 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 posible 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. A user interacts with a web site. They click on links, scroll, enter data and interact in many different and interesting ways. 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.

Internet Basics


Approaches to Web Development

From the ground up

This means starting with a minimal set of 3rd party code, and programming the sites functionality using languages such as PHP, HTML/CSS, JavaScript MYSQL. Pros: Can acheive unique appearance and functionality. Allow complete control of your website, and if done well, a high level of security. Cons: Very time consuming and steep learning curve.

Tutorial - Build a simple web page.

Using a client side IDE

Using this approach software you install on your computer allows you to build your site using a visual interface to, for instance, drag and drop images on to your page, or to organize menu hierachies. Pros: Allows visual control of site elements and high level of control Cons: May require purchasing third party software, Moderate learning curve

web applications.

Web development Using Raw HTML

Advantages: Absolute control. Ability to build custom systems


Dreamweaver Tutorial

Create a HTML Page

Coding Resources

            Code Academy is a free online platform that provides online tutorials on how to code anything from websites to computer games.  It assumes each user knows nothing about coding and goes in a step-by-step manner to ease you into coding language. 
            Khan Academy was created in 2006.  Its mission is to provide a “free world-class education for anyone anywhere.”  It has video tutorials on computer programming from experts in their respective fields on computer drawing, computer programming, animation, and user interactions. 
            App Inventor is a free application that allows those familiar with computer programming but maybe not too great with coding, to create apps for Android phones. 
            Code Avengers is a useful tutorial platform that breaks down website designing into various difficulty levels.  Although there are 3 levels, only level 1 is free – which includes 60 lessons and 300 tasks that can help you knock out the basics in website coding. 
Here are some resources to use for free to low-cost website builders:
1.  WIX :
            WIX is a free interactive and user-friendly website builder with over 26 million customers.  It offers quality and professional templates to start your business website and prides itself on giving the best website building support available. 
2.  Wordpress:
            Wordpress offers either free or yearly subscriptions to website domains. It offers professional templates as well as “build your own” platforms to serve to both those who are website builder savvy and those who are just starting out.
3.  Weebly:
            Weebly is a free drag and drop website builder which cater to users who are not as familiar with website design code.  It is more for those that can sacrifice website flexibility for ease-of-use. 
4.  Blogger:
            Blogger is a Google based public service that allows users to have access to simple templates while having their own flexibility on how to control their website.  It is free and has over 1.5 million users in its community.
Visit us on the web: Send us an email:This email address is being protected from spambots. You need JavaScript enabled to view it.

Business Management

Online Accounting Software


Intellectual Property