Your Scenario

Web Development - Overview

web image

One of MCIT's clients is looking to create a simple informational website. Your project manager thinks this would be an excellent project for you.

This project has many phases and multiple deliverables (i.e., assignments). You must complete all phases, in order, and submit deliverables as specified.

  1. Scope-Documenting Website Requirements
  2. Analysis-Planning of Website Structure
  3. Design-Writing the HTML code
  4. Testing-Reviewing and Fixing Site Issues
  5. Evaluation-Conducting Site Review

Prerequisite: Before you begin this project will need the following software set up on your computer: NotePad++, Microsoft Visio, Filezilla, and web browsers.

Web Development - Scope

web image

Documenting Website Requirements

The web and communications team has already created the CSS style sheet and created all the necessary graphics. Your task will be to review the content and create the appropriate HTML for the pages. You will also need to upload files to the server.

Review the content.

In the next process step you will create a site map and storyboard. So be sure you have reviewed all background information found here.

Web Development - Analysis

web image

Practice website analysis

Review the structure of two different types of websites and for each one:

  • Sketch a wireframe diagram of the main page.
  • Sketch a conceptual website map.
  • View a video on how Visio can analyze an existing site. Note: this video uses Visio 2007.
  • Share your diagram and website map sketches with a team member.
  • Provide constructive feedback.

Complete website analysis for the MCIT Client

  • Read the "MCIT New Website Developer Guide"
  • Identify the pages of your website content by “chunking” the content. (Note: read both hyperlink sources)
  • List the pages needed using clear and meaningful file names using MCIT's guidelines.
  • Identify and list any other content needed such as images or external links.
  • Identify what style sheet you will use and what html tags or classes will be necesary to implement the style.

Create the following diagrams in one Visio file:

  • Wireframe diagram-page layout
  • Conceptual website map
  • File/folder structure

Web Development - Design

web image

Using your planning diagrams, create your first web page. Be sure to use HTML5 coding and use ids and classes that coincide with the developed style sheet. Make sure you appropriately use the following tags:

  • Structure tags: doctype, html, head, title, body
  • Semantic tags: header, nav, section, article, aside, footer
  • Formatting tags: h1, p, a, img, ul, a links

See w3Schools.com for any HTML or CSS questions.

Add in your content appropriately. Save your file and test locally in various browsers. Apply the CSS style sheets approved by the web and communications department. Choose the style sheet that best matches your planned layout.

After successful local testing, create the other pages needed for the site. You may copy and paste or reuse the html tags. Modify the content and the file names.

Refer to the "MCIT New Website Developer Guide" if you have questions.

Web Development - Testing

web image

Publish all website files to the INSWEB server. Refer to the MCIT FTP Guide for instructions.

Complete code testing by using W3C HTML Validator. Help at http://validator.w3.org/docs/help.html

Create a testing plan for browser and use cases (including screen resolutions and screen sizes).

Indicate in this plan what you are testing and describe your results.

Web Development - Evaluation

web image

Prepare a memo directed to your project manager. In the memo, summarize the work you did, provide a link to the published website and the number of hours you spent developing this website.

Video-Related to Topic


Introduction To Information Technology © 2014 English (US)