Informatics College Pokhara

Introduction to Information System

CC4057NP
Coursework 3

Submitted By: Submitted To:

Name: Ravi Pun Mr. Sandeep Gurung
London Met ID: NP04CP4A190099 Module leader
Group: c4 Information System
Date:

Ravi Pun
 Proposal
This course work is assigned to us by module leader of the information systems on week 7. The
submission of this course work is week 12. The coursework is to design and develop an
individual portfolio in the form of a website. Course work is assigned us in order to know our
understating of the contents taught in class as well as know knowledge we gained by ourselves.
 Scope of the coursework
In this coursework, it will enhance what we learned in class about the HTML, CSS and
JavaScript. As well as it enhances what we had learned by ourselves. This portfolio
making project that we have to complete will make us more understand and implement
the tags, attributes, and more. Understanding of the all the basic and proper tools to desin
a website with the knowledge of using script languages to webpages will be demonstrated
in this project.

 Aim
Aim of the coursework assigned is to revise the knowledge of HTML, CSS and
JavaScript to build a website what we had learned in the classroom. This also help to
students to reflect their self learned knowledge from different websites and sources. This
coursework is completed with clear and good conceptual and logical portfolio website.
To build the website lots of research is to be done on different sources so it will be done
by me.

 Hardware and software installation

In order to make the portfolio website some software are needed so that it will be done in
proper manner. First of all in order to write code we will need a text editor. There are a
lot of text editors out there some of them are: Notepad++, Sublime, Atom, and much
more. Text editor suggested by sir was Notepad++ but I found easiness in using Atom
text editor which guided us in tags used as well so, I installed Atom for it. Then we will
need a browser to run the web page we developed so for it I used Chrome. We were free
to use any software to edit as we like so using of different software according to students
choices was allowed.

 Activity description and timeline

The total time period for the project was total 5 weeks. Due to other assignments and
much more I started my project and finished in duration of three weeks.

Ravi Pun
Contents
Introduction .................................................................................................................................................. 4
HTML ......................................................................................................................................................... 5
CSS:............................................................................................................................................................ 5
JavaScript .................................................................................................................................................. 6
Discussion and Analysis............................................................................................................................. 6
Atom.......................................................................................................................................................... 6
WireFrames ............................................................................................................................................... 7
Balsamiq Mockups .................................................................................................................................... 7
Development................................................................................................................................................. 7
Wireframe ................................................................................................................................................. 7
Testing ......................................................................................................................................................... 17
Test 1 ....................................................................................................................................................... 17
Test 2 ....................................................................................................................................................... 17
Test 3 ....................................................................................................................................................... 19
Test 4 ....................................................................................................................................................... 19
Test 5 ....................................................................................................................................................... 21
Conclusion ................................................................................................................................................... 21

Ravi Pun
Introduction
Portfolio is a new term to many of the people out there. In general the portfolio consists
of evidence of professional growth and competences gained. Organized around a set of
standards, the portfolio must include records that provide tangible proof of the large
range of knowledge and abilities.
 Portfolio will help to keep track of how a person is doing in a particular field and
strength areas.
 The portfolio will demonstrate the field that a person is making progress towards
the accomplishment of the specified goals.
 The portfolio can support the job search by acting as a significant means of
showing your ability to the capacity that a person has.

The portfolio platform is an extension of a freelancer (or company) resume

. It provides a convenient way for potential customers to view their work
while also allowing you to expand their skills and services. In general it is

Ravi Pun
 the collection of the records which have stored out accomplishments,
experiences and skills. It helps other people to know our achievements.

It is clear what is our objective in our coursework and for completion we

need to have knowledge and software to do it. This coursework will help to
be familiar with the web designs. For this task we need to have knowledge
of HTML, CSS and JavaScript.

HTML

HTML which stands for Hyper Text Markup Language is the standard
markup language in order to create website. HTML is the backbone of the
webpage. It’s tags which are used in order to build website are the
building blocks. They are the hidden keywords in webpage which tells the
browser what to do and what not to. It is the markup language which has
opening and closing tag of almost every part. In HTML there are lots of
tags that can be used, some of them are most important that is they are
used mostly while some tags are rare to be seen. HTML tags are used as
much as less due to high use of CSS nowadays.

Most of the highly used tags in HTML are:

I. <div>
II. <a>
III. <h1>
IV. <p>
V. <form>
VI. <img>

CSS:
CSS which stands for Cascading Style Sheet is the extension of the
HTML. HTML provides frame work to the website and CSS provides
styling to it. CSS can control multiple pages at once so it makes work
more easier and time convenient. CSS is of three types which can be
used as per the need. They all have same function though. The types are:
I. Inline CSS
This type of CSS are those which are used inside the tag.
II. Internal CSS
This type of CSS is entered inside the head section of the page.
III. External CSS

Ravi Pun
 This one is more used as it can control many pages at once. It is
entered outside of the HTML page. They linked in the webpage or
else it won’t work.

JavaScript
JavaScript makes webpage alive which means it makes pages move. It is
dynamic computer programming language which is lightweight. It has
object oriented capability and are too used in almost of the webpages as
that make webpage more attractive. JavaScript can be entered inside the
HTML file as well as outside and link with webpage.

Discussion and Analysis

In the task to make portfolio website 5 different pages were to be made. In

which HTML,CSS and JavaScript are used. The role required advanced
Web Development skills. Therefore daily conversation with Module
Teacher on the topic of course work was made. He was very helpful and
gave us an idea of how a website should be developed. For this purpose
knowledge on different tags were to be gained properly. I needed to visit
many websites to take idea from, and then read article related to website
and then read about HTML5, CSS3 and JavaScript and learnt from
W3schools. W3schools was heaven for me as it guided me in all task of
this coursework. After all the research was done designing and coding in
the webpage was done with lots of hard work. To make the web page
firstly wireframe was made and then made according to it or made some
changes. And coding was done on Atom text editor.

Atom
Atom is cross-platform text and source code edior.Atom is the text editor
which is free to download that guide us in different way. Atom made our
work easier by auto opening and closing of the tags, tags value prediction,
multi view and much more. Atom was easier to used and it guided in tags
so I found it more convenient to use. In Atom “Command palette "uses
adaptive matching to easily trigger random commands on keyboard. And
also same word could be changed by one button or as many as we liked
to which was used by me in many cases when I had to edit or delete in the
bunch of codes.

Ravi Pun
 So all codes of this website was typed in Atom.

WireFrames
A wireframe is a document of user experience design that falls into the UX
cycle after the sitemap. A wireframe's aim is to map out which items are
wanted on each page form in a website, and where they will go.
Wireframing is a fast way to structurally build a web site. They are used to
establish the general layout of a website before the graphic design and
functionality is incorporated throughout the creation process. Real
pictures, fonts, colors such things aren’t to be used in wireframe. To make
wireframe I had used Balsamiq Mockups.

Balsamiq Mockups
Balsamiq Mockups is a mockup and website wireframe creation software
for the GUI. This helps the user to be using a drag-and-drop tool to set up
pre-built widgets. You can use this to create visual drawings of your
creative ideas before any code is published to facilitate discussion and
comprehension.

Development

Wireframe
Using Balsqmiq Mockups I made all wireframes of my website and it is
one of the important part to build website as it is the pre design of the
website before coding to guide through code. It especially done by the
designers and then coders make them to website.

1. Homepage

Ravi Pun
Ravi Pun
 2. CV page

Ravi Pun
Ravi Pun
 3. Blog page

Ravi Pun
Ravi Pun
 4. Research page

Ravi Pun
Ravi Pun
 5. Contact page

Ravi Pun
Ravi Pun
Testing

Test 1

Objective To check whether email type

works or not
Action Input non email format in email
type box
Expected output Pop up write proper email
Actual output Pops up the message
Test result successful

Test 2

Ravi Pun
 Objective To check if hire button works or
not
Action Click hire button
Expected output Direct to contact page
Actual output Directed to contact page
Test result successful

Ravi Pun
Test 3

Objective To check whether social media

icon links work or not
Action Click on the social media icon
Expected output Direct to respective social page
Actual output It opens respective social media
as you can see links as you
move cursor over icon
Test result successful

Test 4

Ravi Pun
 Objective To check whether footer’s
message icon works or not
Action Click on the messsage media
icon
Expected output Direct to contact page
Actual output It opens contact page
Test result successful

Ravi Pun
Test 5

Objective To check whether animation

works or not
Action Refresh the page
Expected output Animated skills bar moves
Actual output As page is refreshed animation is
there.
Test result successful

Conclusion
The coursework was about constructing a website for the portfolio.
After a lot of research and study, it finally completed all the tasks given
in the coursework. Many mistakes have been found which have been
resolved at the same time. Plenty of checking are performed to search
for defects and glitches, or not. What I concluded from this coursework
was that there's a bit different theory and practical life. We need to
apply the theoretical knowledge to practical life so that it will lead us to
the success path. We just thought of Xml, CSS, and JavaScript and
studied it.

Ravi Pun
Ravi Pun