Internship Report
Internship Report
Internship Report
Submitted by
DURGANANDHINI K - 412420205027
degree of
BACHELOR OF TECHNOLOGY
in
INFORMATION TECHNOLOGY
APRIL 2024
BONAFIDE CERTIFICATE
Certified that this internship report “Industrial Based Embedded with Android
Application Development using IOT ”and “Web Development” are the
Bonafide works of “DURGANANDHINI K (412420205027)” who carried out
the internship works in the “NSIC - TECHNICAL SERVICES CENTRE”, and
“HDLC TECHNOLOGIES”.
ABSTRACT 1
1 ABOUT THE COMPANY 2
2 ABOUT THE INTERNSHIP 3
2.1 WEB DEVELOPMENT 3
2.2 TECHNOLOGY USED 4
2.3 VISUAL STUDIO CODE 7
2.4 API 8
2.5 CODING 8
3 IMPACT OF THIS TRAINING 24
4 PROOF OF COMPLETION 25
LIST OF FIGURES
SECTION II
1
CHAPTER 1
ABOUT THE
COMPANY
HDLC is a startup company based in Chennai, India working in the IT Industry with a
focus on building software products using different AI Technologies like Machine
Learning, Deep Learning, Natural Language Processing, Speech recognition in specific
segments in which we have expertise and business relationships. The startup is
boot-strapped and self-funded.
2
CHAPTER 2
Web development domain refers to the area of expertise and knowledge that a
web developer possesses in order to design, build, and maintain websites. This
includes various aspects such as front-end development (client-side), back-end
development (server-side), web application development, e-commerce
development, database management, and content management systems (CMS)
development.
Front-end development involves the creation of the user interface and the design
of the website using HTML, CSS, and JavaScript. Back-end development focuses
on the development of the server-side of the website and the use of programming
languages such as PHP, Ruby, Python, and others to manage the server, databases,
and server-side scripting.
3
Web development encompasses the tasks involved in developing websites for the internet or
an intranet. It typically includes web design, web content development, client-side/server-
side scripting, web server, and network security configuration, and e-commerce
development, among other things. Here's a breakdown of some key components:
Web Design: This involves designing the layout, appearance, and user experience of a
website. It includes graphic design, typography, color theory, and user interface (UI) design.
Frontend Development: This involves building the client-side of a website, which users
interact with directly.
It includes writing HTML, CSS, and JavaScript code to create responsive and interactive
web pages. Frameworks like React, Angular, and Vue.js are commonly used in frontend
development.
Backend Development: This involves building the server-side of a website, which handles
data processing, user authentication, and server-side logic. Backend developers work with
languages like Python, Ruby, Java, PHP, or Node.js and frameworks like Django, Ruby on
Rails, Spring Boot, Laravel, or Express.js.
Full-Stack Development: Full-stack developers work on both the frontend and backend of
a website, handling all aspects of web development.
Database Management: Websites often rely on databases to store and retrieve data.
Backend developers work with database management systems like MySQL, PostgreSQL,
MongoDB, or SQLite to manage data efficiently.
Web Servers and Hosting: Understanding web servers like Apache, Nginx, or Microsoft
IIS, and knowing how to deploy and manage websites on hosting platforms like AWS,
Google Cloud Platform, or Microsoft Azure is crucial for web developers.
4
Security: Web developers need to be aware of security best practices to protect websites
from common threats like SQL injection, cross-site scripting (XSS), and cross-site request
forgery (CSRF). This includes using HTTPS, input validation, and authentication
mechanisms.
Version Control: Version control systems like Git are essential for collaborative
development, allowing developers to track changes to code, merge changes from multiple
contributors, and revert to previous versions if needed.
Responsive Design: With the proliferation of mobile devices, ensuring that websites are
responsive and optimized for various screen sizes and devices is crucial.
Testing and Debugging: Web developers need to test their code thoroughly to identify and
fix bugs. This includes unit testing, integration testing, and browser compatibility testing.
Continuous Integration/Continuous Deployment (CI/CD): Implementing CI/CD pipelines
automates the process of testing and deploying code changes, improving efficiency and
reducing errors.
5
2.2 TECHNOLOGY
USED HTML
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
6
Step 2: Write Some HTML
<!DOCTYPE>
<html>
<head>
<title>BCD</title>
</head>
<body>
<h1>WE ARE TOGETHER</h1> </body> </html>
Save the file on your computer. Select File > Save as .HTML in the Notepad menu.
CSS
CSS (Cascading Style Sheets) is a stylesheet language used for describing the
presentation and layout of HTML or XML documents, including web pages. CSS is
used to style HTML elements and create visually appealing web pages. CSS works by
defining styles for HTML elements using selectors. Selectors target specific HTML
elements and define the styles that should be applied to those elements. CSS styles can
be used to set the font, color, spacing, alignment, and other visual properties of HTML
elements. CSS can be applied to an HTML document in three different ways: inline
styles, internal styles, and external styles.
7
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Example: p {
color: red;
text-align: center;
JAVASCRIPT
8
Interpreted or JIT-compiled: JavaScript code is processed by the browser at runtime.
Dynamic: JavaScript can create objects and functions at runtime, and it can change the
type of variables dynamically.
The codes are executed in visual studio code which is a platform to run different
languages in it. Visual Studio Code (VS Code) is a free, open-source code editor
developed by Microsoft. It is one of the most popular code editors used by developers
for writing and editing code across multiple programming languages. VS Code is
designed to be a lightweight, fast, and flexible code editor that supports various features
such as syntax highlighting, auto-complete, debugging, source control integration, and
extensions. It has a user-friendly interface that can be customized to fit the preferences
of individual users. Programs like JavaScript, Python, C++, Java, Ruby, and many
others.
Visual Studio Code (VS Code) is a popular and versatile source code editor developed
by Microsoft. It's widely used by developers for various programming languages and
platforms due to its lightweight nature, extensive customization options, and rich
ecosystem of extensions. Here are some key features and aspects of Visual Studio
Code:
9
Cross-Platform: Visual Studio Code is available for Windows, macOS, and Linux,
making it accessible to a wide range of developers.
Intelligent Code Editing: VS Code provides features like syntax highlighting, code
completion, and IntelliSense, which offers context-aware suggestions as you type.
Customizable Interface: Users can customize the appearance and behavior of VS Code
using themes, custom keybindings, and settings.
Extensions: One of the standout features of VS Code is its vast extension marketplace.
Developers can install extensions to add support for additional programming languages,
debuggers, linters, version control systems, and more.
Version Control Integration: VS Code has built-in Git support, enabling developers to
perform version control operations like committing, branching, merging, and viewing
changes directly within the editor.
Debugging Support: VS Code supports debugging for various programming languages and
platforms through extensions. Developers can set breakpoints, inspect variables, and step
through code to troubleshoot issues.
Task Automation: VS Code allows users to define and execute tasks, such as compiling
code, running tests, or deploying applications, using task runners like npm scripts or custom
shell commands.
10
Integrated Development Environments (IDE) Features: While VS Code is primarily a
code editor, it offers many IDE-like features through extensions, such as project
management, code refactoring, code snippets, and more.
Live Share: Visual Studio Live Share is an extension for VS Code that enables real-time
collaboration between developers, allowing them to edit and debug code together, share
terminals, and collaborate on tasks.
Remote Development: VS Code supports remote development, allowing developers to
work on projects hosted on remote servers or containers, providing a consistent
development environment regardless of the local setup.
Accessibility: Visual Studio Code strives to be accessible to all users, with features like
screen reader support, high contrast themes, and keyboard navigation options.
Overall, Visual Studio Code is a powerful and flexible tool that caters to the needs of
developers across different programming languages and workflows. Its active development
community and extensive ecosystem of extensions contribute to its popularity among
developers.
11
2.4 API
Integration with Third-Party Services: Many web applications rely on external services
for various functionalities like payment processing, social media sharing, mapping,
weather data, etc. APIs provided by these services allow developers to integrate them
seamlessly into their web applications.
Custom Backend Services: Web developers often build custom backend services to
handle specific functionalities like user authentication, data storage, and processing.
APIs are used to expose these services to frontend applications, allowing them to
communicate and interact with the backend.
12
Mobile App Development: APIs are commonly used in mobile app development to
enable communication between the mobile app and the server-side backend. Mobile
apps interact with APIs to retrieve data, perform actions, and sync data with the server.
Data Retrieval and Manipulation: APIs provide a structured way to retrieve data from
databases, external sources, or other web services. This data can be manipulated,
processed, and presented to users through the web application's frontend.
Authentication and Authorization: APIs are used for implementing authentication and
authorization mechanisms in web applications. They allow users to securely log in,
manage their account details, and access restricted resources based on their
permissions.
Webhooks: APIs can be used to set up webhooks, which are HTTP callbacks triggered
by specific events.Webhooks enable real-time communication between different
systems, allowing one system to notify another system about important events or
updates.
RESTful APIs and GraphQL: RESTful APIs and GraphQL are two popular
architectural styles for designing web APIs. RESTful APIs use standard HTTP methods
(GET, POST, PUT, DELETE) to perform CRUD (Create, Read, Update, Delete)
operations on resources. GraphQL provides a more flexible and efficient approach to
data querying, allowing clients to request exactly the data they need.
13
2.5 CODING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<header>
<div id="menu-bars" class="fas fa-bars"></div>
<nav
class="navbar">
<a href="#home">home</a>
14
<a href="#about">about</a>
<a href="#services">services</a>
<a href="#portfolio">portfolio</a>
<a href="#blogs">blogs</a>
<div id="particles-js"></div>
<div class="content">
</div>
</section>
<div class="row">
<div class="image">
</div>
15
<div class="content">
<div class="box-container">
<div class="box">
<div class="box-container">
<h3>web development</h3>
<p>As a web content developer, you curate and develop written and
video content to populate an organization's website.</p>
</div>
<h3>graphic design</h3>
<h3>seo marketing</h3>
<h3>graphic design</h3>
</div>
<div class="box">
</div>
</div>
</div>
</div>
17
</section
>
<div class="box-container">
<p>welcome guys</p>
</div>
</div>
<div class="box">
</div>
18
</div>
</div>
</div>
</section>
<p>hello guys</p>
19
</div>
<div class="row">
<div class="image">
</div>
<form action="">
<div class="inputBox">
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></
script>
<script src="particles.min.js"></script>
<script src="app.js"></script>
<div class="box">
</div>
</div>
</div>
</div>
</section>
<div class="box-container">
<p>As a web content developer, you curate and develop written and video
content to populate an organization's website.</p>
</div>
</div>
<h3>seo marketing</h3>
</div>
<h3>email marketing</h3>
</div>
<div class="box tilt">
<h3>Responsive designs</h3>
</div>
<h3>wordpress</h3>
<p>All three of these content types, posts, pages, and media elements, are
treated as individual entries in the database and have unique properties to fit their use.
The post is the primary content type in WordPress.
.</p>
</div>
</div>
</section>
<div class="box-container">
<div class="content">
</div>
</div>
<div class="content">
</div>
</div>
<div class="content">
</div>
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="content">
</div>
</div>
</div>
</section>
<p>welcome guys</p>
</div>
<p>hello guys</p>
</div>
<p>hi guys</p>
</div>
</div>
</section>
<h3>seo marketing</h3>
</div>
<h3>email marketing</h3>
</div>
<h3>Responsive designs</h3>
<p>Responsive Web Design (a.k.a. "Responsive" or "Responsive
Design") is an approach to design web content that appears regardless of the
resolution governed by the device</p>
</div>
<h3>wordpress</h3>
<p>All three of these content types, posts, pages, and media elements, are
treated as individual entries in the database and have unique properties to fit
their use. The post is the primary content type in WordPress.
.</p><div class="row">
<div class="image">
</div>
<form action="">
<div class="inputBox">
</div>
</form>
</div>
</section>
<div class="footer"> created by <span> mr. web designer </span> | all rights reserved!
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></
script>
<script src="particles.min.js"></script>
<script src="app.js"></script>
<script>
let menu =
document.querySelector('#menu-bars');
let header =
document.querySelector('header');
menu.onclick = () =>{
menu.classList.toggle('fa-
times');
header.classList.toggle('a
ctive');
window.onscroll = () =>{
menu.classList.remove('f
a-times'
header.classList.remove('active');
};
typeSpeed : 150
});
VanillaTilt.init(document.querySelectorAll('.tilt'),
{ max:25
});
</script>
</body>
</html>
import openai
html_structure = html_response.choices[0].text.strip()
# Generate content
content_response = openai.Completion.create(
engine="text-davinci-003",
prompt=content_prompt,
max_tokens=200
)
main_content = content_response.choices[0].text.strip()