CC402NP Information System
Informatics College Pokhara
Introduction to Information System
CC4057NP
Coursework 3
Submitted By: Submitted To:
Name: Satish Nepali Mr. Sandeep Gurung
London Met ID: 19031165 Module leader
Group: C3 Information System
Date: 01/17/2020
Satsih Nepali
CC402NP Information System
Contents
1. Introduction..................................................................................................... 1
1.1 Web Designing ......................................................................................... 1
1.2 HTML ....................................................................................................... 1
1.3 CSS ........................................................................................................... 2
1.4 JavaScript ................................................................................................. 3
2. Discussion and analysis .................................................................................. 4
2.1 MS-WORD ............................................................................................... 4
2.2 Notepad++ ................................................................................................ 5
2.3 Balsamiq Cloud ........................................................................................ 5
3. Wireframe ....................................................................................................... 7
3.1 Home page ................................................................................................ 7
3.2 CV page .................................................................................................... 8
3.3 Blog Page.................................................................................................. 9
3.4 Research Page......................................................................................... 10
3.5 Contact Page ........................................................................................... 11
4. Testing .......................................................................................................... 13
4.1 Test-1: Message sent with empty fields ................................................. 13
4.2 Test-2: Message sent with all fields filled.............................................. 14
4.3 Test-3: Email field .................................................................................. 15
4.4 Test-4: Read more and show less button................................................ 15
4.5 Test-5: Social media button.................................................................... 17
5. Conclusion .................................................................................................... 18
6. References ..................................................................................................... 19
Satsih Nepali
CC402NP Information System
Figure 1: Fig of HTML codes ............................................................................... 1
Figure 2:- Fig of Inline CSS.................................................................................. 2
Figure 3:- Fig of Internal CSS .............................................................................. 2
Figure 4:- Fig of External CSS ............................................................................. 3
Figure 5:- Fig of code of JavaScript ..................................................................... 3
Figure 6:- Fig of MS-Word ................................................................................... 5
Figure 7: Fig of logo of Notepad++ ...................................................................... 5
Figure 8:Fig of Balsamiq ...................................................................................... 6
Figure 9:- Fig of wireframe of Homepage ............................................................ 7
Figure 10: Fig of Home Page ................................................................................ 8
Figure 11:- Fig of Wireframe of CV page ............................................................ 8
Figure 12:- Fig of CV page ................................................................................... 9
Figure 13:- Fig of Wireframe of Blog page .......................................................... 9
Figure 14:- Fig of Blog page ............................................................................... 10
Figure 15:- Fig of Wireframe of Research page ................................................. 10
Figure 16:- Fig of Research ................................................................................ 11
Figure 17:- Fig of Wireframe of Contact Page ................................................... 11
Figure 18:- Fig of Contact Page .......................................................................... 12
Figure 19:- Fig of Test 1 ..................................................................................... 13
Figure 20:- Fig of Test-2 ..................................................................................... 14
Figure 21:-Fig of Test-3 ...................................................................................... 15
Figure 22:- Fig for test-4.1 .................................................................................. 15
Figure 23:-Fig for test-4.2 ................................................................................... 16
Figure 24:- Fig of Test 5 before clicking social media button ........................... 17
Figure 25:-Fig of Test 5 after clicking social media button ............................... 17
Satsih Nepali
CC402NP Information System
Table 1:- Table for Test-1 ................................................................................... 13
Table 2:- Table for Test-2 ................................................................................... 14
Table 3:- Table for Test-4 ................................................................................... 15
Table 4:- Table for Test 4 ................................................................................... 16
Table 5:- Table for Test 5 ................................................................................... 17
Satsih Nepali
1. Introduction
In the given coursework 3 we students have been tasked to create a
Portfolio website using HTTML, CSS and Java script. For creating the website
we are required to create five webpages. The name of the 5 pages are Home,
CV, Blog, Research and Contact. While doing the coursework we are not
allowed to use anything aside from HTML, CSS and Java script. In order to
complete the coursework we were needed to gain the knowledge about the
HTML, CSS, Java script and web designing.
1.1Web Designing
“The process of creating a websites that encircles several factors
including webpage layout, production of content and graphics designing. Web
designing is done using marked up language i.e HTML which is later designed
using CSS (Christensson, 2013).”
1.2 HTML
“HTML stands for Hypertext Markup Language it was first developed by
Tim Berners-Lee in 1990. It is used in creating web pages and are connected
using the hyperlinks. All the webpages shown on the internet are developed
using HTML. The codes used for developing the HTML are called HTML tags.
The HTML file is saved with the extension .html (Home, 2018).”
Figure 1: Fig of HTML codes
1
Satish Nepali
1.3 CSS
“CSS stands for Cascading Style Sheet originated by originated by Hakon
Wium Lie in 1994. It is a language that is used to describe the reusable styles of
HTML for presenting documents in a designable form. A CSS file can be linked
to many HTML files so it becomes easier for the developer to change the design
of all the HTML pages (Hope, 2019).”
There are three types of CSS they are:-
Inline CSS:- The CSS coding attached or written as the attribute of the
HTML tag within the tag is known as internal CSS.
Figure 2:- Fig of Inline CSS
Internal CSS: The CSS coding written within the HTML codes inside the
Head tag using script tag is known as Internal CSS.
Figure 3:- Fig of Internal CSS
External CSS:- The CSS code written in an external .css file which is
linked to the .html file is external CSS.
2
Satish Nepali
Figure 4:- Fig of External CSS
1.4 JavaScript
“A scripted language for creating and controlling the dynamic website
content without the need for refreshing or reloading the webpage manually is
known as JavaScript. The features provided by JavaScript are animated
graphics, photo sliding, auto-complete text completion and interactive forms
(Morris, 2012).”
Figure 5:- Fig of code of JavaScript
3
Satish Nepali
2. Discussion and analysis
In this coursework we have been assigned to create a Portfolio website
that requires five webpages that are interconnected with each other. Not only we
have to make the pages interconnected with other but also they needs be
designed using CSS and needs to be made dynamic using JavaScript. In order to
complete the coursework there were many things that we needed to discuss and
analysis them in order to make them work properly. In the coursework we were
assigned to create five webpages which are Home, CV, Blog, Research and
Contact.
In the home page the thing required were navigation bar and a brief
description of the website. In the CV page a CV of ourselves needed to be made
containing the details of us. In the Blog page we were tasked to write an article
about Technology and the effects of technology in our daily lives. The research
page was to be filled with the images of the websites that we visited to get the
designing ideas for our webpage and had to show the comparison between the
website and our website. And finally in the contact page a form to send the
message us was to be formed which needed to be validated using JavaScript.
Now after knowing all the details required to do the coursework we
needed the tools that we would use to complete the coursework. The tools that
would help us in create webpage using HTML, design the page with CSS and
make the page dynamic, add animation and other stuffs using JavaScript. There
were many tools available for the completion of the coursework but the tools
that were used by me for the coursework are given and described below:-
2.1 MS-WORD
“In the current time MS-Word is the most widely and famous word
processing software. It is the computerized version of the typewriter but with
the added features like spelling check, saving and storing of the document file,
copying and pasting, adding images, adding shapes etc. The document file of
the MS-Word is saved using the extension “.docx”. The saved document file of
the MS-Word can also be sent through e-mail bay attaching it to the e-mail.
MS-Word also makes it easier for the user to type faster and accurately. The
main use or purpose of the MS-Word is for creating, editing and formatting of
the document file at the workplace or school or home (Cottage of Hope, 2015).”
4
Satish Nepali
Figure 6:- Fig of MS-Word
2.2 Notepad++
“Notepad++ is the replacement for the notepad it that supports several
languages. It is also a free source code editor that use is governed by GPL
License and it runs in MS-Windows environment. It is based on the powerful
editing component Scintilla, and is written using C++. It also uses pure Win32
API and STL that ensures the high execution speed and small program size (Ho,
2011).”
Figure 7: Fig of logo of Notepad++
2.3 Balsamiq Cloud
“Balsamiq Cloud is a user interface tool that is based on web and is used
for creating wireframes. It creates a digital sketch of the ideas, designs and
concept of the website. It is also used to discuss the websites before starting to
code (Balsamiq Cloud Docs, 2017).”
5
Satish Nepali
Figure 8:Fig of Balsamiq
6
Satish Nepali
3. Wireframe
“A wireframe is a two-dimensional skeletal outline of a webpage that provides
the overview of the page structure, layout, functionality, etc. It ca be drawn using
hand or using a software tool (Hannah, 2019).”
Wire frames are created before starting the coding of the website. Therefore
it can also be called as the blueprints of the Webpage. Since our coursework was to
create a website we needed to create the wireframes for each of the web page and
had to make our web page accordingly to our wireframes. The wire frames create
for each of the webpages are listed below alongside with the webpages.
3.1 Home page
Figure 9:- Fig of wireframe of Homepage
7
Satish Nepali
Figure 10: Fig of Home Page
3.2 CV page
Figure 11:- Fig of Wireframe of CV page
8
Satish Nepali
Figure 12:- Fig of CV page
3.3 Blog Page
Figure 13:- Fig of Wireframe of Blog page
9
Satish Nepali
Figure 14:- Fig of Blog page
3.4 Research Page
Figure 15:- Fig of Wireframe of Research page
10
Satish Nepali
Figure 16:- Fig of Research
3.5 Contact Page
Figure 17:- Fig of Wireframe of Contact Page
11
Satish Nepali
Figure 18:- Fig of Contact Page
With all the wireframes and webpages developed the development part of
the website is finished.
12
Satish Nepali
4. Testing
Now after creating the wireframes for each page and developing the
pages according to the wireframe the webpages was developed. But even
though the web pages has been created there are many things to be tested so that
it could be determined that the website is functioning properly. So to check if
the website is functioning properly few tests were made which is listed below
with their results.
4.1 Test-1: Message sent with empty fields
Figure 19:- Fig of Test 1
Action Sending message without filling any fields
Expected Output A pop-up message asking to fill all the fields
Actual Output Pop-up message appears telling to fill all fields
Result Pass
Table 1:- Table for Test-1
13
Satish Nepali
4.2 Test-2: Message sent with all fields filled
Figure 20:- Fig of Test-2
Action Sending message with all fields entered
Expected Output A pop-up message saying Thanks for feedback with the
sender’s full name
Actual Output Pop-up message saying Thanks for feedback with sender’s
full name.
Result Pass
Table 2:- Table for Test-2
14
Satish Nepali
4.3 Test-3: Email field
Figure 21:-Fig of Test-3
Action Sending message with wrong email format
Expected Output Alerting that email format is wrong
Actual Output A message box alerts that email format is wrong
Result Pass
Table 3:- Table for Test-4
4.4 Test-4: Read more and show less button
Figure 22:- Fig for test-4.1
15
Satish Nepali
Figure 23:-Fig for test-4.2
Action Clicking read more button and show less button
Expected Output Showing hidden content on clicking show more
Hiding the content again on clicking show less
Actual Output Shows the hidden content on clicking show more and hides
on clicking show less
Result Pass
Table 4:- Table for Test 4
16
Satish Nepali
4.5 Test-5: Social media button
Figure 24:- Fig of Test 5 before clicking social media button
Figure 25:-Fig of Test 5 after clicking social media button
Action Clicking Social media button
Expected Output Goes to profile page of social media account
Actual Output Opens profile of the social media account
Result Pass
Table 5:- Table for Test 5
17
Satish Nepali
5. Conclusion
In our coursework we were required to make Portfolio website that
contained five webpages. The five pages needed to be made are Home page, CV
page, Blog page, Research page and Contact page. Each of the page were to be
constructed using HTML, CSS and JavaScript. For making the Portfolio website
we were required to have knowledge about the certain things which have been
discussed in the Introduction part and the tools required for the coursework is
discussed in the Discussion and analysis part of the report.
It was challenging for us students to do the coursework since we were
asked to develop a website for our coursework which most of us hadn’t done
until now. There we also certain things we were not able to understand and so
we had to ask pour teachers or take help of the internet to gain the knowledge
and implement it in our website.
After the completing the coursework I can say that it was hard but it
helped us students gain more knowledge about web developing and designing.
It also helped us students gain the real-time experience. The real-time
experience that we gained while doing the coursework has made us realize that
web-designing may be difficult and hard to understand but is fun to develop a
website. So I would like to thank our module leader for giving us the course
work and hope that we would get more coursework like this in the future that
will help us gain more experience and knowledge in web-designing.
18
Satish Nepali
6. References
Balsamiq Cloud Docs, 2017. Introduction to Balsamiq Cloud. [Online]
Available at: https://balsamiq.com/wireframes/cloud/docs/intro/
[Accessed 14 january 2020].
Christensson, P., 2013. Web Design Defination. [Online]
Available at: https://techterms.com/definition/web_design
[Accessed 10 01 2020].
Cottage of Hope, 2015. MODULE 5.0 – INTRODUCTION TO MICROSOFT
WORD (WORD PROCESSING). [Online]
Available at: http://www.cottagesofhope.org/module-5-0-introduction-to-
microsoft-word-word-processing/
[Accessed 14 january 2020].
Hannah, J., 2019. What Exactly Is Wireframing? A Comprehensive Guide.
[Online]
Available at: https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-
guide/
[Accessed 14 janurary 2020].
Ho, D., 2011. What is Notepad++. [Online]
Available at: https://notepad-plus-plus.org/
[Accessed 13 january 2020].
Home, C., 2018. Computer Hope. [Online]
Available at: https://www.computerhope.com/jargon/h/html.htm
[Accessed 11 jan 2020].
Hope, C., 2019. Computer Home. [Online]
Available at: https://www.computerhope.com/jargon/c/css.htm
[Accessed 13 january 2020].
Morris, S., 2012. WHAT IS JAVASCRIPT?. [Online]
Available at:
https://www.google.com/search?q=what+is+javascript&sxsrf=ACYBGNTexhF
m07B0ozFooc0XyyZV1FnUHQ%3A1579155741129&source=lnt&tbs=cdr%3
A1%2Ccd_min%3A2000%2Ccd_max%3A2020&tbm=
[Accessed 13 jan 2020].
19
Satish Nepali
