IBM SKILLS BUILD

FRONT-END DEVELOPMENT
INTERNSHIP
A Internship Report Submitted at the end of seventh semester

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING

Submitted By

CHINMAYI THIRUMALA

(20981A0535)

Under the esteemed guidance of

IBM SKILLS BUILD

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

RAGHU ENGINEERING COLLEGE

(AUTONOMOUS)
Affiliated to JNTU GURAJADA,VIZIANAGARAM
Approved by AICTE, Accredited by NBA, Accredited by NAAC with A grade
www.raghuenggcollege.com
2023-2024
 RAGHU ENGINEERING COLLEGE
(AUTONOMOUS)
Affiliated to JNTU GURAJADA,VIZIANAGARAM

Approved by AICTE, Accredited by NBA, Accredited by NAAC with A grade

www.raghuenggcollege.com

2023-2024

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that this project entitled “Front-End development” done by “CHINMAYI
THRIUMALA (20981A0535)” is a student of B.Tech in the Department of Computer Science and Engineering,
Raghu Engineering College, during the period 2020-2024, in partial fulfillment for the award of the Degree of
Bachelor of Technology in Computer Science and Engineering to the Jawaharlal Nehru Technological University,
Gurajada Vizianagaram is a record of bonafide work carried out under my guidance and supervision.
The results embodied in this internship report have not been submitted to any other University or Institute
forthe award of any Degree.

Internal Guide Head of the Department

Mr.K L Ganapathi Reddy, Dr.R.Sivaranjani,
Dept of CSE, Dept of CSE,
Raghu Engineering College Raghu Engineering College
Dakamarri (V), Dakamarri (V),
Visakhapatnam. Visakhapatnam.

EXTERNAL EXAMINER
i
 DISSERTATION APPROVAL SHEET
This is to certify that the dissertation titled
PORTFOLIO WEBSITE
BY
CHINMAYI THIRUMALA (20981A0535)

Is approved for the degree of Bachelor of Technology

PROJECT GUIDE
Designation

Internal Examiner

External Examiner

HOD

Date:

ii
 DECLARATION

This is to certify that this internship titled “Front-End development” is bonafied work
done by my me, impartial fulfillment of the requirements for the award of the degree B.Tech and
submitted to the Department of Computer Science and Engineering, Raghu Engineering
College, Dakamarri.
I also declare that this internship is a result of my own effort and that has not been copied
from anyone and I have taken only citations from the sources which are mentioned in the
references.
This work was not submitted earlier at any other University or Institute for the reward of
any degree.

Date:
Place:

CHINMAYI THIRUMALA

(20981A0535)

iii
CERTIFICATE

iv
 ACKNOWLEDGEMENT

I express sincere gratitude to my esteemed Institute “Raghu Engineering College”, which

has provided us an opportunity to fulfill the most cherished desire to reach my goal.

I take this opportunity with great pleasure to put on record our ineffable personal
indebtedness to Mr. Raghu Kalidindi, Chairman of Raghu Engineering College for providing
necessary departmental facilities.

I would like to thank the Principal Dr. CH. Srinivasu of “Raghu Engineering College”,
for providing the requisite facilities to carry out projects on campus. Your expertise in the subject
matter and dedication towards our project have been a source of inspiration for all of us.
I sincerely express our deep sense of gratitude to Dr.R.Sivaranjani, Professor, Head of
Department Department of Computer Science and Engineering, Raghu Engineering College, for
her perspicacity, wisdom and sagacity coupled with compassion and patience. It is my great
pleasure to submit this work under her wing. I thank for guiding us for the successful completion
of this project work.

I would like to thank Mr. Channabasava Yadav, IBM Edunet Foundation for
providing the technical guidance to carry out module assigned. Your expertise in the subject
matter and dedication towards our project have been a source of inspiration for all of us.

I extend my deep hearted thanks to all faculty members of the Computer Science
department for their value based imparting of theory and practical subjects, which were used in
the project.

I thank the non-teaching staff of the Department of Computer Science and Engineering,
Raghu Engineering College, for their inexpressible support.

Regards
CHINMAYI THIRUMALA
(20981A0535)
v
 TABLE OF CONTENTS

S.NO CONTENT PAGE NUMBER

1. INTRODUCTION 7

2. PROBLEM STATEMENT 8

3. SYSTEM REQUIREMENTS 9

4. SYSTEM DESIGN 10

5. IMPLEMENTATION 11

6. RESULTS 13

7. TESTING 16

8. CONCLUSIONS 19

vi
 INTRODUCTION

In an increasingly digital world, a portfolio website is a cornerstone for showcasing one's

skills, accomplishments, and creative work. This project aims to design and develop a
responsive portfolio website that adapts seamlessly to various screen sizes and devices.
This abstract provides an overview of the project's key components, including the design,
technical implementation, and the incorporation of best practices in web development.
The result will be a portfolio website that not only effectively represents the creator's work
but also aligns with modern web design standards, accommodating the diverse needs of
visitors, whether they access the site on a desktop computer, tablet, or smartphone. The
project embodies the intersection of creativity and technology, reflecting the importance of a
strong digital presence in today's interconnected world.

A portfolio website is a crucial tool for showcasing one's skills, achievements, and projects.
It serves as a digital representation of an individual or business and plays a significant role in
personal branding and professional networking. This literature review aims to explore key
aspects of portfolio website development and design, responsive design, accessibility, and
best practices. Developing an effective portfolio website requires a deep understanding of user
experience, responsive design, accessibility, and best practices in web development. Research
in these areas provides valuable insights into creating a website that not only showcases one's
work effectively but also ensures a positive user experience. As the digital landscape evolves,
staying up-to-date with the latest research and best practices is crucial for designing and
maintaining a successful portfolio website.

Keywords: responsive, best practices, moder web design standards

vii
 PROBLEM STATEMENT

In the evolving landscape of digital professions, individuals aiming to establish

a successful career in front-end development faces a challenge in effectively
showcasing their skills, projects, and capabilities to potential employers or clients.

The absence of a well-designed and user-friendly portfolio website hinders their

ability to make a compelling first impression, and effectively represent their
unique personal brand, and stand out in a competitive market.

Therefore, there is a need to design and develop an engaging and responsive

a frontend portfolio website that not only serves as a comprehensive display
of the developer's technical proficiency but also prioritizes user experience,
visual appeal, and an authentic representation of their personal and
professional identity.

This project aims to address these challenges by creating a platform that enables
developers to effectively market their skills present their portfolios and enhance
their opportunities for career advancement or freelance engagements.

8
 SYSTEM REQUIREMENTS

Software Requirements:

1. Text Editor: A text editor to create, change, edit, open, and view HTML, CSS, and

Javascript files (Visual Studio)

2. Web Browser: A web browser to test your pages for appearance and function (Brave

Browser)

3. Host: A static web hosting service that takes HTML, CSS, and Javascript files, runs
the files through a build process, and publishes a website (GitHub Pages)

Hardware Requirements:

1. Processor (CPU): Minimum: 2.7 GHz 64-bit dual-core processor

Recommended: 2.7 GHz 64-bit quad-core processor

2. RAM : 8 Gigabytes

3. Hard Disk : 3 Gigabytes

4. Display : Minimum: 1280 x 1024 24-bit

Recommended: 1600 x 1200 True Color 32-bit

9
 SYSTEM DESIGN

The admin’s portfolio consists of a home, about, certifications, skills, and contact sections.

The user can view the profile of the admin.

The user can interact and view the home, about, certifications, skills, and contact sections.

10
 IMPLEMENTATION
Step 1: Create a basic structure of the webpage using HTML
Step 2: Add styling to the webpage using CSS
Step 3: Create a GitHub repository and store the HTML and CSS files
Step 4: Host the website using GitHub Pages

11
The following are the contents of the portfolio website:

Navigation Bar:
The Navigation Bar consists of 5 sections:
Home, About, Certifications, Portfolio, and Contact, using which the user can navigate to
different sections of the website seamlessly without the need to scroll through each section
individually.

The Portfolio Website consists of 5 sections/modules:

1. Home Section:
The Home section is the welcome page of the portfolio website which displays a welcome
message to the user.
2. About Section:
The About section displays the personal and academic information of the owner of the
website
3. Certifications section:
The Certifications section displays information regarding the various certificates earned by
the individual in the form of cards.
4. Portfolio Section:
The Portfolio section displays the skill level of the individual in the form of cards
5. Contact Section:
The Contact section consists of a map that shows the location of the residence of the owner
of the website and a form for the user to submit in order to be able to contact the owner of
the website.

12
RESULTS

13
14
15
 TESTING

Unit Testing:

Testing individual units or components of code to ensure they function correctly.

16
17
Functional Testing:

Navigation: Verifying if the navigation links lead to the correct sections.

Live URLs: Testing if the Live URLs redirect to the accurate pages.

Performance Testing:

Site speed: To verify the average load time for desktops and mobile sites and the speed for return
visitors.

Compatibility: To test if the website performs across multiple browsers, platforms, and devices

Images: To verify if the images load correctly on every device and browser

18
 CONCLUSION

In conclusion, the identified challenges in the realm of front-end development

underscore the critical importance of a well-crafted and user-centric portfolio
website for individuals aspiring to thrive in this dynamic field.

The limitations faced by frontend developers in effectively showcasing their

skills and unique personal brand present an opportunity for the creation of a
purposeful solution.

By designing and developing an engaging, responsive, and visually appealing

front-end portfolio platform, this project endeavors to empower developers to
overcome these obstacles. Such a platform not only serves as a showcase of
technical proficiency but also as a personalized representation of identity and
expertise.

Through this initiative, front-end developers can enhance their prospects by

making impactful first impressions, standing out in a competitive landscape,
and maximizing opportunities for career advancement or freelance
engagements.

As the project progresses, it is anticipated that the resulting portfolio websites

will contribute to the success and recognition of front-end developers in the
ever-evolving digital professions.

19