Siwes Report

ITC3600
TECHNICAL REPORT ON THE STUDENT INDUSTRIAL WORK EXPERIENCE
SCHEME (SIWES) AT NHUB FOUNDATION
BY
SALIS RABIU KHALID
WITH THE REGISTRATION NUMBER
UG19ICT1021
SUBMITTED TO THE DEPARTMENT OF COMPUTER SCINCE
FACULTY OF SCIENCE, YUSUF MAITAMA SULE UNIVERSITY KANO.
KANO STATE, NIGERIA.
IN PARTIAL FULFILMENT OF THE REQUIREMENTS FOR THE AWARD OF
BACHELOR OF SCIENCE (B.Sc) DEGREE IN INFORMATION AND COMMUNUCATION
TECHNOLOGY (ICT)
FEBRUARY 2024
DECLARATION
I, (Salis Rabiu Khalid), hereby declare that this technical report is my own work and is
a record of my Student Industrial Work Experience Scheme (SIWES) conducted at nHub
Foundation. It has not been presented before in any previous application for a Bachelor's
Degree. All references cited have been duly acknowledged.
_________________________ _________________________
SALIS RABIU KHALID DATE
ii
CERTIFICATION
This is to certify that this technical report was authored by Salis Rabiu Khalid with the
registration number: UG19ICT1021 under the supervision of MR. UMAR SHAFIU
HARUNA at the conclusion of his Student Industrial Work Experience Scheme program.
_________________________ _________________________
MR. UMAR SHAFIU HARUNA DATE
SIWES Supervisor
_________________________ _________________________
MR. LAWAN GARBA DATE
SIWES Coordinator
iii
DEDICATION
This work is dedicated to Almighty Allah, whose strength, preservation and infinite
mercy have granted me the grace and success throughout this endeavor and my studies.
Additionally, I dedicate this report to my beloved and unforgettable father, Late Alhaji Rabiu
Salisiu Maikwakwa: may his soul continue to rest in peace, Amin. My heartfelt dedication
also goes to my caring mother, Haj. Ummusalama Adamu Abbas.
Finally, I extend this dedication to my esteemed Principal and Mentor, Professor Isah
Aliyu Ibrahim Pantami CON, whose guidance and advice have been invaluable, all throughout
my academic journey. Words are not sufficient to express my gratitude, and I pray that Allah
will continue to support and bless you, Amin.
iv
ACKNOWLEDGEMENT
I would like to extend my heartfelt gratitude to Almighty ALLAH for His unwavering
preservation, enabling me to successfully navigate through the six months of my Industrial
Training without any impediments. To him be the glory.
I express my sincere appreciation to the Chief Operating Officer (COO), staff, and
management of nHub Foundation Jos, for graciously accepting me as an Industrial Attachment
student for the duration of six months.
I would also like to acknowledge the dedicated efforts of the Departmental SIWES
coordinator and my supervisor, Mr. Umar Shafiu Haruna. His encouragement and immense
motivation played a crucial role in sustaining my efforts at every stage of my attachment.
Finally, special appreciation and gratitude are extended to my Level Coordinator, Dr.
Muktar Danlami, for his valuable advice and motivation. I am also grateful to the entire family
of late Alhaji Rabiu Salisu Maikwakwa for their financial and moral support, motivational
advice and encouragement, which contributed significantly to the successful completion of
this endeavor.
v
TABLE OF CONTENT
Title page - - - - - - - - - - i
Declaration - - - - - - - - - - ii
Certification - - - - - - - - - - iii
Dedication - - - - - - - - - - iv
Acknowledgment - - - - - - - - - v
Table of contents - - - - - - - - - vi
CHAPTER ONE
1.0 GENERAL INTRODUCTION - - - - - - 1
1.1 YUSUF MAITAMA SULE UNIVERSITY KANO - - - - 1
1.1.1 VISION - - - - - - - - 1
1.1.2 MISSION - - - - - - - - - 1
1.1.3 PHILOSOPHY - - - - - - - - 1
1.2 HISTORICAL BACKGROUND OF SIWES - - - - 1
1.2.1 AIM AND OBJECTIVES OF SIWES - - - - - 1
1.2.2 IMPORTANCE OF SIWES TO EDUCATIONAL AND NATIONAL
DEVELOPMENT - - - - - - - - - 2
1.3 BACKGROUND OF PLACE OF ATTACHMENT
(NHUB FUNDATION JOS) - - - - - - - 2
1.3.1 OVERVIEW OF NHUB INITIATIVE - - - - - 3
1.3.2 COMPARISON WITH TRADITIONAL TECH HUBS - - - 3
1.4 ACHIEVEMENTS AND RECOGNITION - - - - - 3
vi
1.4.1 HACKATHON SUCCESS - - - - - - - 3
1.4.2 TRAINING PROGRAMS AND PARTNERSHIPS - - - - 3
1.5 COLLABORATION WITH GOVERNMENT - - - - 3
1.5.1 ICT FOR CHANGE EMPOWERMENT PROGRAMME - - - 4
1.5.2 GOVERNMENT SUPPORT - - - - - - - 4
1.6 IMPACT-DRIVEN INITIATIVES - - - - - - 4
1.6.1 NHUB FOUNDATION PROGRAMS - - - - - 4
1.6.2 VISION, PRINCIPLES, AND GOALS - - - - - 4
1.7 SCOPE OF THE REPORT - - - - - - - 5
CHAPTER TWO
WORKING EXPERIENCE
2.0 PRACTICAL PROFICIENCY IN WEB DEVELOPMENT TECHNOLOGIES 6
2.1 UNDERSTANDING WEB DEVELOPMENT - - - - 6
2.1.0 DEFINITION OF SOME USEFUL TERMS - - - - - 6
2.1.1 HYPERTEXT MARKUP LANGUAGE

(HYPERTEXT MARKUP LANGUAGE (HTML) - - - - 7
2.1.2 ANATOMY OF AN HTML ELEMENT - - - - - 7
2.1.2 NESTING ELEMENTS - - - - - - - 7
2.1.3 VOID ELEMENTS - - - - - - - - 8
2.1.4 BOOLEAN ATTRIBUTES - - - - - - - 8
2.1.5 ENTITY REFERENCES: INCLUDING SPECIAL CHARACTERS IN HTML -8
2.1.6 HTML COMMENTS - - - - - - - - 9
2.1.7 METADATA IN HTML - - - - - - - 9
vii
2.1.8 HEAD CONTENT - - - - - - - - 9
2.1.9 WHAT IS A HYPERLINK? - - - - - - - 10
2.1.10 BASIC LINK - - - - - - - - - 10
2.1.11 IMAGE LINKS - - - - - - - - 10
2.1.12 WEBSITE STRUCTURE - - - - - - - 11
2.2 DEBUGGING HTML - - - - - - - 12
2.3 TYPES OF ERROR - - - - - - - - 12
2.4 WAYS OF IDENTIFYING ERRORS - - - - - 12
2.6 IMAGES IN HTML - - - - - - - - 12
2.7 RELATIVE VS. ABSOLUTE PATHS - - - - - 13
2.8 WIDTH AND HEIGHT ATTRIBUTES - - - - - 13
2.9 VIDEO AND AUDIO CONTENT - - - - - - 14
2.10 RESPONSIVE IMAGES - - - - - - 15
2.11 HTML TABLE - - - - - - - - 17
2.12 CASCADING STYLE SHEET (CSS) - - - - - 19
2.12.1 CSS SYNTAX - - - - - - - - 19
2.12.2 CSS SPECIFICATIONS - - - - - - - 19
2.12.3 ADDING CSS TO A DOCUMENT - - - - - - 20
2.12.4 SELECTORS - - - - - - - - - 21
2.12.5 SPECIFICITY - - - - - - - - - 22
2.12.6 PROPERTIES AND VALUES - - - - - - 22
2.12.7 FUNCTIONS - - - - - - - - - 24
2.12.8 SHORTHANDS - - - - - - - - 26
viii
2.12.9 COMMENTS - - - - - - - - - 26
2.12.10 HOW DOES CSS ACTUALLY WORK? - - - - - 27
2.13.1 CSS BUILDING BLOCKS - - - - - - - 28
2.13.2 CSS SELECTOR - - - - - - - - 28
2.13.3 SELECTOR LISTS - - - - - - - - 29
2.13.4 TYPES OF SELECTORS - - - - - - - 29
2.13.5 COMBINATORS - - - - - - 31
2.14 THE BOX MODEL - - - - - - - - 31
2.14.1 BACKGROUND AND BORDER - - - - - - 33
2.14.2 HANDLING DIFFERENT TEXT DIRECTIONS - - - - 33
2.14.3 OVERFLOWING CONTENT: - - - - - - 33
2.14.4 CSS VALUES AND UNITS - - - - - - - 34
2.14.5 SIZING ITEMS IN CSS: - - - - - - - 34
2.14.6 STYLING TABLES WITH CSS: - - - - - - 34
2.14.7 ORGANIZING YOUR CSS: - - - - - - - 35
2.14.8 IMAGES, MEDIA AND FORM ELEMENT: - - - - 35
2.14.9 FORM ELEMENTS - - - - - - - - 36
2.15.1 CSS BASIC STYLING - - - - - - - 37
2.16 CSS LAYOUT - - - - - - - - 39
2.17 RESPONSIVE DESIGN- - - - - - - - 43
2.17.1 MEDIA QUERIES - - - - - - - - 43
2.17.2 CSS FRAMEWORK - - - - - - - - 44
2.18 SOME CSS FRAMEWORKS - - - - - - 45
ix
2.18.1 TAILWIND CSS - - - - - - - - 45
2.18.2 CORE CONCEPTS: - - - - - - - - 46
2.18.3 BASE STYLES - - - - - - - - 50
2.18.3 BACKGROUNDS, BORDERS, EFFECTS, TRANSFORMS - - 51
2.19 VERSION CONTROL - - - - - - - 55
2.20 COLLABORATION: GIT AND GITHUB - - - - - 55
2.21 BASIC GIT COMMAND - - - - - - - 55
2.23 STEPS TO HOST WEBSITE ON GITHUB - - - - - 58
2.25 INTRODUCTION TO UI/UX - - - - - - 59
2.26 FIGMA DESIGNS - - - - - - - - 59
2.26 JAVASCRIPT (JS) - - - - - - - - 60
2.26.1 JAVASCRIPT RUNNING ORDER - - - - - 62
2.26.2 INTERPRETED VERSUS COMPILED CODE - - - - 62
2.26.3 ADDING JAVASCRIPT TO YOUR PAGE - - - - - 62
2.26.4 ASYNCHRONOUS LOADING: - - - - - - 64
2.26.5 DATA TYPES (PRIMITIVES) - - - - - - 64
2.27 KEY CHARACTERISTICS OF PRIMITIVE DATA TYPES - - 66
2.28 VARIABLE DECLARATION AND ASSIGNMENT IN JAVASCRIPT - 67
2.28.1 DECLARING A VARIABLE - - - - - - 67
2.28.2 INITIALIZING A VARIABLE - - - - - - 68
2.28.3 UPDATING A VARIABLE - - - - - - - 68
2.28.4 CONSTANTS IN JAVASCRIPT - - - - - - 69
2.28.5 SCOPING - - - - - - - - - 69
x
2.28.6 SCOPE: BLOCK - - - - - - - - 69
2.28.7 ARITHMETIC OPERATOR - - - - - - - 70
2.28.8 DATA TYPES (OBJECT TYPES: OBJECT, ARRAY, FUNCTIONS) - 75
2.28.9 FUNCTION (FUNCTION DECLARATION, FUNCTION EXPRESSION, IIFE,
ANONYMOUS FUNCTIONS) - - - - - - - 77
2.29.10 CLOSURE - - - - - - - - - 79
2.29.11 HOISTING: - - - - - - - - - 79
2.29.12 HIGHER-ORDER ARRAY METHOD: - - - - - 80
2.29.13 NPM AND NPX - - - - - - - - 81
2.30 JAVASCRIPT LIBRARY - - - - - - - 85
2.30.1 SOME ADVANTAGES OF JS LIBRARY - - - - - 86
2.31 BASIC UNDERSTANDING OF REACT JS - - - - 86
2.31.1 REACT INSTALLATION STEPS - - - - - - 86
2.31.2 REACT COMPONENT - - - - - - - 88
2.31.3 WRITING MARKUP WITH JSX - - - - - - 89
2.31.4 ADDING STYLES - - - - - - - - 90
2.31.5 DISPLAYING DATA - - - - - - - 90
2.31.6 RESPONDING TO EVENTS - - - - - - 90
2.31.7 SOME RULES GUIDING REACT - - - - - - 91
2.31.8 USING HOOKS - - - - - - - - 92
2.31.9 USESTATE - - - - - - - - - 93
2.31.10 PROPS - - - - - - - - - 93
2.32 REACT ROUTER/ BROWSER ROUTER - - - - - 94
xi
2.33 REACT ICONS - - - - - - - - - 95
2.34 INDIVIDUAL PROJECT CONTRIBUTIONS AND COLLABORATIVE
ENDEAVORS - - - - - - - - 97
CHAPTER THREE
3.1 PROBLEMS ENCOUNTER DURING IT - - - - - 99
3.1.1 FINANCIAL CONSTRAINTS - - - - - - 99
3.1.2 LACK OF SUPERVISION AND MONITORING - - - - 99
CHAPTER FOUR
4.2 CONCLUSION - - - - - - - - 101
4.3 LINKS - - - - - - - - - - 102
APPENDIX - - - - - - - - - - 103
REFERENCES - - - - - - - - - 105
xii
CHAPTER ONE
1.0 GENERAL INTRODUCTION
1.1 YUSUF MAITAMA SULE UNIVERSITY KANO
1.1.1 Vision
To be the world class citadel of learning that provides practical education directed
towards the training of highly knowledgeable skilled and disciplined citizens.
1.1.2 Mission
Provide educational training, research and community service for development taking
cognizance of the cultural heritage of the host community.
1.1.3 Philosophy
Promote and enhance the country's - old prominence of the North-West as both
cynosure and pacesetter in the fields of learning and scholarship not only in the West Africa,
but throughout the continent and beyond.
1.2 HISTORICAL BACKGROUND OF SIWES
1.2.1 Aim and Objectives of SIWES
1. To prepare students for the industrial work situation they are to meet after graduation.
2. To expose students to work methods and techniques in handling equipment’s and
machinery that may not be available in their institutions of learning.
3. To aid easy transition of knowledge from school to the world of work, thereby
enhancing the student chance for later job placement.
4. To provide students with the opportunity to apply their knowledge in real work
situation thereby bridging the gap between theory and practical.
1
5. To encourage and strengthen employer’s involvement in the entire educational process
and prepare students for employment and commerce.
1.2.2 Importance of SIWES to Educational and National Development
1. It bridges the gap between the theoretical aspect learned in the class, and the practical
that are likely to be found in the field or industries.
2. Consolidation of class room studies with methods of working and experience in
traditional and machines in industries.
3. Strengthened the relationship between educational and industrial sector.
4. It provides room for further research by students for improving industrial techniques
and also finding solution to problems; hence, helps in boosting the economy.
5. It prepares students for business careers by merging analytical experience with self-
reliance.
1.3 BACKGROUND OF PLACE OF ATTACHMENT (NHUB FUNDATION JOS)
nHub Foundation is born from the deep desire to create an equal opportunity for
growth and development regardless of gender, ethnic, religious background, through several
impact-driven initiatives.
nHub Foundation stands as a beacon for technological innovation in northern Nigeria.
By fostering a supportive environment for startups and implementing impactful training and
empowerment programs, the organization is playing a pivotal role in shaping the technological
landscape of the region. Their commitment to inclusiveness, transparency, and sustainable
development positions nHub Foundation as a key player in the ongoing technological growth
within the northern Nigerian context.
2
1.3.1 Overview of nHub Initiative
nHub, spearheaded by founders Daser David and Hyginus Horson, is a pioneering
initiative aimed at empowering tech entrepreneurs within northern Nigeria, specifically
situated in Jos, Plateau state. The core objective is to offer robust support to startups and
catalyze technological innovation in the region.
1.3.2 Comparison with Traditional Tech Hubs
The decision to establish nHub in Jos instead of metropolitan hubs like Abuja and
Lagos is rooted in the founders' recognition of a less-than-ideal development environment and
the high cost of living in those cities. Despite the security challenges posed by insurgency in
Jos, the founders perceive a unique opportunity for growth and innovation.
1.4 ACHIEVEMENTS AND RECOGNITION
1.4.1 Hackathon Success
nHub gained noteworthy recognition through a highly successful hackathon in March
2015. The event witnessed the participation of thirty coders organized into nine teams from
Jos, Abuja, and Bauchi. The projects showcased spanned various platforms, including web,
desktop, hardware, and mobile applications.
1.4.2 Training Programs and Partnerships
Since its establishment in September 2015, nHub has achieved success in its training
programs, with over 20 interns progressing towards retention. Notably, the founders, who are
alumni of the University of Jos, are actively engaged in establishing a tech training partnership
with their alma mater.
3
1.5 COLLABORATION WITH GOVERNMENT
1.5.1 ICT for Change Empowerment Programme
nHub actively participates in the ICT for Change Empowerment Programme, a
collaborative initiative between the Federal Government and Huawei Technologies. The
overarching focus is on developing and empowering individuals within existing ICT hubs
across the nation.
1.5.2 Government Support
Recognizing the pivotal role government support plays in fostering growth, the
founders are actively seeking increased support to further enhance their initiatives and
contribute significantly to the overall expansion of the tech ecosystem in northern Nigeria.
1.6 IMPACT-DRIVEN INITIATIVES
1.6.1 nHub Foundation Programs
As a non-governmental and not-for-profit organization, nHub Foundation is committed
to creating equal opportunities for growth and development. Their diverse programs include:
 Internship
 Place_her (for women)
 UpSkills (Private)
 #Kidz (for children)
 Rural Strengthening, Emerge! (for rural communities)
1.6.2 Vision, Principles, and Goals
The overarching vision of nHub Foundation is to emerge as the leading aggregator of
sustainable ecosystems in Africa. With an ambitious goal of empowering a minimum of 5,000
4
youths within the next three years, the organization is steadfastly guided by key principles,
including inclusiveness, transparency, and a commitment to sustainable development.
1.7 SCOPE OF THE REPORT
This report covers the various training I was involved directly as a frontend developer
at the course of my training in the Foundation which includes: Hypertext Transmission
Protocol (HTML), Cascading Style Sheet (CSS), Tailwind CSS, JavaScript (JS), Version
Controland React JS respectively. It is also intended to cover challenges encountered and the
possible suggestions and solutions I took to address these problems.
5
CHAPTER TWO
WORKING EXPERIENCE
2.0 PRACTICAL PROFICIENCY IN WEB DEVELOPMENT TECHNOLOGIES
This section undertakes an exhaustive examination of the acquired skills during the
program, meticulously dissecting each component to offer an unparalleled understanding.
2.1 UNDERSTANDING WEB DEVELOPMENT
2.1.0 Definition of Some Useful Terms
1. Web Development
Web development is the process of building and maintaining websites or web
applications. It involves creating web pages using languages like HTML, CSS, and JavaScript,
along with frameworks and tools. Developers work on both the front-end (user interface) and
back-end (server-side) aspects of websites to ensure functionality, usability, and security.
Overall, web development enables the creation of online platforms for businesses, organizations,
and individuals to share information, provide services, and engage with users over the internet.
2. Website
A website is a set of related web pages 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).
3. Webpage
A webpage is a document, typically written in plain text interspersed with formatting
instructions of hypertext nark up language (HTML, XHTML). A webpage may incorporate
6
elements from other websites with suitable anchors.
2.1.1 HYPERTEXT MARKUP LANGUAGE (Hypertext Markup Language (HTML) is
the most widely used language to write Web Pages. A versatile language guiding web
browsers in structuring visited web pages. HTML's adaptability, allowing developers to tailor
complexity, became evident during my practical engagement.
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 consists of a series of elements, which you use to enclose, wrap, or mark up different
parts of content to make it appear or act in a certain way. The enclosing tags can make
content into a hyperlink to connect to another page, italicize words, and so on.
2.1.2 Anatomy of an Html Element
1. The opening tag: This consists of the name of the element (in this example, p for
paragraph), wrapped in opening and closing angle brackets.
2. The content: This is the content of the element. In this example, it is the paragraph
text.
3. The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name.
2.1.2 Nesting Elements
Elements can be placed within other elements. This is called nesting.
7
example: <p>Mycatis <strong>very</strong> grumpy.</p>
2.1.3 Void Elements
Not all elements follow the pattern of an opening tag, content, and a closing tag.
Some elements consist of a single tag, which is typically used to insert/embed something in
the document. Such elements are called void elements. Example:
<imgsrc=https://raw.githubusercontent.com/mdn/beginner-html-site/gh-
pages/images/firefox-icon.pngalt="Firefox icon" />
2.1.4 Boolean Attributes
Attributes written without values (for example) are Boolean attribute. Boolean
attributes can only have one value, which is generally the same as the attribute name.
Example: <input type="text" disable<input type="text" disabled />
2.1.5 Entity References: Including Special Characters in Html
In HTML, the characters <, >,",', and & are special characters. They are parts of the
HTML syntax itself. Special characters are achieved with the use of character references.
These are special codes that represent characters, to be used in these exact circumstances.
Each character reference starts with an ampersand (&), and ends with a semicolon (;).
The table below illustrates the special characters
Literal Character Character reference equivalent
< &lt
> &gt
“ &quot
` &apos
& &amp
8
2.1.6 HTML Comments
HTML has a mechanism to write comments in the code. Browsers ignore comments,
effectively making comments invisible to the user. The purpose of comments is to allow you
to include notes in the code to explain your logic or coding.
To write an HTML comment, wrap it in the special markers . For example:
<p>I'm not inside a comment</p>

2.1.7 Metadata in Html
The head of an HTML document is the part that is not displayed in the web browser
when the page is loaded. It contains information such as the page <title>, links to CSS (if you
choose to style your HTML content with CSS), links to custom favicons, and other metadata
(data about the HTML, such as the author, and important keywords that describe the
document). Web browsers use information contained in the head to render the HTML
document correctly.
2.1.8 Head Content
1. `<head>` Element:
Container for metadata.
2. `<title>` Element:
Sets the document title (displayed in the browser tab or title bar).
3. `<meta>` Element:
Provides information about the document (e.g., character set, viewport settings).
4. `<link>` Element:
9
Links external resources like stylesheets or icons to the HTML document.
5. `<style>` Element:
Contains internal style information for the document.
6. `<script>` Element:Contains or links to JavaScript code for interactivity.
These elements collectively shape how the browser interprets and displays the content
of an HTML document.
2.1.9 What is a hyperlink?
Hyperlinks allow us to link documents to other documents or resources, link to
specific parts of documents, or make apps available at a web address.
2.1.10 Basic link
A basic link is created by wrapping the text or other content inside an <a> element and
using the href attribute, also known as a Hypertext Reference, or target, that contains the web
address. Example:
<p>
I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
2.1.11 Image links
To use image as a link, use the <a> element to wrap the image file referenced with the
<img> element. The example below uses a relative path to reference a locally stored SVG
image file.example
<a href="https://developer.mozilla.org/en-US/">
<imgsrc="mdn_logo.svg" alt="MDN Web Docs" />
10
</a>
2.1.12 Website Structure
HTML also boasts a number of block level elements used to define areas of your
website (such as "the header", "the navigation menu", "the main content column").
1. header: Usually a big strip across the top with a big heading, logo, and perhaps a
tagline. This usually stays the same from one webpage to another.
2. navigationbar: Links to the site's main sections; usually represented by menu buttons,
links, or tabs. Like the header, this content usually remains consistent from one
webpage to another
3. main content: A big area in the center that contains most of the unique content of a
given webpage.
4. sidebar: Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to
what is contained in the main content (for example on a news article page, the sidebar
might contain the author's bio, or links to related articles)
5. footer: A strip across the bottom of the page that generally contains fine print,
copyright notices, or contact info. It's a place to put common information (like the
header) but usually, that information is not critical or secondary to the website itself.
11
2.2 DEBUGGING HTML
Debugging HTML involves identifying and resolving errors or issues in HTML code
to ensure proper rendering and functionality of web pages.
2.3 TYPES OF ERROR
1. Syntax errors: These are spelling or punctuation errors in your code that actually cause
the program not to run, like the Rust error.
2. Logic errors: These are errors where the syntax is actually correct, but the code is not
what you intended it to be, meaning that the program runs incorrectly. These are often
harder to fix than syntax errors.
2.4 WAYS OF IDENTIFYING ERRORS
1. Use Developer Tools: Most modern web browsers provide built-in developer tools that
allow you to inspect HTML elements, view CSS styles, debug JavaScript, and more.
2. HTML Validation: The best strategy is to start by running your HTML page through
the Markup Validation Service — created and maintained by the W3C, the
organization that looks after the specifications that define HTML, CSS, and other web
technologies.
2.6 IMAGES IN HTML
The <img> element, used to embed a simple image in a webpage. Enabling images in
HTML involves incorporating the `<img>` (image) element to display visual content on a web
page. Here's a breakdown of the process:
1. `<img>` Element:The `<img>` element is used to embed images in HTML documents.
It is a self-closing tag and does not have a closing tag.
12
2. `src` Attribute:The `src` (source) attribute is mandatory and specifies the path or URL
to the image file.
It can be a local file path or a URL to an external image.
Example:<imgsrc="example.jpg" alt="Description of the image">
3. àlt` Attribute: The àlt` (alternative) attribute provides alternative text for the image.
It is crucial for accessibility, as screen readers use it to describe the image to users who
may not be able to see it.
Example:<imgsrc="example.jpg" alt="A beautiful landscape">
2.7 RELATIVE VS. ABSOLUTE PATHS:
When specifying the image source (`src`), you can use a relative path if the image is in
the same directory as your HTML file, or an absolute path if the image is located elsewhere.
Example (Relative Path):<imgsrc="images/example.jpg" alt="Description">
Example (Absolute Path):<imgsrc="https://www.example.com/images/example.jpg"
alt="Description">
2.8 WIDTH AND HEIGHT ATTRIBUTES:
You can use the `width` and `height` attributes to specify the dimensions of the image,
ensuring proper layout.
Example:<imgsrc="example.jpg" alt="Description" width="300" height="200">
13
2.9 VIDEO AND AUDIO CONTENT
Video and audio content play a crucial role in enhancing user engagement and
providing a dynamic user experience on the web. Here are key aspects to consider:
1. HTML5 Multimedia Elements: HTML5 introduced native `<video>` and `<audio>`
elements, allowing seamless integration of multimedia content without relying on
third-party plugins like Flash.
Example of video element:
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2. Media Formats: Different browsers support different media formats. To ensure broad
compatibility, include multiple sources with different formats using the `<source>`
element within the `<video>` or `<audio>` element. Example
3. Accessibility: Provide alternative text and captions for videos to ensure accessibility
for users with disabilities. This improves comprehension for those who are hearing
impaired or unable to view the content.
4. Responsive Design: Implement responsive design techniques to ensure that video and
audio content adapts to various screen sizes and devices. This enhances the user
experience on both desktop and mobile devices.
5. Streaming Services: Streaming services and content delivery networks (CDNs) are
commonly used for hosting and delivering high-quality video and audio content. This
ensures fast loading times and minimizes buffering.
14
6. Embedding: Embedding multimedia content from platforms like YouTube or Vimeo is
a common practice. This simplifies content management and leverages the features
offered by these platforms, such as analytics and playback controls.
Project Illustration:
Github Link: https://github.com/Khalid-R-Salis/Video-Work
2.10 RESPONSIVE IMAGES
Images that work well on devices with widely differing screen sizes, resolutions, and
other such features — and look at what tools HTML provides to help implement them. This
helps to improve performance across different devices.
Project Illustration: responsive images:
15
Page URL: https://replit.com/@khalidrabiusali/Assignment4
Page URL:https://replit.com/@khalidrabiusali/assigment3
16
2.11 HTML TABLE
HTML tables are used to organize and display data in a structured grid format. Tables
consist of rows (`<tr>`), which contain cells (`<td>`) or header cells (`<th>`). Here's a brief
overview:
1. Table Structure
Tables are defined within the `<table>` element.
Each row is created using the `<tr>` element.
Data cells (`<td>`) hold regular content, while header cells (`<th>`) are used
u for headers.
Example:
2. Table Headers: The `<th>` element is used to define header cells, typically placed in the
first row.
3. Table Cells:The `<td>` element is used for regular data cells.
Cells can contain various types of content, such as text, images, links, or even nested tables.
4. Spanning Rows or Columns:The `rowspan` and `colspan` attributes allow cells to span
multiple rows or columns, providing flexibility in table design.
<td rowspan="2">Span 2 Rows</td>
<td colspan="2">Span 2 Columns</

Columns</td>
17
5. Table Head, Body, and Footer
Footer:For
For improved structure and styling, tables can be divided
into sections using `<thead>`, `<tbody>`, and `<tfoot>` elements.
Project Illustration: Table
Site URL: https://810fd6dd-e183

e183-46aa-8de8-cf36f0804c02-00-z4fuq3fvtce7.janeway.repl.co/
z4fuq3fvtce7.janeway.repl.co/
18
2.12 CASCADING STYLE SHEET (CSS)
CSS (Cascading Style Sheets) allows you to create great-looking web pages. Using
CSS, you can control exactly how HTML elements look in the browser, presenting your
markup using whatever design you like.CSS is a language for specifying how documents are
presented to users — how they are styled, laid out, etc.
2.12.1 CSS Syntax
CSS is a rule-based language — you define the rules by specifying groups of styles
that should be applied to particular elements or groups of elements on your web page. For
example, you can decide to have the main heading on your page to be shown as large red text.
2.12.2 CSS Specifications
All web standards technologies (HTML, CSS, JavaScript, etc.) are defined in giant
documents called specifications (or "specs"), which are published by standards organizations
(such as the W3C, WHATWG, ECMA, or Khronos) and define precisely how those
technologies are supposed to behave.
CSS is no different — it is developed by a group within the W3C called the CSS
Working Group. This group is made of representatives of browser vendors and other
companies who have an interest in CSS.
19
2.12.3 Adding CSS to a Document
The very first thing we need to do is to tell the HTML document that we have some
CSS rules we want it to use. There are three different ways to apply CSS to an HTML
document:
1. Inline CSS: Inline CSS is applied directly within the HTML element using the `style`
attribute. Example:
2. Internal CSS: Internal CSS is placed within the `<style>` element in the head section
of the HTML document. Example:
20
3. External CSS: External CSS is stored in a separat
separatee .css file and linked to the HTML
document using the `<link>` element in the head section. Example:
HTML file (ìndex.html`):
2.12.4 Selectors
A selector targets HTML to apply styles to content. We have already discovered a
variety of selectors in the Getting started with CSS tutorial. If CSS is not applying to content
as expected, your selector may not match the way you think it should match.
Each CSS rule starts with a selector — or a list of selectors — in order to tell the
browser which element or elements the rules should apply to. All the examples below are
valid selectors or lists of selectors
h1
a:link
.manythings
21
#onething
.box p
.box p:first-child
h1, h2, .intro
2.12.5 Specificity
You may encounter scenarios where two selectors select the same HTML element.
Consider the stylesheet below, with a p selector that sets paragraph text to blue. However,
there is also a class that sets the ttext of selected elements to red.
2.12.6 Properties and Values
At basic level, CSS consists of two components:
 Properties: These are human

human-readable
readable identifiers that indicate which stylistic features
you want to modify. For example, font

font-size, width, background-color.
 Values: Each property is assigned a value. This value indicates how to style the
property.
22
The picture below highlights a single property and value. The property name is color and the
value is blue.
When a property is paired with a value, this pairing is called a CSS declaration. CSS
declarations are found within CSS Declaration Blocks. The picture above, highlighting
identifies the CSS declaration block.
Finally, CSS declaration blocks are paired with selectors to produce CSS rule sets (or
CSS rules). The picture above contains two rules: one for the h1 selector and one for the p
selector. The colored highlighting identifies the h1 rule.
23
2.12.7 Functions
While most values are relatively simple keywords or numeric values, there are some
values that take the form of a function.
1. The calc() function
An example would be the calc() function, which can do simple math within CSS:
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
CSS:
2. Transform functions
Another example would be the various values for transform, such as rotate().
HTML
<div class="box"></div>
CSS
24
3. @rules
CSS @rules (pronounced "at

"at-rules")
rules") provide instruction for what CSS should perform
or how it should behave. Some @rules are si

simple
mple with just a keyword and a value. For
example,
@import imports a stylesheet into another CSS stylesheet:
CSS
@import "styles2.css";
One common @rule that you are likely to encounter is @media, which is used to create media
queries. Media queries use co

conditional
nditional logic for applying CSS styling.
body {
background-color: pink;
CSS:
25
2.12.8 Shorthands
Some properties like font, background, padding, border, and margin are called
shorthand properties. This is because shorthand properties set several values in a single line.
For example, this one line of code:
padding: 10px 15px 15px 5px;
is equivalent to these four lines of code:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
2.12.9 Comments
As with any coding work, it is best practice to write comments along with CSS. This
helps you to remember how the code works as you come back later for fixes or enhancement.
It also helps others understand the code.
CSS Commit are enclose around the /* and */
Example:
/* This is a CSS comment */
body {
background-color: #f0f0f0; /* Background color */
26
2.12.10 How does CSS actually work?
When a browser displays a document, it must combine the document's content with its
style information. It processes the document in a number of stages, which we've listed below.
Bear in mind that this is a very simplified version of what happens when a browser loads a
webpage, and that different browsers will handle the process in different ways. But this is
roughly what happens.
The browser loads the HTML (e.g. receives it from the network).
It converts the HTML into a DOM (Document Object Model). The DOM represents
the document in the computer's memory. The DOM is explained in a bit more detail in the
next section.
The browser then fetches most of the resources that are linked to by the HTML
document, such as embedded images, videos, and even linked CSS! JavaScript is handled a bit
later on in the process, and we won't talk about it here to keep things simpler.
The browser parses the fetched CSS, and sorts the different rules by their selector
types into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it
finds, it works out which rules should be applied to which nodes in the DOM, and attaches
style to them as required (this intermediate step is called a render tree).
The render tree is laid out in the structure it should appear in after the rules have been
applied to it.The visual display of the page is shown on the screen (this stage is called
painting). The following diagram also offers a simple view of the process.
27
Page URL: https://replit.com/@khalidrabiusali/biography
https://replit.com/@khalidrabiusali/biography-page
2.13.1 CSS BUILDING BLOCKS
2.13.2 CSS Selector
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other
terms that tell the browser which HTML elements should be selected to have the CSS property
values inside the rule applied to them. The element or elements which are selected by the
selector are referred to as the subject of the selector.
In CSS, selectors are defined in the CSS Selectors specification; like any other part
of CSS they need to have support in browsers for them to work.
28
In the above, h1 is selected. All h1 in the html will have the CSS effect above.
2.13.3 SELECTOR LISTS
If you have more than one thing which uses the same CSS then the individual
selectors can be combined into a selector list so that the rule is applied to all of the individual
selectors. For example, if I have the same CSS for an h1 and also a class of .special,
.spec I could
write this as two separate rules.
2.13.4 Types of Selectors
There are a few different groupings of selectors, and knowing which type of selector
you might need will help you to find the right tool for the job.
1. Type, class, and ID selectors
 Type selectors target an HTML element such as an <h1>:
h1{
 Class selectors target an element that has a specific value for its class attribute:
29
.box{
 ID selectors target an element that has a specific value for its id attribute:
#unique{
2. Attribute selectors
This group of selectors gives you different ways to select elements based on the presence of a
certain attribute on an element:
a[title]{
Or even make a selection based on the presence of an attribute with a particular value:
a[href="https://example.com"]
3. Pseudo-classes and pseudo-elements
This group of selectors includes pseudo-classes, which style certain states of an element.
The:hover pseudo-class for example selects an element only when it is being hovered over by
the mouse pointer:
a:hover{
It also includes pseudo-elements, which select a certain part of an element rather than the
element itself. For example, ::first-line always selects the first line of text inside an element
(a <p> in the below case), acting as if a <span> was wrapped around the first formatted line
30
and then selected
.p::first-line{
2.13.5 COMBINATORS
The final group of selectors combine other selectors in order to target elements within
our documents. The following, for example, selects paragraphs that are direct children
of <article> elements using the child combinator (>):
article> p{
2.14 THE BOX MODEL
Everything in CSS has a box around it, and understanding these boxes is key to being
able to create more complex layouts with CSS, or to align items with other items.
1. Block and inline boxes
In CSS we have several types of boxes that generally fit into the categories of block
boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in
relation to other boxes on the page. Boxes have an inner display type and an outer display
type.
 Outer display type
If a box has an outer display type of block, then:
i. The box will break onto a new line.
ii. The width and height properties are respected.
31
iii. Padding, margin and border will cause other elements to be pushed away from the
box.
If a box has an outer display type of inline, then:
i. The box will not break onto a new line.
i. The width and height properties will not apply.
i. Top and bottom padding, margins, and borders will apply but will not cause other
inline boxes to move away from the box.
Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer
display type by default.
1. Inner display type
Boxes also have an inner display type, which dictates how elements inside that box are laid
out.
Block and inline layout is the default way things behave on the web. By default and without
any other instruction, the elements inside a box are also laid out in normal flow and behave as
block or inline boxes.
The picture below is a pictorial representation of the above:
32
2.14.1 Background and Border
Background properties allow you to set the background color or image of an element,
while border properties control the border around an element.
Example:
.example {
background-color: #f0f0f0;
border: 1px solid #ccc;
2.14.2 Handling different text directions:
CSS provides properties to handle text direction, especially useful for languages that
are written right-to-left.
Example:
.rtl-text {
direction: rtl;
2.14.3 Overflowing Content:
CSS properties control how content overflows its container, including options for
clipping, scrolling, or displaying overflowed content.
Example:
.overflow-container {
overflow: auto;
33
}
2.14.4 CSS Values and Units
CSS supports various values and units for specifying sizes, distances, colors, and other
properties.
Example:
2.14.5 Sizing items in CSS:
CSS provides properties to control the size of elements, including width, height, min-
width, max-width, min-height,

height, and max
max-height.
Example:
.example {
width: 300px;
height: 200px;
2.14.6 Styling tables with CSS:
CSS can be used to style the appearance of tables, including setting borders,
backgrounds, and spacing.
34
Example:
2.14.7 Organizing your CSS:
Proper organization of CSS code is essential for maintainability and scalability.
Techniques like using meaningful class names, grouping related styles, and modularizing CSS
can help in organizing CSS eff

effectively.
Project:
Page URL: https://replit.com/@khalidrabiusali/Card
2.14.8 Images, Media and Form Element:
a. Images
Images are elements used to display graphics or pictures on a webpage.
35
They are inserted using the `<img>` tag with the `src` attribute specifying the image file's
URL.
Example:
html
<imgsrc="image.jpg" alt="Description of the image">
b. Media:
Media elements include audio and video files that can be embedded in a webpage.
They are inserted using the `<audio>` and `<video>` tags with the `src` attribute specifying
the media file's URL.
Example (for video):
html
<video src="video.mp4" controls>
Your browser does not support the video tag.
</video>
2.14.9 Form Elements
Form elements are used to collect user input on a webpage, such as text input,
checkboxes, radio buttons, etc.
They are inserted using various form-related tags like `<form>`, `<input>`, `<textarea>`,
`<select>`, etc.
Example (for text input):
html
36
<div class = “box”></div>
2.15.1 CSS BASIC STYLING
a. CSS Styling Text
CSS allows you to style text in various ways including color, size, font, spacing, and more.
b. Fundamental Text and Font Styling
Fundamental text and font styling involve basic adjustments to text appearance such as
size, weight, style,

tyle, and alignment.
c. Styling Lists
CSS allows you to style the appearance of lists, including bullet points or numbering,
spacing, and indentation.
/* Example of styling lists */
37
ul {
list-style-type: square;
margin-left: 20px;
d. Styling Links
You can use CSS to style links to make them stand out or blend in with the rest of the
content, including changing colors, underlines, and hover effects.
/* Example of styling links */
e. Web Fonts
Web fonts allow you to use custom fonts in your web projects by linking to font files
hosted on the web or using services like Google Fonts.
/* Example of using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;

serif;
38
}
project:
a) page URL: https://replit.com/@khalidrabiusali/letter-headed#index.html
b) page URL: https://khalid-r-salis.github.io/Cool-Box/
Github: https://github.com/Khalid-R-Salis/Cool-Box
2.16 CSS LAYOUT
a. Normal Flow:
Default HTML layout behavior without CSS rules.
Elements stack vertically or horizontally according to source order.
Code Example:
39
b. Flexbox:
A layout model for aligning and distributing items in a container.
Allows for flexible layouts in rows or columns.
Code Example:
c. FlexBook Project:
GithubURL: https://github.com/Khalid
https://github.com/Khalid-R-Salis/flexBoox
Live Site: https://khalid-r-salis.github.io/flexBoox/

salis.github.io/flexBoox/
d. Grid:
40
Two-dimensional
dimensional layout system for arranging elements in rows and columns.
Offers precise control over element placement.
Code Example:
Example of Grid Project
Site URL: https://testimonials--grid-section-main-three-wheat.vercel.app/
Frontend Mentor URL: https://www.frontendmentor.io/solutions/testimonials-grid-section-

https://www.frontendmentor.io/solutions/testimonials
wx7AXbv77W
41
Github URL :https://github.com/Khalid
.com/Khalid-R-Salis/testimonials-grid-section-main
main
a. Floats:
Positions elements to the left or right, allowing text to wrap around them.
Historically used for layout but now less common due to modern techniques.
Code Example:
b. Positioning:
Adjusts the position of elements relative to their normal flow.
Properties like `position`, `top`, `left`, `right`, and `bottom` are used.
Code Example:
42
c. Multi-column Layout:
Divides content into multiple columns for improved readability.
Code Example:
CSS:
.container {
column-width: 200px;
2.17 RESPONSIVE DESIGN
Design approach ensuring optimal viewing experience across devices achieved
through fluid layouts, media queries, and flexible content.
2.17.1 MEDIA QUERIES
Media queries allow us to run a series of tests (e.g. whether the user's screen is greater
than a certain width, or a certain resolution) and apply CSS selectively to style the page
appropriately for the user's needs.
For example, the following media query tests to see if the current web page is being
displayed as screen media (therefore not a printed document) and the viewport is at least
80rem wide. The CSS for the .container selector will only be applied if these two things are
true.
@media screen and (min-width: 80rem) {
.container {
margin: 1em 2em;
43
}
2.17.2 CSS Framework
CSS frameworks are pre-written libraries that contain pre-designed and pre-coded CSS
components, styles, and utilities. They provide a foundation for designing and styling web
applications or websites by offering reusable and customizable components, grids,
typography, and other design elements.
1. Pre-written Style: CSS frameworks provide ready-to-use styles for common web
elements like buttons, forms, typography, and navigation bars, saving developers time
and effort.
2. Responsive Grid Systems: Many CSS frameworks include responsive grid systems
that help create responsive layouts that adapt to different screen sizes and devices.
3. Consistency and Efficiency: By using a CSS framework, developers can ensure
consistency in design across the entire application or website and maintain a cohesive
look and feel.
4. Customization: CSS frameworks often allow for customization, enabling developers to
modify and extend styles to fit the specific design requirements of their project.
44
2.18 Some CSS Frameworks
Below are the majorly used CSS frameworks:
1. Tailwind CSS
2. Bootstrap
3. Foundation
4. Bulma
5. Semantic UI
6. Materialize CSS
2.18.1 Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows you to build modern,
responsive web designs by applying utility classes directly to HTML elements. It provides a
set of pre-designed utility classes for common CSS properties, enabling rapid development
without writing custom CSS.
45
Installation
Tailwind CSS need to be installed before use.
Guidelines for the installation:
You can install Tailwind CSS via npm or yarn. Here's how to do it via npm:
Using Bash, the below command need to be run
npm install tailwindcss
After installation, you typically need to create a configuration file (`tailwind.config.js`) where
you can customize Tailwind's settings.
2.18.2 Core Concepts:
Utility-First Fundamental:
Tailwind CSS promotes a utility-first approach, where you apply small, single-purpose
utility classes directly in your HTML markup to style elements.
State Variants:
46
Tailwind provides utility classes for various states like hover, focus, active, and more,
allowing you to easily define styles for interactive elements.
Responsive Design:
Tailwind CSS includes responsive utility classes that enable you to create designs that adapt to
different screen sizes and devices.
To make a design responsive using Tailwind CSS, you can use its built-in responsive utility
classes. These classes allow you to apply different styles based on the screen size.
1. Using Responsive Prefixes:
Tailwind CSS provides responsive prefixes that you can add to any utility class to
specify different styles for different screen sizes.
`sm:`: Small screens (≥ 640px)
`md:`: Medium screens (≥ 768px)
`lg:`: Large screens (≥ 1024px)
`xl:`: Extra-large screens (≥ 1280px)
`2xl:`: Extra-extra-large screens (≥ 1536px)
Example:
<div class="custom-box bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500">
In the above example:
- The `bg-blue-500` class sets the background color to blue for all screen sizes by default.
- The `sm:bg-green-500` class changes the background color to green for small screens (≥
640px).
- The `md:bg-yellow-500` class changes the background color to yellow for medium screens
(≥ 768px).
47
- The `lg:bg-red-500`
500` class changes the backgroun
backgroundd color to red for large screens (≥
( 1024px).
Reusing Styles:
Tailwind encourages the reuse of utility classes, promoting consistency and efficiency in
styling across your project.
Customization:
Configuration:
Tailwind CSS allows extensive customization th

through its configuration file
(`tailwind.config.js`), where you can modify default settings, add custom utilities, or extend
existing ones. example
// tailwind.config.js
a. Content:
You can customize content-related

related utilities such as font sizes, line heights
heights,, and spacing scales
to match your project's design requirements. example:

<div class="font-serif text-xl

xl leading
leading-loose tracking-wide">Loremipsum
wide">Loremipsum dolor sit amet</div>
Theme:
48
Tailwind's theme configuration lets you define custom colors, fonts, breakpoints, and more,
ensuring your design system aligns with your brand identity. Example:
b. Screens:
Tailwind enables you to specify custom breakpoints for responsive design using Tailwind's
`screens` configuration, allowing you to target specific device sizes. Example:
c. Colors:
Tailwind provides a comprehensive color palette that you can customize to match
ma your brand
colors or design preferences. Example:
49
2.18.3 Base Styles
a. Layout:
Tailwind offers utility classes for creating layouts using flexbox and grid, making it
easy to create responsive and flexible designs.
b. Spacing:
Tailwind's spacing utilities provide a consistent spacing scale for margin and padding,
enabling precise control over element spacing. Example:

<div class="m-4 p-4 bg-gray-300">Margin

300">Margin and Padding</div>
c. Sizing:
You can
an use Tailwind's sizing utilities to set width, height, and other dimensions of
elements with predefined classes. Example:

50
<div class="w-32 h-32 bg-gray
gray-400"></div>
d. Typography:
Tailwind includes utilities for typograp

typography,
hy, such as font sizes, font weights, line
heights, and text alignment.

<div class="font-bold text-xl

xl text
text-center text-blue-700">Typography</div>
2.18.3 Backgrounds, Borders, Effects, Transforms
Tailwind provides utili

utilities
ties for styling backgrounds, borders, box shadows, and CSS
transforms, allowing you to add visual effects to elements. Code example:
In the above example:
o We use Tailwind CSS utility classes to style elements with backgrounds, borders,
effects, and transforms.

sforms.
51
o Backgrounds: We set different background colors (`bg-blue-200` and `bg-green-200`)
and add padding, rounded corners (`rounded-lg`), and shadows (`shadow-md` and
`shadow-lg`) to create visually appealing divs.
o Borders: We apply a gray border (`border-2` and `border-gray-500`) with rounded
corners to another div.
o Effects: We use hover effects to change the shadow (`hover:shadow-xl`) when
hovering over a div.
o Transforms: We add a scale transformation (`hover:scale-110`) to a div when hovering
over it, making it slightly larger. We also apply a transition effect (`transition duration-
300`) for a smooth animation.
52
Tailwind Project:
53
GitHub URL:https://github.com/Khalid-R-Salis/ModernFarm
LiveSite URL: egona.onrender.com
Project BMC
54
2.19 VERSION CONTROL
Version control is a system that records changes to a file or set of files over time so
that you can recall specific versions later. It allows multiple people to work on a project
simultaneously, tracks changes, and helps manage conflicts. Git is one of the most popular
distributed version control systems, while GitHub is a web-based platform that hosts Git
repositories and facilitates collaboration among developers.
2.20 COLLABORATION: GIT AND GITHUB
1. Git: Git is a distributed version control system that allows users to track changes in
source code during software development. It provides features like branching, merging, and
distributed workflows, making it efficient for both individual developers and large teams.
2. GitHub: GitHub is a web-based platform built around Git. It offers hosting for Git
repositories, collaboration features such as issue tracking and pull requests, and social
networking functionalities for developers.
2.21 BASIC GIT COMMAND
Basic Git commands are used to perform common version control operations such as
initializing a repository, staging changes, committing changes, branching, merging, and
interacting with remote repositories. commonly used basic Git commands:
1. gitinit: Initializes a new Git repository in the current directory.
2. git clone <repository-url>: Clones a remote repository from the specified URL to your
local machine.
55
3. git add <file>: Adds a file or changes in a file to the staging area, preparing them to be
committed.
4. git commit -m "commit message": Commits the staged changes to the repository with
a descriptive commit message.
5. git status: Displays the current state of the repository, including modified files, staged
files, and untracked files.
6. git branch: Lists all branches in the repository. Adding a branch name creates a new
branch.
7. git checkout <branch-name>: Switches to the specified branch.
8. git merge <branch-name>: Merges changes from the specified branch into the current
branch.
9. git pull: Fetches changes from a remote repository and merges them into the current
branch.
10. git push: Pushes local commits to a remote repository.
12. git remote add origin <repository-url>: Adds a remote repository as a new remote
named "origin".
Example to demonstrate the git command
1. Initialize a Git Repository:
Bash or terminal
# Create a new directory
mkdirmyproject // create a directory or folder called “myproject”
cdmyproject // change directory to myproject
# Initialize Git repository
56
gitinit //command
2. Create a File and Add Content:
Bash or terminal
# Create a new file
touch README.md
# Add content to the file
echo "My Project" >> README.md
3. Stage and Commit Changes:
Bash or terminal
# Stage the changes
git add README.md
# Commit the changes
git commit -m "Initial commit"
4. Push to GitHub:
o Create a repository on GitHub.
o Add GitHub repository as a remote.
Bash or terminal
# AddGitHub repository as remote
git remote add origin <repository-url>
o Push the commits to GitHub.
Bash or terminal
git push -u origin master
Benefits of version control
57
1. Collaboration: Multiple developers can work on the same project concurrently,
tracking changes and resolving conflicts.
2. History Tracking: Git maintains a complete history of changes, making it easy to
revert to previous versions if needed.
3. Branching and Merging: Git enables parallel development through branching and
merging, allowing developers to work on features independently.
2.23 STEPS TO HOST WEBSITE ON GITHUB
step1: create a github repository
Step2. Go to Repository Settings:
Open your GitHub repository page in a web browser.
Click on the "Settings" tab located at the top right corner of the repository page.
Step3. Scroll Down to GitHub Pages Section:
o In the settings page, scroll down until you find the "GitHub Pages" section.
Step4. Select Source Branch:
o Under the "Source" section within GitHub Pages, you will see a dropdown menu.
o Select the branch you want to use as the source for GitHub Pages. This is typically the
`main` or `master` branch where your website files are located.
o If your website is in a different branch, select that branch instead.
Step5. Save Changes:
o After selecting the source branch, click on the "Save" button.
o GitHub Pages will automatically save your changes and start building your site from
the selected branch.
58
Step6. Access Your Website:
o Your website should now be accessible at `https://<username>.github.io`, where
`<username>` is your GitHub username.
You can also find the URL under the "GitHub Pages" section in the repository settings.
example of github hosted page URL: https://khalid-r-salis.github.io/yumsuk/
2.25 INTRODUCTION TO UI/UX
1. UI (User Interface) refers to the visual elements of a product or system with which a
user interacts. It includes buttons, icons, typography, colors, and other visual elements
that make up the interface.
2. UX (User Experience) encompasses the overall experience a user has while interacting
with a product or system. It includes factors such as usability, accessibility, ease of
use, and emotional response. UX design aims to create meaningful and enjoyable
experiences for users by understanding their needs, behaviors, and preferences.
2.26 FIGMA DESIGNS
Figma is a web-based collaborative design tool used for creating user interfaces,
prototypes, and designs. It allows designers to work collaboratively in real-time, making it
easy to share designs, gather feedback, and iterate quickly.
o Key Features of Figma
1. Real-Time Collaboration: Multiple users can work on the same design simultaneously,
making collaboration seamless and efficient.
2. Cloud-Based: Figma is a cloud-based tool, which means designs are stored online and can
be accessed from anywhere with an internet connection.
59
3. Prototyping: Figma allows designers to create interactive prototypes with transitions and
animations, helping to visualize and test the user flow.
4. Component Libraries: Figma supports the creation of reusable components and design
systems, enabling consistency across designs and easy updates.
o Basic Workflow in Figma:
1. Create a New File: Start by creating a new Figma file for your design project.
2. Design Elements: Use Figma's tools to create design elements such as frames, shapes,
text, and images. Arrange these elements to create the desired layout for your design.
3. Components and Styles: Create reusable components for elements that appear
frequently across your designs, such as buttons, navigation bars, or cards. Apply styles
to maintain consistency and make updates easier.
4. Collaboration: Share your Figma file with team members or stakeholders to gather
feedback, make revisions, and collaborate in real-time.
2.26 JAVASCRIPT (JS)
JavaScript is a scripting or programming language that allows you to implement
complex features on web pages — every time a web page does more than just sit there and
display static information for you to look at — displaying timely content updates, interactive
maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript
is probably involved. It is the third layer of the layer cake of standard web technologies, two
of which (HTML and CSS) discussed above.
60
1. HTML is the markup language that we use to structure and give meaning to our web
content, for example defining paragraphs, headings, and data tables, or embedding images and
videos in the page.
2. CSS is a language of style rules that we use to apply st

styling
yling to our HTML content, for
example setting background colors and fonts, and laying out our content in multiple columns.
3. JavaScript is a scripting language that enables you to create dynamically updating content,
control multimedia, animate images, aand

nd pretty much everything else. (Okay, not everything,
but it is amazing what you can achieve with a few lines of JavaScript code.)
61
2.26.1
.1 JAVASCRIPT RUNNING ORDER
When the browser encounters a block of JavaScript, it generally runs it in order, from
top
op to bottom. For example, the below code run in hierarchy, from the top to bottom:
2.26.2
.2 Interpreted Versus Compiled Code
 In interpreted languages, the code is run from top to bottom and the result of running
the code is immediately returned. You don't have to transform the code into a different
form before the browser runs it. The code is received in its programmer-friendly
programmer text
form and processed directly from that.
 Compiled languages on the other hand are transformed (compiled) into another form
before they are run by the computer. For example, C/C++ are compiled into machine
code that is then run by the computer. The program is executed from a binary format,
which was generated from the original program source code.
JavaScript is a lightweight interpreted

nterpreted programming language. The web browser receives the
JavaScript code in its original text form and runs the script from that.
2.26.3 ADDING JAVASCRIPT TO YOUR PAGE
JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses
<link> elements to apply external stylesheets and <style> elements to There are several ways
to add JavaScript to a web page:
62
1. Inline Scripting:
Writing JavaScript directly within HTML using the `<script>` tag.
Example:
<script>
alert("Hello, world!");
</script>
2. External Script File
Linking an external JavaScript file using the `<script>` tag's `src` attribute.
Example:
<script src="script.js"></script>
3. Event Attributes:
Attaching JavaScript code directly to HTML elements using event attributes like ònclick`,
ònmouseover`, etc.
Example:
<button onclick="alert('Button clicked!')">Click me</button>
4. DOM Manipulation:
Dynamically adding JavaScript to the page by modifying the Document Object Model
(DOM).
Example:
63
2.26.4 ASYNCHRONOUS LOADING:
Loading JavaScript asynchronously to avoid blocking page rendering.
Example:
html
<script asyncsrc="script.js"></script>
5. Deferred Loading:
Loading JavaScript after the HTML content has been fully loaded.
Example:
html
<script defersrc="script.js"></script>
JavaScript Project:
URL: https://github.com/Khalid-R-Salis/KHALID-RABIU-SALIS
Live Site: khalid-rabiu-salis.vercel.app
2.26.5 DATA TYPES (PRIMITIVES)
Primitive data types are the most basic building blocks of data in JavaScript. They are
immutable and have no methods of their own.
Common primitive data types in JavaScript:
64
1. Numbers:
o Represent numeric values (whole numbers, decimals, etc.).
o Example:
JavaScript
let age = 30;
let pi = 3.14159;
2. Strings:
o Represent sequences of characters (text).
o Example:
JavaScript
let name = "Alice";
let greeting = "Hello, world!";
3. Booleans:
o Represent logical values (true or false).
o Example:
JavaScript
letisAdult = true;
letisAvailable = false;
4. Null:
o Represents a deliberate absence of any object value.
o Example:
JavaScript
letemptyVariable = null;
65
5. Undefined:
o Represents the value of a variable that has been declared but not assigned a value.
o Example:
JavaScript
letunassignedVariable; // Value is undefined
6. Symbols:
o Unique and immutable identifiers often used for private properties and preventing naming
collisions.
o Example:
JavaScript
letmySymbol = Symbol("uniqueSymbol");
2.27 KEY CHARACTERISTICS OF PRIMITIVE DATA TYPES
 Immutable: Their values cannot be changed after creation.
 Passed by value: When assigned to a different variable, a copy of the value is created.
 Stored directly in memory: No additional overhead for storing properties or methods.
Common use cases:
 Numbers: Mathematical calculations, storing quantities, representing numerical data.
 Strings: Representing text, user input, storing names, addresses, etc.
 Booleans: Decision-making in code, representing logical states, conditions, flags.
 Null: Indicating intentional absence of a value, resetting variables, representing optional
values.
 Undefined: Checking if a variable has been assigned a value, handling missing data.
66
 Symbols: Creating unique identifiers, defining private properties in objects.
2.28 VARIABLE
ABLE DECLARATION AND ASSIGNMENT IN JAVASCRIPT
A variable is a container for a value, like a number we might use in a sum, or a string
that we might use as part of a sentence.
Example
Fig: Demo of variable
2.28.1 Declaring a Variable
To use a variable, you've first got to create it — more accurately, we call this declaring the
variable. To do this, we type the keyword let followed by the name you want to call your
67
variable:
letmyName;
letmyAge;
Here two variables are created called myName and myAge.
2.28.2 Initializing a Variable
Once you've declared a variable, you can initialize it with a value. You do this by
typing the variable name, followed by an equals sign (=), followed by the value you want to
give it. For example:
myName = "Chris";
myAge = 37;
You can return your variable values by typing their name into the console
myName;
myAge;
You can declare and initialize a variable at the same time, like this:
Let myDog = "Rover";
2.28.3 Updating a Variable
Once a variable has been initialized with a value, you can change (or update) that
value by giving it a different value.
myName = "Bob"; //reinitialized
68
2.28.4 Constants in Java Script
As well as variables, you can declare constants. These are like variables, except that:
o you must initialize them when you declare them
o you can't assign them a new value after you've initialized them.
For example, using let you can declare a variable without initializing it:
let count;
If you try to do this using const you will see an error:
2.28.5 Scoping
Variable Scope
 Var
Scope: Function or global. Accessible throughout the function or globally.
Redeclaration: Allowed within the same scope.
Reassignment: Allowed.
 let (preferred):
Scope: Block: Accessible only within the curly braces (`{}`) where it's declared.
Redeclaration: Not allowed within the same block.
Reassignment: Allowed..
2.28.6 Scope: Block
Redeclaration: Not allowed within the same block.
Reassignment: Not allowed. Must be assigned a value at declaration.
69
2.28.7 Arithmetic Operator
Arithmetic operators are used for performing mathematical calculations in JavaScript:
These operators allow developers to manipulate numbers in various ways within their
JavaScript programs:
70
1. Addition (+): The addition operator is used to add two numbers together or concatenate
strings.
Example:
let sum = 5 + 3; // sum will be 8
let concatenatedString = "Hello" + " " + "world"; // concatenatedString will be "Hello world"
2. Subtraction (-): The subtraction operator subtracts the second operand from the first
operand.
Example:
let difference = 10 - 4; // difference will be 6
3. Multiplication (*): The multiplication operator multiplies two numbers.
Example:
let product = 3 * 4; // product will be 12
4. Division (/): The division operator divides the first operand by the second operand.
Example:
let quotient = 20 / 5; // quotient will be 4
5. Modulus (%): The modulus operator returns the remainder of a division operation.
let remainder = 10 % 3; // remainder will be 1 (since 10 divided by 3 leaves a remainder of 1)
6. Increment (++): The increment operator increases a numeric value by 1.
Example:
letnum = 5;
num++; // num will be 6
7. Decrement (--): The decrement operator decreases a numeric value by 1.
Example:
71
letnum = 5;
num--; // num will be 41.
 Assignment operators
Assignment operators are operators that assign a value to a variable. We have already used
the most basic one, =, loads of times — it assigns the variable on the left the value stated on
the right:
let y = 4; // y contains the value 4
let x = 3; // x contains the value 3
72
Comparison operators: these operators are used to compare two or more values:
 Control Statements: Control statements in JavaScript are essential for directing the flow of a
program based on certain conditions or iterating over data structures.
 Conditionals:
1. if statement: The most basic conditional statement in JavaScript. It executes a block of code
if a specified condition is true.
Example:
if (condition) {
// code to be executed if condition is true
2. if else statement: Extends the ìf` statement to execute a different block of code if the
condition is false.
73
3. else if statement: Allows
llows for multiple conditions to be checked in sequence.
Example:
4. switch statement:: Provides a way to execute different code blocks based on different cases.
Example:
 Loops:
1. for loop:: Executes a block of code a specified number of times.
Example:
for (initialization; condition; increment/decrement) {
// code to be executed
74
}
2. while loop: Executes a block of code as long as a specified condition is true.
Example:
while (condition) {
3. do-while loop: Similar to the `while` loop, but the code block is executed at least once
before the condition is tested.
Example:
do {
} while (condition);
2.28.8 Data Types (Object Types: Object, Array, Functions)
In JavaScript, data types play a crucial role in defining the nature of the variables and
values used within a program. Among the various data types, object types including objects,
arrays, and functions are fundamental components that enable developers to organize and
manipulate data effectively.
1. Objects:
Objects in JavaScript are complex data types that allow developers to store collections of key-
value pairs.
They are created using curly braces `{}` and can contain properties and methods.
75
Properties can be accessed using dot notation (òbject.property`) or bracket notation
(òbject['property']`).
Objects are versatile and can represent a wide range of entities, such as users, products, or any
other custom data structure.
Example:
2. Arrays:
Arrays are ordered

red collections of values, often used to store lists of items.
They are created using square brackets `[]` and can hold any combination of data types,
including objects, strings, numbers, and other arrays.
Arrays provide various methods like `push()`, `pop

`pop()`,
()`, `splice()`, etc., for manipulating
mani the
data they contain.
Example:
3. Functions:
76
Functions are first-class
class citizens in JavaScript, meaning they can be assigned to variables,
passed as arguments, and returned from other functions.
They are objects that

at encapsulate a block of code that can be executed one or more times.
Functions can be declared using function declarations, function expressions, arrow functions,
or as methods within objects.
Example:
2.28.9 Function (Function Declaration, Function Expression, IIFE,, Anonymous
Functions)
Function Declaration: This is a way to define a named function in JavaScript using the
`function` keyword followed by the function name and parentheses for parameters, and then
the
curly braces for the function body. For example:
Example:
function add(a, b) {
return a + b;
77
Function Expression: In JavaScript, functions can also be defined without a name. These are
called function expressions. They can be anonymous or named. Here's an example of an
anonymous function expression:
Example:
let multiply = function(a, b) {
return a * b;
};
IIFE (Immediately Invoked Function Expression): An IIFE is a JavaScript function that runs
as soon as it is defined. It is wrapped within parentheses and immediately invoked with an
additional set of parentheses. This is commonly used to create a separate scope and avoid
polluting the global namespace. For example:
Example:
(function() {
// IIFE code here
})();
Anonymous Functions: These are functions without a name. They can be function expressions
or passed as arguments to other functions. They are often used in event handlers or callback
functions. For example:
Example:
setTimeout(function() {
console.log('This is an anonymous function.');
}, 1000);
78
2.29.10 Closure
In JavaScript, a closure is created when an inner function has access to the variables of
its outer function, even after the outer function has finished executing. This is possible
because the inner function

ction maintains a reference to its outer function's scope chain.
Closures are often used to create private variables and encapsulation in JavaScript.
They allow for data hiding and the creation of modules.
Example:
2.29.11 Hoisting:
Hoisting is a JavaScript mechanism where variables and function declarations are
moved to the top of their containing scope during the compilation phase. This means that
regardless of where variables and functions are declared, they are moved to the top of their
scope.
However, only the declarations are hoisted, not the initializations. Variables declared
with `var` are hoisted and initialized with ùndefined`, while `let` and `const` declarations are
hoisted but not initialized (they remain uninitialized until their act
actual
ual declaration is reached in
the code).
Function declarations are hoisted entirely, so they can be called before they are
defined.
79
Example
console.log(x); // Output: undefined
var x = 5;
The variable `x` is hoisted to the top, so even though it'

it'ss declared after the `console.log()`
statement, it is still accessible. However, its value at that point is ùndefined`.
2.29.12 Higher-Order
Order Array Method:
Higher-order
order array methods are a powerful feature of JavaScript that allow developers
to write cleaner,
ner, more concise, and more functional code when working with arrays.
Below are some common higher

higher-order array methods in JavaScript:
1. map: The `map` method applies a function to each element of an array and returns a new
array with the results.
Example:
2. filter: The `filter` method creates a new array with all elements that pass the test
implemented by the provided function. It's handy for selecting elements based on certain
criteria.
Example:
80
3. Reduce: The `reduce` method applies a function ag
against
ainst an accumulator and each element
in the array (from left to right) to reduce it to a single value. It's useful for aggregating data or
performing calculations.
Example:
4. forEach: The `forEach` method executes a provided function once for each array
arra element.
It's commonly used for performing side effects for each element in the array.
Example:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num)); // Output: 1 2 3 4 5
2.29.13 NPM AND NPX
NPM: npm (Node Package Manager) is a package manager for JavaScript. It is used to install,
manage, and share packages or libraries of JavaScript code.
81
NPX: npx is a tool that comes with NPM. It is used to execute packages from the NPM
registry without the need to install them globally. It's particularly useful for running
command-line tools or executables provided by packages.
Simple JS project
result
Github URL: https://github.com/Khalid-R-Salis/CalApp
Code:
82
Game Project
83
Result:
Code:
GitHub Repository URL: https://github.com/Khalid

https://github.com/Khalid-R-Salis/BlackJack
84
NOTE: The above projects are to demonstrate pure JS with less HTML AND CSS. In most of
the project below this point, JAVASCRIPT is also used
2.30 JAVASCRIPT LIBRARY
JavaScript libraries are collections of pre-written JavaScript code that provide
commonly used functions and utilities, making it easier for developers to build web
applications. These libraries often focus on specific tasks or functionalities, such as DOM
manipulation, animation, data visualization, and more.
Example of JavaScript libraries:
1. React
2. jQuery
3. Vue.js
4. AngularJS/Angular
5. D3.js
6. Lodash
7. Moment.js
85
8. Bootstrap (with JavaScript components) etc.
2.30.1 Some Advantages of JS Library
1. Faster Development
2. Cross-browser Compatibility:
3. Abstraction of Complexity:
4. Community Support and Resources:
5. Enhanced Functionality:
2.31 BASIC UNDERSTANDING OF REACT JS
React is a JavaScript-based UI development library. Although React is a library rather
than a language, it is widely used in web development. The library first appeared in May 2013
and is now one of the most commonly used frontend libraries for web development.
2.31.1 REACT INSTALLATION STEPS
To set react using VITE, the following command needs to be run on terminal
command 1: npm create viteReact_App_Name --template react
command 2: npm install
command 3: npm run dev
REACT IS SET UP SUCESSFULLY
The local host link will provide the result as demonstrated on the screen below:
86
Integrating React with tailwind (steps
(steps): After setting up react, you set up tailwind on the same
project in the terminal after terminating the current react in process:
1. Install the required dependencies by running the following command:
Command: npm install -D

D tailwindcsspostcssautoprefixer
2. Initialize the Tailwind CSS configuration file by running the following command:
Command: npxtailwindcssinit -p
3. Configure the tailwind.config.js file to include the appropriate content and theme settings.
Replace its contents with the following code:
4. Open your index.css file and delete its contents. Replace them with the following Tailwind
CSS directives:
87
5. Start the Development Server
Run the following command to start your application:
npm run dev
2.31.2 REACT COMPONENT
React apps are made out of components. A component is a piece of the UI (user
interface) that has its own logic and appearance. A component can be as small as a button, or
as large as an entire page.
React components are JavaScript functions that return markup:
functionMyButton() {
return (
<button>I'm a button</button>
);
Now that you’ve declared MyButton, you can nest it into another component:
88
2.31.3 Writing Markup with
ith JSX
JSX allows developers to write HTML

HTML-like
like code directly within JavaScript, making it
easier to define the structure and appearance of user interfaces.
JSX resembles a combination of HTML and JavaScript, allowing developers to embed
JavaScript expressions and logic within HTML

HTML-like
like syntax. Here's an example of JSX code:
JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t
return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div>
<div>...</div or
an empty <>...</> wrapper:
89
2.31.4 Adding Styles
In React, you specify a CSS class with className. It works the same way
w as the
HTML class attribute:
<imgclassName="avatar" />
Then you write the CSS rules for it in a separate CSS file:
/* In your CSS */
.avatar {
border-radius: 50%;
2.31.5 Displaying Data
JSX lets you put markup into Java

JavaScript.
Script. Curly braces let you “escape back” into
JavaScript so that you can embed some variable from your code and display it to the user. For
example, this will display user.name:
2.31.6 Responding To Events
You can respond to events by declaring event handler functions inside your
components:
90
2.31.7 SOME RULES GUIDING REACT
1. Components are created inside a function

function,, this function ca be arrow or ordinary function
2. Component can be nested and component can be created inside folder
3. The react most be imported at the top of every component
4. The native HTML code most ne wrap in

inside the return block (, and, )
5. Only one statement or line can be return at a time, else, they must be wrap inside
the div or empty <> and </>
6. Use className instead of class (in or

ordinary html), as class in react
eact means something
different.
7. You should export function so that you can import in a different file
you can export at the very end of the file or together with function. Example
91
8. For pictures, external
xternal styles, other component
component, etc you need to import them before using
them example
a. for pictures
import NewPictureName from ‘./myimage.jpg’
b. for external style
import ‘./app.css’
c. for external component
importmyApp from ‘./loginForm’
9. JSX just like JS is camelCase
2.31.8 Using Hooks
Functions starting with use are called Hooks. useState is a built

built-in
in Hook provided by
React. You can find other built

built-in
in Hooks in the API reference. You can also write your own
Hooks by combining the existing ones.
Hooks are more restrictive tha

thann other functions. You can only call Hooks at the top of your
components (or other Hooks). If you want to use useState in a condition or a loop, extract a
new component and put it there.

92
2.31.9 Use State
UseState is a React Hook that allows functional components to manage state within
React applications. It enables components to declare and update state variables, triggering re-
re
renders when state values change. This helps maintain component state and facilitates
dynamic user interfaces.
example demonstrating
ating how to use ùseStat
ùseState` to add and subtract numbers:
2.31.10 PROPS
Props, short for properties, in JSX refer to the mechanism for passing data from parent
components to child components in React applications. Props allow components to be
dynamic and reusable by enabling the transfer of information down the component tree.
PASSING PROPS
Passing props in React involves sending data from a parent component to a child component.
This allows components to be dynamic and reusable.
example demonstrating passing

ssing props:
93
2.32 REACT ROUTER/
R/ BROWSER ROUTER
Browser Router: enables routing in react app.
It is provided by the react library
ROUTING: The process of navigating between one component/pages to another on the URL
without triggering the entire/full page load.
To set up react React Router DOM, Run the below command in your terminal:
npm install react-router-dom
In your main.jsx or app.jsx, were you are rendering component, import the the react
BrowserRouter from the react library as follows:
import{BroweserRouter,
roweserRouter, Route, Routers} from ‘react
‘react-router-dom’
94
enclose your app component in the browser route as follows:
<BrowserRouter>
//block
</BrowserRouter>
use <Routes> component to define individual component
<Router>
//block
</Router>
Specify path using the route:Example
2.33 REACT ICONS
React Icons is a library that provides a collection of popular icon packs as ready-to-use
ready
React components. It simplifies the process of adding icons to Reactapplications by offering a
wide range of icons that can be eeasily integrated into your components.
To install React Icons using npm, you can run the following command in your terminal:
npm install react-icons –save
React Project:
Code:
95
Note: The above code is not complete, but is the major component
GitHub: https://github.com/Khalid-R-Salis/ReactOne
Result:
96
Project
Github URL: https://github.com/Khalid-R-Salis/e-commerce-shoe-page
LiveSite URL: e-commerce-shoe-page.vercel.app
FrontEnd Mentor URL: https://www.frontendmentor.io/solutions/ecommerce-shoe-page-
eiXPmuOuZt
2.34 INDIVIDUAL PROJECT CONTRIBUTIONS AND COLLABORATIVE
ENDEAVORS
Active participation in individual projects served as a crucible for the practical
application of acquired skills. Contributions to project development manifested in:
 Collaborative coding initiatives fostering efficiency and collective ideation.
 Implementation of Git for version control, elevating project management to
unprecedented heights.
 Ingenuity in problem-solving and diligent debugging, culminating in optimized code
functionality.
This exhaustive elucidation endeavors to articulate the profound depth and expansive breadth
of the skills cultivated during the SIWES program. The program's crucible forged a seasoned
97
practitioner adept in HTML, CSS, JavaScript, Tailwind CSS, and React JS, ready to navigate
the labyrinthine landscapes of real-world web development challenges.
98
CHAPTER THREE
3.1 PROBLEMS ENCOUNTER DURING IT
Major Problems I Encountered During My Industrial Attachment:
3.1.1 Financial Constraints
 Struggling to cover personal expenses: The lack of financial assistance made it
difficult to manage daily costs like transportation, meals, and even basic living
expenses, impacting my ability to focus fully on the attachment.
 Limited ability to participate in additional activities: Financial constraints meant I
couldn't attend some workshops and conferences in different that could have enhanced
my learning experience.
3.1.2 Lack of Supervision and Monitoring
 Feeling isolated and unsupported: Infrequent site visits from my institutional
supervisor left me feeling unsure about my progress and lacked guidance through
challenges.
 Unequal distribution of workload: Witnessing team members not participating fully or
unfairly allocating work could create frustration and hinder project progress.
 Difficulty communicating effectively with diverse personalities: Working within a
team with varied communication styles and personalities could lead to
misunderstandings and conflicts.
99
CHAPTER FOUR
4.1 RECOMMENDATION
Through my six-month industrial attachment, I have identified several
recommendations to enhance the success of future SIWES programs:
1. Financial Assistance for SIWES Students:
Recommendation: Provide financial assistance to SIWES students to alleviate potential
financial challenges they may encounter during the attachment period.
2. Regular Site Visits by Institutional Supervisors:
Recommendation: Implement a system where institutional supervisors conduct regular
site visits to evaluate the progress and well-being of SIWES students at their respective
places of attachment.
3. Recognition of nHub Foundation as a Preferred Attachment Venue:
Observation: nHub Foundation stands out as an exceptional location for industrial
attachment due to the positive relationships fostered between staff and students,
creating an optimal environment for valuable learning experiences.
4. Enhanced Learning Opportunities:
Recommendation: Focus on providing diverse and enhanced learning opportunities for
SIWES students to further enrich their industrial attachment experience.
5. Feedback Mechanism Implementation:
Recommendation: Establish a robust feedback mechanism that allows SIWES students
to provide insights on their experiences, facilitating continuous improvement in the
program.
6. Industry-Relevant Skill Development:
100
Recommendation: Tailor SIWES activities to emphasize the development of industry-
relevant skills, aligning with current and future industry needs.
4.2 CONCLUSION
The Student Industrial Work Experience Scheme (SIWES) has concluded, and the
experience proved to be highly educational. It facilitated the connection between theoretical
knowledge acquired in an academic setting and its practical application in the real world. This
exposure has afforded me the opportunity to acquire valuable insights and skills directly
relevant to my field of study.
During the SIWES exercise, significant emphasis was placed on Web Development,
particularly within the Front-End stack. This focus has enriched my understanding and
competence in this domain. The gained knowledge and skills are of substantial importance,
contributing to my professional growth and enhancing my capacity to apply theoretical
concepts in practical scenarios.
Moreover, this experience has provided a broader perspective on the intricacies of the
industry, allowing me to appreciate the practical implications of the concepts learned within
the academic realm. Overall, the SIWES exercise has been instrumental in bridging the gap
between academic theory and real-world application, fostering a more comprehensive
understanding of the subject matter.
101
4.3 LINKS
FRONT END MENTOR PROJECTS Links
1. https://www.frontendmentor.io/solutions/card-component-design-using-flexbox-
MtGs8TWUWF
2. https://www.frontendmentor.io/solutions/ecommerce-shoe-page-eiXPmuOuZt
3. https://www.frontendmentor.io/solutions/news-homepage-fPznUjtLSr
4. https://www.frontendmentor.io/solutions/ordersummarycomponentmain-oL-_ecT1Qi
5. https://www.frontendmentor.io/solutions/product-preview-card-component-using-flex-
Bl3dYH07yI
6. https://www.frontendmentor.io/solutions/results-summary-component-8DpqsfrYSD
7. https://www.frontendmentor.io/solutions/stats-preview-card-component-
ZXfmZoKKZR
8. https://www.frontendmentor.io/solutions/testimonials-grid-section-wx7AXbv77W
REPLET PROFILE LINK
https://replit.com/@khalidrabiusali
GITHUB PROFILE LINK
https://github.com/Khalid-R-Salis
FIGMA PROFILE LINK
https://www.figma.com/files/recents-and-sharing/recently-
viewed?fuid=1037341909156476413
102
APPENDIX
ON SITE, AT FRONTEND LAB ON SITE, AT INTENT HALL
103
Meeting the Team
Hands-on Learning in Action
104
REFERENCES
Attachment Center .(2023). Web Design Manual.
CSS-Tricks. (2023).A Complete Guide to Flex box. Retrieved from [https://css-
tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-
to-flexbox/)
GitHub. (2023).Version Control with Git. Retrieved from [https://github.com/git-
guides/git](https://github.com/git-guides/git)
MDN Web Docs. (2023). Retrieved from [https://developer.mozilla.org/en-
US/](https://developer.mozilla.org/en-US/)
React. (2023). Retrieved from [https://react.dev/](https://react.dev/)
Student Industrial Work Experience Scheme 2015/2016 Handbook
Tailwind CSS. (n.d.). Retrieved from [tailwindcss.com](tailwindcss.com)
W3Schools. (n.d.). Retrieved from
[https://www.w3schools.com/whatis/whatis_react.asp](https://www.w3schools.com/wha
tis/whatis_react.asp)
105

Siwes Report

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Siwes Report

Uploaded by

Copyright:

Available Formats

ITC3600

TECHNICAL REPORT ON THE STUDENT INDUSTRIAL WORK EXPERIENCE

SCHEME (SIWES) AT NHUB FOUNDATION

SALIS RABIU KHALID

WITH THE REGISTRATION NUMBER

SUBMITTED TO THE DEPARTMENT OF COMPUTER SCINCE

FACULTY OF SCIENCE, YUSUF MAITAMA SULE UNIVERSITY KANO.

KANO STATE, NIGERIA.

IN PARTIAL FULFILMENT OF THE REQUIREMENTS FOR THE AWARD OF

BACHELOR OF SCIENCE (B.Sc) DEGREE IN INFORMATION AND COMMUNUCATION

a record of my Student Industrial Work Experience Scheme (SIWES) conducted at nHub

Degree. All references cited have been duly acknowledged.

registration number: UG19ICT1021 under the supervision of MR. UMAR SHAFIU

also goes to my caring mother, Haj. Ummusalama Adamu Abbas.

will continue to support and bless you, Amin.

preservation, enabling me to successfully navigate through the six months of my Industrial

Training without any impediments. To him be the glory.

management of nHub Foundation Jos, for graciously accepting me as an Industrial Attachment

student for the duration of six months.

motivation played a crucial role in sustaining my efforts at every stage of my attachment.

advice and encouragement, which contributed significantly to the successful completion of

1.0 GENERAL INTRODUCTION - - - - - - 1

1.1 YUSUF MAITAMA SULE UNIVERSITY KANO - - - - 1

1.2 HISTORICAL BACKGROUND OF SIWES - - - - 1

1.2.1 AIM AND OBJECTIVES OF SIWES - - - - - 1

1.2.2 IMPORTANCE OF SIWES TO EDUCATIONAL AND NATIONAL

1.3 BACKGROUND OF PLACE OF ATTACHMENT

(NHUB FUNDATION JOS) - - - - - - - 2

1.3.1 OVERVIEW OF NHUB INITIATIVE - - - - - 3

1.3.2 COMPARISON WITH TRADITIONAL TECH HUBS - - - 3

1.4 ACHIEVEMENTS AND RECOGNITION - - - - - 3

1.4.2 TRAINING PROGRAMS AND PARTNERSHIPS - - - - 3

1.5 COLLABORATION WITH GOVERNMENT - - - - 3

1.5.1 ICT FOR CHANGE EMPOWERMENT PROGRAMME - - - 4

1.5.2 GOVERNMENT SUPPORT - - - - - - - 4

1.6 IMPACT-DRIVEN INITIATIVES - - - - - - 4

1.6.1 NHUB FOUNDATION PROGRAMS - - - - - 4

1.6.2 VISION, PRINCIPLES, AND GOALS - - - - - 4

1.7 SCOPE OF THE REPORT - - - - - - - 5

2.0 PRACTICAL PROFICIENCY IN WEB DEVELOPMENT TECHNOLOGIES 6

2.1 UNDERSTANDING WEB DEVELOPMENT - - - - 6

2.1.0 DEFINITION OF SOME USEFUL TERMS - - - - - 6

2.1.1 HYPERTEXT MARKUP LANGUAGE

2.1.2 ANATOMY OF AN HTML ELEMENT - - - - - 7

2.1.2 NESTING ELEMENTS - - - - - - - 7

2.1.3 VOID ELEMENTS - - - - - - - - 8

2.1.4 BOOLEAN ATTRIBUTES - - - - - - - 8

2.1.5 ENTITY REFERENCES: INCLUDING SPECIAL CHARACTERS IN HTML -8

2.1.6 HTML COMMENTS - - - - - - - - 9

2.1.7 METADATA IN HTML - - - - - - - 9

2.1.9 WHAT IS A HYPERLINK? - - - - - - - 10

2.1.10 BASIC LINK - - - - - - - - - 10

2.1.11 IMAGE LINKS - - - - - - - - 10

2.1.12 WEBSITE STRUCTURE - - - - - - - 11

2.2 DEBUGGING HTML - - - - - - - 12

2.3 TYPES OF ERROR - - - - - - - - 12

2.4 WAYS OF IDENTIFYING ERRORS - - - - - 12

2.6 IMAGES IN HTML - - - - - - - - 12

2.7 RELATIVE VS. ABSOLUTE PATHS - - - - - 13

2.8 WIDTH AND HEIGHT ATTRIBUTES - - - - - 13

2.9 VIDEO AND AUDIO CONTENT - - - - - - 14

2.10 RESPONSIVE IMAGES - - - - - - 15

2.11 HTML TABLE - - - - - - - - 17

2.12 CASCADING STYLE SHEET (CSS) - - - - - 19