A

Summer Internship
Report On
“Website Development”
(CE346 – Summer Internship - I)

Prepared by
Vedika Bhalodi (21CE010)

Under the Supervision of

Prof. Aayushi Chaudhari

Submitted to
Charotar University of Science & Technology
(CHARUSAT) for the Partial Fulfillment of the
Requirements for the Degree of Bachelor of Technology
(B.Tech.)
for Semester 5

Submitted at

Accredited with Grade A by

NAAC Accredited with Grade A
by KCG

U & P U. PATEL DEPARTMENT OF COMPUTER ENGINEERING

Chandubhai S. Patel Institute of Technology (CSPIT)
Faculty of Technology & Engineering (FTE),
CHARUSAT At: Changa, Dist: Anand, Pin: 388421.
July 2023
 Accredited with Grade A by NAAC
Accredited with Grade A by KCG

This is to certify that the report entitled “Website Development” is a bonafied work
carried out by Vedika Bhalodi (21CE010) under the guidance and supervision of
Prof. Aayushi Chaudhari, Assistant Professor / Mr./Ms. Name of External
Guide for the subject Summer Internship – I (CE346) of 5th Semester of Bachelor
of Technology in Computer Engineering at Chandubhai S. Patel Institute of
Technology (CSPIT), Faculty of Technology & Engineering (FTE) – CHARUSAT,
Gujarat.

To the best of my knowledge and belief, this work embodies the work of candidate
herself, has duly been completed, and fulfills the requirement of the ordinance relating
to the B.Tech. Degree of the University and is up to the standard in respect
ofcontent, presentation and language for being referred by the examiner(s).

Under the supervision of,

Prof. Aayushi Mr./Ms. Name of External Guide

Chaudhari Assistant Designation
Name of Department
Professor Name of Company
U & P U. Patel Dept. of Computer Engineering
CSPIT, FTE, CHARUSAT, Changa, Gujarat

Dr. Nikita Bhatt

Head - U & P U. Patel Department of Computer Engineering,
CSPIT, FTE, CHARUSAT, Changa, Gujarat.

Chandubhai S. Patel Institute of Technology (CSPIT)

Faculty of Technology & Engineering (FTE),
CHARUSAT At: Changa, Ta. Petlad, Dist. Anand, Pin: 388421.
Gujarat.
 Table of Contents
Abstract 1
Acknowledgment 2
Description of company/organization 3
Chapter 1 Introduction 4
1.1 Internship Objectives 4
1.2 Overview of Internship Activities 4
Chapter 2 Tools and Technologies 6
2.1 Introduction to HTML 5 6
2.2 Introduction to CSS3 6
2.3 Introduction to Bootstrap 5 7
2.4 Hardware Requirements 7
2.5 Software Requirements 8
Chapter 3 Task Description 9
3.1 Task 1 9
3.2 Task 2 11
3.3 Task 3 14
Chapter 4 Learning Experiences 17
4.1 Knowledge Acquired/Skills Learnt 17
4.2 Industry Practices Adapted 17
4.3 Real-time Applicability of Technologies Learnt 17
Chapter 5 Conclusion 18
References 19
 List of Figures
Fig 1 RFS (Responsive Fonts) 7
Fig 2.1 Home Page 9
Fig 2.2 Services Section 9
Fig 2.3 About Us 9
Fig 2.4 Footer 10
Fig 3.1 Header and Main page 11
Fig 3.2 Header and Main page 11
Fig 3.3 About Company 11
Fig 3.4 Services Section 12
Fig 3.5 About Us 12
Fig 3.6 More information about company 12
Fig 3.7 Footer 13
Fig 4.1 Header and Main page 14
Fig 4.2 New collection- All 14
Fig 4.3 New collection- Best seller 14
Fig 4.4 New collection- New arrival 15
Fig 4.5 About Us 15
Fig 4.6 Special selection 15
Fig 4.7 Latest offer and Blog 16
Fig 4.8 Footer 16
 List of Tables
Table 1 Overview of Internship Activities 5
Table 2.1 Task 1 9
Table 2.2 Task 2 11
Table 2.3 Task 3 14
 Abstract

The technologies which I have learned as a part of website development include HTML, CSS,
Bootstrap 5, and WordPress. I have learned these technologies from the start to explore more features
and new updates which proved beneficial to make unique website designs. I made a home page for a
website similar to the company’s website which I was working for. I made a home page of website for
the company with a different take and a whole new design. And also created another home page using
bootstrap 5 and exploring its new features.
 Acknowledgment

I am privileged to have this opportunity to express my gratitude and acknowledge everyone’s never-
ending support and valuable contributions to my learning. Prima facie, I would like to express my
sincere gratitude to Mr. Hemant Yadav, for the continuous support of my learning journey of
technology, and for his patience, motivation, and immense knowledge. My sincere thanks also go to
Principal Sir Dr. A.D Patel, HOD Sir Dr. Ritesh Patel, and Prof. Aayushi Chaudhari who provided us an
opportunity to work on a summer internship and to be able to present the same. Last, but not the least, I
would like to thank my friends and family for supporting me spiritually throughout this project and for
always being a constant source of inspiration. I also place on record, my sense of gratitude to one and
all, who directly or indirectly, have lent their hand in this venture.
 Description of Company/ Organization

True Code Masters is one of the trusted Web, Software, and Mobile App Development
Companies based in India, specializing in Microsoft ASP .NET Technologies, PHP
Development, CRM, SaaS, Enterprise Application Development, IOS, Android, and Hybrid
Mobile Applications. They have been able to build a massive reputation for themselves in the
digital world. Their team of development experts builds robust web, software, and mobile app
solutions that suit the needs of multiple users in a vertical place across different industries.
The Company has two offices located in Ahmedabad and Lucknow. They also have an office
in USA for the communication with their foreign clients.
Chapter 1 Introduction

1.1 Internship Objectives

The main purpose of this internship is to enhance professional and personal skill
development which enables us to gain a planned and directed learning experience. It
also enables us to integrate knowledge gained through their industry learning with
the competencies made available through actual experience in a professional setting.
The goals of this internship were:
 Learn and develop practical skills
 Gain a first-hand understanding of the inner workings of an organization
 Make a positive contribution to an organization
 Solve problems by taking initiative and using creativity
 Clarify career goals
 Observe and Learn ethics at work
 Observe and work with professionals in the field

1.2 Overview of Internship Activities

As an intern at True Code Masters, I got a list of tasks to complete every day.
The tasks I undertook included:
 Understanding the client’s requirement
 Working on a deadline
 Learning technology through videos & gaining help from colleagues
 Solving errors and analyzing the codes
 Implementing new updates and features in the making of the website.
 Date Day Name of Topic/Module
08/05/23 Monday Introduction to HTML5 from
Week 1 start and exploring new features
09/05/23 Tuesday Introduction to CSS3 from start
and exploring new features
10/05/23 Wednesday Start creating company’s
website
11/05/23 Thursday Main header and its features
12/05/23 Friday Error solving
Week 2 15/05/23 Monday Main content
16/05/23 Tuesday Adding Services Section
17/05/23 Wednesday Setting up icons
18/05/23 Thursday Solving formatting error
19/05/23 Friday Setting up functional buttons
Week 3 22/05/23 Monday Editing new blocks
23/05/23 Tuesday Adding footer
24/05/23 Wednesday Editing format of website
25/05/23 Thursday Creating different take on
company’s website
26/05/23 Friday Adding header
Week 4 29/05/23 Monday Adding About us content
30/05/23 Tuesday Adding services section
31/05/23 Wednesday Error solving
01/06/23 Thursday Adding images, icons, buttons
02/06/23 Friday Adding footer
Week 5 05/06/23 Monday Minor editing
06/06/23 Tuesday Start the complete bootstrap 5
framework
07/06/23 Wednesday Continuing exploring
08/06/23 Thursday New features
09/06/23 Friday Making modules with new
features examples
Week 6 12/06/23 Monday Starting new website from
scratch
13/06/23 Tuesday Experimenting and
understanding classes
14/06/23 Wednesday Adding header
15/06/23 Thursday Adding main content
16/06/23 Friday Editing

Table 1
Chapter 2 Tools and Technologies

2.1 Introduction to HTML 5

HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. Hypertext defines the link between the web pages. The
markup language is used to define the text document within the tag which defines the
structure of web pages. HTML 5 is the fifth and current version of HTML. It has
improved the markup available for documents and has introduced application
programming interfaces (API) and Document Object Models (DOM).

Features:
 It has introduced new multimedia features which support both audio and video
controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- This help to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the
web browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangles, rectangles, circles, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.

2.2 Introduction to CSS 3

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language

intended to simplify the process of making web pages presentable. CSS allows you
to apply styles to web pages. It describes how a webpage should look: it prescribes
colors, fonts, spacing, and much more. In short, you can make your website look
however you want. CSS lets developers and designers define how it behaves,
including how elements are positioned in the browser.

CSS3 has been split into "modules". It contains the "old CSS specification". In
addition, new modules are added. Some of the most important CSS3 modules are:

 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
  User Interface

2.3 Introduction to Bootstrap 5

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code

used for creating dynamic websites layout and web applications. Bootstrap is a
framework that is suitable for mobile-friendly web development. it means the code
and the template available on Bootstrap are applicable to various screen sizes.

Some important changes in Bootstrap 5:

1. Updated official documentation: Bootstrap docs have some nice padding
around the corners to make them more readable and highlight their content.

2. jQuery is removed completely: Earlier, bootstrap components like modals,

tooltips, popovers, etc, were dependent on jQuery and popper.js. After the
release of the alpha 5 version, Bootstrap no longer depends on jQuery.

3. Responsive Fonts: Bootstrap has introduced responsive font sizes which will
automatically resize the typography element according to the viewport size
through the RFS Engine. RFS engine was developed to resize font sizes. It
provides the facility to resize the CSS properties like “margin”, “padding”,
“border-radius”, and “box-shadow” by units.

Fig 1

4. Removed Cards: The new grid system of Bootstrap provides more responsive
control of the layout. Hence, they removed unnecessary extra classes which can
be designed by the new grid layout. The older versions of Bootstrap still
support card system.

5. Updated Forms: Bootstrap 5 has introduced a section completely dedicated to

Bootstrap forms with improved documentation and components. It now has a
single set of form controls and redesign existing elements instead of generating
new elements through pseudo-elements. Bootstrap forms give a better look
now.

2.4 Hardware Requirements

 Processor: Intel dual core or above your head

 Processor Speed: 1.0GHZ or above
  RAM: 4 GB RAM or above
 Hard Disk: 20 GB hard disk or above

CPU:
The central processing unit (CPU) is responsible for executing instructions and processing
data. The CPU requirements for a website depend on the complexity of the website and the
expected traffic. A website with complex scripts or heavy database usage will require a
more powerful CPU.

Ram:
Random access memory (dram) is used to store data and instructions for the CPU to
access quickly. The amount of ram required depends on the size of the website and the
expected traffic. A larger website with higher traffic will require more ram to handle the
load.

Storage:
Website require storage space to store their data and files. The amount of storage required
depends on the size of the website and the amount of data it stores. For example, a
website with a lot of images or videos will require more storage space.

Network:
A fast and stable internet connection is necessary to ensure the web loads quickly and
responds to user requests in a timely manner. The network requirements depend on
the expected traffic and the location of the server.

2.5 Software Requirements

 Tools: VS Code, GitHub

 Technology: HTML, CSS, Bootstrap

Web server:
A web server software such as Apache, oracle WebLogic is required to host a website.
The choice of web server software depends on the operating system and the programming
language used to develop the website.

Operating system:
The operating system (OS) on the server must be compatible with the website server
software and the programming languages used for the website. Common server
operating systems include windows server, Linux and Unix.

Programming languages:
Website can be developed using a variety of programming languages such as CSS,
html, java script and more. The programming languages used for a website depend on
the website's requirements and the developer's preferences.
Chapter 3 Task Description

3.1 Task 1

Task 1
Task Description Task given is to make same home page of website as the company’s
website.
Trigger Responsive Home Page
Basic Path Scrolling, Clicking
Post Condition Working, Responsive Home Page
Output
Screenshots

Fig 2.1

Fig 2.2

Fig 2.3
 Fig 2.4

Table 2.1
3.2 Task 2

Task 2
Task Description Task given is to make company’s website with a different take, similar to
it.
Trigger Responsive Home Page
Basic Path Scrolling, Clicking
Post Condition Working, Responsive home page
Output
Screenshots

Fig 3.1

Fig 3.2

Fig 3.3
Fig 3.4

Fig 3.5

Fig 3.6
 Fig 3.7

Table 2.2
3.3 Task 3

Task 3
Task Description Task given is to make a website using latest technology of Bootstrap 5.
Trigger Responsive Home Page
Basic Path Scrolling, Clicking
Post Condition Working, Responsive home page
Output
Screenshots

Fig 4.1

Fig 4.2

Fig 4.3
Fig 4.4

Fig 4.5

Fig 4.6
 Fig 4.7

Fig 4.8

Table 2.3
Chapter 4 Learning Experiences
4.1 Knowledge Acquired/Skills Learnt
 Customer-service skills
 Detail orientation
 Creativity
 Team Work
 Communication skills
 Time management
 Organizational skills

4.2 Industry Practices Adapted

 Testing modules
 Keeping track on work
 Fulfilling Deadlines
 Reviewing code

4.3 Real-time Applicability of Technologies Learnt

 Responsive Web designs
 Frontend Framework
 Support multimedia
 Platform Independent
 Make code easier, neater for users
Chapter 5 Conclusion
After completing an internship focused on technology training, it is clear that this
experience has been immensely valuable and rewarding. The internship provided an
excellent opportunity to gain practical knowledge, enhance technical skills, and
understand the dynamics of the technology industry. Here are some key
conclusions drawn from the experience:

Practical Application of Knowledge: The internship allowed me to apply

theoretical knowledge gained from academic studies to real-world projects. This
hands-on experience reinforced my understanding of various technological
concepts and frameworks, bridging the gap between theory
and practice.

Technical Skill Enhancement: Working on technology development projects enabled

me to sharpen my technical skills. I gained proficiency in programming languages,
software development methodologies, and tools specific to the industry. This
enhanced skill set will undoubtedly benefit me in future endeavors.

Collaboration and Teamwork: The internship provided an environment that fostered

collaboration and teamwork. Working alongside experienced professionals and fellow
interns helped me understand the importance of effective communication,
coordination, and sharing idea to achieve common goals.

In conclusion, the internship on technology development was a transformative

experience that offered valuable insights into the industry, enhanced technical
skills, and provided a solid foundation for a successful career in the technology
sector. The
hands-on learning, exposure to cutting-edge technologies, and collaborative environment
were instrumental in shaping my understanding and passion for technology development.
Chapter 6 References

HTML3: https://www.w3schools.com/html/
CSS3: https://www.w3schools.com/css/css_intro.asp
BOOTSTRAP 5: https://www.w3schools.com/bootstrap5/index.php