A Summer Internship Report

on
"CodeClause Internship: Innovating Portfolios, Unit Convertors, and COVID
Data Dashboards"
Submitted to
OSMANIA UNIVERSITY, Hyderabad
in partial fulfillment of the requirements for the award of degree
of

BACHELOR OF ENGINEERING
In

INFORMATION TECHNOLOGY
By
MOHAMMED HUSSAIN ABID KHAN 161020737018
Under the esteemed guidance of
Ms. FARHEEN SULTANA
Assistant Professor, IT-Dept

Department Of Information Technology

NAWAB SHAH ALAM KHAN COLLEGE OF ENGINEERING & TECHNOLOGY
(Affiliated to Osmania University, Hyderabad)
New Malakpet, Hyderabad-500024.
2023-2024.
 Certificate

This is to certify that the summer internship report entitled “CodeClause

Internship: Innovating Portfolios, Unit Convertors, and COVID Data
Dashboards” being submitted by MOHAMMED HUSSAIN ABID KHAN
(161020737018) in partial fulfillment of the requirements for the award of the
degree of Bachelor of Engineering in Information Technology during the
academic year 2023-2024.

This is further certified that the work done under my guidance, and the
results of this work have not been submitted elsewhere for the award of any of
the degree are diploma.

Internal Guide Head of the Department

Ms. Farheen Sultana Dr. G.S.S Rao
Assistant Professor Professor and HOD

Principal External Examiner

Dr. Syed Abdul Sattar Date:
 Declaration by the Candidate

We, hereby declare that the summer internship report entitled

“CodeClause Internship: Innovating Portfolios, Unit Convertors, and
COVID Data Dashboards”, under the guidance of Ms. Farheen Sultana,
Assistant Professor, Department of IT. Department of Information
Technology, Nawab Shah Alam Khan College of Engineering & Technology,
affiliated to Osmania University, Hyderabad is submitted in partial fulfillment of
the requirements for the award of the degree of Bachelor of Engineering in
Information Technology.

This is a record of bonafide work carried out by us and the result

embodied in this project have not been reproduced or copied from any source.
The results embodied in this project report have not been submitted to any other
university or institutes for the award of any other degree.

MOHAMMED HUSSAIN ABID KHAN 161020737018

 ACKNOWLEDGEMENT

First of all, I would like to express my sincere gratitude to the institute

that helped us to do the internship, CodeClause, for their support, availability
and insightful content. Without this institute our internship would not have been
completed.

We would also like to express our gratitude to Dr. G.S.S. Rao, Professor
and Head of the Department of Information Technology, Nawab Shah Alam
Khan College of Engineering & Technology for giving us this great opportunity
to undertake this internship. We would like to thank our Department Internship
Coordinator, Ms. Farheen Sultana, for her constant guidance and advice along
the way, in both professional and personal matters. We are extremely grateful to
our department staff members, friends and our families who helped us in
successful completion of this internship. We would like to thank all those who
we had the pleasure to learn with for making this demanding time joyful yet
efficient, and for taking the time to answer any of our questions.

Finally, we must express my very profound gratitude to our parents for

providing us with unfailing support and continuous encouragement throughout
our years of study leading to this very moment.

We would also like to thank Dr. Syed Abdul Sattar, Principal of our
college, for extending his help.
.

MOHAMMED HUSSAIN ABID KHAN 161020737018

 To Whom So IT May Concern

Date - 06 / 06 / 2023

This is to certify that Mohammed Hussain Abid Khan ,

Information Technology Nawab Shah Alam Khan College of Engineering
and Technology is working as an intern with CodeClause from the period
May-2023 To Jun-2023.

During this period he handled Web Development Intern position.

During the course of the Internship, Mohammed Hussain Abid Khan has
shown a great amount of responsibility, sincerity, and a genuine willingness
to learn and zeal to take on new assignments and challenges. In particular,
his coordination skills and communication skills are par excellence and his
attention to details is impressive

We wish all the very best for your future.

 Date - 07 / 06 / 2023

It is a great pleasure that we recommend Mohammed Hussain Abid Khan on

the basis of his performance in the internship with CodeClause as Web
Development Intern in the month of May 2023 .He did an excellent job in this
position and was an asset to our organization during his internship tenure.

Throughout the internship, He has demonstrated excellent communication skills,

a curious mind, and admirable social awareness. He also performed extremely
well during the internship and showed excellent skills as seen in the project
submission and participation in the regular activities.

He is always willing to put a unique approach to the projects that are assigned,
while also adhering to the guidelines and rules.

With this, we will take this opportunity to wish Mohammed Hussain Abid Khan
,all luck for future endeavors and hope for a bright future ahead.

Regards,

Team CodeClause

www.codeclause.com

official@codeclause.com

Powered by TCPDF (www.tcpdf.org)

Correspondence Letters:
 TABLE OF CONTENT

CONTENTS PAGE NO

ABSTRACT iii

List of Figures iv

Chapter 1: Introduction [1-3]

1.1 About CodeClause [1]

1.2 About Summer Internship Pojects [2-3]

Chapter 2: DOMAIN OF THE INTERNSHIP [4-8]

2.1 What is it Actually? [4-4]

2.2 Front-end Development [4-5]

2.3 Back-end Development [6-7]

2.5 Full-Stack Development [7-8]

Chapter 3: TECHNOLOGICAL DETAILS [9-16]

3.1 HTML [9-11]

3.2 CSS [11-12]

3.3 JAVA SCRIPT [12-14]

3.4 BOOTSTRAP [14-16]

Chapter 4: OUTCOME OF THE INTERNSHIP [17]

4.1 Thigs We Learned During Our Internship [17-17]

Chapter 5: SOURCE CODES [18-20]

Chapter 6: OUTPUT SCREENS [21-23]

Chapter 7: Conclusion and Future Enhancement [24]

 7.1 Conclusion [24]

7.2 Future Enhancement [24-25]

Chapter 8: References [26]

8.1 Book References [26]

8.2 Referral Link [26]

 ABSTRACT

The "CodeClause Internship: Innovating Portfolios, Convertors, and

COVID Data Dashboards" encapsulates a comprehensive web development
journey centered around creating impactful digital solutions. This internship
offers an immersive experience in designing and implementing diverse
web-based projects, including personalized portfolios, versatile unit converters,
and dynamic COVID-19 data dashboards.

Throughout the internship, participants delve into the intricacies of

modern web development practices, gaining hands-on expertise in frontend
technologies. The internship fosters a creative environment where interns
explore innovative design principles, user experience optimization, and
responsive web development techniques. The portfolio project allows interns to
craft personalized and professional web portfolios, honing their skills in
showcasing their work effectively. Simultaneously, the development of unit
converters cultivates a deeper understanding of data manipulation, logical
thinking, and user interface design.

A significant focus lies in developing COVID-19 data dashboards, where

interns leverage to create informative dashboards displaying real-time pandemic
statistics.

iii
 List of Figures

S. No Figure No Figure Name Page No

1 2.1 Front-End Development 5

2 2.2 Back-End Development 7

3 2.3 Full-Stack Development 8

4 6.1 Home-Section 21

5 6.2 About-Section 21

6 6.3 Project-Section 22

7 6.4 Blog & Contact-Us-Section 22

8 6.5 Unit Converter-Section 23

9 6.6 Covid-19 Dashboard 23

iv
 CHAPTER 1: INTRODUCTION

1.1 About CodeClause

CodeClause aspires to be the global sourcing choice of the world market and
revolutionizes the way service processes function. To reach out to the common people across the
globe and make Information Technology a tool for the “MASS” along with the tool for the
“CLASS”. Creating innovative IT solutions and providing IT-enabled services to delight
customers worldwide and build Relationships based on Trust, Values and Professionalism.

CodeClause has industry-specific software expertise in Technology, Financial,

Healthcare, Media, Manufacturing, and many other sectors. The company specializes in offering
Data & Analytics, Automation AI, IoT Services, Web Designing, Web Application Development,
Mobile Application Development, Software Development, Digital Marketing, Software Testing,
Quality Assurance services, and many more.

Moreover, the CodeClause Internship is designed to be inclusive and diverse, welcoming

individuals from various backgrounds and experiences. The program values diversity of thought
and believes that a variety of perspectives contribute to innovation and creativity in
problem-solving. By fostering an inclusive environment, CodeClause ensures that interns not
only learn technical skills but also develop essential soft skills, such as communication and
teamwork, that are critical for success in any professional setting.

Overall, the CodeClause Internship stands as a testament to the organization's

commitment to shaping the future of tech by empowering and equipping the next generation of
software developers and technology professionals.

1
1.2 About Summer Internship Projects

As part of this internship, I've embarked on a dynamic journey delving into the realm of
web development, honing my skills in HTML, CSS, and JavaScript through the
conceptualization and execution of three distinct yet interconnected projects. These projects, a
Personal Portfolio, a Unit Converter, and a Covid-19 Dashboard, have not only allowed me to
apply theoretical knowledge but have also deepened my understanding of these languages'
functionalities in practical scenarios.

1.2.1 Personal Portfolio:

The Personal Portfolio stands as a testament to my proficiency in HTML, CSS, and

JavaScript, integrating these languages to craft an aesthetically pleasing and functional website.
Comprising sections like Home, About, Projects, and Blogs, this portfolio epitomizes my ability
to design intuitive user interfaces and employ responsive design principles, ensuring a seamless
experience across devices. The Home section greets visitors with an engaging layout, while the
About section provides insights into my background and aspirations. Projects and Blogs
showcase my accomplishments as projects and blogs, respectively, displayed in an organized
and visually appealing manner.

1.2.2 Unit Converter:

The Unit Converter project serves as an interactive tool demonstrating the application of
JavaScript in real-time conversions. Its primary function revolves around converting units of
length (meters to centimeters and vice versa) and weight (kilograms to grams and vice versa). By
leveraging JavaScript functionalities, users can input values and witness instant conversions,
elucidating the logic and mechanics behind JavaScript's dynamic nature. This project serves as
an educational tool, elucidating the principles of JavaScript through practical implementation and
fostering a deeper comprehension of its working mechanisms.

2
1.2.3 Covid-19 Dashboard:

In response to the global pandemic, the Covid-19 Dashboard project was conceived to
provide an insightful visualization of pandemic data. Leveraging JavaScript's capabilities, this
dashboard amalgamates real-time statistics, presenting them in comprehensible graphs and
charts.This immersive experience offered a firsthand insight into the power of JavaScript in
processing and showcasing live data, reinforcing its relevance in creating impactful and
informative web applications.

In conclusion, this internship has been a transformative experience, equipping me with a

robust skill set and a deeper appreciation for the versatility of HTML, CSS, and JavaScript.
These projects serve as a testament to my dedication, creativity, and eagerness to contribute
meaningfully to the world of web development.

3
 CHAPTER 2: DOMAIN OF THE PROJECT
Web Development

2.1 What is it actually?

Web development is the process of creating and maintaining websites or web

applications, encompassing a range of tasks that contribute to the functionality, appearance, and
overall user experience of a site. It involves the use of various technologies, programming
languages, and frameworks to build and deploy websites on the internet.

Web development skills are highly demanded worldwide and well paid too-making
development a great career option.

Web development can be broadly categorized into two main components:

● Front-end Development [ User Interface Side ]
● Back-end Development [ Server Side ]

2.2 Front-End Development:

Front-end development, often referred to as client-side development, is a crucial aspect of

web development that focuses on creating the visual elements and user interface of a website or
web application. Front-end developers are responsible for designing and implementing the
interactive features that users see and engage with directly. This includes the layout, navigation,
and overall aesthetics of the site, ensuring a seamless and user-friendly experience across
different devices and browsers.

HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript
form the core technologies used in front-end development. HTML provides the structure of a
web page, defining the various elements such as headings, paragraphs, images, and links. CSS is

4
used for styling and layout, determining how the content is presented visually. JavaScript, a
dynamic scripting language, adds interactivity and enables the development of complex features
like animations, form validation, and dynamic content updates without requiring a page reload.

Responsive web design is a key consideration in front-end development, as developers

strive to ensure that websites adapt and function seamlessly on a variety of devices, including
desktops, tablets, and smartphones. Front-end developers also work with frameworks and
libraries such as React, Angular, or Vue.js to streamline the development process and enhance
the performance of web applications. Successful front-end development requires a combination
of creativity, technical proficiency, and a deep understanding of user experience principles to
deliver visually appealing and intuitive interfaces.

Fig 2.1: Front-End Development

5
2.3 Back-End Development:

Back-end development, often referred to as server-side development, is the aspect of web

development that focuses on the behind-the-scenes functionalities that enable a website or web
application to operate. Back-end developers work on the server side, managing databases,
handling user authentication, and implementing the logic that powers the overall functionality of
a website. Unlike front-end development, which deals with the visual aspects, back-end
development ensures that the data is securely stored, processed, and delivered to the user's
device.

Back-end developers use server-side programming languages such as Python, Ruby, Java,
PHP, and others, depending on the specific requirements of the project. They interact with
databases, such as MySQL, PostgreSQL, or MongoDB, to store and retrieve data efficiently.
Security is a critical aspect of back-end development, and developers implement measures to
protect user data, prevent unauthorized access, and ensure the overall integrity of the system.

APIs (Application Programming Interfaces) play a significant role in back-end

development, allowing different components of a web application to communicate with each
other. Back-end developers design and implement these APIs, enabling seamless integration
between the server and the front-end components. The collaborative effort between front-end and
back-end developers is essential for creating a fully functional and cohesive web application that
provides a smooth user experience.

6
 Fig 2.2: Back-End Development

2.4 Full-Stack Development:

Full-stack development refers to the comprehensive skill set and expertise required to
work on both the front-end and back-end aspects of web development. A full-stack developer
possesses a broad understanding of the entire web development process, from designing the user
interface to managing databases and server-side logic. This versatility allows them to handle
various aspects of a project, making them capable of developing a complete web application
independently or collaborating seamlessly with specialized front-end and back-end developers.

On the front-end, a full-stack developer is proficient in languages like HTML, CSS, and
JavaScript. They can create visually appealing and responsive user interfaces, ensuring a positive
user experience across different devices. Full-stack developers are also skilled in using front-end
libraries and frameworks like React, Angular, or Vue.js to enhance the functionality and
interactivity of web applications.

In the back-end, a full-stack developer is familiar with server-side languages such as

Python, Ruby, Java, or PHP. They can design and manage databases, work with server

7
frameworks, and handle server-side logic efficiently. Full-stack developers often work with
technologies like Node.js that allow them to use JavaScript for both front-end and back-end
development, further streamlining the development process.

Fig 2.3: Full-Stack Development

8
 CHAPTER 3: TECHNOLOGICAL DETAILS

Internship allow us to expand our technical skills and give us opportunity to learn , adapt
and master new skills. Our Internship at CodeClause had constantly put us in a situation where
we have to come out from comfort zone and try and learn new technology and implement it on
the best level. Below is the list of technologies we have learned and mastered during the
internships:

● HTML
● CSS
● JS
● Bootsrap

3.1 HTML:

HTML (Hypertext Markup Language) is the fundamental building block of web content,
providing a standardized structure for creating and organizing elements on a webpage. Using a
system of tags, HTML allows developers to define various components such as headings,
paragraphs, images, and links, shaping the visual and logical structure of a website. As a core
technology of the World Wide Web, HTML ensures cross-browser compatibility and
accessibility. It serves as the backbone for web development, working in conjunction with
Cascading Style Sheets (CSS) for styling and layout, and JavaScript for interactivity. HTML's
simplicity and universality make it an essential language for creating cohesive and
well-structured web pages.

3.1.1 Features of HTML:

● Foundation of Web Development: HTML serves as the foundational markup language

for creating web pages, providing a standardized structure that browsers can interpret and
display.

9
● Content Structure: HTML allows developers to define the structure of content on a
webpage, organizing it into headings, paragraphs, lists, images, and links, facilitating a
clear and logical presentation.

● Cross-Browser Compatibility: HTML is supported by all major web browsers, ensuring

consistent rendering of content across different platforms and devices.

● Accessibility: By utilizing semantic HTML elements, developers enhance the

accessibility of web content, making it more navigable for users with disabilities and
improving overall user experience.

● Integration with CSS and JavaScript: HTML works seamlessly with Cascading Style
Sheets (CSS) for styling and JavaScript for interactivity, enabling the creation of dynamic
and visually appealing web pages.

● Search Engine Optimization (SEO): Well-structured HTML contributes to better SEO,

as search engines can efficiently crawl and index content, improving a website's visibility
in search results.

● Global Standard: HTML is a universally recognized and adopted standard, ensuring

compatibility and interoperability in the ever-expanding digital landscape.

● Responsive Web Design: HTML plays a key role in creating responsive web designs
that adapt to various screen sizes and devices, enhancing the user experience on desktops,
tablets, and smartphones.

● Versatility: HTML's simplicity and versatility make it accessible to both beginners and
experienced developers, fostering a wide range of web development projects from simple
static websites to complex web applications.

10
 ● Evolution and Updates: HTML evolves with advancements in web technology. Regular
updates, such as HTML5, introduce new features and functionalities, keeping pace with
the dynamic nature of the internet.

3.2 CSS:

Cascading Style Sheets (CSS) is a fundamental technology in web development that

controls the visual presentation and layout of web pages written in HTML and XHTML. It
defines how HTML elements are displayed on screens, paper, or in other media types. CSS
enables developers to create visually engaging and responsive websites by specifying styles for
fonts, colors, spacing, layout, and more. It allows for consistency across a website, making it
easier to maintain and update the design elements uniformly.

CSS operates on a cascading principle, where multiple style sheets can be applied to a
single HTML document, with rules prioritized based on specificity, inheritance, and order. This
flexibility allows developers to separate content from presentation, enhancing accessibility and
user experience. With the evolution of CSS3, developers gained access to advanced features like
animations, transitions, and responsive design tools, enabling the creation of more dynamic and
adaptable web interfaces.

3.2.1 Features of CSS:

● Presentation Control: CSS allows precise control over the visual aspects of a webpage,
defining styles for fonts, colors, layout, spacing, and more, ensuring a consistent and
appealing presentation across the site.

● Separation of Concerns: It separates content from presentation, promoting cleaner and

more maintainable code. This segregation enables developers to focus on structuring
HTML content separately from the design elements defined in CSS.

11
 ● Responsive Design: CSS facilitates the creation of responsive web designs that adapt
smoothly to various screen sizes and devices, enhancing user experience and
accessibility.

● Consistency and Reusability: Style rules can be reused across multiple pages, ensuring
consistency in design elements. This reusability streamlines development, reduces
redundancy, and simplifies updates.

● Accessibility Enhancement: CSS supports accessibility features, allowing developers to

create web content that is more navigable and readable for users with disabilities, thereby
improving inclusivity.

● Browser Compatibility: CSS aids in cross-browser compatibility, enabling websites to

display consistently across various browsers, ensuring a uniform user experience for all
visitors.

● Enhanced User Experience: Through CSS, developers can implement animations,

transitions, and other effects, enhancing user engagement and interaction on websites.

● Adaptability to New Technologies: CSS evolves continuously, with updates introducing

new features and capabilities. This adaptability allows developers to leverage the latest
advancements in web design and development.

3.3 JAVASCRIPT:

JavaScript is a versatile and essential programming language used primarily for web
development, allowing developers to create dynamic and interactive content on web pages. As a
client-side scripting language, it runs within a user's web browser, enabling actions and
modifications on web pages in real-time. JavaScript empowers developers to build engaging user
interfaces, validate form inputs, manipulate data asynchronously, and create interactive elements
such as games, maps, and responsive features.

12
 Its widespread use in web development frameworks like React, Angular, and Vue.js
demonstrates its significance in modern web applications. Additionally, JavaScript has expanded
its reach beyond the browser with platforms like Node.js, enabling server-side scripting,
facilitating full-stack development, and allowing JavaScript to run on servers, thus unifying
development environments. With its rich ecosystem of libraries and frameworks, JavaScript
remains a cornerstone in shaping the dynamic and interactive nature of the modern web.

3.3.1 Features of Javascript:

● Client-Side Scripting: Executes scripts within a user's web browser, allowing dynamic
modifications to web pages without requiring server interaction, enhancing interactivity
and responsiveness.

● Versatility: Supports various programming paradigms including procedural,

object-oriented, and functional programming, enabling diverse coding approaches for
developers.

● Asynchronous Programming: Facilitates asynchronous operations through callbacks,

promises, and async/await, allowing non-blocking execution for tasks like fetching data,
enhancing performance.

● DOM Manipulation: Enables interaction with the Document Object Model (DOM),
allowing developers to modify HTML and CSS, dynamically update content, and respond
to user actions.

● Frameworks and Libraries: Boasts a rich ecosystem of frameworks (e.g., React,

Angular, Vue.js) and libraries (e.g., jQuery) simplifying development, aiding in building
complex applications efficiently.

13
 ● Event Handling: Allows developers to create event-driven functionalities, responding to
user actions like clicks, keypresses, and mouse movements, enhancing interactivity.

● Cross-Browser Compatibility: Ensures compatibility across various web browsers,

enabling consistent behavior and functionality across different platforms.

● Server-Side Development (Node.js): Extends JavaScript's capabilities to server-side

scripting with platforms like Node.js, enabling full-stack development and unifying
development environments.

● Community and Updates: Benefits from a vast developer community contributing to

continuous updates, enhancing language features, security, and performance.

3.3.2 Applications of Javascript:

● Web Development

● Web Applications

● Mobile Applications

● Server Applications

3.4 Bootstrap:

Bootstrap is a popular, open-source front-end framework used for developing responsive

and mobile-first websites and web applications. Developed by Twitter, Bootstrap offers a
collection of pre-built tools, CSS, and JavaScript components, streamlining the web development
process. It simplifies the creation of sleek and consistent designs by providing ready-to-use

14
templates, grid systems, typography, and reusable UI components like buttons, forms, navigation
bars, and modals.

The framework's responsive design features ensure that websites are optimized for
various devices, automatically adjusting to different screen sizes. With its extensive
documentation and robust community support, Bootstrap enables developers, even those with
minimal design skills, to build aesthetically pleasing and functional websites efficiently.
Additionally, Bootstrap's flexibility allows customization through themes, plugins, and
extensions, making it a go-to choice for both beginners and experienced developers seeking rapid
development and consistency in their projects.

3.4.1 Features of Bootstrap:

● Responsive Grid System: Offers a responsive, mobile-first fluid grid layout system that
scales content and components proportionally to the device's screen size, ensuring
compatibility with various devices.

● Pre-designed UI Components: Provides a wide range of pre-styled and reusable

components such as buttons, forms, navigation bars, cards, modals, and carousels,
facilitating faster development without the need for extensive coding.

● Customizable Themes: Allows customization through themes, enabling developers to

modify colors, typography, and other design elements to create unique and personalized
interfaces.

● Extensive Documentation: Comprehensive and well-organized documentation,

accompanied by examples and guidelines, simplifies the learning process and assists
developers in using Bootstrap effectively.

15
● JavaScript Plugins: Bundles various JavaScript plugins, including dropdowns, modals,
tooltips, carousels, and more, offering interactive elements and enhanced functionalities
without extensive coding.

● Cross-Browser Compatibility: Ensures consistent performance across different

browsers, reducing compatibility issues and providing a uniform user experience.

● Flexibility and Customization: Allows customization by selectively including

components, enabling developers to create tailored designs while utilizing Bootstrap's
core functionalities.

16
 CHAPTER 4: OUTCOME OF THE INTERNSHIP

We have learned how to work with a team of developers and trainers as well as take tasks
from senior developers (OR) trainers and complete them under time limits. One of the many
great teachings includes not following blind orders, we were fortunate enough to give our
opinions and critics constructively keeping the benefits of the project in mind and our poons
were heard and discussed and some were implemented.

Things we learned during our Internship:

● Learned how to use and implement HTML, CSS & JavaScript inter our project along
with the use of Bootstrap Framework.

● Centralizing Front-End & Back-End projects.

● Write reusable components.

● Produce clean, efficient code based on specifications and determine operational

practicality.

● Create technical documentation for reference and assist to prepare reports on

programming project specifications activities or status

● Consulted the Lead to evaluate software-hardware interfaces and develop specifications

and performance requirements

● Managing time (College and Internship),

17
 CHAPTER 5: SOURCE CODES

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.welcome-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f2f2f2;
}
.container {
text-align: center;
}
h1 {
color: #646464;
}
p{
font-size: 18px;
color: #646464;

18
.project-box {
background-color: #393E46;
border-radius: 10px;
padding: 20px;
text-align: center;
flex: 1;
margin: 0 10px;
transition: transform 0.3s;
display: flex;
justify-content: space-between;
margin: 20px 0;
<h2>Mohammed Hussain Abid Khan</h2>
<p class="roles">˗ˏˋ ★ ˎˊ˗ Guider, Designer, Blogger ˗ˏˋ ★ ˎˊ˗</p>
<div class="additional-info">
<p class="rounded-border"> ✩°｡ Age: 21</p>
<p class="rounded-border"> ✩°｡ Hobby: Designing and Sketching</p>
<p class="rounded-border">✩°｡ Born: Saudi Arabia, Riyadh</p>
<div class="social-links">
<a
href="https://www.linkedin.com/in/mohammed-hussain-abid-khan-47a480252/?lipi=urn%3Ali%
3Apage%3Ad_flagship3_feed%3BXax8iJ%2BKQ56np%2FlcIA4wyA%3D%3D"
<div class="projects-section">
<p>Projects ★⌒ヽ(´ ❥ `)</p>
<div class="project-boxes">
<div class="project-box project-box1">
<p class="project-title">Website Design: HackEnvision'23</p>
<a class="project-link"
href="https://www.figma.com/file/YAv2c3XZ3IDSv5JK7KocSl/HackEnvision?node-id=0%3A1
&t=FWpJOvhdm6kyylzo-1"
target="_blank">View</a>
</div>

19
<div class="project-box project-box2">
<p class="project-title">App Design_1: NSAKCET Mobile App UI</p>
<a class="project-link"
href="https://www.figma.com/file/TRH5VwpfRkYCGlSue3opeE/College?node-id=0%3A1&t=F
WpJOvhdm6kyylzo-1"
target="_blank">View</a>
<!-- Connect with Me? Section -->
<div class="connect-section">
<i class="fas fa-envelope email-logo"></i>
<p class="email-text">mohammedhussainguider@gmail.com</p>
</div>
<!-- Footer Section -->
<div class="footer">
Website made by Mohammed Hussain Abid Khan<br>
Love You Mom[☾⋆｡ 𖦹 °✩]
</div>
</body>
</html>

20
CHAPTER 6: OUTPUT SCREENS

Fig 6.1: Home-Section

Fig 6.2: About-Section

21
 Fig 6.3: Project-Section

Fig 6.4: Blog & Contact Us-Section

22
Fig 6.5: Unit Converter-Section

Fig 6.6: Covid-19 Dashboard

23
 CHAPTER 7: CONCLUSION AND FUTURE ENHANCEMENTS

7.1 Conclusion:

We hereby conclude, by saying that joining Pantech E Learning Pvt Limited and being a
part of the team for the period 45-Days was undoubtedly an amazing experience.

We have learned how to work with a team of developers and take tasks from trainers and
complete them under time limits. One of the many great teachings includes not following blind
orders, we were fortunate enough to give our opinions and criticize constructively keeping the
benefits of the project in mind and our points were heard and discussed and some were
implemented.

We found it very helpful to do this Internship from CodeClause. This was our first-time
experience to be enrolled in any such experience. Our concern was whether this company will be
able to come up to our expectations as students and newbies, We can state with affirmation that
what we have learned from them is going to stay with This Internship course has taught us quite
important topics in associations to the present dal The overall experience was positive, und
everything we have learned will be useful in our future well as in our careers in this field.

7.2 Future Enhancements:

● The future enhancements for our web app can be done by us as well as by other
developers too since the web app is open source.

● Establish a well settled community of web developers.

● Create guide maps for the newbies.

24
● Implement our own IDE to run these JavaScript Projects.

● Improve the overall structure and user interface of the website.

25
 CHAPTER 8: REFERENCES

8.1 Book References:

● Jon Duckett, (2018), HTML and CSS Design and Build Website.

● Marjim Haverbeke, (2014), Eloquent Javascript.

● Jake Spurlock (2013), Bootsrap Responsive Web Development.

● David Hermn, (2016) Nodejs Web Development-Third Edition.

8.2 Referral Link:

● https://www.geeksforgeeks.org/roadmap-to-become-a-web-developer-in-2022/

● https://roadmap.sh/javascript

● https://getbootstrap.com/

26