AN

INTERNSHIP REPORT
ON

FULLSTACK DEVELOPMENT

Submitted to

CHADALAWADA RAMANAMMA ENGINEERING COLLEGE (AUTONOMOUS)

In partial fulfillment of the requirements for the Award of Degree of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING (AI & ML)
By

PODILI POOJITHA
Regd. No: 22P11A3337

Under the Supervision

Of

Mr. T. Rajasekar MCA

Assistant Professor

(Duration: 17h December, 2025 to 17thApril, 2026)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING (AIML)

CHADALAWADA RAMANAMMA ENGINEERING COLLEGE

(AUTONOMOUS)
(Accredited by NAAC, Approved by AICTE, New Delhi, Affiliated to JNTU Anantapur)
Renigunta road, Tirupati – 517506, Andhra Pradesh, India
2022-2026
 CHADALAWADA RAMANAMMA ENGINEERING COLLEGE
(AUTONOMOUS)
(Accredited by NAAC, Approved by AICTE, New Delhi, Affiliated to JNTU Anantapur)
Renigunta road, Tirupati – 517506, Andhra Pradesh, India

Department of Computer Science and Engineering (AIML)

CERTIFICATE
This is to certify that the Internship report on “FULLSTACK DEVELOPMENT ”, is a
Bonafide work done by PODILI POOJITHA (Regd. No: 22P11A3337) in the Department
of “COMPUTER SCIENCE AND ENGINEERING (AIML)”, and is submitted to
Chadalawada Ramanamma Engineering College (Autonomous), Tirupati during the
Academic year 2025-2026.

GUIDE HEAD PRINCIPAL & DIRECTOR

Mr. T. Rajasekhar MCA Dr. K. Sekar Ph.D. Dr. Bhaskar Patel.

Assistant Professor Professor & HOD CREC(A) & Krishna Teja
Department of CSE (AIML) Department of CSE (AIML) Educational Institutions
 ACKNOWLEDGEMENT

First, I would like to thank Saloni Madam, HR, of CODEC TECHNOLOGIES for giving me
the opportunity to do an internship within the organization.

I also would like all the people that worked along with me CODEC TECHNOLOGIES with
their patience and openness they created an enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude that I acknowledge
the help of these individuals.

I would like to thank our Chairman Dr Chadalawada Krishna Murthy sir for the facilities
provided to accomplish this internship.

I am highly indebted to Principal Dr Bhaskar Patel sir for providing the opportunity to do
my internship course and others.

I would like to thank the Head of the Department Dr K. Sekar sir for his constructive
criticism throughout my internship.

I am sincerely thankful to my Guide T. Rajasekar sir, Department of CSE (AIML) for his
guidelines and support from beginning to end of internship.

I am extremely great full to the department staff members and friends who helped me in
successful completion of this internship.
 DECLARATION

I hereby declare that the Internship Report entitled “FULLSTACK DEVELOPMENT” is

done by PODILI POOJITHA bearing the roll number 22P11A3337 towards partial
fulfillment of the requirement for the Award of the Degree of Bachelor of Technology in
Computer Science and Engineering (AI&ML), and is submitted to CHADALAWADA
RAMANAMMA ENGINEERING COLLEGE OF JNTUA, TIRUPATI.

I further declare that this internship Report has not been Previously submitted before either in
part or full for the award of any degree to any organization or any other Universities.

PODILI POOJITHA
Regd. No: 22P11A3337
 ORGANISATION PROFILE

At CODEC TECHNOLOGIES, we're not just a company; we're your trusted partners in
innovation, dedicated to shaping a brighter future through cutting-edge technology
solutions.

At CODEC TECHNOLOGIES, our passion for technology fuels our commitment to

excellence. With a team of industry-leading experts, we're driven to empower your success
by providing top-notch solutions, support, and guidance. Join us in forging the path to a
dynamic and transformative future.

Info
CODEC TECHNOLOGIES is a forward-thinking company that specializes in providing
training and internship opportunities in virtual environments.
 OVERVIEW OF ORGANISATION

We are a organisation which aims to spread knowledge effectively.

Organization [Link]
Website

Phone Number +91 8275195536

Industry IT/ Technology, Networking, Manufacturing/ Engineering

Location Mumbai, India

51-200 employees
Employees Count

Founded 2020

CERTIFICATE OF COMPLETION
LEARNING OBJECTIVES/INTERNSHIP
OBJECTIVES
  Internships are generally thought to be reserved for college students
looking to gain experience in a particular field. However, a wide array
of people can benefit from Training Internships to receive real-world
experience and develop their skills.

 An objective for this position should emphasize the skills you already
possess in the area and your interest in learning more

 Internships are utilized in several different career fields, including

architecture, engineering, healthcare, economics, advertising, and many
more.

 Some internships are used to allow individuals to perform scientific

research while others are specifically designed to allow people to gain
first-hand experience working.

 Utilizing internships is a great way to build your resume and develop

skills that can be emphasized in your resume for future jobs. When you
are applying for a Training Internship, make sure to highlight any
special skills or talents that can make you stand apart from the rest of
the applicants so that you have an improved chance of landing the
position.

WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

 DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
17/12/25 Wednesday Introduction to python
1st WEEK

18/12/25 Thursday Features and variables

19/12/25 Friday Identifiers
22/12/25 Monday Functions
23/12/25 Tuesday Object oriented programming

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

24/12/25 Wednesday Decorator
2nd WEEK

25/12/25 Thursday Exception handling

26/12/25 Friday File handling
29/12/25 Monday json
30/12/25 Tuesday Regular expressions

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

31/12/25 Wednesday Iterators, Generators
3rd WEEK

01/01/26 Thursday Database connections

02/01/26 Friday Multi- threading
05/01/26 Monday Examples of programming
06/01/26 Tuesday Examples of programming
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
4rth WEEK

07/01/26 Wednesday Introduction to HTML

08/01/26 Thursday HTML Tags
09/01/26 Friday Text Formatting
12/01/26 Monday Links
13/01/26 Tuesday Images

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

14/01/26 Wednesday Lists
5th WEEK

15/01/26 Thursday Forms

16/01/26 Friday HTML Semantic Tags
19/01/26 Monday Multimedia
20/01/26 Tuesday HTML5 Features
 DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
21/01/26 Wednesday Introduction to CSS
6th WEEK

22/01/26 Thursday CSS Selectors

23/01/26 Friday CSS Colors & Background
26/01/26 Monday CSS Text Styling
27/01/26 Tuesday CSS Fonts

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

28/01/26 Wednesday CSS Box Model
7th WEEK

29/01/26 Thursday CSS Borders

30/01/26 Friday CSS Display & Position
02/02/26 Monday CSS Flexbox
03/02/26 Tuesday CSS Grid
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
04/02/26 Wednesday CSS Responsive Design
8th WEEK

05/02/26 Thursday CSS Effects

06/02/26 Friday CSS Combinators
09/02/26 Monday CSS Pseudo Classes
10/02/26 Tuesday Example of CSS

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

11/02/26 Wednesday Introduction to Django
9th WEEK

12/02/26 Thursday Django Installation

13/02/26 Friday Django project structure
16/02/26 Monday Django apps
17/02/26 Tuesday Django views

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

18/02/26 Wednesday Django URL routing
10th

19/02/26 Thursday Django templates

20/02/26 Friday Django models
 W 23/02/26 Monday Database migrations
E 24/02/26 Tuesday Django admin panel
E
K

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

25/02/26 Wednesday Django forms
11th WEEK

26/02/26 Thursday Django static files

27/02/26 Friday Django template inheritance
02/03/26 Monday Django ORM
03/03/26 Tuesday Django CRUD operations
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
04/03/26 Wednesday Django authentication
12th WEEK

05/03/26 Thursday Django sessions

06/03/26 Friday Django middleware
09/03/26 Monday Django REST API basics
10/03/26 Tuesday Django deployment

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

13th WEEK

11/03/26 Wednesday Introduction to JavaScript

12/03/26 Thursday Variables
13/03/26 Friday Data Types
16/03/26 Monday Operators
17/03/26 Tuesday Conditional Statements

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

18/03/26 Wednesday Loops
14th WEEK

19/03/26 Thursday Functions

20/03/26 Friday Arrays
23/03/26 Monday Strings
24/03/26 Tuesday Objects
 DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
25/03/26 Wednesday DOM
15th WEEK

26/03/26 Thursday Events

27/03/26 Friday Form Validation
30/03/26 Monday JavaScript ES6 Features
31/03/26 Tuesday Promises
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
01/04/26 Wednesday Async/Await
16th WEEK

02/04/26 Thursday Fetch API

03/04/26 Friday Local Storage
06/04/26 Monday Error handling
07/04/26 Tuesday JavaScript Modules

TABLE OF CONTENT

S. No Name of the contents Page No

1 LIST OF FIGURES i
2 ABSTRACT ii
3 Chapter-1: Introduction to python 1-6
4 1.1 Features and variables 1
5 1.2 Identifiers 2
6 1.3 Functions 2
7 1.4 Object oriented programming 2-3
8 1.5 Decorator 3
9 1.6 Exception handling 4
10 1.7 File handling 4
11 1.8 json 4
12 1.9 Regular expressions 4
13 1.10 Iterators, Generators 4
14 1.11 Database connections 4-6
15 1.12 Multi-threading 6
16 1.13 Examples of programming 6
17 1.14 Examples of programming 6
18 Chapter-2: Introduction to HTML 7-9
19 2.1 HTML Tags 7
20 2.2 Text Formatting 8
21 2.3 Links 8
22 2.4 Images 8
23 2.5 Lists 8
24 2.6 Forms 9
25 2.7 HTML Semantic Tags 9
26 2.8 Multimedia 9
27 2.9 HTML5 Features 9
28 Chapter-3: Introduction to CSS 10-14
29 3.1 CSS Selectors 10
30 3.2 CSS Colors & Background 10
31 3.3 CSS Text Styling 10-11
32 3.4 CSS Fonts 11
33 3.5 CSS Box Model 11
34 3.6 CSS Borders 12
35 3.7 CSS Display & Position 12
36 3.8 CSS Flexbox 12
37 3.9 CSS Grid 13
38 3.10 CSS Responsive Design 13
39 3.11 CSS Effects 13
40 3.12 CSS Combinators 13
41 3.13 CSS Pseudo Classes 13-14
42 3.14 Examples of CSS 14
43 Chapter-4: Introduction to Django 15-18
44 4.1 Django Installation 15-16
45 4.2 Django project structure 16
46 4.3 Django apps 16
47 4.4 Django views 16
48 4.5 Django URL routing 16
49 4.6 Django templates 16
50 4.7 Django models 17
51 4.8 Database migrations 17
52 4.9 Django admin panel 17
53 4.10 Django forms 17
54 4.11 Django static files 17
55 4.12 Django template inheritance 17
56 4.13 Django ORM 17
57 4.14 Django CRUD operations 18
58 4.15 Django authentication 18
59 4.16 Django sessions 18
60 4.17 Django middleware 18
61 4.18 Django REST API basics 18
62 4.19 Django deployment 18
63 Chapter-5: Introduction to JavaScript 19-22
64 5.1 Variables 19
65 5.2 Data Types 19
66 5.3 Operators 19
67 5.4 Conditional Statements 19
68 5.6 Loops 20
69 5.7 Functions 20
70 5.8 Arrays 20
71 5.9 Strings 20
72 5.10 Objects 20
73 5.11 DOM 20
74 5.12 Events 20
75 5.13 Form Validation 21
76 5.14 JavaScript ES6 Features 21
77 5.15 Promises 21
78 5.16 Async/Await 21
79 5.17 Fetch API 21
80 5.18 Local Storage 21
81 5.19 Error handling 21
82 5.20 JavaScript Modules 22
83 Chapter-6: Conclusion 23
84 Chapter-7: Reference 24
 LIST OF FIGURES

FIGURE NO FIGURE NAME PAGE NO

1.2 Object Oriented Programming 3
1.3 Decoders 3
2.1 Text formatting 8
2.2 forms 9
2.3 HTML Semantic tags 9
3.1 CSS Fonts 11
3.2 CSS box model 11
3.3 CSS borders 12
3.4 CSS flexbox 12
3.5 CSS Grid 13
3.6 CSS Effects 13
4.1 Django apps 16
4.2 Django deployment 18
5.1 Data types 19
5.2 Conditional Statements 16

i
 ABSTRACT
Full Stack Development refers to the development of both the front-end and back-end parts of
a web application. It involves designing user interfaces, managing databases, and handling
server-side logic to build complete and functional web applications. The front-end is
responsible for the visual elements that users interact with, using technologies such as
HTML, CSS, and JavaScript. The back-end manages the application logic, database
operations, and server communication using programming languages and frameworks.
The main objective of full stack development is to create dynamic, responsive, and user-
friendly web applications that provide a seamless user experience. It integrates multiple
technologies including front-end frameworks, back-end programming languages, and
database management systems. By combining these technologies, developers can build
scalable and efficient applications.
Full Stack Development skills are highly demanded in the software industry because
developers can handle the entire development process from user interface design to database
management and server configuration. This project focuses on understanding the core
concepts, tools, and technologies involved in building modern web applications using full
stack development.

ii
Full stack Development

CHAPTER-1: INTRODUCTION TO PYTHON

1.1 Features and variables
Features of python:
Python's features make it versatile and widely used across various domains.
 Easy to Read and Learn: Python has a simple, English-like syntax that uses
indentation to define code blocks, making it beginner-friendly and enhancing code
readability.
 Interpreted Language: Code is executed line by line at runtime, which allows for
immediate feedback and makes the debugging process easier compared to compiled
languages.
 Dynamically Typed: Developers do not need to explicitly declare the data type of a
variable. Python determines the type automatically at runtime based on the assigned
value.
 Large Standard Library: Python boasts a comprehensive collection of built-in modules
and functions that cover a wide range of tasks, so developers do not have to write
code from scratch for every single thing.
 Object-Oriented Programming (OOP) Support: Python fully supports OOP concepts
such as classes, objects, inheritance, and polymorphism, which promotes code
reusability and modularity.
 Cross-Platform Compatibility: Python code can run on various operating systems
(Windows, macOS, Linux) with minimal or no modification, as long as a compatible
Python interpreter is installed.
 Memory Management: Python features automatic memory management (garbage
collection) which handles the allocation and deallocation of memory, freeing the
programmer from manual memory handling.
 Extensible and Embeddable: Python's capabilities can be extended with modules
written in other languages like C or C++, and Python itself can be embedded into
other applications to provide scripting capabilities.

Variables of python:
In Python, variables are used to store data that can be referenced and manipulated during
program execution. A variable is essentially a name that is assigned to a value.
Eg: x = 5
name = "Samantha"
print(x)
print(name)

1
Department of CSE (AIML), CREC (A)
Full stack Development

1.2 Identifiers
In Python Programming language, the naming words are called Identifiers. Identifiers are the
tokens in Python that are used to name entities like variables, functions, classes, etc. These
are the user-defined names.
In the below snippet, “number” and “name” are the identifiers given to the variables. These
are holding the values 5 and “PythonGeeks” respectively.

1.3 Functions
Python Functions are a block of statements that does a specific task. The idea is to put some
commonly or repeatedly done task together and make a function so that instead of writing the
same code again and again for different inputs, we can do the function calls to reuse code
contained in it over and over again.

Fig 1.1 Functions

1.4 Object Oriented Programming

Object-Oriented Programming (OOP) is a programming paradigm that organizes software
design around objects, which are data structures that combine both properties (data) and
behaviors (methods) into a single unit. This approach allows developers to model real-world
entities and interactions, leading to modular, reusable, and maintainable code.
The entire structure of OOP is built upon a few fundamental principles:
 Encapsulation: This principle involves bundling the data (attributes) and the methods
that operate on that data within a single unit, typically a class. It restricts direct access
to some of an object's internal state (often using access modifiers like "private"),
exposing only a public interface. This protects the data from unintended external
manipulation and simplifies code maintenance.
 Abstraction: Abstraction means hiding complex implementation details and showing
only the essential features of an object. It allows programmers to focus on what an

2
Department of CSE (AIML), CREC (A)
Full stack Development

object does rather than how it does it. This is often achieved using abstract classes and
interfaces, which define a common interface for different objects.
 Inheritance: This mechanism allows a new class (subclass or child class) to inherit
properties and methods from an existing class (superclass or parent class). Inheritance
promotes code reuse and establishes a hierarchical relationship between classes,
modeling an "is-a" relationship (e.g., a "Car" is a "Vehicle").
 Polymorphism: The word "polymorphism" means "many forms". In OOP, it allows
objects of different classes to be treated as instances of a common superclass,
enabling a single method name to perform different actions depending on the object's
actual type at runtime.

Fig 1.2 Object oriented programming

1.5 Decorator
In Python, decorators are flexible way to modify or extend behavior of functions or methods,
without changing their actual code.
 A decorator is essentially a function that takes another function as an argument and
returns a new function with enhanced functionality.
 Decorators are often used in scenarios such as logging, authentication and
memorization, allowing us to add additional functionality to existing functions or
methods in a clean, reusable way.

Fig 1.3 Decorators

3
Department of CSE (AIML), CREC (A)
Full stack Development

1.6 Exception handling

Python Exception Handling allows a program to gracefully handle unexpected events (like
invalid input or missing files) without crashing. Instead of terminating abruptly, Python lets
you detect the problem, respond to it, and continue execution when possible.

1.7 File handling

File handling refers to the process of performing operations on a file, such as creating,
opening, reading, writing and closing it through a programming interface. It involves
managing the data flow between the program and the file system on the storage device,
ensuring that data is handled safely and efficiently.

1.8 json
JSON (JavaScript Object Notation) is a file that is mainly used to store and transfer data
mostly between a server and a web application. It is popularly used for representing
structured data. In this article, we will discuss how to handle JSON data using Python. Python
provides a module called json which comes with Python's standard built-in utility.
Note: In Python, JSON data is usually represented as a string.

1.9 Regular Expression

Regular expressions (regex) in Python are a powerful tool for matching and manipulating text
patterns, implemented in the built-in re module. It is standard practice to use raw
strings (prefixed with r, e.g., r"\d+") for regex patterns to prevent backslashes from being
misinterpreted by Python's string literal rules.

1.10 Iterators, Generators

In Python, an iterator is an object that represents a stream of data and allows you to traverse
through elements in a collection one by one. It follows the iterator protocol, which requires
the implementation of two specific methods: __iter__() and __next__().
In Python, generators are a simple and memory-efficient way to create iterators. They allow
you to generate a sequence of values one at a time, on demand, instead of building and
storing the entire sequence in memory at once.

1.11 Database connections

Python's database connectivity is enabled through its Database API Specification (DB-API
2.0), which provides a standard, database-neutral interface. This allows developers to use
various database systems (like MySQL, PostgreSQL, SQLite, MongoDB, etc.) by using
specific, compliant libraries.
General Steps for Database Connectivity
The general process for connecting Python to a database involves the following steps:

4
Department of CSE (AIML), CREC (A)
Full stack Development

1. Install a Database Driver: You need a specific third-party library or connector for
your chosen database (e.g., mysql-connector-python for MySQL, psycopg2 for
PostgreSQL, the built-in sqlite3 for SQLite).
2. Import the Module: Import the installed library into your Python script (e.g., import
[Link]).
3. Establish a Connection: Use the module's connect() method with the database
credentials (host, user, password, database name) to create a connection object.
4. Create a Cursor Object: Generate a cursor object from the connection. The cursor
acts as the interface for executing SQL queries and fetching results.
5. Execute SQL Queries: Use the cursor's execute() method to run SQL statements
(e.g., CREATE, SELECT, INSERT, UPDATE, DELETE).
6. Fetch Results (if necessary): For queries that return data (like SELECT), use
methods such as fetchone(), fetchmany(), or fetchall() to retrieve the results.
7. Commit Changes (if necessary): For queries that modify data
(INSERT, UPDATE, DELETE), use the connection object's commit() method to make
the changes permanent in the database.
8. Close the Connection: Always close the cursor and connection objects when you are
done to free up resources using close() methods.
Example (MySQL using mysql-connector-python)
Here is an example of connecting to a MySQL database, executing a query, and printing the
results:
import [Link]
try:
# Establish the connection
conn = [Link](
host="localhost",
user="yourusername",
password="yourpassword",
database="yourdatabase"
)
# Create a cursor object
cursor = [Link]()

# Execute an SQL query

5
Department of CSE (AIML), CREC (A)
Full stack Development

[Link]("SELECT * FROM yourtable")

# Fetch all the results

results = [Link]()
# Print the results
for row in results:
print(row)
except [Link] as err:
print(f"Error: {err}")
finally:
# Close the cursor and connection
if 'cursor' in locals() and cursor is not None:
[Link]()
if 'conn' in locals() and conn is not None:
[Link]()

1.12 Multi-threading
Multithreading in Python is a technique that enables multiple threads of execution to
run concurrently within a single process, using the built-in threading module. It is primarily
used to improve performance and responsiveness for I/O-bound tasks (tasks that spend time
waiting for input/output operations), such as network requests, file operations, or GUI
interactions.

1.13 Examples of programming

from flask import Flask, jsonify
app = Flask(__name__)
@[Link]('/api/greet/<name>')
def greet(name):
return jsonify({'message': f'Hello, {name}!'})

if __name__ == '__main__':
[Link](debug=True)

6
Department of CSE (AIML), CREC (A)
Full stack Development

CHAPTER-2: INTRODUCTION TO HTML

2.1 HTML Tags
HTML tags are the fundamental building blocks of web pages, used to structure and format
content. They are enclosed in angle brackets, like <h1>, and tell web browsers how to display
elements such as text, images, and links.
Basic HTML Document Structure
All HTML documents follow a basic structure defined by essential tags:
 <!DOCTYPE html>: Declares the document type and version (HTML5).
 <html>: The root element that encloses all other elements except <!DOCTYPE>.
 <head>: Contains metadata about the document, such as the title, links to stylesheets,
and scripts, which are not visible on the page.
 <title>: Defines the title of the document, which appears in the browser's title bar or
page tab.
 <body>: Contains all the visible content of the web page, including text, images, and
links.
Here are some commonly used tags:
 Headings (<h1> to <h6>): Define section headings, with <h1> being the most
important and <h6> the least.
 Paragraph (<p>): Organizes text into paragraphs.
 Line Break (<br>): Inserts a single line break.
 Anchor (<a>): Creates a hyperlink to another page or location on the same page
using the href attribute to specify the URL.
 Image (<img>): Embeds an image using the src attribute for the image path and
the alt attribute for alternative text.
 Division (<div>): Defines a division or section in a document for block-level
organization and styling.
 Span (<span>): Defines an inline container for styling a portion of text or other
elements.
 Lists (<ul>, <ol>, <li>): Create unordered (bulleted) lists with <ul> or ordered
(numbered) lists with <ol>, using <li> for each list item.
 Strong (<strong>) and Emphasis (<em>): <strong> defines important text (usually
bold), and <em> defines emphasized text (usually italic).

7
Department of CSE (AIML), CREC (A)
Full stack Development

2.2 Text Formatting

HTML text formatting refers to the use of specific HTML tags to modify the appearance and
structure of text on a webpage. It allows you to style text in different ways, such as making it
bold, italic, underlined, highlighted, or struck-through.

Fig 2.1 Text Formatting

2.3 Links
HTML links (hyperlinks) are created using the anchor (<a>) tag, which connects one web
resource to another. The destination is specified using the href attribute.
The basic syntax for an HTML link is:
<a href="url">link text</a>

2.4 Images
To embed images in HTML, use the self-closing <img> tag. The two required attributes
are src, which specifies the image's source file path, and alt, which provides alternative text
for accessibility and instances where the image cannot be displayed.
The basic syntax is as follows:
<img src="image_path.jpg" alt="Description of the image">

2.5 Lists
HTML provides three main types of lists to organize content: unordered lists (bullet
points), ordered lists (numbered/sequenced items), and description lists (terms and
definitions).
Types of HTML Lists
 Unordered Lists (<ul>)
 Ordered Lists (<ol>)
 Description Lists (<dl>)

8
Department of CSE (AIML), CREC (A)
Full stack Development

2.6 Forms
HTML forms are a primary means of collecting user input on web pages, which is then
typically sent to a server for processing. They are defined using the <form> element, which
acts as a container for various form controls.

Fig 2.2 Forms

2.7 HTML Semantic Tags

Semantic tags in HTML are elements that describe the meaning of the content they contain,
both to the developer and the browser. Unlike non-semantic tags like <div> or <span>, which
have no inherent meaning, semantic tags provide context, which
improves accessibility, Search Engine Optimization (SEO), and code readability.

Fig 2.3 HTML Semantic Tags

2.8 Multimedia
Multimedia comes in many different formats. It can be almost anything you can hear or see,
like images, music, sound, videos, records, films, animations, and more.

2.9HTML5 Features
HTML (HyperText Markup Language) is the standard language used to create and structure
web pages. It uses tags and elements to define headings, paragraphs, images, links, and other
components that browsers display on the screen.
 HTML is the foundation of all web pages.

9
Department of CSE (AIML), CREC (A)
Full stack Development

CHAPTER-3 INTRODUCTION TO CSS

3.1 CSS Selectors
CSS selectors are patterns used to select the HTML elements you want to style on a web
page. They provide fine-grained control, allowing developers to target elements based on
their type, attributes, states, or relationships with other elements in the document structure.

3.2 CSS Colors & Background

In CSS, you can control an element's appearance using color for text
and background properties for its background. Colors can be specified using names,
hexadecimal (HEX) codes, RGB, RGBA, HSL, or HSLA values.
Color Properties
 color: Sets the foreground color of an element's text.
 background-color: Sets the solid background color of an element.
 border-color: Sets the color of an element's border.
Background Properties
The background shorthand property allows you to define multiple background-related
properties in one declaration.
 background-image: Specifies a background image or a gradient (e.g., linear-
gradient(), radial-gradient()).
 background-repeat: Controls how the background image repeats (e.g., repeat-x, no-
repeat).
 background-position: Sets the starting position of a background image.
 background-attachment: Determines whether the background image scrolls with the
page or is fixed in the viewport.
 background-size: Specifies the size of the background image.

3.3 CSS Text Styling

CSS text formatting styles and controls text appearance, improving readability and visual
appeal.
Eg:
<html>
<head>
<style>

10
Department of CSE (AIML), CREC (A)
Full stack Development

.initials {
font-size: 40px;
font-weight: bold;
color: #4CAF50;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="initials">M.B.</p>
</body>
</html>

3.4 CSS Fonts

CSS provides extensive properties for controlling the appearance of text, including the font
family, size, weight, and style. You can use web-safe fonts installed on most devices or
load custom fonts using the @font-face rule or services like Google Fonts.

Fig 3.1 CSS Fonts

3.5 CSS Box Model

The CSS box model is a fundamental concept where every HTML element is represented as
a rectangular box. This model determines an element's total size and how it takes up space on
the page by defining four distinct, concentric areas: content, padding, border, and margin.

Fig 3.2 CSS Box Model

11
Department of CSE (AIML), CREC (A)
Full stack Development

3.6 CSS Borders

CSS borders define an outline around HTML elements, providing visual separation and
emphasis. The core properties for styling borders are border-style, border-width, and border-
color. A border will not be visible unless a style is specified.

Fig 3.3 CSS Borders

3.7 CSS Display & Position

CSS provides powerful controls for how elements are displayed and positioned on a
webpage, primarily through the display and position properties.
CSS Display Property
The display property determines the element's layout behavior and how it interacts with other
elements in the normal document flow.
CSS Position Property
The position property specifies the type of positioning method used for an element, allowing
you to override the normal document flow. This is used in conjunction with offset properties
like top, bottom, left, and right.

3.8 CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that provides an
efficient way to arrange, align, and distribute space among items within a container, making it
a cornerstone of responsive web design. It is ideal for UI components and linear layouts
(rows or columns).

Fig 3.4 CSS Flexbox

12
Department of CSE (AIML), CREC (A)
Full stack Development

3.9 CSS Grid

CSS Grid Layout is a powerful two-dimensional layout system that allows you to create
complex web designs using rows and columns simultaneously. Unlike Flexbox, which is one-
dimensional (row or column), Grid is designed for full-page layout control in both
directions.

Fig 3.5 CSS Grid

3.10 CSS Responsive Design

Responsive Web Design (RWD) is an approach that ensures websites automatically adapt to
different screen sizes, providing a seamless user experience across mobile phones, tablets,
and desktops. Unlike older methods that used fixed-width layouts, RWD uses flexible
components to "flow" and fill the available space like a liquid.

3.11 CSS Effects

CSS effects encompass a wide range of visual enhancements, from static filters to complex
motion. They are primarily used to improve user experience by making interfaces more
interactive and engaging.

Fig 3.6 CSS Effects

3.12 CSS Combinators

In CSS, combinators explain the relationship between multiple selectors, allowing you to
target elements based on their position in the HTML hierarchy.

3.13 CSS Pseudo Classes

A CSS pseudo-class is a keyword added to a selector that defines a special state of the
element, such as when a user hovers over it or when it is the first child of its parent. Unlike
regular classes, pseudo-classes allow you to style elements based on user interaction,
document structure, or historical state without changing your HTML markup.

13
Department of CSE (AIML), CREC (A)
Full stack Development

3.14 Examples of CSS

<!DOCTYPE html>
<html>
<head>
<title>My Styled Page</title>
<style>
body {
background-color: #f0f8ff; /* AliceBlue background color */
font-family: Arial, sans-serif; /* Use Arial or any available sans-serif font */
color: #333; /* Dark gray text color */ }
h1 {
color: maroon; /* Maroon color for the main heading */
text-align: center; /* Center-align the heading text */
}
p{
border: 2px solid powderblue; /* Add a solid powderblue border */
padding: 15px; /* Add space between the text and the border */
margin: 20px; /* Add space outside the border */
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with some custom styling applied using CSS. It has a border,
padding, and a specific font color.</p>
<p style="color: blue;">
This paragraph uses inline CSS to make its text blue, overriding the default body color.
</p>
</body>

14
Department of CSE (AIML), CREC (A)
Full stack Development

</html>

CHAPTER-4: INTRODUCTION TO DJANGO

4.1 Django Installation
To install Django, you need to have Python and pip installed, and it is recommended to use
a virtual environment. The installation process involves a few key steps.
1. Prerequisites
 Install Python: Ensure you have Python 3.10 or higher installed. Check by
running python --version in your terminal. If not installed, download it
from [Link].
 Install PIP: pip is usually included with Python. Verify it with pip --version.
2. Setup a Virtual Environment
Creating a virtual environment prevents conflicts between different project versions.
 Create Environment:
o Windows: python -m venv .venv
o macOS/Linux: python3 -m venv .venv
 Activate Environment:
o Windows (PowerShell): .venv\Scripts\Activate.ps1
o macOS/Linux: source .venv/bin/activate
o Note: Your prompt should now show (.venv).
3. Install Django
Once the environment is active, install the latest official release of Django:
 Command: python -m pip install django
 Verify: Check the version with django-admin --version.
4. Create Your Project
Use the django-admin utility to generate the initial project structure:
 Command: django-admin startproject <project_name>
 Navigate: Enter the new directory: cd <project_name>.
5. Run the Development Server
Test your installation by starting the local web server:
 Command: python [Link] runserver

15
Department of CSE (AIML), CREC (A)
Full stack Development

 Access: Open your browser and go to [Link] to see the

"Congratulations!" welcome page.

4.2 Django Project Structure

A standard Django project structure, generated by the django-admin startproject command,
organizes code into a project-level configuration directory and modular apps, with
a [Link] file for command-line interactions. There is no single "right" way, and structures
can be adapted to specific project needs.

4.3 Django Apps

In the context of the Django web framework for Python, "apps" are self-contained, modular
software components that handle specific functionalities within a larger Django project.
They are designed to be reusable across different projects, which is a core philosophy of the
framework.

Fig 4.1 Django Apps

4.4 Django Views

In Django, a view is a Python function or class that receives a web request, processes data
(often interacting with a database model), and returns an HTTP response, such as an HTML
page, a redirect, or an error. Views are a core component of Django's Model-View-Template
(MVT) architecture.

4.5 Django URL Routing

Django's URL routing system maps URLs to specific view functions or classes. The
configuration is managed primarily through a Python module called URLconf, typically
a [Link] file, which contains a list of urlpatterns.

4.6 Django Templates

Django templates are the presentation layer of a Django application, allowing developers to
separate the HTML structure from the backend Python logic. They are text documents
(usually HTML files) marked up with the Django Template Language (DTL) to display
dynamic content using special

4.7 Django Models

16
Department of CSE (AIML), CREC (A)
Full stack Development

In Django, models are Python classes that define the structure and behavior of your
application's data. Each model class represents a single database table, and each attribute of
the class represents a column in that table, providing an abstraction layer via Django's Object-
Relational Mapping (ORM).

4.8 Database migrations

Django migrations are a system for propagating changes made to your models (e.g., adding a
field, deleting a model) into your database schema. They allow developers to manage
database schema changes using Python code instead of writing raw SQL, and they are an
integral part of the Django Object-Relational Mapper (ORM).

4.9 Django admin panel

The Django admin panel is an automatically generated, built-in administrative interface that
allows trusted users to manage website content and data directly through a web browser. It is
a powerful tool for internal data management, rapid prototyping, and performing CRUD
(Create, Read, Update, Delete) operations without writing additional backend code.

4.10 Django forms

Django Forms are a powerful framework for handling user input, providing tools to collect,
validate, sanitize, and process data securely. They automate much of the work involved in
traditional HTML forms by allowing developers to define form fields and their behaviors
programmatically in Python.

4.11 Django static files

Django static files are assets like CSS, JavaScript, and images that are delivered to the user's
browser without modification, essential for the presentation and functionality of web
applications. Django provides the [Link] app to help manage them in both
development and production.

4.12 Django template inheritance

Django template inheritance is a powerful feature that allows developers to build a base
"skeleton" template with common HTML structure and elements, which child templates can
then extend and override specific parts, following the DRY (Don't Repeat Yourself) principle.
This promotes code reusability, cleaner code, and easier site-wide maintenance.

4.13 Django ORM

The Django ORM (Object-Relational Mapper) is a built-in feature of the Django web
framework that allows developers to interact with database data using Python code and
classes instead of writing raw SQL queries. It serves as an abstraction layer, mapping Python
objects (models) to database tables.

4.14 Django CRUD Operations

17
Department of CSE (AIML), CREC (A)
Full stack Development

Django simplifies CRUD (Create, Read, Update, Delete) operations through its built-in
Object-Relational Mapper (ORM), admin interface, and views. This allows developers to
interact with the database using Python code rather than raw SQL.

4.15 Django authentication

Django comes with a robust, built-in user authentication system that handles user accounts,
groups, permissions, and cookie-based sessions by default. This system provides the core
functionality needed for user registration, login, logout, and access control, with options for
extensive customization.

4.16 Django sessions

Django provides a built-in session framework that allows you to store and retrieve user-
specific data across multiple requests, as the stateless HTTP protocol doesn't remember users
between page loads. The data is stored on the server side (by default, in the database), while a
unique session ID is sent to the user's browser in a cookie.

4.17 Django middleware

Django middleware is a low-level "plugin" system providing hooks into the request/response
processing cycle of a Django application. It allows for global alteration of Django's input and
output, enabling functionalities such as authentication, security, session management, and
logging across all views.

4.18 Django REST API basics

Building a Django REST API involves using the Django REST Framework (DRF), a
powerful toolkit that simplifies API development by providing tools for serialization, views,
and routing.

4.19 Django Deployment

Deploying a Django application involves moving it from a development environment to a
production server, which requires specific configurations for security, performance, and
scalability.

Fig 4.2 Django deployment

18
Department of CSE (AIML), CREC (A)
Full stack Development

CHAPTER-5: INTRODUCTION TO JAVASCRIPT

5.1 Variables
Variables in JavaScript are named containers used to store data values. They are dynamically
typed, meaning you don't need to specify the data type explicitly, and the type can change
during program execution. Variables are declared using the keywords let, const, and var.

5.2 Data types

JavaScript has eight main data types, which are categorized into two groups: primitive (for
single, immutable values) and non-primitive (for complex, mutable structures). JavaScript is
a dynamically typed language, so variables are not bound to a specific data type, and the type
can change during runtime.

Fig 5.1 data types

5.3 Operators
JavaScript features various operators that perform operations on values and variables. These
can be grouped into several categories: arithmetic, assignment, comparison, logical, and
more.

5.4 Conditional Statements

JavaScript conditional statements are used to make decisions in a program based on given
conditions. They control the flow of execution by running different code blocks depending on
whether a condition is true or false.
 Conditions are evaluated using comparison and logical operators.
 They help in building dynamic and interactive applications by responding to different
inputs.

19
Department of CSE (AIML), CREC (A)
Full stack Development

Fig 5.2 Conditional statements

5.5 Loops
Loops in JavaScript are used to repeatedly run a block of code until a specific condition is
met. They automate repetitive tasks and iterate over data structures like arrays and objects,
making code more efficient and organized.

5.6 Functions
In JavaScript, a function is a reusable block of code designed to perform a specific task or
calculate a value. Functions help organize code, make it more readable, and prevent repetition
(DRY principle).

5.7 Arrays
In JavaScript, an array is a special type of object used to store an ordered collection of
multiple values, or "elements", under a single variable name. Arrays are dynamic, meaning
they can change in size, and can hold elements of any data type, including numbers, strings,
objects, or even other arrays.

5.8 Strings
In JavaScript, a string is a primitive data type used for storing and manipulating text. Strings
are immutable, meaning their content cannot be changed after creation, and any method that
appears to modify a string actually returns a new one.

5.9 Objects
In JavaScript, objects are a fundamental data type used to store collections of related data and
functionality. They are essentially collections of key-value pairs called properties, and
functions stored as properties are known as methods. Almost everything in JavaScript, except
for primitive values (like strings, numbers, booleans, null, and undefined), is an object.

5.10 DOM
The Document Object Model (DOM) is a programming API for HTML and XML documents
that treats the structure of a web page as a tree of objects. JavaScript uses this model to
dynamically access, modify, and manipulate the content, structure, and style of a web page in
real-time, without needing to reload the entire page.

20
Department of CSE (AIML), CREC (A)
Full stack Development

5.11 Events
Events in JavaScript are actions or occurrences in the browser environment that the developer
can detect and respond to using code, enabling dynamic and interactive web pages. These
events can be triggered by user actions (like clicks or key presses) or system processes (like a
page finishing loading).

5.12 Form Validation

Form validation in JavaScript is the process of checking user input for accuracy,
completeness, and security before it is sent to a server. It provides immediate feedback to the
user, enhancing the experience and protecting the backend.

5.13 JavaScript ES6 Features

JavaScript ES6 (ECMAScript 2015) introduced major features that have become standard in
modern JavaScript development, allowing for cleaner, more efficient code. Key features
include new variable declaration types, concise functions, and better handling of
asynchronous operations.

5.14 Promises
JavaScript Promises are objects that represent the eventual completion or failure of an
asynchronous operation and its resulting value. They provide a cleaner alternative to
traditional callbacks for handling asynchronous code, helping to avoid "callback hell" and
making code more readable and maintainable.

5.15 Async/Await
async and await are modern JavaScript keywords (introduced in ES2017) that provide a
cleaner, more readable way to work with Promises, allowing asynchronous code to be written
in a style that looks synchronous.

5.16 Fetch API

The Fetch API in JavaScript provides a modern, promise-based interface for making
asynchronous HTTP requests to fetch resources from a server. It is a powerful replacement
for the older XMLHttpRequest (XHR) and allows for a cleaner syntax using Promises
or async/await.

5.17 Local storage

JavaScript localStorage is a feature that enables web applications to store key-value pairs
locally within the user's browser with no expiration date. Data stored this way persists even
after the browser is closed or the operating system is rebooted, making it ideal for saving user
preferences, theme settings, or application state across sessions.

5.18 Error handling

Error handling in JavaScript is the process of managing and responding to runtime errors to
prevent application crashes and improve user experience. It primarily relies on

21
Department of CSE (AIML), CREC (A)
Full stack Development

the try...catch...finally construct and the throw statement to control the flow of execution
when something goes wrong.

5.19 JavaScript modules

JavaScript modules are a modern, standardized way to organize and structure code into
smaller, reusable files that can share functionality with one another. This approach helps
avoid naming conflicts, improves maintainability, and makes the codebase more organized
and efficient.

22
Department of CSE (AIML), CREC (A)
Full stack Development

CONCLUSION

The Full Stack Development project helped me understand how both the front-end and back-
end of a web application work together. During this project, I learned how to design user
interfaces using HTML, CSS, and JavaScript and how to handle server-side operations using
backend technologies and databases.
This project improved my problem-solving skills and practical knowledge of web
development. I also learned how to connect the user interface with the database and manage
data efficiently. Working on this project helped me gain real-time development experience
and understand the complete workflow of building a web application.
Overall, this project was a valuable learning experience that enhanced my technical skills and
prepared me for future opportunities in full stack development.

23
Department of CSE (AIML), CREC (A)
Full stack Development

REFERENCE
 Visual Studio Code Official Documentation – [Link]

 HTML Documentation – [Link]

 CSS Documentation – [Link]

 JavaScript Guide – [Link]

 Bootstrap Documentation – [Link]

 Django Documentation – [Link]

 MySQL Documentation – [Link]

 Git Documentation – [Link]

 W3Schools Tutorials – [Link]

 GeeksforGeeks Programming Articles – [Link]

24
Department of CSE (AIML), CREC (A)