Development of website for a Training Organization

Module Project

Module: Front End Web Development

Course: ITSF - Front End Web Development

Start Date : 16/11/2021 Learner Name : Joshua Ho Gwok Hin

End Date : 10/12/2021 Enrollment ID : hgh.Joshua@gmail.com
Submission Date : 09/12/2021
Presentation Date : 10/12/2021
Contents
Contents
1. Project Definition
2. Development Tools
3. Information Architecture
4. Storyboard
5. Menus
6. Business Process
7. Lead Generation Form Design
8. HTML Catalog
9. HTML Pages
10. CSS Classes
11. Lead Generation Form
12. Pages with Styles
13. User Interface Effectiveness
14 Proposed Changes to User Interface
15. Project Deliverables
16. Project Environment
17. Website Review & Improvements
18. Project Milestones & Tasks
19. Milestone Feedback & Action Taken
20. Project Results
21. Proposed Improvements
1. Project Definition

The brick-and-mortal business model has been the mode

of operation for ABC Learning Center. The company is
looking to benefit from the integration of Web
Technologies into the business with a website.

Currently, leads were generated from traditional marketing

channels like billboards and flyers. As with many traditional
marketing methods, printed content gets outdated easily.
Discrepancies in delivered content (especially when
multiple versions of flyers are being distributed) can take
up a lot of time for clarification with the administrative
staffs.
1. Project Definition
With implementation of the website for ABC Learning Center, the company can have enhancement on
several aspects of the operations. Other than establishing an online presence, the company can now share
the most updated content to be delivered to users. Users can now get concise and up-to-date information
without the limitations of traditional marketing methods.

One of the main objectives of the website is to allow users to register interest for courses. Gathering leads
of validated inputs onto a single location is now a walk in the park. Users can go to the registration page
(register.html) from anywhere of the website and key in their particulars. The submit button will then
activate the validation of inputs entered and will prompt users to double check their input if validation fails.

Only validated data are being fetched and recorded onto the admin.html page. This Registrants page is
specifically designed for administrative purposes where data can be added, amend and delete. This
automation of data collection and validation makes organizing leads simple.

Scope of the project

Display the content relevant to the courses
Lead Generation form
Lead Administration

Out of Scope:
Not integrated with database
Responsiveness
2. Development Tools
Development Tools used for this Project

Type Tool

Operating System (OS) Windows 11

Integrated Development Environment (IDE)/Editor Studio Code

HTTP server to run webpages Apache HTTP Server 2.4.51

Server to run JSP files on webpages Apache Tomcat 9

Java Runtime Environment JDK 1.8.0

Web Browser Edge, Chrome & Firefox

JavaScript Library jQuery 3.6.0, jQuery UI 1.13.0

3. Information Architecture
4. Storyboard
5. Menus

• Home – Landing Page

• Courses – Listing of all courses

• MS Office – Course 1 Details

• Schedule – Course 1 Schedule

• HTML – Course 2 Details

• Schedule – Course 2 Schedule

• Register – Register for Courses form

• About Us – Hero Banner & Trainers

• Contact Us – Location Map & Address.

Tel and
Email form.
6. Business Process

Add users

Storage Edit users

Save changes
Admin
Delete users
Visitor

Register
6. Business Process
7. Lead Generation Form Design
8. HTML Catalog
 List of HTMLs to be developed
Pages Information
template.html Template of all common elements before developing other
pages.
index.html Landing Page - hero banner & testimonials
about.html Hero banner & trainers
courses.html Lists of all available courses
register.html Form to collect leads for interested applicants
contact.html Location Map, Address, Tel & Email form
msoffic-details.html Course Details of the MS Office Course
msoffic-schedule.html Course Schedules of MS Office Course
html-details.html Course Details of HTML Fundamentals Course
html-schedule.html Course Schedules of HTML Fundamentals Course
thankyou.html Validate Successful page/ Registration complete confirmation.
header.html Common Header
footer.html Common Footer
sitemap.html List of links of all visitor pages
privacypolicy.html Privacy Policy of using the website.
9. HTML Pages
Page name: courses.html
courses.html
without CSS courses.html with CSS
10. CSS Classes
 CSS Selectors (except class selectors)
S. Selector Style to be Created
No.
1 * { font- Changes default font
family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

2 h1 { font-size: 50px; Adjusts the Header 1 font format

text-align: center;
padding-top: 60px; }

3 p { font-size: 16px; } Standardise paragraph to 16px

4 #toAhLianImg img { jQuery image to look like a circle with border to

border-radius: 50% !important; match the header and footer color.
border: 2px solid darkgoldenrod !important;
}

5 header { Fill the header with darkgoldenrod color to 100% of

width: 100%; the browser width, color the text to white color, set
height:80px; the height of the header to 80px, leave a 2px margin-
background-color:darkgoldenrod; bottom so that the box shadow appears before hero
color: white; banner.
margin: 0 0 2px 0;
padding:0;
box-shadow: 0px 2px 2px rgb(100, 100, 100);
}
10. CSS Classes
 CSS Classes
11. Lead Generation Form
12. Pages with Styles
13. User Interface Effectiveness
 Effectiveness Metrics
Types of metrics:
User satisfaction rate
Task success rate
No. of page clicks
Time needed to complete a task

• Metrics 1: 90% increase in user satisfaction

• User can find information fast with simple navigation bar. No

complicated design.

• Metrics 2: 50% increase in task success rate for lead

generation.

• Lead generation forms have simple design with less than 5 input
fields. Most of which comes with simple instructions should
validation fails.
14. Proposed Changes to User Interface
 Proposed Changes

 Add some CSS transitions for to make it more lively.

 Add more shadow for more dimensional look.

 Fluid layout to support smaller devices.

 Outbound social media page links to encourage interactions via FB, Tweeter, LinkedIn,
and etc.

 Social media plugins for official page contents to be displayed on the website
15. Project Deliverables
 Project Deliverables
• HTML pages
• CSS files
• Project Report
• Project Presentation
• Source Code
 Evidence
16. Project Environment
 Technical Environment and Tools Used
- Software: Development environment: JDK1.8
o Tomcat 9/ Apache 2.4.51
o Editor: Visual Studio Code & Dreamweaver 2020
o Programming languages: JavaScript

- Hardware: Client server

o Client (User) – Windows– Windows 11
o Server (Hosting Environment) – Windows Server

 List of references
https://htmlcheatsheet.com/
https://www.w3schools.com/
https://jqueryui.com/
17. Website Review & Improvements

Pros Cons
Item Simple design, easy to navigate. Too plain, boring looking.

Description Users can navigate to any user pages in 2 Other than black and white, only 1 color is used.
clicks or less. Most are accessible from the
right side.

Display Can have more shadows or group of color palette.

18. Project Milestones & Tasks

Project Project
Project Task Description
Task ID Milestone ID

1 Completion of Information Architecture, Storyboard, Wireframe 1

2 Completion of HTML 1
3 Completion of CSS and JavaScript 1
4 Completion of Lead Generation Form and Administration 1
5 Website Testing 1
6 Website Testing as a whole on Apache Tomcat 2
7 Completion of Project Report 2
8 Completion of Project Presentation 2
9 Submission of Project Report 3
10 Submission of Project Presentation 3
11 Submission of Source Code 3
19. Milestone Feedback & Action taken

Project Milestone Feedback received from Tutor / Action Taken

Milestone ID Learning Facilitator (Yes / No)

3
20. Project Results
 Link for the project

www.joshua-1.com/abc-learning-center/

Or

localhost/abc-learning-center/
20. Project Results
21. Proposed Improvements
 List of Improvements

 Add more colours and/or shadow in the HTML elements to look more dimensional.

 CSS can be improved with less redundant and duplicated classes.

 A lot of inline styling can be reduced with external CSS.

 More animation in jQuery Objects

 More effects with CSS transition

 Remove duplicated internal and external stylesheets, JavaScript

 More styling in online forms