Field Work Report on Front End Web Development

1
FIELD WORK REPORT
BY
IBRAHIM IBRAHIM HARUNA
CSC/15D/5205
A FIELD WORK SUBMITTED TO THE DEPARTMENT OF COMPUTER
SCIENCE, MODIBBO ADAMA UNIVERSITY OF TECHNOLOGY YOLA
IN PARTIAL FULFILMENT OF THE REQUIREMENT FOR THE AWARD
OF BACHELOR OF TECHNOLOGY (B.TECH.) DEGREE IN COMPUTER
SCIENCE
MAY, 2019

2
Dedication
This work is dedicated to Almighty Allah who has granted me the privilege, guided me and
protected me in the course of this study and to my beloved Guardians Mal. Mahmud Ibrahim
Bobboi and Alh Muhammed Haruna Ibrahim and his family respectively for their financial and
moral support, love and encouragement.
I would also like to dedicate it to Software Support Unit AUN and the entire Information
System Department crew for bringing out the best in me and to my Mother, Sisters and Friends
for their love and support and everyone else that contributed towards making my FIELD
WORK training a fun and successful one.

3
Acknowledgment
The completion of this training work could have been possible with continued & dedicated
efforts & guidance of large staff members of the institute. I acknowledge my gratitude to all of
them. The acknowledgement however will be incomplete without specific mention as follows
I wish to acknowledge my deep gratitude to my industry based supervisor Mr. Mansur Bashir,
Senior Software Support Engineer at the Software Support Unit AUN for his cooperation and
guidance. I am also thankful to rest of the staff at the Software Support Unit that provided
staunch support throughout this training and helped me to complete the training successfully
Furthermore I would also like to acknowledge with much appreciation the crucial role of the
Team lead Software Support Unit Mrs. Amal Babangida Sabo for her tireless support, devotion
and encouragement throughout my Field Work.
I would like to say that I am indebted to my Guardians Mal. Mahmud Ibrahim and Alh.
Muhammed Haruna Ibrahim for everything that they have done for me. All of this would have
been impossible without their constant support. And I also thank to Almighty Allah for being
kind to me and driving me through this journey.
I wish to thank all the lecturers of my Department Prof G. M. Wajiga, Dr N.D. Oye, Dr E. J.
Garba, Mr D. I. Sajoh, Mr Y.M. Malgwi, Mr Danjuma Joro, Mrs Asabe Mamman, and Mr A.
U. Atiku and many others whom I did not mentioned their names that have done a tremendous
job of impacting knowledge and experience on me.
Finally I appreciate the effort of my colleagues for their moral support during the training.

4
Abstract
The world of IT is a very significant industry in our generation today. To be able to build a
better and more convenient living environment where information can be exchanged and
accessed with ease, a sound knowledge of the industry is needed.
This report contains a brief introduction about American University of Nigeria Yola, the
various task I was involved with, technical skills and experience gained during the course of
my field work coupled with the challenges I encountered. The aim of this report is to provide
a concrete work experience. It introduced me to various parts of the IT world especially in the
area of front end web development where I learned front end programming Languages such as
HTML, CSS, and Javascript including CSS and Javascript framework that is Bootstrap and
JQuery respectively. This technical report is prepared to give an understanding on how to
bridge the theory work we would normally have in class with practical and realistic work.
Finally, this report justify the relevance of the scheme in equipping students with needed
technical competence to thrive in the real world

5
Table of Contents
Dedication…………………………………………………………………………………2
Acknowledgment .................................................................................................................3
Abstract.................................................................................................................................4
List of Figures.......................................................................................................................6
List of Tables ........................................................................................................................7
Chapter One: Introduction ....................................................................................................8
1.0 History of theOrganization......................................................................................... 8
1.1 Non-Technical Experience.........................................................................................10
Chapter Two: Technical Experience....................................................................................11
2.0 Roles and Responsibilities..........................................................................................11
2.1 Task Handled..............................................................................................................11
2.2 Professional Certification...........................................................................................12
Chapter Three: Log Book ....................................................................................................56
3.0 Summary of Log Book...............................................................................................56
Chapter Four: Summary, Conclusion and Recommendation ..............................................57
4.0 Summary....................................................................................................................57
4.1 Conclusion.................................................................................................................57
4.2 Recommendation. .....................................................................................................57
References...........................................................................................................................58
Appendix.............................................................................................................................59

6
List of Figures
Fig 1 The Office of Technology Support Chart (AUN) Page 9
Fig 2 HTML Page Structure Page 15
Fig 3 Syntax of CSS Page 20
Fig 4 JQuery Effects Page 43
Fig 5 Bootstrap Responsive Design Page 46
Fig 6 Bootstrap Grid Page 49

7
List of Tables
Table 1 HTML Tags 14
Table 2 Javascript Arithmetic Operator 32
Table 3 Javascript Comparison Operator 32
Table 4 Javascript Logical Operator 32
Table 5 Javascript Primitive Data Types 33
Table 6 Javascript Mouse Event 37
Table 7 Javascript Keyboard Event 38
Table 8 JQuery Event 41

8
Chapter One: Introduction
1.0 History of the Organization.
The American University of Nigeria is a private university in north-eastern
Nigeria that offers American style higher education programs at the undergraduate,
graduate and professional levels . Founded in 2004 by Atiku Abubakar, Nigeria's former vice
president. The university is located in Yola, the state capital of Adamawa state. It is the only
American style university in Sub-Saharan Africa offers internationally recognised
undergraduate programs that combine innovative approaches to liberal art education. As a
Development University, every student has the opportunity to integrate specialized knowledge
and skills with hands-on solution-oriented education.
In the 21st century, Technology has become a major business enabler. At Office of Technology
Support (OTS), there are some of the smartest, most engaging and dedicated professionals
helping the university students, faculty and staff in the use of technology in their everyday
activities. The Office of Technology Support has Two departments The Department of
Information Technology (DIT) led by a Director and charged with the responsibility for
planning, designing, deployment and supporting of IT infrastructure within the University.
The Department of Information Systems (DIS) supervised by a Director and charged with
the responsibility for planning, development and deployment of the ERP application as well as
all other applications used in the university.
Department of Information Systems (DIS) is structured into three units: Software Support
Unit (SSU), Instructional Technology Unit (ITU), Software Development Unit (SDU), with
the mission to provide technology solutions and services to the AUN community, to automate
operations, increase performance and productivity, and empower staff, faculty and students to
become outstanding performers, teachers and entrepreneurs.
The Software Support Unit (SSU), led by Amal Babangida Sabo, she is responsible for
developing, sourcing, customizing, deploying and supporting a variety of software applications
related to student learning and faculty teaching for the university and her associated auxiliary
units which includes all user support issues related to Banner, OpenERP, canvas, online-classes
Assist students and faculty members in downloading eBooks and readers.

9
Mission
The University’s mission is to provide quality education to Nigeria and Africa’s future leaders
in order to equip them with the skills needed to solve development issues on the continent, and
give them the knowledge needed to create solutions that will benefit their community, their
country, and, ultimately the world.
Vision
AUN seeks to become a great center of learning and research for Nigeria and Africa, and a
catalyst for development in the entire world. In the words of its Founder, it sees its role as a
"Development University". Thus, the University will honor the traditional university roles of
repository and transmitter of culture and knowledge, and center for the creation of new
knowledge.
Objectives
The Objectives of AUN is to train the future leaders of Africa and to serve as both a stimulus
and agent of economic development throughout the region.
Chief Information Officer
Director
Information Technology
Director
Information System
Team Lead
Software Development
Team Lead
Software Support
Team Lead
Instructional
Technology
Staffs
I.T Student
Staffs
Staffs
Fig 1. The Office of Technology Support Chart (AUN)

10
1.1 Non-Technical Experience
The following are challenges or problems encounter during my field work.
i. The Institution i.e. Software Support Unit (SSU) lack facilitator who will taught I.T
Student.
ii. Self-leaning through online such as w3schools, edx, code academy etc. and videos from
youtube channel.
iii. Difficulty in seeking for IT attachment.
iv. Lack of Transportation fee.
v. Lack of feeding fee.
vi. Too much of time spend daily in the course of the I.T i.e. 8:30am to 5pm from Mondays
to Fridays.

11
Chapter Two: Technical Experience
2.0 Roles and Responsibilities.
The role that was assigned to me in the Institution as an Industrial Training (I.T) Student is the
Technician & ebook support.
My duty is to connect an online classes for students an a faculty meeting through skype, webEx
or zoom depending on which it has been scheduled with and ensure that everything is working
properly the audio, video and microphone.
Also is my duty to assist a student that want to get a book online through their ebooks account
by asking them to log in to their account and if student forget his pin for his account i now sent
the student ID to my Supervisor via email to reset it an then i will log in to the account and
search for the specific book that the student need and request the license for the book and now
ask my supervisor to charge the student in his Banner account for the book after that he sent
the link to the student email i now complete the process by creating account for student with
amazon and then install a kindle reader in to the student system and finally download the book
for the student.
Also is my duty to take care of every activities going in the conference rooms such as classes
meetings etc. and the request of schedules that would take place in it. I am in charge of checking
availability of the rooms when booking is made by the instructors, staffs and other faculty.
2.1 Task Handled
As an I.T student (Technician) I was able to handle some task perfectly especially issues
concerning classes and meeting that would be held online. I handle problem that arises from
our end and from the other end by given guide. Also i handle issues of connecting system to a
projector for the instructor or a student when he/she want to make a presentation and cannot
connect to the projector and other issues regarding to the student kindle reader and vitalsource.

12
2.2 Professional Certification
My professional certification during my field work was basically on front end web
development where I learned fundamentally on how to create website from the scratch.
2.3 Definition of Terms
Internet:
The Internet is a massive network of networks, a networking infrastructure. It connects millions
of computers together globally, forming a network in which any computer can communicate
with any other computer as long as they are both connected to the Internet.
Web:
The World Wide Web, or simply Web, is a way of accessing information over the medium of
the Internet. It is an information-sharing model that is built on top of the Internet.
Website:
A website is a set of related webpages containing content such as texts, images, videos, audios,
etc. A website is hosted on at least one web server, accessible via a network such as the internet
or a private LAN through an internet address known as a URL (Universal Resource Locator).
A publicly accessible websites collectively constitutes the World Wide Web (WWW).
Webpage:
A webpage is a document, typically written in plain text interspersed with formatting
instructions of hypertext mark up language (HTML, XHTML). A webpage may incorporate
elements from other websites with suitable anchors. Webpages are accessed and transported
with the hypertext transfer protocol (HTTP), which may occasionally employ encryption
(HTTP secure, HTTPS) to provide security and privacy for the use of the webpage content.
HTTP:
This stands for Hyper Text Transfer Protocol which is the set of rules for transferring files (text,
graphic, images, sound, video, and other multimedia files) on the World Wide Web.

13
URL:
This stands for Uniform Resource Locator and as the name suggests, it provides a way to locate
a resource on the web, the hypertext system that operates over the internet.
Front end web development
Front end web development is the development of those elements of website that the customer
sees and interacts with directly.
Front end programming languages
Front end programming languages are the languages used in developing or creating of a
website which include HTML, CSS, and Javascript.
2.4 HTML and its Properties
HTML stands for Hypertext Mark-up Language, and it is the most widely used
Language to write Web Pages. Hypertext refers to the way in which Web pages (HTML
documents) are linked together. Thus, the link available on a webpage is called Hypertext.
HTML is a Markup Language which means you use HTML to simply "mark-up" a text
document with tags enclosed in angle bracket (like <h1>) that tell a Web browser how to
structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents which
include title, headings, paragraphs, lists, images, form, table and more, these are basic building
block of a page. HTML is being widely used to format web pages with the help of different tags
available in HTML language.
2.4.1 HTML Tags
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML
tags are unclosed tags. When a web browser reads an HTML document, browser reads it from
top to bottom and left to right. HTML tags are used to create HTML documents and render
their properties. Each HTML tags have different properties. Tags are always written in lower
case letter. The syntax is <tag> content </tag> example <p> paragraph tag </p>.
The following are the names of tags and their description.

14
Tag Description
<html> This tag encloses the complete HTML document and
mainly comprises of document header which is
represented by <head>...</head> and document body
which is represented by <body>...</body> tags which
describe html document.
<head> This tag represents the document's header which can keep
other HTML tags like <title>, <link>, <script> etc.
which provide information about document.
<title> The <title> tag is used inside the <head> tag to provide
a title for the document.
<body>
This tag represents the document's body which keeps other
HTML tags like <h1>,<p>, <table>, <ul>, <ol>, <img>,
<form> etc. that describe the visible page content
<h1> This tag describe the biggest heading in a document
<p> This tag describe a paragraph in a document
<form> This tag defines an html form in a document
<b>, <i>, <ul>, <ol> Bold, italic, unordered list and ordered list
2.4.2 HTML Attributes
Attributes provide additional information about the HTML elements on your page and are
always specified in the start tag. Attributes come in name/value pairs like this: name="value".
The value is surrounded by code. The <tag> tells the browser to do something, while the
attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell
the browser that the background color of your page should be blue, like this: <body
bgcolor=”blue”>.
Table 1. HTML Tags

15
2.4.3 HTML Page Structure
Below is the visualization of an HTML page structure
Only the <body> area (the white area) is displayed by the browser. An HTML file must have
an .htm or .html file extension. HTML file can be created with text editors such as Notepad etc.
2.4.4 HTML Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML document and
display them. The browser does not display the HTML tags, but uses them to determine how
to display the document as shown below.
Fig 2. HTML Page Structure

16
2.4.5 HTML Images
HTML images are defined with the <img> tag and is empty (with no content), it contains
attributes only, and does not have a closing tag. To display an image on a page, you need to
use the src attribute (<img src="url" alt="some_text">). Src stands for “Source”. The value of
the src attribute is the URL of the image you want to display on your page. And the alt attribute
specifies an alternate text for an image, if a user for some reason cannot view it (because of
slow connection or an error in the src attribute). Also HTML image has size (width and height)
attribute which specify the width and height of an image and the values are specified in pixels.
Code View Design View
2.4.6 HTML Tables
Html Tables are define with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for table data,
which is the content of a data cell. A data cell can contain text, images, list, paragraphs, forms
etc. Html tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc.

17
2.4.7 HTML Link – Hyperlinks
HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to
another page. This page can be another web page, a bookmark (a specific part of a web page),
local link (link to another part of the same web page) or an email. In HTML, links are defined
with the <a> tag: <a href="url">link text</a>. The href attribute is the most important
attribute of the HTML a tag it specifies the destination address (http://www.google.com).

18
2.4.8 HTML List
HTML provides a simple way to show unordered list (bullet list) or ordered list (numbered
list). The unordered list is a list of items marked with bullets (typically small black circle). An
unordered list start with the <ul> tag. Each list item starts with the <li> tag. The ordered list is
also list of items marked with numbers. An ordered list start with the <ol> tag. Each list item
starts with the <li> tag.
2.4.9 HTML Form
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing. HTML form are required if you want
to collect some data from of the site visitor. Example if you want to purchase some items on
internet, he/she must fill the form such as shipping address and credit/debit card details so that
item can be sent to the given address. The syntax for the html form is:
<form action=”server url” method=”get|post” >
//input controls e.g textfield, textarea, radiobutton and button
</form>

19
2.5 CSS and its Properties
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces.
2.5.1 Reason of CSS
i. Solves a big problem: Before CSS, tags like font, color, background style, element
alignments, border and size had to be repeated on every web page. This was a very long
process. For example: If you are developing a large website where fonts and color

20
information are added on every single page, it will be become a long and expensive
process. CSS was created to solve this problem. It was a W3C recommendation.
ii. Saves a lot of time: CSS style definitions are saved in external CSS files so it is possible
to change the entire website by changing just one file.
iii. Provide more attribute: CSS provides more detailed attributes than plain HTML to
define the look and feel of the website.
iv. It provides efficiency in design and updates: with css, we are able to create rules, and
apply those rules to many elements within the website.
v. Sharing: Authors and Web site managers may share style sheets across a number of
documents and site.
2.5.2 Advantage and Disadvantages of CSS
Advantages of CSS
i. Greater designer control of the appearance of the page.
ii. Easier management of site-wide changes.
iii. Greater accessibility to web sites by non-graphical browsers and web-page-reading
software.
Disadvantages of CSS
i. Different browsers may interpret Style Sheets in different ways.
ii. Some styles may not be seen at all on some browsers.
2.5.3 Syntax of CSS
A CSS rule set contains a selector and a declaration block.
Fig 3. Syntax of CSS

21
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<p> etc.
Declaration Block: The declaration block can contain one or more declarations separated by
a semicolon. For the above example, there are two declarations: color set to blue and font-size
set to 12px. Each declaration contains a property name and value, separated by a colon.
2.5.4 CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are three kind of selectors.
i. Element Selector
ii. Id Selector
iii. Class Selector
Element Selector: The element selector selects elements based on the element name. You can
select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned,
with a red text color).
Id Selector: The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element should be unique within a page, so the id selector is used to select
one unique element!

22
To select an element with a specific id, write a hash (#) character, followed by the id of the
element. The style rule below will be applied to the HTML element with id="para1":
Class Selector: The class selector selects elements with a specific class attribute. To select
elements with a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
2.5.5 How to Add CSS in a Document
CSS is added to document (HTML pages) to format the document according to information in
the style sheet. There are three ways to insert CSS in HTML documents.
i. Inline CSS
ii. Internal CSS
iii. External CSS

23
Inline CSS: An inline CSS is a method to insert style sheets in HTML document. It is used to
apply a unique style for a single element. To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any CSS property. The example below shows
how to change the color and the left margin of a <h1> element:
Internal CSS: Internal CSS is used to apply CSS on a single document or page. It can affect
all the elements of the page. It is written inside the style tag within head section of html. It is
defined in <head> section of the HTML page inside the <style> tag.
External CSS: External CSS is used to apply CSS on multiple pages or all pages. Here, we
write all the CSS code in a css file. Its extension must be .css and each page must include a
reference to the external CSS file inside the <link> element. The <link> element goes inside
the <head> section. An external CSS can be written in any text editor. The file should not
contain any html tags and is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates you to change the look of the entire web site
by changing just one file.

24
2.5.6 CSS Rules Overriding
i. External Style Sheets affect the entire site.
ii. Internal styles affect only their own pages and override external styles.
iii. Inline styles affect only their own tags. It takes the highest priority, it override both
internal and external styles.
2.5.7 CSS Background
You can set the following background properties of an element.
i. The background-color: The background-color property specifies the background
color of an element. Example: body{background-color: lightblue;}
ii. The background-image: specifies an image to use as the background of an element.
Example: body{background-image: url("paper.gif");}
iii. The background repeat: repeat an image both horizontally and vertically. Example
body{ background-image: url("paper.gif"); background-repeat: repeat-x;}
iv. The background position: The background position is used to define the initial
position of the background image. By default, the background image is placed on the
top-left of the webpage. It has other values such as right, left, center, bottom etc.
v. The background attachment: Is used to control the scrolling of an image in the
browser window. You can set it as fixed or scroll.
HTML Code External CSS File Design View

25
2.5.8 CSS Display
CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed. Every element has a default display value
according to its nature. Every element on the webpage is a rectangular box and the CSS
property defines the behavior of that rectangular box. The Syntax is: display value;
2.5.8.1 CSS Display Values
i. block
ii. inline
iii. inline-block
iv. none
CSS display block: The CSS display block element takes as much as horizontal space as they
can. Means the block element takes the full available width. They make a line break before and
after them, they can’t sit next to another element, so they all take up their own line. Exampe
are paragraph, heading, section etc.
CSS display inline: The inline element takes the required width only. It doesn't force the line
break so the flow of text doesn't break in inline example. The inline elements are: <span>,
<a>, <em>, <b> etc.
CSS display inline-block: The CSS display inline-block element is very similar to inline
element but the difference is that you are able to set the width and height.
CSS display none: The "none" value totally hide the element and delete the space that it takes
up. Everything inside the element will also disappear. (It’s still there in the code, but it’s
hidden.)
2.5.9 CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more.

26
These are some important font attributes:
i. CSS Font color: This property is used to change the color of the text. (standalone
attribute). There are three different format to define a color: By a color name (h1 {color:
red;}), By a hexadecimal value (h2{color: #9000A1;}) and RGB (p{color: rgb(0, 220,
98);})
ii. CSS Font family: This property is used to change the face of the font. And is divided
into two types: Generic family it includes Serif, Sans-serif, and Monospace. Font family
it specifies the font family name like Arial, Verdana etc. Example p {font-family:
Arial;}
iii. CSS Font size: This property is used to increase or decrease the size of the font.
Example p {font-size: 18px;}.
iv. CSS Font style: This property is used to make the font bold, italic or oblique. Example
h2 {font-style: italic;}.
v. CSS Font variant: This property creates a small-caps effect. Example p {font-variant:
small-caps;}.
vi. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font. The possible values of font weight may be normal, bold, bolder,
lighter or number (100, 200… up to 900). Example p{font-weight: bold;}
2.5.10 Text Decoration
The text-decoration property is use to add or remove an underline. Usually you do not want to
add an underline to text unless it is a link. But you may want to remove the underline from a
link, which is a popular style. Example a {text-decoration: none;}. To underline element after
you define the selector, put the property as text-decoration and set the value to underline.

27
2.6 Javascript and its Properties
JavaScript is used to program the behaviour of web pages. JavaScript is an object-based
scripting language which is lightweight and cross-platform and most commonly used as a part
of web pages, whose implementations allows client side script to interact with the user and
make dynamic pages. JavaScript are scripts (code) that is executed on the client’s browser
instead of the web-server (Client-side scripts). JavaScript is not a compiled language, but it is
a translated language. The Javascript Translator (embedded in the browser) is responsible for
translating the JavaScript code for the web browser.
2.6.1 Why we need Client Side Programming
i. The user’s actions will result in an immediate response because they don't require
a trip to the server.
ii. Allows the creation of faster and more responsive web applications.
iii. Make web pages more interactive
iv. Fewer resources are used and needed on the web-server.
2.5.11 Website Design Using HTML and CSS

28
2.6.2 Application of Javascript
JavaScript is used to create interactive websites. It is mainly used for:
i. Client-side validation.
ii. Dynamic drop-down menus
iii. Displaying date and time
iv. Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box)
v. Displaying clocks etc.
2.6.3 Advantages of Javascript
JavaScript allows interactivity such as:
i. Implementing form validation
ii. React to user actions, e.g. handle keys
iii. Changing an image on moving mouse over it
iv. Sections of a page appearing and disappearing
v. Content loading and changing dynamically
vi. Performing complex calculations
vii. Custom HTML controls, e.g. scrollable table
viii. Implementing AJAX functionality
2.6.4 What Javascript can do
i. Javascript can change HTML Content
ii. Javascript can change HTML Attributes
iii. Javascript can change HTML Styles (CSS)
iv. Javascript can Validate Data
v. Javascript can Make Calculations
2.6.5 Embedding Javascript in HTML
Javascript can be embedded using Javascript statements that are placed within the <script>
</script> HTML tags in a web page in three ways.
i. Between the body tag of HTML
ii. Between the head tag of HTML
iii. In .js file (external javaScript)
The script tag takes two important attributes:

29
i. Type: This attribute is what is to indicate the scripting language in use and its value
should be set to “text/javascript”.
ii. Src (Source): This attribute is use to point where the .js file is located.
Javascript code embed within the body tag Design View
HTML code separated from Javascript code (external Javascript)
Design View

30
2.6.6 Javascript Output
Javascript can display data in different ways:
i. Writing into an alert box, using window.alert(), window.prompt(), window.confirm().
ii. Writing into an HTML element, using innerHTML
iii. Writing into the browser console, using console.log()
2.6.7 Javascript Variable
A Javascript variable is simply a name of storage location. There are two types of variables in
Javascript: local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
i. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
ii. After first letter we can use digits (0 to 9), for example value1.
iii. Javascript variables are case sensitive, for example x and X are different variables.
Examples of Javascript Variable
Code View for window.confirm Design View
Code View for window.prompt Design View

31
2.6.7.1 Javascript Local Variable
A Javascript local variable is declared inside block or function. It is accessible within the
function or block only.
2.6.7.2 Javascript Global Variable
A Javascript global variable is accessible from any function. A variable i.e. declared outside
the function or declared with window object is known as global variable.
Local Variable Example Global Variable Example
2.6.8 Javascript Operators
Javascript operators are symbols that are used to perform operations on operands. For example:
var sum=10+20; Here, + is the arithmetic operator and = is the assignment operator.
The following are types of operators in Javascript
i. Arithmetic Operators
ii. Comparison (Relational) Operators
iii. Bitwise Operators
iv. Logical Operators
v. Assignment Operators
vi. Special Operators
2.6.8.1 Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following
operators are known as Javascript arithmetic operators.

32
2.6.8.2 Comparison Operators
The Javascript comparison operator compares the two operands. The comparison operators are
as follows:
Operator Description Example
== Is equal to 10==20 = false
=== Identical (equal and of same type) 10===20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
2.6.8.3 Logical Operators
The following operators are known as Javascript logical operators.
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
2.6.9 Javascript Data Types
Javascript provides different data types to hold different types of values. There are two types
of data types in Javascript.
i. Primitive data type
ii. Non-primitive (reference) data type
Javascript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by Javascript engine. You need to use var here to specify the
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
Table 2. Javascript Arithmetic
Operator
Table 3. Javascript Comparison Operator
Table 4. Javascript Logical Operator

33
data type. It can hold any type of values such as numbers, strings etc. For example: var a=40;
//holding number. Then var b="ibrahim"; //holding string
2.6.9.1 Javascript Primitive Data Types
There are five types of primitive data types in Javascript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
2.6.10 Conditional Statement
Conditional statements are used to perform different actions based on different conditions.
Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this. In Javascript we have
the following conditional statements:
i. If Statement
ii. If else statement
iii. if else if statement
iv. switch case statement
2.6.10.1 If Statement
The if statement evaluates the content only if expression is true. The syntax of Javascript if
statement is given below.
If (expression) { //content to be evaluated }
Code view Design view
Table 5. Javascript Primitive Data Types

34
2.6.10.2 If…else Statement
The If else statement evaluates the content whether condition is true of false. The syntax of
Javascript if-else statement is given below.
If (expression) { //content to be evaluated if condition is true } else {//content to be evaluated
if condition is false }
Code view Design View
2.6.10.3 If…else if Statement
The if…else if statement evaluates the content only if expression is true from several
expressions. The syntax of javascript if else if statement is given below.
If (expression1) { //content to be evaluated if expression1 is true }
else if (expression2){ //content to be evaluated if expression2 is true }
else if (expression3){ //content to be evaluated if expression3 is true }
else { //content to be evaluated if no expression is true }

35
2.6.11 Javascript Loops
The Javascript loops are used to iterate the piece of code number of times using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
i. for loop
ii. while loop
iii. do-while loop
iv. for-in loop
2.6.11.1 For Loop The Javascript for loop iterates the elements for the fixed number of times.
It should be used if number of iteration is known. The syntax of for loop is given below.
for (initialization; condition; increment) { code to be executed }
2.6.11.2 While Loop
The Javascript while loop iterates the elements for the infinite number of times. It should be
used if number of iteration is not known. The syntax of while loop is given below.
while (condition) { code to be executed }

36
2.6.11.3 Do while Loop
The Javascript do while loop iterates the elements for the infinite number of times like while
loop. But, code is executed at least once whether condition is true or false. The syntax of do
while loop is given below.
do{ code to be executed } while (condition);
2.6.12 Javascript Function
Javascript function is a block of code designed to perform a particular task. A Javascript
function is executed when "something" invokes it (calls it).
2.6.12.1 Advantage of Javascript Function
There are mainly two advantages of Javascript functions.
i. Code reusability: We can call a function several times so it save coding.
ii. Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.
2.6.12.2 Javascript Function Syntax
The syntax of declaring function is given below.
function functionName ([arg1, arg2, ...argN]) { //code to be executed }

37
2.6.13 Javascript Event
HTML events are "things" that happen to HTML elements. When Javascript is used in HTML
pages, Javascript can "react" on these events. An HTML event can be something the browser
does, or something a user does. Here are some examples of HTML events:
i. An HTML web page has finished loading
ii. An HTML input field was changed
iii. An HTML button was clicked
Often, when events happen, you may want to do something. Javascript lets you execute code when
events are detected.
Event handlers are created as attributes added to the HTML tags in which the event is triggered.
An Event handler adopts the event name and appends the word “on” in front of it.
<tag onevent = “Javascript commands;”>
Thus the “click” event becomes the onclick event handler.
2.6.13.1 Mouse Event
Events Description
onclick occurs when element is clicked.
ondblclick occurs when element is double-clicked.
onmouseover occurs when mouse is moved over an element.
onmouseout occurs when mouse is moved out from an element (after moved
over).
onmousedown occurs when mouse button is pressed over an element.
onmousemove occurs when mouse pointer moves within an element.
onmouseup occurs when mouse is released from an element (after mouse is
pressed).
Onclick Event Example: Code View Design View
Table 6. Javascript Mouse Event

38
2.6.13.2 Keyboard Event
Events Description
onkeydown occurs when key is being pressed.
onkeypress occurs when user presses the key.
onkeyup occurs when key is released.
2.6.14 Web Application Created Using HTML, CSS, and Javascrirpt
2.7 JQuery and its properties
JQuery is a small, light-weight and fast Javascript library. It is cross-platform and supports
different types of browsers. It is also referred as ?write less do more? because it takes a lot of
common tasks that requires many lines of Javascript code to accomplish, and binds them into
methods that can be called with a single line of code whenever needed. It is also very useful to
simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation. The main purpose of jQuery is to provide an easy way to use javascript on your
website to make it more interactive and attractive. It is also used to add animation, event
handling etc.
2.7.1 JQuery Features
i. HTML manipulation.
ii. DOM manipulation.
iii. Effects and Animation.
iv. CSS manipulation.
Table 7. Javascript Keyboard Event
With the above web application you can add item, search particular item and delete item

39
v. HTML event methods
2.7.2 Reason for JQuery
i. It is very fast and extensible.
ii. It facilitates the users to write user interface (UI) related function codes in minimum
possible lines.
iii. It improves the performance of an application.
iv. Browser’s compatible web application can be developed.
v. It uses mostly new features of new browsers.
2.7.3 How to Add JQuery to a Web Page
There are several ways to start using jQuery on your web site. You can:
i. Download the jQuery library from jQuery.com
ii. Include jQuery from a CDN (Content Delivery Network), like Google
2.7.4 Downloading JQuery
There are two versions of jQuery available for downloading:
i. Production version - this is for your live website because it has been minified and
compressed
ii. Development version - this is for testing and development (uncompressed and readable
code).
Both versions can be downloaded from jQuery.com.
The jQuery library is a single Javascript file, and you reference it with the HTML <script> tag
(notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
The downloaded file is kept in the same directory as the pages where you wish to use it.
2.7.5 JQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is: $(selector).action()
Example: $("p").hide() - hides all <p> elements.

40
2.7.5.1 Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is
ready). It is good practice to wait for the document to be fully loaded and ready before working
with it. This also allows you to have your Javascript code before the body of your document,
in the head section. Here are some examples of actions that can fail if methods are run before
the document is fully loaded:
i. Trying to hide an element that is not created yet
ii. Trying to get the size of an image that is not loaded yet
2.7.6 JQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are
used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of
attributes and much more. It's based on the existing CSS Selectors.
All selectors in jQuery start with the dollar sign and parentheses: $()
2.7.6.1 Element Selectors
The jQuery element selector selects elements based on the element name. You can select all
<p> elements on a page like this: $("p"). The below Example Show when a user clicks on a
button, all <p> elements will be hidden:
Code View Before button was clicked After button is clicked

41
2.7.6.2 The #id Selectors
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An
id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element. Example: $("#test").
2.7.6.3 The .class Selectors
The jQuery class selector finds elements with a specific class. To find elements with a specific
class, write a period character, followed by the name of the class. Example: $(".test").
2.7.7 JQuery Events
JQuery events are the actions that can be detected by your web application. They are used to
create dynamic web pages. An event shows the exact moment when something happens. These
are some examples of events:
i. A mouse click
ii. An HTML form submission
iii. A web page loading
iv. Moving a mouse over an element
v. Scrolling of the web page etc.
Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Table 8. JQuery Event

42
2.7.7.1 JQuery Syntax For Event Method
In jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all
paragraphs on a page, you can do this: $("p").click(); The next step is to define what should
happen when the event fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
2.7.7.2 Commonly used JQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully
loaded. This event is already explained in the jQuery Syntax
2.7.7.3 Example of JQuery click() Event
The example below show a click() event. The function is executed when the user clicks on the
button.
Code view Before the event fired After the event fired
2.7.8 JQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading,
sliding, hiding/showing and animation effects.
The picture below show jQuery effect category

43
JQuery provides many methods for effect on a web page.
Below are some JQuery effects method.
No. Method Description
1) animate() performs animation.
2) delay() sets delay execution for all the queued functions on the
selected elements.
3) fadein() shows the matched elements by fading it to opaque. In other
words, it fades in the selected elements.
4) fadeout() shows the matched elements by fading it to transparent. In
other words, it fades out the selected elements.
5) fadeto() adjusts opacity for the matched element. In other words, it
fades in/out the selected elements.
6) fadetoggle() shows or hides the matched element. In other words, toggles
between the fadeIn() and fadeOut() methods.
7) hide() hides the matched or selected elements.
8) show() displays or shows the selected elements.
9) slidedown() shows the matched elements with slide.
10) slidetoggle() shows or hides the matched elements with slide. In other
words, it is used to toggle between the slideUp() and
slideDown() methods.
11) slideup() hides the matched elements with slide.
12) stop() stops the animation which is running on the matched
elements.
13) toggle() shows or hides the matched elements. In other words, it
toggles between the hide() and show() methods.
Fig 4. JQuery Effects
Table 9 JQuery Effects Method

44
2.7.8.1 JQuery FadeIn() and FadeOut()
The jQuery fadeIn() methods is used to fade in the element.
Syntax: $(selector).fadein();
The jQuery fadeOut() methods is used to fade out the element
Syntax: $(selector).fadein();
Example:
Code View Design for FadeIn Design for FadeOut
2.7.9 JQuery HTML
jQuery html() method is used to change the entire content of the selected elements. It replaces
the selected element content with new contents.
Note: It is a very useful function but works in a limited area because of its API documentation.
The API documentation of the jQuery html function consists of three method signatures.
The first method signature has no argument, so it just returns the HTML within that element.
The remaining two signatures take a single argument: i.e. a string or a function that returns a
string.
Syntax:
$(selector).html() It is used to return content.
$(selector).html(content) It is used to set content.
$(selector).html(function (index, currentcontent)) It is used to set content by calling function.

45
Example:
Code view Befor the click of button After the click of button
2.7.10 JQuery CSS
The jQuery CSS() method is used to get (return) or set style properties or values for selected
elements. It facilitates you to get one or more style properties.
jQuery CSS() method provides two ways:
i. Return a CSS property: It is used to get the value of a specified CSS property. The
syntax is: css(“propertyname”);
ii. Set a CSS property: This property is used to set a specific value for all matched element.
The syntax is: css(“propertyname”, “value”);
Example:
Code view Befor the click button After the click button

46
2.8 Bootstrap and its Properties
Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website. It is absolutely free to download and use. It is a front-
end framework used for easier and faster web development. It includes HTML and CSS based
design templates for typography, forms, buttons, tables, navigation, modals, image carousels
and many others. It can also use JavaScript plug-ins. It facilitates you to create responsive
designs.
2.8.1 Advantages of Bootsrap
The following are the main advantage of Bootsrap:
i. Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
ii. Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
iii. Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
iv. Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Safari, and Opera)
2.8.2 Responsive Website
A website is called responsive website which can automatically adjust itself to look good on
all devices, from smart phones to desktops etc.
Fig 5. Booststrap Responsive Design

47
2.8.3 Bootstrap Package
Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and
background.
CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements
style and an advanced grid system.
Components: Bootstrap contains a lot of reusable components built to provide iconography,
dropdowns, navigation, alerts, pop-overs, and much more.
Javascript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can easily
include them all, or one by one.
Customize: Bootstrap components are customizable and you can customize Bootstrap's
components, LESS variables, and jQuery plugins to get your own style.
2.8.4 How to add Bootstrap to a Web Page
There are two ways to start using Bootstrap on your own web site.
i. Download Bootstrap from getbootstrap.com
ii. Include Bootstrap from a CDN (Content Delivery Network).
2.8.5 Bootstrap Container
In Bootstrap, container is used to set the content's margins dealing with the responsive
behaviors of your layout. It contains the row elements and the row elements are the container
of columns (known as grid system). The container class is used to create boxed content.
There are two container classes in Bootstrap:
i. container
ii. container-fluid
2.8.5.1 Bootstrap .container class
The bootstrap .container class provides a responsive fixed width container
The following example shows the code for a basic Bootstrap page (with a responsive fixed
width container):

48
2.8.5.2 Bootstrap .container-fluid class
The bootstrap .container-fluid class provides a full width container, spanning the entire width
of the viewport.
The following example shows the code for a basic Bootstrap page (with a full width container):
2.8.6 Bootstrap Grid System
Wikipedia says: "In graphic design, a grid is a structure (usually two-dimensional) made up of
a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is
widely used to design layout and content structure in print design. In web design, it is a very
effective method to create a consistent layout rapidly and effectively using HTML and CSS."
The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12
columns individually or you can groups the columns together to create wider columns.

49
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending
on the screen size.
2.8.6.1 Grid Classes
There are four classes in Bootstrap
i. xs (for phones)
ii. sm (for tablets)
iii. md (for desktops)
iv. lg(for large desktops)
2.8.6.2 Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
Fig 6. Bootstrap Grid

50
2.8.7 Bootstrap Jumbotron
A Bootstrap jumbotron specifies a big box for getting extra attention to some special content
or information. It is displayed as a grey box with rounded corners. It can also enlarge the font
sizes of the text inside it. You can put any valid HTML or other Bootstrap elements/ classes
inside a jumbotron.
The class .jumbotron within the <div> element is used to create a jumbotron.
2.8.8 Bootstrap Button
Bootstrap provide different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
i. .btn
ii. .btn-default
iii. .btn-primary
iv. .btn-success
v. .btn-info
vi. .btn-warning
vii. .btn-danger
viii. .btn-link
The following example shows the code for the different button styles:

51
2.8.9 Bootstrap Alerts
Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert
adds a style to your messages to make it more appealing to the users.
There are four classes that are used within <div> element for alerts.
i. .alert-success
ii. .alert-info
iii. .alert-warning
iv. .alert-danger
The following example shows the code for the different Alert styles:

52
2.8.10 Bootstrap Carousel
The Bootstrap carousel is a flexible, responsive way that is used to add a slider to your
webpage. It is very responsive and flexible enough to allow, images, iframes, videos, or any
other type of content that you want to add.
The Carousel Plugin: The carousel plugin is a component for cycling through element, like a
carousel (slideshow). If you want to add plugin functionality individually, then you have to use
carousel.js file or all at once (using "bootstrap.js" or "bootstrap.min.js").
Carousel Example
Code View Code View
Design View

53
2.8.11 Bootstrap Glyphicons
Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260 Glyphicons
from the Glyphicons Halflings set.
Some examples of Glyphicons are: Envelope glyphicon, print glyphicon, search glyphicon,
download glyphicon etc.
Glyphicon Syntax: <span class=”glyphicon glyphicon-name”></span>
To create the desired Glyphicon, the “name” part of the syntax must be replaced accordingly.
Example:

54
2.8.12 Website Develop using HTML, CSS, JQuery and Bootstrap
Home Page

56
Chapter Three: Log Book
3.0 Summary of Log Book.
During my Six month on field work I was given an orientation skill on the institute which help
me understood how the institute works and enable me to carry out the task and responsibility
of the institute that was assign to me successfully. I also learned the basic fundamental of front
end web development and its programming language which include html, css and javascript I
also learn css framework (bootstrap) and javascript framework (jquery.)
HTML is a markup language for describing web document (web pages). Web developers
create document that can be viewed on the internet known as web pages. HTML is used to
write the actual document mainly, the information and images that the web page displays. In
other words HTML is used to define the element of a page includes titles, headings, paragraphs,
images, links, forms, table, list and more. There are basic building block of a page.
CSS is a simple design language intended to simplify the process of making web pages
presentable. CSS control color, text, style of fonts, spacing between paragraph, how column
are sized and laid out, what ground image or color are used and other effect. The advantage of
CSS is: CSS save time, page load faster, easy maintenance (change).
Javascript is the main client-side scripting language site owner’s use in their web application.
You can use javascript to make object move on a page, validate html form input, create special
effect, show error messages and prompt people for information.
JQuery is a javascript library is greatly simplifies javascript programming. The purpose is to
make it much easier to use javascript on your website. JQuery takes a lot of common tasks that
require many lines of code to accomplish and wraps them into method that can call with a
single line of code.
Bootstrap is a free front end development framework for faster and easier web development
and include HTML, CSS based design template for forms, button, table, navigation, images,
carousel, glyphicons, jumbotron, alerts and others.
Front end web development manage everything that users visually see first in their browser
or application. It defined components on the page with HTML, Make them look pleasing with
CSS, Enable interactivity with JavaScript and enhance productivity with use of frameworks i.e
jQuery and Bootstrap etc.

57
Chapter Four: Summary, Conclusion and Recommendation
4.0 Summary
During my IT I learned front end web development in which i was able to create a website
using front end programming languages such as HTML, CSS, Javascript together with
Javascript and CSS frameworks i.e JQuery and Bootstrap.
4.1 Conclusion
My six (6) months field work training at American University of Nigeria Yola under
software support unit was a huge success and a great time of acquisition of knowledge and
skills. Through my training i was able to appreciate my chosen course of study even more,
because i had the opportunity to blend the theoretical knowledge acquired from school with the
practical hands-on application of knowledge gained here to perform very important tasks that
contributed in a way to my productivity in the institution. My training here has given me a
broader view to the importance and relevance of Computer Science (Front end web
development) in the immediate society and the world as a whole, as i now look forward to
impacting it positively after graduation. I have also been able to improve my communication
and skills and thereby developed good relationship with my fellow colleagues at work. I have
also been able to appreciate the connection between my course of study and other disciplines
in producing a successful result.
4.2 Recommendation
As an IT student who have just finished his attachment and experienced many things, I have
the following recommendations:
i. Field Work should ensure active participation of student on attachment.
ii. Student should be emphasized to do their IT in places that they would gain more
skills rather than going to luxurious or lucrative places.
iii. Students should utilize their IT period to prepare themselves for employment after
graduation.
iv. To help those students who are financially handicapped, the ITF allowance should
be given monthly during the training considering the expenses involve, because
some organization are not given allowance to the students.
v. Students should be encouraged to choose visible organizations for their Fieldwork
program that are related to their fields with a little guidance from the coordinators.

58
References
Link
 http://www.w3schools.com
 http://www.tutorialpoint.com
 http://www.javatpoint.com
 http://www.commonlounge.com
 http://www.codecademy.com
 http://www.freecodecamp.com
 http://www.edx.org
 http://udacity.com

Field Work Report on Front End Web Development

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Field Work Report on Front End Web Development

Semelhante a Field Work Report on Front End Web Development (20)

Último

Último (20)

Field Work Report on Front End Web Development