FEDERAL UNIVERSITY OF TECHNOLOGY OWERRI

P.M.B 1526, IMO STATE

STUDENT INDUSTRIAL WORK EXPERIENCE SCHEME, (SIWES 400lv)

WRITTEN BY

IBE ANTHONY EKENE

REGISTRATION NUMBER: 20191182072

DONE AT

OMNEY PAYMENT SERVICES

SUBMITTED TO

DEPARTMENT OF INFORMATION TECHNOLOGY

SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY

IN PARTIAL FULFILMENT OF THE REQUIREMENT FOR THE AWARD OF

BACHELOR OF TECHNOLOGY, ( B.TECH ) IN INFORMATION TECHNOLOGY

MAY, 2024.

i
 ACKNOWLEDGEMENT

I extend my heartfelt thanks to God Almighty for His guidance and blessings throughout my

industrial training. To my parent, Mrs. Florence Oduigwe, and my In-laws Mr. Anthony

Okediran, and Mr. Ibe Emmanuel, your unwavering support has been my foundation and

motivation. I'm deeply grateful to Engr. Chigbogu Samuel Nwanjah, for the opportunity and

guidance provided during my training.

ii
 DEDICATION

I dedicate this training to my beloved parents, Mrs. Florence Oduigwe, and my in-laws, Mr.

Anthony Okediran and Mr. Ibe Emmanuel. Your unwavering support and encouragement

have been my source of strength throughout this journey. To myself, for the dedication and

perseverance, and to God Almighty, for His endless blessings and guidance.

iii
 ABSTRACT

This report encapsulates my industrial training experience in Web3 and blockchain

development, focusing on Solidity smart contract programming and Ether.js library usage.
Through hands-on projects, I gained proficiency in blockchain fundamentals, contract
deployment, and Ethereum network interaction. The training enriched my understanding of
decentralized technologies and their transformative potential. By mastering Solidity and
Ether.js, I acquired essential skills for building decentralized applications (DApps) and
decentralized finance (Defi’s) and interacting with Ethereum networks. This immersive
journey equipped me with practical insights and technical expertise, fostering professional
growth in the burgeoning field of blockchain development.

iv
 TABLE OF CONTENT

TITLE PAGE i

ACKNOWLEDGEMENT ii

DEDICATION iii

ABSTRACT iv

TABLE OF CONTENT v

CHAPTER ONE 1

INTRODUCTION TO SIWES 1

1.1 Introduction to Student Industrial Work Experience 1

1.2 History of SIWES 1

1.3 Objectives of the Scheme in Nigeria 2

1.4 Functions of the SIWES Unit 2

CHAPTER TWO 4

INTRODUCTION TO PLACE OF FUNCTION 4

2.1 About Omney Payments Limited (DBA Egobeke) 4

2.2 Company Overview 4

2.3 Location and Background 4

2.4 Objectives of the Organization 5

2.5 Services Offered 5

2.6 Organizational Structure 5

CHAPTER THREE 7

v
FRONTEND WEB DEVELOPMENT 7

3.1 HTML (Hypertext Markup Language) 7

3.1.2 Important HTML Tags 8

3.1.3 Semantic HTML 9

3.2 CSS (Cascading Style Sheets) 10

3.2.1 Basic Structure of CSS 11

3.2.2 Methods of Applying CSS 11

3.2.3 CSS Selectors 12

3.2.4 Important CSS Properties 14

3.2.5 Advanced CSS Concepts 15

3.2.6 Responsive Design Principles 16

3.2.7 Responsive Design Framework 17

3.2.8 CSS Box Model 19

3.3 JavaScript 20

3.3.1. Variables 21

3.3.2. Data Types 21

3.3.3. Control Structures 22

3.3.4. Functions 23

3.3.5. Objects 23

3.3.6. The Document Object Model (DOM) 24

3.3.7. Event Handling 26

vi
 3.3.8. React (a JavaScript Library) 27

3.4 Tools and Technologies Used 29

3.4.1. Visual Studio Code 29

3.4.2. Version Control Systems 29

3.4.3. Package Managers (npm) 29

3.4.4. Chrome DevTools 30

CHAPTER FOUR 31

CHALLENGES, CONCLUSIONS AND RECOMMENDATION 31

4.1 Challenges Encountered During Industrial Training 31

4.2 Conclusions 31

4.3 Recommendations 31

vii
 CHAPTER ONE

INTRODUCTION TO SIWES

1.1 Introduction to Student Industrial Work Experience

The Student Industrial Work Experience Scheme (SIWES), also known as Industrial Training

is a compulsory skill training program designed to expose and prepare students of Nigeria

universities, Polytechnics, College of Education and many other institutions for the industrial

work situations they are likely to meet after graduations.

SIWES is a human capital formation program through industrial attachment for which

students are expected to have a practical experience on the basis of theories and principles in

the teaching-learning process.

Before the establishment of the scheme, there was a growing concern among industrialists,

that graduates of the institutions of higher learning lacked adequate practical background

required for employment in industries. Thus, employers were of the opinion that the

theoretical education in the higher institutions was not responsive to the needs of the

employers of labor.

1.2 History of SIWES

SIWES introduction, initiations and design was done by the Industrial Training Fund (I.T.F)

in 1971 to acquaint students with the skills of handling employer’s equipment and machines.

The Industrial Training Fund solely funded the scheme during its formative years. However,

due to financial constraints, the fund withdrew from the scheme in 1978.

1
The Federal Government, noting the significance of the skills training handed the

management of the scheme to both the National Universities Commission and the National

Board for Technical Education (N.B.T.E) in 1979.

The management and implementation of the scheme was 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 provided by the Federal

Government.

1.3 Objectives of the Scheme in Nigeria

1. To provide students with the opportunity to apply the theoretical knowledge they had

gained school to real-life work situation, thereby bridging the gap between university work

and actual practice.

2. To enlist and strengthen employer’s involvement in the entire education process of

preparing university undergraduates for employment in the industry.

3. To provide an avenue for students in the University to acquire industrial skills and

experience in their various fields of study.

4. To expose students to the work methods and techniques in handling equipment and

machinery that may not be avaliable in the universities.

5. To serve as opportunity for self-actualization for the students thus making positive and

commendable contribution within the scope of their knowledge.

1.4 Functions of the SIWES Unit

By the directives of the NUC and ITF, Unit is mandated to carry out the following Functions:

1. Supervision of the student’s places in the industries located within the IFT zones.

2
2. Processing student’s logbooks, ITF forms and industrial attachment reports upon which is

based on the Federal Government funding of the supervision and the student allowance.

3. Fostering close relationship between the University and the industries participating in the

SIWES program.

3
 CHAPTER TWO

INTRODUCTION TO PLACE OF FUNCTION

2.1 About Omney Payments Limited (DBA Egobeke)

During my six-month Industrial Training (IT), I had the opportunity to learn with Omney

Payments Limited, a renowned Information Technology (IT) company. Omney Payments

Limited specializes in providing a wide range of IT solutions utilizing cutting-edge

technological tools. Their services include Software Development, E-Commerce Websites, E-

Payment Integration, WordPress Theme Design, Database Solutions, Enterprise Web

Applications, Mobile Application Development, Website Management and Maintenance,

Enterprise Desktop Applications, and One-on-one Training.

2.2 Company Overview

Omney Payments Limited specializes on delivering innovative IT solutions to startups,

private organizations, and government agencies. Led by Mr. Chigbogu Nwanjah, a seasoned

full-stack ASP.Net core software Engineer, the company offers expertise in various areas,

including Software Development, E-Commerce, Web Design, Mobile App development, and

WordPress Theme Development.

2.3 Location and Background

Omney Payments Limited is located at Block B, adjacent to Step 1 Lab, Parkland Business

Plaza, Cherubim junction, Ihiagwa, Owerri, Imo State. Established in July 2016 with the

registration number 1404967, the company has a strong online presence, allowing it to server

clients globally. From its inception, Omney Payments Limited has been committed to

developing tailored solutions meet the diverse needs of businesses worldwide.

4
2.4 Objectives of the Organization

Omney Payments Limited distinguishes itself through its core values, including a

commitment to quality, affordability, reliability. By leveraging modern technologies and

frameworks, the company ensures long-term usability and affordability of its solutions, along

with round-the-clock customer support.

2.5 Services Offered

Omney Payments Limited offers a comprehensive set of IT services to address the diverse

needs of its clients. These services include:

• Website Design: Developing modern, responsive websites with integrated content

management systems.

• Enterprise Solution Development: Building custom web, mobile, and desktop

applications to enhance client’s business productivity.

• Training: Providing one-on-one and online training sessions to impart industry

relevant skills.

2.6 Organizational Structure

Omney Payments Limited operates through various departments and units, each serving a

specific function:

• Managing Director: Overseeing project management, software deployment, and

client engagement.

• UI/UX Designers: Responsible for creating visual concepts using tools like Figma.

• Backend Developers: Building API’s and managing web applications databases.

5
• Frontend Developers: Responsible for converting design concepts into functional

application interfaces.

• Full-stack Developers: These are skilled professionals with expertise across all

aspects of web development.

• Industrial Training (IT) Students: Engaging in hands-on learning under the

guidance of experienced professionals.

6
 CHAPTER THREE

FRONTEND WEB DEVELOPMENT

3.1 HTML (Hypertext Markup Language)

HTML or Hypertext Markup Language is a standard language used to create and structure

content on the web. It forms the backbone of web development and is essential for creating

web pages and web applications. HTML uses a series of elements or tags to define the

structure and content of a webpage. These elements are enclosed in angle brackets (< >) and

typically come in pairs, with an opening tag and a closing tag.

3.1.1 The Structure of an HTML Document

An HTML document has a well-defined structure, consisting of several key elements:

1. <!DOCTYPE html>: This declaration defines the document type and version of HTML. It

ensures that the document is parsed correctly by the web browsers.

2. <html>: This is the root element of an HTML document. All other elements are nested

within this tag.

3. <head>: This section contains meta-information about the document, such as its title,

character set, styles, and scripts.

4. <title>: This tag sets the title of the webpage, which is displayed in the browser's title bar

or tab.

5. <body>: This section contains the actual content of the webpage, including text, images,

links, and other media.

7
Below is a basic example of an HTML document structure

3.1.2 Important HTML Tags

HTML provides a wide range of tags to create and structure content. Below are some of the

most important and commonly used tags:

1. Headings (<h1> to <h6>): Heading are used to define the hierarchical structure of

contents. With <h1> being the highest level and <h6> being the lowest.

2. Paragraph (<p>): This is used to define a paragraph of text.

3. Links (<a>): This tag creates hyperlinks to other webpages or resources., the “href”

attribute specifies the URL of the link.

4. Images (<img>): This tag embeds images into the webpage. The “src” attribute specifies

the path to the image file while the “alt” attribute provides the alternative text for the image.

5. Lists(<ul>, <ol>, <li>): These tags are used to order different contents in the webpage

following a specific other. It consists of two categories, the ordered list (<ol>) which

specifies contents in a particular numerical or alphabetical order and the unordered list (<ul>)

which specifies contents without considering or adhering to a specific order. Lastly, we the

8
list contents, (<li>), which contains the actual text to be displayed on the webpage, the are

wrapped inside either the ordered list tag or the unordered list tag.

6. Tables (<table>, <tr>, <th>, <td>): These tags are used to arranges web contents in a

tabular form. It consists of some sub tags, like the tr, td, th. Which defines the table row, table

cell and table header respectively.

7. Forms (<form>, <input>, <label>, <button>): This is a tag used to collect user data from

webpages like signing up or signing to web applications using forms. It consists of some

other tags that are contained inside if it. These tags can be the inputs, which allows users to

type in information, the label which tell users what a particular input is for, the button which

allows users to submit their information to the application.

3.1.3 Semantic HTML

Semantic HTML uses tags that convey the meaning and structure of the content, making it

more accessible and easier to maintain. Some common semantic tags include:

1. <header>: Defines the header section of a document or section.

2. <nav>: Defines a navigation menu.

3. <main>: Defines the main content of a document.

4. <section>: Defines the section of content.

5. <article>: Defines an independent self-contained piece of content.

6. <aside>: Defines content aside from the main content.

7. <footer>: Defines the footer section of a document or section.

9
Below is a code snippet to display some important HTML tags and semantic tags

3.2 CSS (Cascading Style Sheets)

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of

HTML documents. It controls the layout, design, and visual appearance of web pages. By

separating the content (HTML) from the presentation (CSS), it allows for greater flexibility

and maintainability in web development.

10
3.2.1 Basic Structure of CSS

A CSS rule consists of a selector and a declaration block. The selector targets the HTML

elements to be styled, and the declaration block contains one or more declarations, each

consisting of a property and a value. Example of a css rule:

3.2.2 Methods of Applying CSS

There are three main methods of applying CSS to your html file to style.

1. Inline CSS: This is a method where styles are applied directly within HTML elements

using the “style” attribute.

11
2. Internal CSS: Here, styles are defined within a “<style>” tag in the “<head>” section of

an HTML document.

3. External CSS: This is where styles are defined in an external stylesheet (a .css file) and

linked to the HTML document using the “<link>” tag.

3.2.3 CSS Selectors

Selectors are used to target the HTML elements that you want to style. Here are some

common types of selectors:

1. Element Selector: This targets all instances of a specified element. Example is in fig

3.2.1 above.

12
2. Class Selector: This targets elements with a specific class attribute.

3. ID Selector: This targets an element with a specific ID attribute.

4. Attribute Selector: This targets elements with a specific attribute or attribute value.

13
5. Psuedo-class Selector: This targets elements with a specific state. Like hover. Below is a

code snippet to show a Pseudo-class.

3.2.4 Important CSS Properties

1. Color: This can be either the text color by specifying only the color property and

passing it the required color as a value. Or the background color using the background-color

property and passing it the required value as required. Below is a code to show how to use the

color and background-color properties.

2. Text and Font: We have a number of properties to use to set text to our preferred

style, like the font-family, font-size, font-weight, text-align and many more, you can set these

14
properties separately or use the general name “font” to set all the properties in one line.

Below is a code example for setting the text and its fonts.

3. Flexbox: A layout model that provides a more efficient way to lay out, align, and

distribute space among items in a container.

3.2.5 Advanced CSS Concepts

As we go into learning CSS, there are some concepts that are more advanced than the others

and are not used more often but are very important in making modern responsive applications

with better user experience. Some of these concepts are discussed below.

1. Media Queries: This is used to create responsive designs that adapt to different screen

sizes. It has a way of defining its property as shown below.

15
2. CSS Grid: This is a powerful layout system for creating complex web layouts. It allows

you to place parent elements or child elements in a particular columns or rows as defined by

you.

3.2.6 Responsive Design Principles

Responsive web design (RWD) is an approach to web design aimed at crafting websites that

provide an optimal viewing experience across a wide range of devices, from desktop

computers to mobile phones. The goal is to ensure that a website looks good and functions

well on any device, regardless of its size or orientation. Key principles of responsive design

include fluid grids, flexible images, and media queries.

16
1. Viewport Meta Tag: The viewport meta tag controls the layout on mobile browsers,

ensuring that the webpages scales correctly to the device’s width. Example of a viewport

meta tag:

2. Flexible Images: flexible images are scaled relative to the width of their containing

element, preventing them from overflowing their container. This make the image fit better

and not go beyond the container it is wrapped inside, adhering to the width you give the

image in percent.

3.2.7 Responsive Design Framework

These are tools or used for developing responsive mobile first websites and web application.

They offer a collection of CSS and JavaScript tools and templates that streamline the web

development process. They include responsive grid system, pre-styled components, and

powerful JavaScript plugins, making them an invaluable resource for frontend developers.

One of the widely used framework is Bootstrap.

1. Bootstrap: This is a popular frontend CSS framework used for developing responsive and

mobile first web applications. Created by Twitter, Bootstrap offers a wide range of CSS and

17
JavaScript tools and templates that streamline the web development processes. It includes a

variety of ready to use components such as navigation bars, buttons, forms, which can be

easily customized to fit the design requirements. It ensures consistency of design and

functionality across different browsers and devices, which is especially beneficial in

collaborative projects. Bootstrap like many CSS frameworks take the off the stress of having

to write multiple CSS code in the different files and having to manage them across your

project, as the projects grows larger.

2. Tailwind CSS: This is a utility-first CSS framework that allows developers to build

custom designs without having to leave their HTML. It is different from traditional CSS

frameworks like Bootstrap in that it provides low-level utility classes that can be composed to

build any design rather than pre-designed components. It aims at making the process of

styling websites or web applications more efficient by offering a set of utility classes that can

be directly applied in the HTML markup. These utility classes cover a wide range of CSS

properties, including layouts, spacing, typography, colors and more. Using tailwind makes

responsive designs easy as they have built in keywords like sm, xl, md, lg, and many more

which represent different screen sizes, that enables you define different styles for different

screen sizes. When working with Tailwind CSS, you are provided with a tailwing.config.js

that allows for extensive customization of the framework. Developers can add or modifier

18
colors, spacing, typography, and other design tokens to fit their project needs. Below are code

snippets showing how tailwind can be used in our project.

3.2.8 CSS Box Model

CSS box model is a fundamental concept in web development that defines how elements are

structured and rendered on a webpage. It consists of several components that determine the

size and spacing of HTML elements. Understanding the box model is essential for creating

well-structured and visually appealing web designs. Some of the components of the CSS box

model are:

1. Content: This is the innermost part of the box model where the text and images are

displayed. It is defined by the width and height properties.

19
2. Padding: The space between the content and the border. Padding increases the size of the

element without affecting the content size. It can be set uniformly or individually for each

side (top, right, bottom, left). This property can be used to position an element in a desired

position without affecting the content of the element. Below is a code snippet to show how to

set the padding property uniformly or individually.

3. Border: This surrounds the padding and the content. It can be styled using various

properties like border-width, border-style and border-color. It can be also be done in one line

using the border property and setting the different values together.

4. Margin: This is the outermost part of the box model. Creating space between the element

and other elements on the page. It is used to achieve a better spacing between and element

and its outer environment or other elements. Margins can also be set uniformly or

individually for each side.

20
3.3 JavaScript

JavaScript is a versatile programming language that enables dynamic interactions on web

pages. It is essential for creating responsive, interactive, and user-friendly web applications.

One of the key aspects of JavaScript in web development is its ability to manipulate the

Document Object Model (DOM). Before diving into the complexities of the Document

Object Model (DOM) manipulation, it's crucial to have a foundational understanding of basic

JavaScript concepts. JavaScript is a versatile and powerful programming language that is

essential for adding interactivity to websites. This section will cover the basics of JavaScript,

including variables, data types, operators, control structures, functions, and objects. Some

basic JavaScript concepts are discussed below.

3.3.1. Variables

Variables are like the store house for your application data. They are used to store data that

can be referenced and manipulated within the program. In JavaScript, variables can be

declared in three different ways. Using either the var, let, or const.

1. var: This declares a variable, optionally initializing it to a value. It has a function

scope, meaning that if it is declared inside a function, you cannot access it outside of the

functions. Variables declared with this keyword can be reassigned in during runtime in the

program.

2. let: This declares a block-scoped local variable, optionally initializing it to a value. .

Variables declared with this keyword can be reassigned in during runtime in the program.

3. const: This declares a block-scoped constant, that must be initialized and which

cannot be reassigned.

3.3.2. Data Types

21
Just like many other programming languages, JavaScript support many data types, in a

slightly different way since it is not a strictly types language. Some of the data types are

Strings, Numbers, Booleans, Arrays, Objects, Null, Undefined. Etc.

3.3.3. Control Structures

These are used to control the flow of execution in a program. There are few control structures

in JavaScript, at listed below:

1. If-Else Statement: this executes a block of code if a specified condition is true.

2. Switch Statement: This executes one of many blocks of code based on a variable

value

3. For Loop: This repeats a block of code for a specified number of times. This is a very

important control structure that can be used to perform task repeatedly for a specified number

of times. It is mostly used to perform calculation or some operations on some data structures

to the number of elements contained in the data structure.

4. While Loop: This repeats a block of code as long as a specified condition is true.

Below is a code showing how this control structures are being used.

22
3.3.4. Functions

These are reusable block of codes that perform a specific task. A function or collection of

multiple functions that interact with each other build up a program. There are three main

ways to declare functions in JavaScript. These are function declaration, function expression

and arrow function.

1. Function Declaration: This defines a function with a name.

2. Function Expression: This defines a function and assigns it to a variable.

3. Arrow Function: This is a shorter syntax for writing functions. Introduced in ES6.

Below is a code snippet showing the three approaches to defining JavaScript functions

23
3.3.5. Objects

Objects are collections of key-value pairs, where each key is a string (also called a property

name), and each value can be any data type. They are very useful data structures that help in

building web application and managing user data.

3.3.6. The Document Object Model (DOM)

The DOM is a programming interface for HTML and XML documents. It represents the page

so that the programs can change the document structure, style and content. The DOM is

structured as a tree of objects, with each object corresponding a part of the document.

Accessing DOM Elements: To manipulate the DOM, JavaScript first needs to access the

elements it wants to change. This can be done using various methods provided by the

document object. Some of the commonly used methods are:

1. getElementById: This method retrieves an element by its unique ID. It is the mostly

used method for accessing the DOM to retrieve unique elements that do not change. This

method returns a single element object.

24
2. getElementByClassName: This method retrieves all elements with a given class

name. This method returns an HTMLCollection object that acts like an array. The collection

is live which means the collection is updated if additional elements with the class name are

added to the document.

3. getElementByTagName: This used to retrieve all elements with a specific tag name.

This method returns an HTMLCollection object that acts like an array. The collection is live

which means the collection is updated if additional elements with the tag name are added to

the document.

4. querySelector: This method retrieves the first element that matches a CSS selector. It

returns a single element object.

5. querySelectorAll: This method retrieves all elements that match a CSS selector. It

returns a Nodelist which also acts like an array. The list is static, which means that it won’t

update even when new matching elements are added to the page.

Below is a code snippet showing the different methods a accessing the DOM element.

25
Modifying DOM elements: Once an element is accessed, they can be modified in various

way as you want to align with the functionalities of the web application or website. You can

modify styles, element positions, contents, responsiveness, deleting and adding new contents

and many more.

1. Changing Content: The innerHTML property can be used to get or set the HML

content inside an element as shown below.

2. Changing Style: The style property can be used to change the CSS styles of an

element as shown:

3. Changin attribute: The setAttribute method can be used to change an element’s

attribute. Example is shown below:

3.3.7. Event Handling

26
JavaScript can respond to user interactions or actions such as click, key press, and mouse

movements through event handling. Events are actions or occurrences that happen in the

browser that

JavaScript can react to.

1. Adding Event Handlers: This is a of attaching events handlers through callbacks to

our JavaScript code. This us to react to user actions or interactions in the web pages, like

clicking a button, submitting a form, and many more. The method for attaching events in

JavaScript is call the addEventListener. Which takes the name of the event as the first

parameter and a callback function that runs when the users trigger the event as a second

parameter. Below is a code snippet showing how to attach and handle events in JavaScript.

2. Removing Events Listeners: Most of the times, after adding event listeners to our

web page elements, we often need to remove the event handlers when the have accomplished

their purpose or when we do not seem to need them any longer. To achieve this, we use the

removeEventListener method to remove the events added to elements. Below is a code

snippet to add and remove an event to a button element.

27
3.3.8. React (a JavaScript Library)

During the last days of my IT, we started learning the basic of React.

React is a popular JavaScript library developed by Facebook for building user interfaces.

Particularly for single-page applications where a fast, interactive user experience is crucial.

React allows developers to create reusable UI components, manage state efficiently, and

handle the rendering of dynamic data with ease. It is designed to make the process of building

user interfaces more efficient and manageable. It follows a component-based architecture,

meaning that the UI is divided into independent, reusable pieces, each representing a part of

the interface. These components can be nested, managed, and handled independently making

complex UIs easier to develop and maintain. Some important concepts and features of React

are as follows:

1. Components: The core building blocks of React application are components. A

component in React is a JavaScript function or class that optionally accepts inputs called

props and returns a React element that describes how a section of the UI should appear.

Below is a code snippet showing components that displays a greeting to name passed as a

prop to the component.

28
2. JSX: This stands for JavaScript XML. It is a syntax extension for JavaScript that

allows you to write HTML-like code inside JavaScript. JSX makes it easier to create React

elements and visualize the structure of the UI.

3. State and Props: State and Props are essential concept in React. Props (short for

properties) are read-only attributes passed to a component to configure it. State on the other

hand, is a components internal data that can change over time. Managing state effectively is

crucial for building dynamic and interactive applications.

4. Hooks: Introduced in React 16.8, hooks are functions that let you use state and other

React features without writing class. The useState and the useEffect hooks are among the

most commonly used hooks.

3.4 Tools and Technologies Used

Frontend web development involves a variety of tools and technologies that streamline the

development process and enhance the capabilities of web applications. These tools range

from code editors and version control systems to frameworks and libraries that aid in creating

responsive and dynamic user interfaces. Below, we will discuss some of the most important

tools and technologies used in frontend web development.

3.4.1. Visual Studio Code

29
Short for VS Code is a lightweight, open-source code editor developed by Microsoft. It

supports numerous programming languages and has a rich ecosystem of extensions that ease

development processes. Some of which are intellisense for code completion, integrated

terminal, version control integration, and a wide range of plugins for debugging, linting, and

code formatting.

3.4.2. Version Control Systems

1. Git: Git is a distributed version control system used to track changes in source code

during software development. It is used for branching, merging, publishing, and distributing

workflow. It is a strong support for non-linear development.

2. Github: Github is a web and mobile-based platform that provides Git repository

hosting and collaborative development tools. It enables pull request, code reviews, issue

tracking, and project management features.

3.4.3. Package Managers (npm)

npm stands for node package manager. It is a default package manager for Nodejs, used to

manage JavaScript dependencies. It is used for installing, updating and managing libraries

and frameworks.

3.4.4. Chrome DevTools

This is a set web developer tools built directly into the Google Chrome browser. It is used for

inspecting HTML and CSS, debugging JavaScript, analyzing network activity, and

performance profiling.

The tools and technologies discussed above are essential for frontend web development. They

enhance productivity, streamline workflows, and provide powerful features that make

developing modern, responsive, and interactive web applications more efficient and

30
enjoyable. Mastery of these tools and technologies is crucial for any frontend developer

looking to build high-quality web applications.

31
 CHAPTER FOUR

CHALLENGES, CONCLUSIONS AND RECOMMENDATION

4.1 Challenges Encountered During Industrial Training

During the course of my training in frontend web development, several challenges emerged,

each presenting unique learning opportunities. some of these challenges are:

Mastering various tools and technologies such as HTML, CSS, JavaScript, React, and

Tailwind CSS required a significant amount of time and effort. The steep learning curve

sometimes led to frustration and required a persistent and patient approach to overcome.

Another challenge encountered was ensuring that web applications were fully responsive and

performed well across different devices and screen sizes required meticulous planning and

testing. This challenge emphasized the importance of mobile-first design principles and

thorough testing.

4.2 Conclusions

The journey through the world of frontend web development has been both challenging and

rewarding. Through this training, I have gained a comprehensive understanding of essential

web technologies and the intricacies of building responsive, dynamic web applications.

4.3 Recommendations

From my experience during this period of my Industrial Training, I strongly advise students

to take this period seriously and utilize every opportunity that comes with it. It is an excellent

opportunity to advance existing skills or acquire new ones, which can significantly enhance

their prospects in the job market. Also, from the aspect of web development. I would

recommend the following:

32
Provide a clear, structured learning path that gradually introduces new concepts and

technologies, ensuring a solid foundation before moving on to more advanced topics.

Establish a mentorship program where experienced developers can provide guidance,

support, and feedback to trainees, helping them navigate challenges more effectively.

And lastly, learn by doing, Incorporate more hands-on projects and real-world scenarios to

apply theoretical knowledge and develop practical skills.

33
 REFERENCE

Mozilla Developer Network (MDN). (2023). JavaScript Guide. Retrieved from MDN Web

Docs

W3Schools. (2023). CSS Box Model. Retrieved from W3Schools

https://www.w3schools.com/html/

Freeman, A., & Robson, E. (2019). Head First HTML and CSS: A Learner's Guide to

Creating Standards-Based Web Pages. O'Reilly Media.

Bootstrap Documentation. (2023). Retrieved from Bootstrap https://getbootstrap.com/

FreeCodeCamp. (2021). Frontend Development Crash Course. Retrieved from

https://youtu.be/krfUjg0S2uI

34