B.K. BIRLA INSTITUTE OF ENGG.

AND TECHNOLOGY

PROJECT REPORT

ON

PERSONAL PORTOFOLIO WEBSITE

BY

ANIKET GUPTA

DEPARTMENT

OF

COMPUTER SCIENCE ENGINEERING

CSE
B.K. BIRLA INSTITUTE OF ENGINEERING AND
TECHNOLOGY

In partial fulfilment of the requirements for the award of the

Degree

of

BACHELOR OF TECHNOLOGY
1
2
3
 B.K. BIRLA INSTITUTE OF ENGINEERING &TECHNOLOGY

PILANI - 333031 (RAJ)

DEPARTMENT OF COMPUTER SCIENCE AND ENGG.

DECLARATION

I ANIKET GUPTA (19EBKCS017) student of 7th semester,

B.TECH, Computer Science and Engineering, B.K. Birla Institute
of Engineering & Technology, Pilani, hereby declare that the
internship report entitled "Full Stack Development" is a bonafide
work carried out by me independently under the guidance of Prof. Josh
Werner, Learn Tec, in partial fulfilment for the award of the degree of
Bachelor of Engineering in Computer Science & Engineering of the B.K.
Birla Institute of Engineering & Technology, Pilani, during the
academic year 2022- 20

ANIKET GUPTA

[ 19EBKCS017]
4
 ACKNOWLEDGEMENT
The Internship would not have been possible without the
guidance, assistance and suggestions of many individuals I
would like to express my deep sense of gratitude and
indebtedness to each and every one who has helped me to make
this Internship a success.

I heartily thank my beloved Principal Dr L. Solanki for his

whole hearted support and for his kind permission to undergo
the Internship.

I wish to express my deepest gratitude to Dr Y. K. Gupta Head

of Department, Computer Science and Engineering. VVCE for
their constant encouragement and inspiration in taking
up this Internship.

I gracefully thank my guide, Prof. Reena Saini Assistant

Professor. Department of Computer Science and Engineering
and Prof. Ramakant Soni & Prof. Josh Werner for their
encouragement and advice throughout the course of the
Internship.

ANIKET GUPTA

[ 19EBKCS017]

ABSTRACT
5
This Personal Portfolio Website project is based on Web
Development. This is developed using HTML5, CSS and JS.
Code Editor used for this project is VS Code. It displays the
professional background of an individual. It displays brief
information about work experiences till date, education, skills
and contact details along with social media links. All the
elements are rendered distinctively on the website.

CONTENTS

6
 INDEX PAGE NO.
1. ACKNOWLEDGEMENT 5

2. ABSTRACT 6

3. LIST OF FIGURES 9

4. LIST OF SYMBOLS & ABREVATION 10

5. INTRODUCTION 11-15
 OBJECTIVES 11
 HOME SECTION 12
 ABOUT SECTION 13
 SKILLS SECTION 14
 CONTACT SECTION 15

6. DEVELOPING TOOLS/SOFTWARE 16-30

 BASIC HTML 16
 BASIC CSS 19
 BASIC JAVASCRIPT 27
 BASIC BOOTSTRAP 28
 RESPONSIVE DESIGN 29-30
7. SIGNIFICANCE 31
8. CONCLUSION 32

7
9. CHALLENGES 33
10. REFERANCES 34

8
A. LIST OF FIGURES

 HOME SECTION

 ABOUT SECTION

 SKILLS SECTION

 CONTACT DETAILS SECTION

9
 LIST OF SYMBOLS, ABBREVIATIONS
AND NOMENCLATURE

ABBREVIATIONS

1. IDE- INTEGRATED DEVELOPMENT ENVIRONMENT

2. HTML- HYPER TEXT MARKUP LANGUAGE

3. CSS- CASCADING STYLING SHEET

4. JS- JAVASCRIPT

5. VS CODE- VISUAL STUDIO CODE

10
 INTRODUCTION

Personal Portfolio Website provides brief information about the

professional background of an individual. This project
comprises of three files. First is an HTML file for creating
markup of the application on the web. Then CSS file is used to
provide more styles to the website. Then JS file is used to give a
proper functionality to the application through JavaScript.

A. OBJECTIVES

i. ELEMENTS RENDERED DISTINCTLY

ii. BRIEF INFORMATION ABOUT:

- WORK EXPERIECE

- EDUCATION

- CONTACTING WAYS

- SKILLS

11
 B.HOME SECTION

It displays my name, my current work status and where I am

from. On the top it also has navigation bar which displays other
tabs of my website and my contact detail shortcuts on top light.

12
 C. ABOUT SECTION

It displays a quick introduction for me a button also provided to

view my resume. The navigation bar has sticky property which
make visible even after scrolling down.

13
 D. SKILLS SECTION

It displays my technical skills with my technical proficiency

displayed as percentage for each technology and my current
work experience.

14
 E.CONTACT DETAILS SECTION

THIS SECTION HAS ALL THE LINKS LISTED BELOW:

 WHATSAPP
 CALL
 MAIL
 INSTAGRAM
 LINKED IN

A.

15
 SOFTWARE USED
Code Editor I used for this projects VS Code. It is used to code
complex piece of programs and to develop complex projects.
Further technologies I used for this project are
HTML5, CSS and JS.

 2.1 HTML5

HTML5 is a language designed to organize web content. It is

intended to make web design and development easier by
creating a standardized and intuitive UI markup language.
HTML5 provides the means to dissect and compartmentalize
your pages, and it allows you to create discrete components that
are not only designed to organize your site logically but are also
created to give your site syndication capabilities. HTML5 could
be called the "information mapping approach to website design"
because it incorporates the essence of information mapping,
dividing and labelling information to make it easy to use and
understand. This is the foundation of HTML5's dramatic
semantic and aesthetic utility. HTML5 gives designers and
developers of all levels the ability to publish to the world
everything from simple text content to rich, interactive
multimedia.

16
HTML5 provides effective data management, drawing, video,
and audio tools. It facilitates the development of cross-browser
applications for the web as well as portable devices. HTML5 is
one of the technologies driving the advances in mobile cloud
computing services, as it allows for greater flexibility,
permitting the development of exciting and interactive websites.
It also introduces new tags and enhancements, including an
elegant structure, form controls, APIs, multimedia, database
support, and significantly faster processing speed.

The new tags in HTML5 are highly evocative, encapsulating

their role and use. Past versions of HTML used rather
nondescript tags. However, HTML5 has highly descriptive,
intuitive labels. It provides rich content labels that immediately
identify the content. For example, the overworked <div> tag has
been supplemented by the <section> and <article> tags. The
addition of the <video>, <audio>, <canvas>, and <figure> tags
also provides a more precise description of the specific type of
content.

HTML5 provides:

 Tags that describe exactly what they are designed to

contain.

17
 Enhanced network communications.

 Greatly improved general storage.

 Web Workers for running background processes.

 The WebSocket interface to establish continuous

connection between the resident application and the server.

 Better retrieval of stored data.

 Improved page saving and loading speeds.

 Support for CSS3 to manage the GUI, which means that

HTML5 can be content oriented.

 Improved browser form handling.

 An SQL-based database API that allows client-side, local

storage.

 Canvas and video, for adding graphics and video without

installing third-party plug-ins.

18
  The Geolocation API specification, which uses smart
phone location capabilities to incorporate mobile cloud
services and applications.

 Enhanced forms that reduce the need to download

JavaScript code, allowing more efficient communication
between mobile devices and cloud servers.

HTML5 creates a more engaging user experience: Pages

designed using HTML5 can provide an experience similar to
desktop applications. HTML5 also provides enhanced multiple
platform development by combining the capability of APIs with
the ubiquity of the browser. Using HTML5, developers can
provide a modern application experience that smoothly crosses
platforms.

 2.2 CSS3

The fundamentals of CSS into digestible, easy to understand

pieces. Over the next few modules, you'll learn how the core
aspects of CSS work and how to use them effectively in your
projects. Use the menu pane by the "Learn CSS" logo to
navigate the modules.

19
You'll learn CSS fundamentals like the box model, cascade and
specificity, flexbox, grid and z-index. And, along with these
fundamentals, you'll learn about functions, color types,
gradients, logical properties and inheritance to make you a well-
rounded front-end developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments

for you to test your knowledge. In addition to learning through
reading and demos, there is an accompanying podcast episode
for each topic as another way to learn and continue expanding
your knowledge.

This course is created for beginner and advanced CSS

developers alike. You can go through the series from start to
finish to get a general understanding of CSS from top to bottom,
or you can use it as a reference for specific styling subjects. For
those new to web development overall, check out Learn HTML
to learn all about how to write markup and link your stylesheets.

Here's what you'll learn:

 Box Model
Everything displayed by CSS is a box. Understanding how
the CSS Box Model works is therefore a core foundation
of CSS.

20
  Selectors

To apply CSS to an element you need to select it. CSS provides

you with a number of different ways to do this, and you can
explore them in this module.

 The cascade

Sometimes two or more competing CSS rules could apply to an

element. In this module find out how the browser chooses which
to use, and how to control this selection.

 Specificity

This module takes a deeper look at specificity, a key part of the

cascade.

 Inheritance

Some CSS properties inherit if you don't specify a value for

them. Find out how this works, and how to use it to your
advantage in this module.

21
  Color

There are several different ways to specify color in CSS. In this

module we take a look at the most commonly used color values.

 Sizing Units

In this module find out how to size elements using CSS,

working with the flexible medium of the web.

 Layout

An overview of the various layout methods you have to choose

from when building a component or page layout.

 Flexbox

Flexbox is a layout mechanism designed for laying out groups

of items in one dimension. Learn how to use it in this module.

 Grid
CSS Grid Layout provides a two dimensional layout
system, controlling layout in rows and columns. In this
module discover everything grid has to offer.

22
  Logical Properties

Logical, flow relative properties and values are linked to the

flow of text, rather than the physical shape of the screen. Learn
how to take advantage of this newer approach to CSS.

 Spacing

Find out how to select the best method of spacing elements,

taking into consideration the layout method you are using and
component that you need to build.

 Pseudo-elements

A pseudo-element is like adding or targeting an extra element

without having to add more HTML. They have a variety of roles
and you can learn about them in this module.

 Pseudo-classes

Pseudo-classes let you apply CSS based on state changes. This

means that your design can react to user input such as an invalid
email address.

23
  Borders

A border provides a frame for your boxes. In this module find

out how to change the size, style and color of borders using
CSS.

 Shadows

There are a number of ways to add shadows to text and elements

in CSS. In this module you'll learn how to use each option, and
the tasks they were designed for.

 Focus

Understand the importance of focus in your web applications.

You'll find out how to manage focus, and how to make sure the
path through your page works for people using a mouse, and
those using the keyboard to navigate.

 Z-index and stacking contexts

In this module find out how to control the order in which things
layer on top of each other, by using z-index and the stacking
context.

24
  Functions

CSS has a range of inbuilt functions. In this module you will

find out about some of the key functions, and how to use them.

 Gradients

In this module you will find out how to use the various types of
gradients available in CSS. Gradients can be used to create a
whole host of useful effects, without needing to create an image
using a graphics application.

 Animations

Animation is a great way to highlight interactive elements, and

add interest and fun to your designs. In this module find out how
to add and control animation effects with CSS.

 Filters

Filters in CSS mean that you can apply effects you might only
think possible in a graphics application. In this module, you can
discover what is available.

25
  Blend Modes

Create compositional effects by mixing two or more layers, and

learn how to isolate an image with a white background in this
module on blend modes.

 Lists

A list, structurally, is composed of a list container element filled

with list items. In this module, you'll learn how to style all the
parts of a list.

 Transitions

In this module, learn how to define transitions between states of

an element. Use transitions to improve user experience by
providing visual feedback to user interaction.

 Overflow

Overflow is how you deal with content that doesn’t fit in a set
parent size. In this module, you’ll think outside the box, and
learn how to style overflowing content.

26
  Backgrounds

In this module learn the ways you can style backgrounds of

boxes using CSS.

 Text and typography

In this module, learn how to style text on the web.

 2.3 JAVASCRIPT

 Functions Are Independent Units of Behaviour.

Functions are units of behavior, but the important part here is

that they are independent. In other languages like Java or C#,
functions must be declared inside a class. This is not the case in
JavaScript.

Functions can be declared in the global scope or defined inside a

module as independent.

 Objects Are Dynamic Collections of Props

Objects are indeed just a collection of properties. In other

languages, they are called maps, hash maps, or hash tables.

27
They are dynamic in the sense that, once created, properties can
be added, edited, or deleted.

 Objects Inherit From Other Objects

If you are coming from class-based languages like Java or C#,

you may be used to classes inheriting from other classes. Again,
that is not the case in JavaScript.

Objects inherit from other objects called prototypes.

As mentioned earlier, in this language, objects are collections of

properties. When creating an object, it has a “hidden” property
called _proto_ that keeps a reference to another object. This
referenced object is called a prototype.

 Functions Are Values

Functions are values in JavaScript. Like other values, they can

be assigned to variables:

const sum = function(x,y){ return x + y }

This is not something that can be done in any other language.

28
Like other values, functions can be passed to different functions
or returned from functions. Below is an example of a function
returning another function.

 Functions Can Become Closures

Functions can be defined inside other functions. The inner

function can reference variables from the other functions.

What’s more, the inner function can reference variables from the
outer function after the outer function has executed.

 Primitives Are Treated as Objects

JavaScript gives the illusion that primitives are objects by

treating them as such. The fact is that primitives are not objects.
Primitives are not collections of properties.

 JavaScript Is a Single-Threaded Language

JavaScript is single-threaded. That means only one statement is

executed at a specific time.

Two functions cannot execute at the same time in the main

thread.

You may have heard about options for executing functions in

parallel like web workers, but workers do not share data with the
29
main thread. They communicate only by message passing —
nothing is shared.

This makes things easier to understand and we just have to pay

attention to make functions run fast. A function that takes a long
time to execute will make the page unresponsive.

30
 SIGNIFICANCE

Significance of personal portfolio is that it presents your

work that represents your performance and skills as well
as strengths and weaknesses. The culmination of work
that is represented in a portfolio allows peers, mentors
and potential employers to get an understanding of you
as a student, your passions and your work

31
 CHALLENGES
Challenges faced during this project were:

1. Linking Google drive files like my images and

my documents.

2. Spacing out the elements properly using CSS.

3. Choosing background was a major challenge as it

had to be both formal and soothing to eyes.

32
 CONCLUSION

At last to conclude, I have developed a simple and basic

Personal Portfolio Website using HTML5, CSS,
JavaScript using VS Code as IDE which I would continue
to maintain in future too.

33
 REFFERANCES

 UDEMY COURSE:
Front End Web Development Ultimate Guide, By Josh
Warner and Learn Tec & React JS- Complete Guide For
Front End Web Development - It taught all the three
languages HTML5, CSS and JS thoroughly.

 Stack Overflow:
How to modify Google drive links to embed in
anchor tag in HTML.

W3 Schools:
How to give all social media and contacting links.

34