1

CHAPTER ONE

INTRODUCTION TO SIWES

1.1 BACKGROUND OF SIWES

The student industrial Work Experience Scheme (SIWES) program involves

the students, universities and industries. This is an accepted skill program which
forms part of the approval academic standards in the degree program for Nigerian
universities. The scheme educates students on industrial based skills essential for a
smooth transition from the classroom to the world of work. No society can
achieve meaningful progress without encouraging its youths to acquire necessary
practical skills, such skills enable them to provide available resources to meet the
need of the society. It was on these bases that the Students Industrial Work
Experience Scheme (SIWES) also referred to as industrial training (IT) was
introduced in Nigeria tertiary institutions.

Participation in SIWES has become a necessary pre-condition for the award of

diploma and degree certificate in specific disciplines in most institutions, in
accordance to the education policy of the government.

1.2 HISTORY OF SIWES

SIWES was established by Industrial Training Fund ITF in 1973 to solve the
problem of lack of adequate practical skills preparatory for employment in
industries by Nigerian graduates of tertiary institutions. The Scheme exposes
students to industry based skills necessary for a smooth transmission from the
classroom to the world of the work. It affords students of tertiary institutions the
opportunity of being familiarized and exposed to the needed experience in
handling machinery and equipment which are usually not available in the
educational institutions.

The students industrial work experience scheme (SIWES) is a skills training program
designed to expose and prepare students of universities and other tertiary institutions
for the industrial work situation they are likely to meet after graduation requirement
for all Nigerian university students offering certain courses.
 2

Siwes introduction, initiation and design were done by the Industrial Training Fund
(I.T.F) in 1993 to deputize students with the experiment and machinery in all useful
ways. The Industrial Training Fund (I.T.F) merely funded the scheme during its
originative years. However, due to financial constraints, the fund withdrew from the
scheme in 1978.

The Federal Government, noting the significance of skills training handed the
management of the scheme to both the National Universities Commission (N.U.C)
and the National Board for Technical Education (N.B.T.E) in 1979. The management
and implementation of the scheme were however reverted to the I.T.F by the Federal
Government in November 1984 and the administration was effectively taken over by
the Industrial Training Fund in July 1985, with the funding solely borne by the federal
government.

1.3 OBJECTIVES OF SIWES

1. To provide an avenue for students in institutions of higher learning to acquire

industrial skills in their courses of study.
2. Prepare students for the industrial work situations they are to meet after
graduation.
3. Expose students to work methods and techniques in handling equipment
machinery that may not be available in their institutions.
4. Provide students with the opportunity to apply their knowledge in real work
situation thereby bridging the gap between theory and practice.
5. To make transition from the university to the world of work and this enhance
student contact for better job placement.

1.4 MANDATE OF SIWES

The directorate has the mandate to coordinate the acquisition of relevant production
skills of students and their industrial training, in order to bridge the gap between
 3

theoretical knowledge acquired in the classroom and actual Practice in the industrial
world. The directorate operates as a link between the students, the National
Universities Commission (NUC) as the SIWES Regulatory Agency, the SIWES
Division of the Industrial Training Fund (ITF) as the Federal Parastatal charged with
the Industrial Skills Acquisition and funding responsibility, the organization where
the students are acquiring relevant skills and experience, and the students on
Industrial Training.

1.5 VISION OF ITF

To effect positive change in programs, practices, policy and legislation by

representing the views and interest of Alberta employers who are members of the ITF
Association on matters related to workers’ Compensation in Alberta.

1.6 MISSION OF ITF

To proactively identify and advise members of WCB-related issues that may impact
member organizations and provide unified, quality representation of employer
stakeholders on WCB policy and other associated WCB related issues impacting
legislation,regulations,policy and funding.
 4

CHAPTER TWO

ORGANIZATION OF INDUSTRIAL ATTACHMENT

2.1 BRIEF HISTORY OF DIGITAL DREAMS ACADEMY

Digital dream is one of the leading IT firms in Nigeria registered by corporate affairs
commission of Nigeria in September 2007 with registration No. RC 708352. We
offer advanced IT solutions to companies, organizations and institutions for efficient
and effective operation. The firm stands out as one of the top 10 ICT companies in
Nigeria and is soaring high to become one of the top best in Sub-Saharan Africa with
specialty in web design, animations, software development and ICT training. By
developing world class software, we ease institutions and organizations operation.
Digital dreams strive to integrate technology in every field of life thereby promoting
and enhancing institutional and organizational efficiency.
We specialise in development of IT solutions to increase individual and corporate
efficiency and productivity. We seek to be one of the major ICT players in Africa
and dominating the global ICT market with our product brands and promoting
societal efficiency through the use of technology .We believe that technology and
art are inseparable justifying why we ventured into animation and graphics. Our
experience has made us expand our horizon and created the first animation video in
Southern Nigeria.

We also run an ICT academy. Digital dreams ICT academy offers professional IT
training for individuals and corporate group at affordable prices and in a convenient
and conducive environment that facilities learning. The academy offers corporate
training services for executives and organizations on web design and computer
programming, productivity skills, time management, stress management, over
tasking etc. This helps in sharpening the skills of the organizations staff, thereby
granting the organizations competitive advantage in the competitive business world.

The academy offers over 20 ICT courses which includes, Web design, Digital
marketing, Animation, Android, JAVA, C++, AUTOCAD, Archicad etc. for their
trainee. Digital dreams offer corporate, group and individual training for their
 5

students. The academy runs executive and group class for their trainees. Our classes
offer students the opportunity to reach their potential.

To add more to our students, we make our training 60% practical which means each
student goes home with a project at the end of each class to practice what he/she
learnt before coming for the next class. In Digital Dreams ICT academy, we run
executive and group class for our students to suit their schedule. Our classes offer
students the opportunity to reach their potentialThe academy has trained and
certified over 100 IT professionals who are thriving in the various fields of ICT and
its peripheral industry.

2.2 MISION OF DIGITAL DREAMS ACADEMY

 To promote entrepreneurship through the internet and software development.

 To promote and facilitate e-business and e-commerce in Nigeria.
 To increase the number of IT professionals through training, seminar, and
workshop.

2.3 VISION OF DIGITAL DREAMS ACADEMY

To be an innovative brand that our customers and communities trust as partners in

achieving their dreams.

2.4 CORE VALUES OF DIGITAL DREAMS ACADEMY

 INTEGRITY

When we say we will do it, we will do it!

 CUSTOMER FIRST

Our job is done when you are not only satisfied but feel special!

 INNOVATION
 6

We always ask, how can it be done better?

 PERSISTENCE

We don't give up neither on you or ourselves!

2.5: ORGANIZATION’S CHART OF DIGITAL DREAMS ACADEMY

Figure 1.0: Organogram of Digital Dreams Academy

 7

CHAPTER THREE

ALL TRAININGS ACQUIRED

Introduction

This chapter discusses the activities, knowledge and skills acquired during a 6 month
industrial training at digital dreams academy. During this period under review,
interns were taken on web development with emphasis on the front-end. The website
is comprised of two parts. Front-End and Back-End. And is based on the Front-end.

3.1 Front-End

When visiting or opening a website, the visual image present on the desktop or mobile
screen is called Front-End. It is also known as Client-Side. Front-End is the practice
of producing HTML, CSS and JavaScript for a website or Web Application so that a
user can see and interact with the device directly.

The objective of designing a site is to ensure that when the users open up the site they
see the information in a format that is easy to read and relevant. This is further
complicated by the fact that users now use a large variety of devices with varying
screen sizes and resolutions thus forcing the designer to take into consideration these
aspects when designing the site. They need to ensure that their site comes up correctly
in different browsers (cross-browser), different operating systems (cross-platform)
and different devices (cross-device), which requires careful planning on the side of
the developer.

There are several tools available that can be used to develop the front end of a
website, and understanding which tools are best fit for specific tasks marks the
difference between developing a hacked site and a well-designed, scalable site. Below
are some popular tools used for Front- End development:

i. Hyper Text Markup language (HTML)

Hyper Text Markup Language is the backbone of any website development process.
Without it. a web page doesn't exist. It is the HTML code that provides an overall
framework of how the site will look. HTML was developed by Tim Berners-Lee in
1993. After the development of HTML, many versions came into the market of the
 8

World Wide Web. The latest version of HTML is called HTML5. This version
contains new and efficient ways of handling elements such as video and audio files.
HTML5 is now very popular among front-end web developers. The HTML5 has lots
of features in comparison to the older versions. After the development of HTML, a
revolution came in the field of the internet. Now, the world started communicating by
using the single language i.e.: HTML. And also the term HTML is made up of two
parts. The first one is Hyper Text and the second one is Markup Language.

Cascading Style Sheets (CSS)

CSS controls the presentation aspect of a website and allows a website to have its own
unique look. It does this by maintaining style sheets which sit on top of other style
rules and are triggered based on other inputs, such as device screen size and
resolution. In simple words, it's a tool that defines/control colors, text and its size
(content) etc.

iii. JavaScript

JavaScript is an event-based imperative programming language (as opposed to

HTML's declarative language model) that is used to transform a static HTML page
into a dynamic interface. JavaScript code can use the Document Object Model
(DOM), provided by the HTML standard, to manipulate a web page in response to
events, like user input. Using a technique called AJAX, JavaScript code can also
actively retrieve content from the web (independent of the original HTML page
retrieval), and also react to server-side events as well, adding a truly dynamic nature
to the web page experience.

HTML AND ITS PROPERTIES

HTML stands for Hypertext Mark-up Language, and it is the most widely used
language 10 write Web Pages. Hypertext refers to how Web pages (HTML
documents) are linked together. Thus, the link available on a webpage is called
Hypertext.

ii. As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display. Originally, HTML was developed with the intent of defining
 9

the structure of documents like headings, paragraphs, lists, and so forth to facilitate
the sharing of scientific information between researchers. Now, HTML is being
widely used to format web pages with the help of different tags available in HTML
language.

HTML TAGS:

As told earlier, HTML is a markup language and makes use of various tags to format
the content. These tags are enclosed within angle braces <Tag Name>. Except for few
tags, most of the tags have their corresponding closing tags. For example. <html>has
its closing tag</html>and <body>tag has its closing tag </body>tag etc. The
following are the names of tags and their description.

Tag description

This tag encloses the complete HTML document and mainly

comprises of document header which is represented by
<html>
<head>...</head> and document body which is represented by
<body></body> tags.

<head> This tag represents the document's header which can keep other
HTML tags like <title> <link>, <script language="javascript">
etc.

<title> The <title> tag is used inside the <head> tag to mention the
document title.
 10

<body> This tag represents the document's body which keeps other
HTML tags like <h1>

<div>, <p>, <table> etc.

<h1> This tag represents a heading

<p> This tag represents a paragraph.

<b>.,<li>.

HTML TABLE:

The HTML table model allows web designers to arrange data-text, per-formatted text,
images, links, forms, form fields, other tables, etc, into rows and columns of cells. It is
defined with the <table> tag.Table are divided into table rows with the <tr tag. Table
rows are divided into table data with the <td> tag. A table row can also be divided
into table headings with the <th> tag.Table data <td> are the data containers of the
table. They can contain all sorts of HTML. elements like text, images, lists, other
tables.

Fig 2.0 : snapshot of a simple html code

 11

INTRODUCTION TO CSS

CSS stands for "Cascading Style Sheet" Cascading style sheets are used to format the
layout of Web pages. They can be used to define text styles, table sizes, and other
aspects of Web pages that previously could only be defined in a page's HTML

CSS helps Web developers create a uniform look across several pages of a Web site,
Instead of defining the style of each table and each block of text within a page's
HTMI., commonly used styles need to be defined only once in a CSS document. Once
the style is defined in cascading style sheet, it can be used by any page that references
the CSS file. Plus, CSS makes it easy to change styles across several pages at once.
For example, a Web developer may want to increase the default text size from 10pt to
12pt for fifty pages of a Web site. If the pages all reference the same style sheet, the
text size only needs to be changed on the style sheet and all the pages will show the
larger text. While CSS is great for creating text styles, it is helpful for formatting
other aspects of Web page layout as well. For example, CSS can be used to define the
cell padding oftable cells, the style, thickness, and color of a table's border, and the
padding around images or other objects. CSS gives Web developers have more exact
control over how Web pages will look than HTML does. This is why most Web pages
today incorporate cascading style sheets. Note: CSS code is not written the same way
as HTML code is. This makes sense because CSS is not HTML, but rather a way of
manipulating existing HTML.
 12

Fig 3.0:snapshot of a simple css style

REASONS FOR CSS

The following are reasons why CSS is better

1. It saves time

2. It eradicates the idea of using repeating codes

3. It provides efficiency in design and updates: with CSS, we can create rules, and
apply those rules to many elements within the website.

4. It creates external file (server-side) for managing HTML. content

METHOD USED BY CSS IN FORMATTING HTML DOCUMENT

i. Inline Style: It is used to apply a unique style to a single HTML. element. An inline
CSS uses the style attribute of an HTML element.

ii. Embedded/ Internal Style: It is used if one single page has a unique style. Internal
styles are defined within the <style> element, inside the <head> section of an HTML
page.
 13

External Style: With an external style sheet, you can change the look of an entire
website by changing just one file. Each page must include a reference to the external
style sheet file inside the <link> element. The <link> element goes inside the <head>
section. Also when using external CSS it is preferable to keep the CSS separate from
your HTML. Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS). External CSS is a file that
contains only CSS code and is saved with a ".css" file extension. This CSS is then
referenced in your HTML using the <link> instead of <style> as earlier stated.

3.33 CSS SELECTORS AND HOW THEY CAN BE USED

CSS selectors are used to find or select HTML elements based on their element name,
id or class

i. Element Selector: The element selector selects elements based on the element name.
Id Selector: The id selector uses the id attribute of an HTML element to select a
specific

ii.element. The id of an element should be unique within a page, so the id selector is

used to select one unique element. e.g. id-"hello" CSS #hello { color: red;}

iii.Class Selector: The class selector selects elements with specific class attributes. To
select elements with a specific class, write a period (.) character followed by the name
of the class. e.g..center {text-align: center;}

CSS RULES OVERRIDING

i. Any inline style sheet takes the highest priority, so it will override any rule defined
in <style>......</style> tags..

ii. Any rule defined in <style>.........</style> tags will override the rules defined in any
external style sheet file.

CSS COMMENTS

To simply put comment inside a style sheet you use /* you can use it to comment
multi-line blocks similarly as you do in c and c++ programming language.

BACKGROUND AND FONT OF VARIOUS HTML ELEMENTS

 14

You can set the following background properties of an element.

i. The background-color: Is a property used to set the color background of an element.

ii. The background-image property: is used to set the background image of an element

iii.The background-repeat: Is used to control the repetition of an image in the

background

BACKGROUND AND FONT OF VARIOUS HTML ELEMENTS

You can set the following background properties of an element.

i. The background-color: Is a property used to set the color background of an element.

ii. The background-image property: is used to set the background image of an

element.

iii. The background-repeat: Is used to control the repetition of an image in the

background.

iv. The background-position: Is used to control the position of an image in the

background.

v. The background attachment: Is used to control the scrolling of an image in the

background.

vi. The background property: Is used as a shorthand to specify the number of other
background properties, the font which are

 The Font-family property: This is used to change the face of a font

 The Font-style property: This is used to make a font italic or oblique.

 The Font-weight property: This is used to increase or decrease how bold or light
a font appears.

 The Font-size property: This is used to increase or decrease the size of a font.

 The Font-size property: This is used to increase or decrease the size of a font
 15

TEXT DECORATION:

This demonstrates how to decorate a text in CSS, the values are none, underline,
overline,line-through and blink.

PROPERTIES OF HYPERLINK USING CSS

1. The link signifies unvisited hyperlinks

2. The link visited signifies visited hyperlinks

3. The link hovered signifies an element that currently has the user's mouse pointer
hovering over it.
 16

Fig 4.0 :snapshot of application of css in a html document

JAVASCRIPT

What is javascript?

 Javascript is the programming language for the web.

 Javascript can update and change both html and css.
 17

 Javascript can calculate, manipulate and validate data.

Javascript variables can be:

 Numbers
 Strings
 Objects
 Arrays

 Functions

Javascript variables

Javascript variables are containers for storing data values.

In this example, x, y, and z, are variables:

Example

Var x =5;

Var y = 6;

Var z = x + y;

From the example above, you can expect:

 X stores the value 5

 Y stores the value 6
 Z stores the value 11

Javascript numbers

Javascript has only one type of number. Numbers can be written with or without
decimals.

Example
 18

Var x = 3.14; // a number with decimals

var y = 3; // a number without decimals

All numbers are stored as double precision floating point numbers.

The maximum number of decimals is 17, but floating point is not always 100%
accurate:

Example

Var x = 0.2 + 0.1; // x will be 0.30000000000000004

Javascript strings

Strings store text. Strings are written inside quotes. You can use single or
double quotes:

Example

Var carname = "Volvo xc60"; // double quotes

var carname = 'volvo xc60'; // single quotes

The length of a string is found in the built in property length:

Example

Var txt = "Abcdefghijklmnopqrstuvwxyz";

var sln = txt.length;

Javascript objects

This code assigns a simple value (fiat) to a variable named car:

Var car = "Fiat";

Objects are variables too. But objects can contain many values.
 19

This code assigns many values (fiat, 500, white) to a variable named car:

Var car = {type:"Fiat", model:"500", color:"White"};

Javascript arrays

Javascript arrays are used to store multiple values in a single variable.

Example

Var cars = ["Saab", "Volvo", "Bmw"];

Javascript functions

A javascript function is a block of code designed to perform a particular task.

A javascript function is executed when "Something" Invokes it (calls it).

Example

Function myFunction(p1, p2) {

return p1 * p2; // the function returns the product of p1 and p2
}

What can javascript do?

This section contains some examples of what javascript can do:

 Javascript can change html content

 Javascript can change html attribute values
 Javascript can change html styles (css)
 Javascript can hide html elements

 Javascript can show html elements

Javascript can change html content

One of many javascript html methods is getelementbyid().

 20

This example uses the method to "Find" An html element (with id="Demo") and
changes the element content (innerhtml) to "Hello javascript":

Example

Document.getelementbyid("Demo").innerhtml = "Hello javascript";

Javascript can change html styles (css)

Changing the style of an html element, is a variant of changing an html attribute:

Example

Document.getelementbyid("Demo").style.fontsize = "35px";
or
document.getelementbyid('demo').style.fontsize = '35px';

Javascript can hide html elements

Hiding html elements can be done by changing the display style:

Example

Document.getelementbyid("Demo").style.display = "None";
or
document.getelementbyid('demo').style.display = 'none';

Javascript can show html elements

Showing hidden html elements can also be done by changing the display style:

Example

Document.getelementbyid("Demo").style.display = "Block";
or
document.getelementbyid('demo').style.display = 'block'
 21

3.2: PROJECTS EMBARKED ON DURING MY TRAINING

1. STARNIGHT APP WEBSITE: just created a website interface with an

inspiratin of another website,tried recrerating what I saw in the internet.

Fig 5.0: snapshot of landing page of starnight website

2. E-commerce website
 22

Fig 6.0: snapshot of ecommerce web site

3. Calculator: created with the help of html,css and javascript a functioning

calculator that has a very responsive design and has a very nice feauture of
changing themes from liht theme to dark theme.
 23

Fig.7.0 : Snapshot of a calculator project

 24

3.3: KNOWLEDGE GAINED

SIWES is a body created to educate and give students practical knowledge for the
Industrial Work situation they are likely to meet after graduation. The following skills
were acquired during the period of industrial training:

i. Ability to structure websites with the help of HTML:

ii. Ability to beautify websites with the help of HTML and CSS.

iii. Ability to create standardize websites with the help of HTML, CSS and
JAVASCRIPT.

iv. Debugging errors and being creative in the arrangement of codes.

v. Ability to identify and solve problems relating to Front-end development.

vi. Decision making, critical thinking, organizing and planning.

vii. Ability to work with team.

vi. Decision making, critical thinking, organizing and planning.

vii. Ability to work with team.

3.4 CHALLENGES ENCOUNTERD DURING THE COURSE OF THE

PROGRAMME

As a student that has undergone this training, below are the following challenges
encountered.

i. Using @media Screen properties to make a website responsive on different devices.

ii. Knowing the right CSS color combination to use for a project.

iii. Giving the correct structure to div tags to achieve a responsive website.

iv. The tool used in building a front-end website are always subjected to constant
change
 25

CHAPTER FOUR

4.1 Summary

The SIWES attachment with digital dreams academy, has been one of the most
intrusive, interesting and productive experiences. In respect of this program, gaining
new insight and a more comprehensive understanding of Front-end development and
the real industrial conditions has been fully achieved.

4.2 Final Conclusion

As an internship student who underwent the SIWES programme at digital dreams

academy. The internship programme focused on front-end web development (also
called client-side) which is the most attractive part of a site that attract the mind of the
user. Knowledge gained was most specifically on HTML,CSS and javascript part of
web development which enhance the ability to create and design different kinds of
webpage and also link them together to achieve a user interface of a website. At this
point the aim and objectives to established this programme specifically on HTML,
CSS,and javascript part of web development which enhance the ability to create
design different kinds of webpage and also link them together to achieve a user
interface website. At this point the aim and objectives to established this programmne
indeed was worthwhile.

4.3 Recommendations

1. The school management should consider the fact that students find it difficult to he
admitted to a particular organization for attachment and urge these organizations to
accept students

2. The SIWES body should try as much as they can to assist students financially when
carrying out this very industrial attachment.

3. Place of attachment should try as much as possible to employ educated workers to

avoid code-switching while lecturing

4. A mass enlightenment campaign should be carried out, to enable industries and

establishments to know the importance of SIWES to the future of students and the
society at large.