STUDE LOGBOOK REPORT-SIWES/UBITS

NT

NAME:
YUSUF MIMINU SOLOMON

MATRICULATION NO:
ENV1906048

COURSE AND YEAR:

IT300-300L(Graphics Design)

FIRM TRAINING & LOCATION:

-WEB DEVELOPMENT & DESIGN-
Reflection Universe -- 16, Ozigbo Str, Off
Ekenhuan Rd, 300232, Benin City, Edo State.
 ACKNOWLEDGEMENTS

.
.
Thank you Mr.Bishop and Mr. Nyore(CEO Reflection Universe) for the support ,
wisdom,supervision and knowledge gained throughout my time in the company.

Special Thanks To My Father and Lord, THE MOST HIGH GOD for his Love and Grace.
 Table of Contents

I Acknowledgments. i

ii Introduction. 1

iii Detailed Intern's Responsibility and Activities. 2

iv Discussion, Analysis and Evaluation. 13

v Conclusion, Limitations and Recommendations. 21

 INTRODUCTION

As a student of the University Of Benin,Faculty of Environmental science, Dept. of Fine And

Appiled Arts, I had the privilege of undergoing my training at Reflection Universe under
the supervision of Mr. Bishop Ehiosun, where I delved into the fascinating world of Web
Development and Design.

Reflection Universe is a Tech based Advertising Agency that helps businesses with
Social Media Visibility which involves building websites that is tailored to their brands.

I needed not just a theoritical idea but an industry experience of what I've learnt so far in
my field of study (graphics design), main reason why I did not apply to just a web design
instructor but an organization where I can have the opportunity to experience and relate
to clients, see how clients respond to the building and development process from idea to
finish.

Being a level 3 beginner in the field of web development and design, I've never gotten the
experience of working in a company as a pro before and because I am fairly new to the
field Mr. Bishop took it upon himself to impart me with knowledge needed to thrive in this
field. Like he'd always say and I quote "..all you need is determination and dedication" .

My role as an intern in the company was basically to watched, listen and learn, a skill I've
gotten very much used to thanks to the early syllabus B drawing routine of my department
---- "draw what you see". Early school routine has taught me observation, attentiveness
and focus which all proved to be very useful during each day of learning at Reflection
Universe with the guidance of the highly esteemed Mr. Bishop or as I'd like to call him Sir
Bishop.
This report gives a detailed account of most of my activities and the knowledge gained
during my industrial training, with a primary focus on the use of HTML, CSS, and JavaScript
in the creation and design of web applications.

DETAILED INTERN'S RESPONSIBILITIES ANDDAILY

ACTIVITIES
.
UNDERSTANDING ANDDESIGN
WEBDEVELOPMENT

During my first week at Reflection Universe, Mr. Bishop- my trainer and supervisor -
made me familiar with the basics, and since I for one had a previous knowledge on HTML
and CSS, we hopped straight into the new world of JavaScript mainly ,with aid of a few
Video resources he had recommended plus an extra documentation resource from the
website W3schools.com.

I'll give a brief intro in the field before anything.

Web development and design forms the backbone of modern digital experiences.It
encompasses a blend of technologies and skills, with HTML(Hypertext Markup Language),
CSS(Cascading Style Sheets), and JavaScript being its foundational components.

HTML serves as the structural framework of web pages, defining content elements.

CSS, on the other hand, is indispensable for styling and layout, giving web pages their
visual appeal.
 JavaScript empowers web applications with interactivity and dynamic behavior, elevating
the user experience.

In the first and Second week we delved more into JavaScript.. and with one or two
practical sessions(exercises) I understood things such as Variables( how they're created
and applied),Basic and Advance operators ( here I came across the Nullish,Collescing and
Optional chaining operators, how they work and the best practice for writing and when to
use each one), Conditionals (the IF , Else IF , and Else conditionals and how they come to
play in coding with JavaScript), JavaScript Fundamentals which are the Arrays & Objects
plus the best practices for writing and implementing them.

Others include the ES6 (default parameters ), Loops , Functions , Spread Operators and
ECMA Syntaxes(Script 6), all with the aid of Video and Documented resources
recommended by my Supervisor..

Here are a few images showing some of the exercises done during the first phases of the
training period using the above listed features:

 The following images shows my use of the .querySelectorAllin selecting elements

of the HTML using JavaScript, to show a list of cars for sale, and edit them
accordingly.
 PRACTICAL APPLICATION OF HTML

During the training , I also had the opportunity to immerse myself in the practical
application of HTML. I learned how to create structured and semantically meaningful web
pages using HTML.

In my logbook(pg. 22 to be precise), I gave a brief description of the work carried out

using HTML and that was the continuation of part of a class not fully described in the
previous pages .

Lists of work done include:

 Defining headings (using the <h1>, <h2> or <h3>tags ) ,

  Paragraphs(using the <p> and <div> tags ),

 Lists(using the <ol> tags for ordered list and <ul> for Unordered lists on a webpage,
plus the <li> tag that specifies the list items of either the Ordered or Unordered
lists),

 and embedding media such as images and videos using the <img> tag.

Understanding HTML's role in maintaining user and developer accessibility and adhering
to coding standards became my key focus. Overcoming challenges in ensuring each code is
compactible to different browsers and validation were valuable learning experiences with
Mr. Bishop's help.

During practice sessions using HTML ,we used HTML tags in webpage structure and layout
e.g, Tags like the <button> </button> were used to create buttons after an input space in
webpages which are created using the <input > tag.

As stated also in page 26 of the logbook, I understood the creation of links and using
attributes in line with links created in HTML using the <a> - anchor- tag ,to link text with
webpages, I learnt the use of the "href=" attribute along with a Uniform Resource Locator
popularly known as URL( href is short for Hypertext Reference)

e.g. <a href="www.MiminuyusufSolomon.com"> Go to Site </a> is a typical link that says

"Go to Site" and whwn clicked takes you to the website "www.MiminuyusufSolomon.com".

ENHANCING DESIGNS WITH CSS

I love working with CSS but the limitations are a quite bothersome due to the long lines of
codes I will write to just get a simple and sometimes insignificant change on a webpage
but asides that CSS emerged as a powerful tool for enhancing web design.

Throughout my internship, I worked on projects where CSS played a pivotal role in

transforming plain web pages into aesthetically pleasing and user-friendly interfaces.

Cascading Style Sheets allowed me to control :

  typography,

 colors,

 spacing,

 background color and

 layout

ensuring consistency across the website. Responsive design principles were applied to
ensure the site's adaptability to various devices, from desktops to mobile phone.

 The image below show an exercise I was given by Mr. Bishop to create a TO-
DO list webapp using CSS to style ( The website link is '1547921.playcode.io '
for verification)
  Another instance where I made use of CSS is shown below , where i was asked
to create a CARS FOR SALE webpage and using CSS to style the background( to
purple ) and turn text color to white;

Using Bullet points, I will highlight the details of all my activities and the new things I've
learnt over my time using CSS to style webpages at Reflections Universe:

 Laying the Foundations : Introduction to CSSUnderstand the purpose and syntax of

CSS.

 Learn how to include CSS in HTML documents.

 Selectors and Basic Styling:

I Gained proficiency in using CSS selectors durrrring these classes and also in applying the
basic styles to HTML elements, such as changing colors and fonts.

 Box Model and Borders:

I also explored the CSS Box Model and its components (content, padding, border, margin)
and when later on with Mr. Bishop's guidant to master border properties, including
alignment, color, and style.

 Text Alignment and Fonts:

I Understood how to align text within elements and also experiment with different font
properties, such as size and family during this period.

 Layout and Positioning(Centering Techniques):

I also learnt various methods to center elements horizontally and vertically.Apply these
techniques to create visually appealing layouts.
  Display Property:

We also dived into the CSS display property and its values (block, inline, inline-block) and
explored how different values affect element layout.

 Working with Flexbox:

I was Introduced to the flexible box layout model (display: flex) and taught to understand
how to create responsive and flexible layouts.

 Mastering Margin and Padding:

I learnt the use of margin and padding properties for spacing and layout control and also
learnt how to create consistent and visually appealing designs.

 Advanced CSS Techniques( Embracing the Grid System):

I was introduced to the CSS Grid Layout (display: grid) and learnt how to create complex
and responsive grid-based designs.

During the course of each practice sessions stated in the logbook, I received feedback and
review sessions with Mr. Bishop to refine my skills on the writing and application of CSS
codes.

Working with CSS under Mr. Bishop's supervision has been of no doubt an invaluable
experience. In over three months, I've gained a solid foundation in CSS, learned
advanced techniques, and acquired the skills to create visually appealing and responsive
web designs. The training has not only enhanced my web development abilities but also
deepened my appreciation for the Art of front-end design.

I am grateful for Mr. Bishop's guidance and mentorship throughout this learning phase.

INTERACTIVITY WITH JAVASCRIPT

ADDING
JavaScript opened the door to interactivity and dynamic functionality. We worked mostly
on JavaScript in making interactive webpages

I was tasked with implementing various features, from form validation to interactive
elements like image sliders and navigation menus.
 *I've learnt JavaScript makes features of the webpage like the
button key above respond when clicked.

JavaScript's ability to respond to user actions and make real-time updates to the web
page greatly improved the user experience. Debugging and troubleshooting were essential
skills I honed, ensuring seamless functionality.

THERANDOM QUOTE GENERATOR WEB APP PROJECT:

daily progress from
start to finish

Introduction

During my internship at Reflection Universe, one of the exciting projects I undertook was
the development of a random quote generator web application. This endeavor was a great
opportunity to apply the web development skills I had acquired during my training, which
included HTML, CSS, and JavaScript.

Day 1: Sourcing Codes and Planning

The journey began with a day of researching and sourcing code snippets and resources
related to random quote generators. I scoured various online repositories and forums to
find inspiration and templates that would help kickstart the project. It was essential to
choose a suitable template or codebase that aligned with the project's objectives.
I also spent time exploring different design ideas and mapped out a plan for the app's
structure and layout. Clear planning was crucial in ensuring a smooth development
process.

Day 2: Crafting the HTML Structure

On the second day, I dove into the creation of the HTML structure for the random quote
generator web app. I carefully set up the necessary HTML elements, such as buttons for
generating quotes and containers to display the quotes. It was essential to ensure that the
HTML was semantically structured and accessible, adhering to best practices in web
development.

I also linked the chosen codebase or template to my HTML file, ensuring that all elements
were integrated seamlessly.

Day 3: Styling with CSS

Day 3 was all about applying CSS styling to bring the web app to life visually. I customized
the appearance of buttons, text, backgrounds, and other visual elements to match the
design concept I had in mind. Creating a responsive layout that would look appealing on
different screen sizes was a priority.

Testing the CSS was an iterative process to make sure the user interface was not only
visually pleasing but also user-friendly.

Day 4: Adding JavaScript Functionality

The heart of the project came together on the fourth day as I delved into JavaScript to
implement the core functionality of the random quote generator. I used arrays and APIs to
store and fetch quotes, and I created functions that displayed random quotes when users
interacted with the app.

I also implemented features like sharing quotes on social media and saving favorite quotes
to enhance the user experience. Extensive testing was essential to ensure that the
functionality worked seamlessly.

Day 5: Finalization and Deployment

On the final day, I conducted rigorous testing to ensure the web app performed flawlessly
on various browsers and devices. Any issues or errors were meticulously debugged, and
the code was optimized for efficiency and maintainability.

I made sure that the user interface remained visually appealing and responsive, and I
considered additional features to enhance the user experience further. Once I was
satisfied with the results, I proceeded to deploy the random quote generator web app to a
hosting platform, making it accessible to users.

This was a rewarding experience that allowed me to apply the skills I had acquired during
my training at Reflection Universe. It showcased the importance of meticulous planning,
attention to detail, and a structured approach to web development and design.

This project not only expanded my technical abilities but also reinforced the significance of
user-centric design and functionality. It was a valuable addition to my portfolio and

contributed to my growth as a web developer during my internship .

Progress score during my the course of time
 DISCUSSION, ANALYSIS
ANDEVALUATION

a. Analyzing Experience and

Learning:

During my internship at Reflection Universe under the guidance of Mr. Bishop in the field
of web development and design, I gained valuable experience that significantly
contributed to shaping my professional identity and practice in a workplace. Let's break
down what I learned and experienced:

HTML and CSS Foundations: In the first month, I acquired a strong foundation in HTML
and CSS. This provided me with the essential skills to structure web content effectively and
style it for a visually pleasing user experience. Understanding the importance of semantic
HTML not only enhanced my web development skills but also taught me the significance of
web accessibility and SEO.

JavaScript Proficiency:My second month involved an intensive study of JavaScript. This

programming language became my gateway to creating dynamic and interactive web
pages. Learning to manipulate the DOM and employing JavaScript frameworks like jQuery
expanded my toolkit, allowing me to develop user-friendly, responsive websites.

Advanced JavaScript Concepts: The third month was a deep dive into advanced JavaScript
topics. Concepts such as functions, closures, and asynchronous programming with
Promises and Async/Await enriched my coding skills. These lessons were not only pivotal
in web development but also reinforced the importance of maintaining clean, readable
code.

Web Design Principles: The final month was dedicated to web design principles.
Responsive design techniques using CSS Grid and Flexbox, as well as focusing on UX and
accessibility, emphasized the importance of creating user-centric websites.

In essence, this internship enabled me to build a comprehensive skill set in web

development and design, laying a solid foundation for my future career in this field. I was
exposed to various aspects of web development, allowing me to understand its nature and
the importance of quality in this domain.

b.Tools and Equipment Used

Throughout my internship, I utilized a range of tools and equipment. These included code
editors like Visual Studio Code for writing and debugging HTML, CSS, and JavaScript.
Additionally, web browsers such as Google Chrome and Mozilla Firefox with built-in
developer tools were essential for testing and troubleshooting websites. Human resources
played a crucial role, with Mr. Bishop's mentorship and my fellow interns offering support,
feedback, and collaborative learning opportunities.

c. Problem Solving

While gaining hands-on experience, I encountered several challenges, each providing

opportunities for growth:

Debugging Complex JavaScript Issues: Advanced JavaScript concepts sometimes led to

intricate bugs. My problem-solving skills improved significantly as I learned to isolate
issues, analyze console errors, and rectify them systematically. Collaborating with peers
and seeking Mr. Bishop's guidance was instrumental in resolving these challenges.

Cross-Browser Compatibility: Ensuring that websites functioned seamlessly across various

browsers required careful testing and adjustments. Learning to use browser developer
tools effectively and applying CSS techniques for cross-browser compatibility addressed
this concern.

Project Deadlines: Meeting project deadlines was a recurring challenge. Effective time
management and project planning became essential to ensure timely delivery of high-
quality work. Clear communication with team members and Mr. Bishop helped manage
these situations effectively.
In summary, my internship at Reflection Universe provided me with a comprehensive
education in web development and design. It allowed me to cultivate valuable skills, adapt
to workplace dynamics, and tackle real-world challenges. The experience significantly
shaped my professional identity, emphasizing the importance of continuous learning and
maintaining high standards of quality in web development and design.

IMAGES OF MOST CODING EXERCISES I WAS GIVEN

OVERTIME PLUS OTHER WORKS:
CONCLUSION, LIMITATIONS ANDRECOMMENDATIONS
.
Throughout the course of my internship at Reflection Universe, I embarked on a journey
that allowed me to apply and refine my web development skills. The development of the
random quote generator web app was a significant milestone in this experience. Here are
the key findings of my internship:

-I successfully applied my knowledge of HTML, CSS, and JavaScript to create a functional

and visually appealing web application.

-The project reinforced the importance of meticulous planning and a structured approach
to web development.

-I gained valuable insights into the collaborative nature of web development, working
with code snippets from various sources and integrating them seamlessly.

-The web app's implementation of features like sharing quotes and saving favorites
highlighted the significance of user-centric design and functionality.

Limitations

During the internship and the development of the random quote generator web app,
certain limitations became apparent:

-Sourcing external code snippets and resources posed challenges related to compatibility
and licensing issues. It was crucial to ensure that all code used was compatible with the
project's objectives and adhered to licensing requirements.

-The time constraints of a 5-day development period limited the depth and complexity of
the web app's features. Certain enhancements and optimizations could not be fully
explored within this timeframe.

-The reliance on external APIs for fetching quotes introduced a potential point of failure
if the API service experienced downtime or changes in functionality.
Recommendations

Based on the identified limitations, I would like to make the following recommendations:

-Prior to using external code snippets and resources, conduct thorough compatibility and
licensing checks to ensure they align with the project's goals and adhere to licensing
requirements. This will mitigate potential legal and technical issues.

-In future projects, consider allocating more time for development to explore additional
features and optimizations, allowing for a more comprehensive and robust end product.

-To address potential API-related issues, it may be advisable to explore alternative

methods of fetching data or implementing a fallback mechanism to ensure uninterrupted
functionality in case of API disruptions.

These recommendations aim to enhance the quality and reliability of future web
development projects, ensuring a smoother and more efficient development process.