Overview of this Lesson

This lesson gives you an overview of web development. We will learn the web development process and life cycle and then discuss the difference between the Internet and the World Wide Web. You'll learn how the Internet and WWW works and how web pages are magically served up to you in your web browser. We'll also explore the basic technologies you will need to learn to develop web sites and web applications.

An Overview of Web Technologies

When we talk about web technologies, we're referring to the languages and frameworks you can use to develop web applications. There are a few very basic technologies that are common across most applications, and these are also the foundation of other tools and frameworks. Let's take a look.

Activity/Demonstration

Many new developers get confused over the difference between HTML and CSS. Try the following activity to help you understand a bit better:

  1. Visit the What Can CSS Do? demonstration
  2. Click each of the "Example X" buttons.
  3. Write down all the things that are different between each of the three examples. (What changes?)
  4. Now try the "No CSS" button. What things are no longer visible in the page? What has changed?

After doing the demonstration, you should have noticed the following changes between the 3 different stylesheets, and the "No CSS" example:

  • The location of the main navigation buttons/links changes (sometimes it's under the header, sometimes it's on the left or right side).
  • The colours and borders of the main navigation buttons, including whether or not they change colour when the mouse hovers over them.
  • The background colour of the page.
  • The font style used in the page.
  • The colours and border styles of the header and footer.
  • The colouring and border appearance of the "Sidebar".
  • The position of the sidebar: sometimes it's on the side of the page, sometimes it's between paragraphs.
  • In the list of links inside the "Basic Example" article, sometimes the list items have bullets and sometimes they don't. When they have bullets, sometimes the bullets are dots and sometimes a different symbol.
  • Sometimes the list items have lines between them (these are bottom borders). Sometimes the list and list items have background colouring.
  • In the third example, the main article has a shadow behind it.
  • The headings change fonts, colours, and whether or not they have decorations like underlines.
  • Sometimes some links have the standard underline and sometimes they don't.
  • The amount of spacing (margins and inner padding) varies on the different parts of the page, between items, between items and their containers, within items, between an item's text and its inner borders.
  • The size of some elements' text changes.

You might have spotted other things. In summary, CSS can alter the following things:

  • Fonts (font families)
  • Colours of elements and text.
  • Text formatting: bold/italics, decorations, etc.
  • Borders: line style, thickness, colours, rounded corners, etc.
  • Layout and positioning of items on the page.
  • Lists: bullet style, symbol, colour, and other formatting.
  • The amount of margin space around an item and also the amount of padding space inside an item between its contents and its own inner borders.
  • The size of items and the size of text.

You can even do advanced things like changing how items appear when the mouse hovers over them or when they have the focus.

HTML is responsible for defining:

  • The structure of the page. For example, each page has the same header and the same footer. Each page has the list of links, each page has the sidebar.
  • The actual content (text) in the page: each page has the exact same text content (except where I changed the name of the example, which I actually changed using JavaScript, but that's a diffent course entirely).

These three technologies are the foundations of more complex tools and frameworks you can use to develop web applications. For example, JavaScript is the base for Node.js, JQuery, Angular, React, and Vue.js.

If you're also interested in server-side development using databases and you might also want to learn a server-side language. There are several options to choose from including PHP, Python, Ruby, and Node.js (server-side JavaScript).

I have several tutorials on web development that will help you learn some of these technologies. I suggest that you complete them in the following order:

  1. HTML
  2. CSS
  3. JavaScript
  4. Followed by a server-side technology such as:
    • PHP
    • Node.js (coming Fall 2023)

Web Development Process

Many people think of web development as just sitting down and coding in HTML, CSS, and JavaScript or using frameworks to create a web page. In fact, the actual coding part of web development is one small part of several stages of the development process. For example, a developer needs a clear definition of the site's purpose or goal and who the site's intended audience is. A developer also needs to take time to plan out the pages in the site or application and define how they're linked together, as well as plan out the structure of each page or part of the application and determine and what kind of styling (colour, fonts, etc) the pages will have.

There are many ways to define the Web Development Life Cycle: if you perform an Internet search for such information, you'll find 6 stages, 8 stages, 4 stages - lots of different ways of laying out the same information. Regardless of of how many stages a person is using to develop a web site, all the tasks and processes are the same. I've laid it out for you in 6 stages, but other resources with 6 stages might combine "Launch" and "Testing" into one stage and split "Planning" up into "Visual Planning" and "Content Creation". It doesn't matter. It's more important to become familiar with all of the tasks that need to be taken and the order in which they should be performed.

Stages of the Web Development Life Cycle

  1. Definition
  2. Planning
  3. Development
  4. Testing
  5. Launch
  6. Maintenance

1. Definition

The definition stage is the first and most important stage of the web development life cycle. If you skip this stage, your web site won't meet the client's goals and won't reach the target audience. In that case, the client has wasted their money and your time for a web site that doesn't do what they want.

The definition stage involves collecting and recording information about the client and the proposed web site. Why does the client want the web site? What is it for, what is the purpose and the end goal of the site? What content appears on the site and where does that content come from? You need to find out this information by talking to the client and the site's/application's potential (or existing) users, looking at any existing material (documents, an old web site or old application, catalog, files) currently being used.

Your information gathering should answer all of the following questions:

Once you have these questions answered, you should have a clear idea of what the site is for, who the site is for, and what kind of content it will have. You would typically summarize all of your information into a report and hand it in to your client. Your client will review the report and ensure all the information is complete and correct. If any changes, additions, or omissions need to be made, they will tell you and you can update the report. The updated report is then handed in to the client for another review, and the process is repeated until the client agrees with everything in the report.

With you have a complete report, you can then move on to planning out the web site.

2. Planning

The planning stage shouldn't be skipped: completing this stage in full prevents mistakes and omissions during the coding phase. It also speeds up the coding process because much of the detail work can be laid out during the planning stage. The output of this stage must also be approved by the client before you're allowed to proceeed to the next stage.

Typically, the planning stage involves 3 smaller steps:

  1. Project Scope: this involves planning out the tasks that need to be performed, in what order, and how long each task should take.
    • If you're on a team, who's doing which tasks? Who's in charge of content, who's in charge of coding the HTML/CSS/JavaScript/etc, who's in charge of setting up the database?
    • In what order should the tasks be completed? Often a task can't be performed until another task is finished. For example, you can't start coding the CSS for the site until you've determined the colours, fonts, and layouts for each page.
    • Timelines: plan out each task that needs to be done and how long each one should take so you can be completed by your deadline. This usually involves a tool such as a Gantt Chart.
    • Even if you're a team of one, you still need to determine the tasks to be perfored and how long each task should take. Clients won't recommend you to other clients if you're disorganized or late with your deliverables.
  2. Content: create/obtain any content the site needs. This includes text, pictures, images, links, etc. Develop content to aid with accessibility such as captions for videos, text/audio for image descriptions, etc. Some of this might also be done during the Development phase.
  3. Visual Planning: designing the site map and the wireframes for each page in the site and determine the colour scheme or themes to be used.
    • Site Map: a hierarchical diagram that shows each page in the site and how it connects to other pages in the site. You can use lots of tools to create a site map, such as Microsoft Visio, or a free web-based tool like Cacoo.
    • Wireframe: a diagram that shows the layout and structure of a page. Wireframes don't contain actual content, but they might contain annotations that indicate colour or font. Most tools that allow you to create site maps also have the ability to create wireframes.
    • Styling: decide on the colour scheme to use for the site. This usually involves a minimum of 3 colours: a main colour, an accent colour, and a highlight colour. Ideally, you'll want darker/ligher shades of these three colours, also. The colours may be determined by a company logo or the client's personal preference, but you should also keep up with current colour trends: every year there is a new set of popular colours! Decide on which fonts to use and make plans for accessibility (e.g. a screen-reader-friendly version of the application). Determine the client's branding preference for the application (size and location of logo, for example), and determine how images will be displayed (thumbnail, with borders, etc). Ensure that all pages on the site have a consistent appearance.

Site Map Example

Here is an example of a site map for one of my old course web sites at the college where I teach.


Example of a site map

Wireframe Example

Here is an example of a wireframe for one of the pages on my old course web site.


Example of a wireframe

Once you have all of the site maps, wireframes, content, and styling decisions finished, you can start coding!

3. Development

This is the coding part of the process. This is what everyone imagines when they find out your a web developer - they picture you sitting at a computer for hours typing out code. In fact, this is only a small part of the web development process!

Development involves writing the source code that makes up the site's content and functionality. In this course, we'll be focusing on HTML and CSS, but in semester 2 you'll focus on JavaScript and PHP to create more functional and interactive web applications.

Typically, web pages will include code written in:

There are also many technologies and frameworks based on the items above. For example, Bootstrap is a framework you can use to add CSS to your application and Node.js is a JavaScript technology that allows you to perform server-side operations using JavaScript code.

The development phase also might include some content creation. For example, if your web site's content is driven by a database, you will spend some time in the development phase creating the database and populating it with the data that will appear on the web site.

4. Testing

Testing the site involves publishing the site to a small audience. This generally includes the client and a small selection of the target audience. These people are called "test users". Test users try out the site and look for errors, omissions, functionality that doesn't work, spelling/grammar mistakes, and other problems.

Testing is also done in multiple browsers and on multiple devices to ensure the site appears and functions properly with different software, on different computers, and with different devices and screen sizes. This also includes testing your application with accessibility software and uesrs that use accessible software and devices. For example, you'll want to make sure your page is screen-reader friendly and that any elements are accessible with both the mouse and keyboard.

Testing is a very formal process. I've been involved in testing several web sites and web-based applications and they have always involved filling out detailed forms about any problems encountered, along with screen shots. Often the development team contacts test users for more information or to follow up on fixed issues, so being able to communicate well with users by phone, email, or in person is very important.

Once all of the testing has been completed and all issues have been fixed, it's time to launch the web site.

5. Launch

Launching your site involves publishing the content on the Internet (uploading all of the application's files to a web server). If the client doesn't have a web server, you need to provide one for them. They might wish to have their own dedicated web server or use one of several hosting sites available (for a fee).

Once the web site is live, it's important to get feedback from users. You did this during testing, but it's possible that the test users missed something, or perhaps a different user finds an issue with the live site that wasn't an issue on the test site. Get feedback from the users in the early stage of the launch phase and make any necesssary changes.

6. Maintenance

Once you've developed a web site, it's not out of your hair forever. There will always be ongoing maintenance: users will always want some new feature, and more issues may be discovered. Web content is always changing as time passes: you may have to update text or images on the site as things change. And of course, you can always improve things: users might discover a feature is cumbersome and you'll have to make it more efficient, or perhaps a new technology allows you to do something in a better way.

Always ensure that any site you develop has a way for a user to provide feedback to the client. The client will inform you when they need to you fix, add, or improve something based on user feedback. In the meantime, you can move on to a new project. :)

Exercise

You've likely found these tutorials because you're interested in building your own web site or web application, or you're taking a college or university course in web development. You've probably already got at least one idea in mind for a web site or application you'd like to create. Think about that application, and go through the first two phases of the web development process by filling in the answers below:

  1. Project Definition
    1. Why does this web site/application exist, what is its purpose? Write at least 2 ability statements.
    2. What are the goals this web site/application needs to achieve? Write at least 2.
    3. Who is the intended user/audience for this site/application?
    4. How does this site/application support the goal of the client?
    5. What kinds of content will the site/application contain and where will that content come from?
    6. What kinds of interactivity will the site/application have?
  2. Planning
    • Outline all the tasks that need to be performed and in what order. If you're comfortable, sketch out the timelines for each task.
    • Sketch out a rough site map for your site/application.
    • Choose at least one page in your application and design the wireframe for that page. Think about the theme and colour scheme you might use.

Understanding the Web and the Internet

Many people mistakenly believe that the World Wide Web (aka "the Web") and the Internet are the same thing. In fact, they're not! The web is actually only a small part of the Internet. The Internet is a global network of computers that share information. The web is a part of that network that allows people to share information using hypertext (web pages and applications are made of hypertext, which are the pages that contain links you can click on).

Watch these two videos, as they define define this difference more clearly:

It is also important to understand how the Internet works. This next set of videos do this really well!

After watching those videos, you should have a clear understanding of the Internet and the Web. Test yourself by making sure you know the answers to the following questions in your own words:

  1. Currently, what are the most popular browsers being used? Do you think this means you should only design your web pages/applications to target the functionality/features of those two browsers?
  2. How does a page get loaded into your browser when you click a link/bookmark?
  3. What is bandwidth? How does it affect the loading of web pages and their files?
  4. What is the World Wide Web Consortium, what do they do?
  5. The word "Internet" is the shortened form of what word? What does that word mean?
  6. Why did Tim Berners-Lee develop a webbed system of hypertext?
  7. What is ARPANET? Why was it originally developed?
  8. Who controls the Internet?
  9. What is a packet? How does a packet get from one place to another? What happens if you want to send a very large file?
  10. What does a router do?
  11. What does TCP stand for? What does TCP do?
  12. What does HTTP stand for? What is HTTP?
  13. What does HTML stand for? What is HTML?
  14. What might a GET REQUEST be for? What might a POST REQUEST be for?
  15. What is SSL and TLS? How do you know these are working?

Suggested Solutions

  1. Currently, what are the most popular browsers being used? Do you think this means you should only design your web pages/applications to target the functionality/features of those two browsers? Currently, popular browsers include Chrome, Firefox, Edge, Safari, and Opera. No, you should target all browsers, because you don't want to ignore any users. Not only to many users not use one of the "big four" but there are also users that use assistive devices (such as screen readers or specialized web-enabled devices) that might have different support for various features.
  2. How does a page get loaded into your browser when you click a link/bookmark? The browser creates a request object for the url/file and sends that request to the server. The server receives the request, locates the requested file, and sends a response object back to the client. The response contains a 200 OK status code and the html/text for the requested file/page. The browser receives the response and renders the html/text from the response body. If there is a problem finding or retrieving the page, then the server sends back a response with an appropriate status code (e.g. 401 UNAUTHORIZED, 403 FORBIDDEN, 404 NOT FOUND, etc.
  3. What is bandwidth? How does it affect the loading of web pages and their files? Bandwidth is the maximum amount of data (usually measured in megabits) the network is able to transmit per second. It's not how fast the data travels, it's how much data can travel per second. For example, if a network's bandwidth is 50Mbps (megabits per second), then the network is capable of transmitting a 400MB (megabyte) file in just over a minute (400MB is 3200Mb, so on a 50Mbps network that's 3200Mb/50Mbps = 64s: that would take about 64 seconds). If your page has a lot of media and images, it's going to require more bandwidth to transmit on the user's network because media files are much larger than plain html/text.
  4. What is the World Wide Web Consortium, what do they do? World Wide Web Consortium, also referred to as W3C is an organization that maintains standards and guidelines for web technologies and web accessibility intiatives. For example, they maintain the standards for how we code with certain technologies such as CSS and they also maintain various guidelines and standards for creating accessible web content.
  5. The word "Internet" is the shortened form of what word? What does that word mean? Most believe that Internet = Interconnected Network or "Internetwork". It's made up of the latin prefix "inter" (between, among) and "net" (the short form of "network"). So it could also be translated as "among a bunch of networks". All of these are accurate, though: the internet is a large collection of networks (of all different sizes) connected together. The internet is a network of networks!
  6. Why did Tim Berners-Lee develop a webbed system of hypertext? He wanted to create a way for scientists around the world to share information with each other. Before hypertext, data/documents were stored hierarchically on the Internet (just like your computer's file system), which was cumbersome because you had to go down several levels to find the document you wanted. If a document made reference to a second document, you had to go back up some or all of the levels and travel a different path to the referenced document. Berners-Lee created a hypertext system that allowed you to easly jump to a specific document by clicking its link: instead of browsing through a hierarchical directory structure, you could just click the link to the referenced document and it would be retrieved for viewing. This created a "web" of document storage and references.
  7. What is ARPANET? Why was it originally developed? ARPAnet = Advanced Research Project Agency Network; it was a US Department of Defence project that was developed during the Cold War. The US wanted to develop a way to send messages from one point to another, but if the communications lines were destroyed in a conflict, an important message would not arrive at its destination. ARPAnet involved breaking a message up into "packets" and then sending each packet on several different routes to its destination. A route might consist of several stops at various nodes. At the destination, the packets would then be reassembled. The benefit was that if part of the network was destroyed, packets taking alternate routes would still arrive at the destination, plus any destruction would not delete the entire message, only a packet or part of the message.
  8. Who controls the Internet? No one! Individual networks have owners/operators that can make decisions about their own network but there is a common goal to keep the networks connected and promote sharing of information.
  9. What is a packet? How does a packet get from one place to another? What happens if you want to send a very large file? A packet is a part of a message that is being transmitted. A packet is routed from its source to its destination, passing through various nodes or routers on the way. The packet's route is not static or pre-determined, it will be routed on its path based on what paths are available, which are the fastest or least conjested with other internet traffic, etc. If you send a large file, the file is broken up into several packets and each packet likely takes a different route. The packets are reassembled into the file once they all reach the destination.
  10. What does a router do? A router receives a packet, checks the packet's destination, and then chooses a route to send the packet on to the next router on a path to its destination. A single path a packet takes from source to destination will involve passing through several routers.
  11. What does TCP stand for? What does TCP do? TCP = Transfer Control Protocol. TCP is the set of rules and policies that are followed when a message or file is received at its destination. When a series of packets for a message/file are received at their destination, TCP takes inventory of the packets and makes sure all have arrived, and then it reassembles them into the original message/file. If TCP finds any packets missing, they are requested again from the sender. TCP ensures they all eventually arrive so it can reassemble the message/file.
  12. What does HTTP stand for? What is HTTP? HTTP = Hypertext Transfer Protocol; this is the set of rules and policies that computers follow when sending and receiving hypertext messages to each other over the internet. For example, HTTP defines how a browser requests a specific file or page, and it defines how a server should respond when it finds the file, can't find the file, sees that the person requesting isn't allowed to access the file, etc.
  13. What does HTML stand for? What is HTML? HTML = Hypertext Markup Language. This is the technology developers use to create hypertext documents. A hypertext document consists of the document structure (e.g a header, a footer, a navigation menu, etc) and the actual content that fills in that structure (text, paragraphs, the location of image files or other media files). NOTE that the video is a bit older so it talks about formatting tags (e.g. it mentions <font> and <bold> but this is no longer the case: all formatting, layout, colours, etc is now done with CSS).
  14. What might a GET REQUEST be for? What might a POST REQUEST be for? GET requests are used to request documents/pages/files from the server. POST requests are used to send information, such as your login credentials or the values you might fill into a form when requesting help with an issue.
  15. What is SSL and TLS? How do you know these are working? SSL = Secure Sockets Layer; TLS = Transport Layer Security. TLS is a newer technology, but it doesn't matter which one is being used for a particular connection. SSL/TLS adds a layer of security to HTTP, and this is referred to as "Secure HTTP" or HTTPS. You can tell when you're using HTTPS by looking at the address bar in your browser: there's usually a lock icon or shield icon, or something similar. NOTE that when the video was first made, HTTPS was starting to become standard. Today, almost all of your requests and responses are transmitted over HTTPS.