1. Team Hence Gunny Project Proposal HTML Tutorial Websites

2. Define

3. Problem Statement Our site will aim at solving a problem that DIY HTML hand-coders face: lack of a tutorial site that allows them to reach their goals in a way that builds their confidence. Our site will aim at solving a problem that DIY HTML hand-coders face: lack of a tutorial site that allows them to reach their goals in a way that builds their confidence. Every time an HTML hand-coder visits our site, he/she will know what he/she already does well, what skill areas to develop, and what online resources to turn to. Every time an HTML hand-coder visits our site, he/she will know what he/she already does well, what skill areas to develop, and what online resources to turn to.

4. Audience Comfortable with using computer Comfortable with using computer Non-techie by training Non-techie by training Middle-school students on up Middle-school students on up Anyone serious about learning HTML codes, from first-time DIYers with no prior experience to more seasoned hand-coders who visit the site to learn something new Anyone serious about learning HTML codes, from first-time DIYers with no prior experience to more seasoned hand-coders who visit the site to learn something new Self-starters seeking to build their hand-coding confidence as well as skills Self-starters seeking to build their hand-coding confidence as well as skills

5. Define Tasks Team brainstorming Team brainstorming Site structure planning Site structure planning Web page layout Web page layout Content writing Content writing Collecting best resources Collecting best resources Actual site building and execution Actual site building and execution Product testing and evaluation Product testing and evaluation

6. Tasks (Continued)

7. Responsibilities Team brainstorming/troubleshooting: all Team brainstorming/troubleshooting: all Site structure planning: Lee will start Site structure planning: Lee will start Webpage layout: Scott Webpage layout: Scott Content writing: Lee will start Content writing: Lee will start Collecting additional resources: Vinh Collecting additional resources: Vinh Actual site building: Scott Actual site building: Scott Product testing and evaluation: Vinh Product testing and evaluation: Vinh

8. Deliverables Timeline July 16 th : Site structure planning July 16 th : Site structure planning July 19 th : Web page layout July 19 th : Web page layout July 26 th : Collecting additional resources July 26 th : Collecting additional resources August 5 th : Content writing August 5 th : Content writing September 2 nd : Actual site building September 2 nd : Actual site building September 3 rd : Product testing and evaluation. September 3 rd : Product testing and evaluation.

9. Design

10. Site Navigation Flowchart

11. Site Content in Outline Form See what you do well already – pretests See what you do well already – pretests A. Tag basics 1. “HTML, head, body” structure 2. Headings and horizontal rules 3. Paragraphs, align, line breaks B. Lists 1. Ordered 2. Unordered 3. Definition C. Text manipulations 1. Formatting 2. Color D. Links E. Images F. Tables G. Sounds H. Frames I. Guestbook J. Meta tags

12. Site Content (continued) Find what you want to learn more – lessons with explanations, example codes, “Now you try it,” and instant testing Find what you want to learn more – lessons with explanations, example codes, “Now you try it,” and instant testing A. Tags basics 1. “HTML, head, body” structure 2. Headings and horizontal rules 3. Paragraphs, align, line breaks B. Lists 1. Ordered 2. Unordered 3. Definition C. Text manipulations 1. Formatting 2. Color D. Links E. Images F. Tables G. Sounds H. Frames I. Guestbook J. Meta tags

13. Site Content (Continued) Look for more resources Look for more resources A. Tags basics 1. “HTML, head, body” structure 2. Headings and horizontal rules 3. Paragraphs, align, line breaks B. Lists 1. Ordered 2. Unordered 3. Definition C. Text manipulations 1. Formatting 2. Color D. Links E. Images F. Tables G. Sounds H. Frames I. Guestbook J. Meta tags

14. Site Objectives This site aims at providing basic tutorials outlined above in order to boost the confidence level of site visitors as they learn to hand-code HTML files. Towards that end, the main page serves as a gateway to three major hot-linked areas: What I already do well (a.k.a. pretests) What I already do well (a.k.a. pretests) What I want to learn (a.k.a. lessons with explanations, example coding, “Now You Do It” hands-on sections, and instant testing to see the resultant pages What I want to learn (a.k.a. lessons with explanations, example coding, “Now You Do It” hands-on sections, and instant testing to see the resultant pages What additional resources there are (a.k.a. best free online resources tied to a particular aspect of HTML hand-coding under study) What additional resources there are (a.k.a. best free online resources tied to a particular aspect of HTML hand-coding under study) Subsequent pages are designed with the same three-area consistency, although they each feature a specific skill subset. The targeted audience consists of middle school students on up in terms of education level, first-time do-it-yourselfers with no prior coding experience in terms of technical training, and, in fact, anyone who seeks to build their hand-coding confidence as well as skills.

15. Site Objectives (continued) Two unique features of the site stand out. First, a series of sequential pretests allow users to check their level of proficiency for a specific hand-coding skill subset. At the end of a pretest, they are guided to either learn the lesson just tested or go on to learn the next lesson. These tests can also be used for reviewing purposes. Secondly, as users go through each lesson, they are forced to hand-code their exercises by modeling on the examples coding, which is provided as an image in order to prevent cut-and-paste. Users can see their codes rendered as an HTML page as soon as they finish an exercise as directed. It is our hope that such our innovative approach will make the learning goals of site visitors easier to achieve and their confidence level greatly raised.

16. Story Board

17. Team Hence Gunny Authors: Lee Chen Lee Chen Vinh Phan Vinh Phan Scott Halcomb Scott Halcomb