SUMMER INTERNSHIP

Name of the Student : Puchala Pavanitha Sivani

Name of the Course : Web Full Stack Developer
Name of the College : Vishnu Institute of Technology
Registration Number : 22PA1A4288
Period of Internship : April 2025 - June 2025

Name of Internship : AICTE

Organization

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VISHNU INSTITUTE OF TECHNOLOGY (AUTONOMOUS)
(Approved by AICTE, Accredited by NBA & NAAC and permanently affiliated to JNTUK)

BHIMAVARAM – 534 202

2025 – 2026
 WEB FULLSTACK DEVELOPER

An Internship report submitted in partial

fulfillment of the requirements for the
degree of

BACHELOR OF TECHNOLOGY
In

COMPUTER SCIENCE AND ENGINEERING

Submitted by
Puchala Pavanitha Sivani
Reg. No : 22PA1A4288

Under the Faculty Guidance of

Mrs. S. Ramya
Assistant Professor

DEPARTMENT OF ARTIFICIAL INTELILIGENCE & MACHINE LEARING

VISHNU INSTITUTE OF TECHNOLOGY (AUTONOMOUS)
(Approved by AICTE, Accredited by NBA & NAAC and permanently affiliated to JNTUK)

BHIMAVARAM – 534 202

2025 – 2026
 VISHNU INSTITUTE OF TECHNOLOGY (AUTONOMOUS)
(Approved by AICTE, Accredited by NBA & NAAC and permanently affiliated to JNTUK)

BHIMAVARAM- 534202

DEPARTMENT OF ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

DECLARATION

I, Puchala Pavanitha sivani, Regd. No. 22PA1A4288, a student of IV Year BACHELOR OF

TECHNOLOGY in ARTIFICIAL INTELLIGENCE MACHINE LEARNING at Vishnu
Institute of Technology, do hereby declare that I have successfully completed the mandatory
internship during the period April 2025 to June 2025 at AICTE, under the faculty guidance of Mrs.
S. Ramya, Department of Artificial Intelligence and Machine Learning, Vishnu Institute of
Technology.

Puchala Pavanitha Sivani

Date:
 VISHNU INSTITUTE OF TECHNOLOGY (AUTONOMOUS)
(Approved by AICTE, Accredited by NBA & NAAC and permanently affiliated to JNTUK)

BHIMAVARAM- 534202
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the Summer Intern Project Report entitled “WEB FULLSTACK
DEVELOPER”, is being submitted by PUCHALA PAVANITHA SIVANI, [Link]:
22PA1A4288 submitted in fulfillment for the degree of “BACHELOR OF TECHNOLOGY”
in “ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING” is a record of summer
Intern Project work carried out by her under my supervision during the academic year 2025-2026
and it has been found worthy of acceptance according to the requirements of the university.

Internal Examiner Head of the Department

External Examiner Class Incharge

 Full Stack Development

Contents
Page No
1 Introduction to Web Development 4

1.1 Overview of Web Development

1.2 Importance of Web Technologies

1.3 Frontend vs Backend Overview

1.4 Skills Required for Modern Web Developers

1.5 Environment Setup

1.6 Learning Outcomes

2 HTML – Structure of Web Pages 5

2.1 Introduction to HTML

2.2 HTML Tags & Elements

2.3 Forms, Tables & Media

2.4 Semantic HTML

2.5 Learning Outcomes

3 CSS – Styling the Web 6

3.1 Introduction to CSS

3.2 Selectors, Colors & Layouts

3.3 Flexbox & Grid

3.4 Responsive Design

3.5 Tools & Best Practices

3.6 Learning Outcomes

4 JavaScript – Interactivity & Logic 7

4.1 Introduction to JavaScript

4.2 DOM Manipulation

4.3 Events & User Interaction

4.4 Basic Fetch API

Page | 1
 Full Stack Development
4.5 Props and Data Passing

4.6 ES6 Features

4.7 Learning Outcomes

5 Tailwind CSS – Utility-First Design 9

5.1 Introduction to Tailwind CSS

5.2 Tailwind Utility Classes

5.3 Responsive Design with Tailwind

5.4 Component Styling

5.5 Learning Outcomes

6 Version Control – Git & GitHub

6.1 Introduction to Git

6.2 Git Commands (Init, Add, Commit)

6.3 GitHub Repository Setup

6.4 Branching & Collaboration

6.5 Learning Outcomes

7 Web Hosting – Deployment & Live Sites 11

7.1 Hosting Platforms Overview

7.2 Netlify Deployment

7.3 GitHub Pages Deployment

7.4 Website Testing

7.4 Website Testing

8 SQL – Relational Databases 12

8.1 Introduction to SQL

8.2 Tables, Rows & Columns

8.3 CRUD Operations

8.4 Joins & Constraints

Page | 2
 Full Stack Development
8.5 Learning Outcomes

9 MongoDB – NoSQL Databases 13

9.1 Introduction to MongoDB

9.2 Documents & Collections

9.3 CRUD Operations in MongoDB

9.4 MongoDB Compass Overview

9.5 Learning Outcomes

10 Project Implementation – Personal Portfolio 14

Website
11 Activity Log 16

12 Certificate 24

Page | 3
 Full Stack Development

CHAPTER-1:INTRODUCTION TO WEB DEVELOPMENT

1.1 Overview of Web Development

Web Development refers to the process of building websites and web applications that run on
browsers. It involves creating the structure, design, and interactive functionality of a site using
various technologies. During the internship, we explored how webpages are formed using HTML,
styled with CSS, and made interactive through JavaScript. We also worked with modern tools like
Tailwind CSS, Git, and hosting platforms to understand complete website development. This
foundation helped us gain a practical understanding of how the internet delivers user interfaces.

1.2 Importance of Web Technologies

Web technologies play a critical role in shaping modern digital experiences. They allow businesses
to create online platforms, automate services, and provide information instantly to users worldwide.
Throughout the internship, we saw how HTML, CSS, and JavaScript form the core of every web
interface. Additionally, tools like SQL and MongoDB help manage data effectively. Understanding
these technologies is essential for building responsive, user-friendly, and scalable web applications
in today’s industry.

1.3 Frontend vs Backend Overview

Frontend refers to everything users see and interact with directly in the browser. It focuses on layout,
styling, and user experience using HTML, CSS, JavaScript, and frameworks like Tailwind CSS.
Backend is the logic behind the scenes, handling data, servers, APIs, and security using tools like
SQL or MongoDB. Together, frontend and backend work as two important layers of a complete web
application. During the internship, we learned how both sides depend on each other to deliver a
functional website.

1.4 Skills Required for Modern Web Developers

Modern web developers require a combination of technical and problem-solving skills. They should
know HTML, CSS, and JavaScript for the frontend, along with responsive design principles.
Familiarity with Git and hosting platforms is necessary for collaboration and deployment. Basic
understandindatabases like SQL and MongoDB helps in managing data. Soft skills like debugging,
communication, and logical thinking are equally important to build efficient and user-friendly
application

Page | 4
 Full Stack Development

CHAPTER 2. HTML – Structure of Web Pages

2.1 Introduction to HTML

HTML (Hyper Text Markup Language) is the standard language used to create the structure of web
pages. It defines how content such as text, images, links, and multimedia is arranged in the browser.
During this module, we learned how HTML acts as the foundation for all websites and how it works
together with CSS and JavaScript. Understanding HTML layout principles helped us build clean and
organized web interfaces.

2.2 HTML Tags & Elements

HTML pages are built using various tags and elements, each serving a specific purpose. We
practiced using headings, paragraphs, lists, links, images, and container elements like <div> and
<section>. Attributes such as id, class, src, and href were used to enhance functionality and
structure. This module strengthened our understanding of how different elements contribute to
meaningful and accessible webpage layouts.

2.3 Forms, Tables & Media

Forms allow users to submit data, and we worked with input fields, dropdowns, radio buttons, and
buttons. Tables were used to display structured data using rows and columns. We also integrated
multimedia such as images, audio, and videos using HTML media tags. These features helped us build
interactive and content-rich web pages.

2.4 Semantic HTML

Semantic elements like <header>, <nav>, <main>, <article>, and <footer> give meaning to the content
and improve accessibility and SEO. Using semantic structure also makes the code cleaner and easier to
maintain. The internship emphasized writing meaningful markup rather than relying only on generic
<div> tags.

2.5 Learning Outcomes

By the end of this module, we gained confidence in building structured, accessible, and semantic web
pages. We understood how HTML acts as the core layer of any website and how it integrates with
CSS and JavaScript. The skills learned enabled us to create well-designed layouts that can be easily
extended with styling and interactivity.

Page | 5
 Full Stack Development

CHAPTER 3: CSS – Styling the Web

3.1 Introduction to CSS

CSS (Cascading Style Sheets) is used to style and visually enhance web pages. It controls colors,
spacing, fonts, and overall layout. During the internship, we learned how CSS helps create attractive and
user-friendly interfaces. By separating structure and design, CSS makes websites easier to maintain and
update.

3.2 Selectors, Colors & Layouts

CSS selectors help target specific HTML elements for styling, such as classes, IDs, and tags. We
explored color models like RGB, HEX, and HSL. Layout properties such as margin, padding, border,
and positioning were used to arrange web elements effectively. These fundamentals form the base of
every modern webpage.

3.3 Flexbox & Grid

Control flow constructs (if/else, switch) and loops (for, while, for...of) were used to
process collections, validate input and implement application logic. Exercises included generating
lists, filtering arrays and managing conditional UI updates. These fundamentals helped implement
dynamic rendering strategies later in React. Debugging loop logic and edge cases were part of the lab
exercises.

Functions, Arrays, and Objects

Responsive design ensures a website adapts to different screen sizes. We learned to use media queries,
flexible units, and fluid layouts for mobile-friendly pages. This approach improves accessibility and
provides a consistent user experience across phones, tablets, and desktops. Every project developed
was tested for responsiveness.

3.5 Tools & Best Practices

Tools like VS Code, Chrome DevTools, and online color palettes supported efficient styling. Best
practices included writing clean, reusable classes, maintaining consistent spacing, and following
accessibility standards. We also learned to organize stylesheets properly to improve readability and
scalability of web projects.

3.6 Learning Outcomes

By the end of this module, I gained a clear understanding of how CSS transforms basic HTML pages
into visually appealing and well-structured interfaces. I learned to apply different selectors, colors,
and typography to improve design consistency. Using Flexbox and Grid, I was able to create modern,
responsive layouts that adapt smoothly to different screen sizes. I also became comfortable using
developer tools to debug styling issues and optimize page appearance. Overall, this module
strengthened my ability to design clean, user-friendly, and professional web pages

Page | 6
 Full Stack Development

Chapter 4 JavaScript – Interactivity & Logic

4.1 Introduction to JavaScript

JavaScript is the core scripting language of the web that adds interactivity, dynamic updates, and
logical functionality to webpages. It allows developers to manipulate content, respond to user actions,
and connect with external APIs. During the internship, we explored how JavaScript controls the
behavior of web pages and enables modern, interactive user experiences. It serves as the bridge
between static UI components and real-time data handling in applications.

4.2 DOM Manipulation

DOM manipulation refers to modifying the structure, style, or content of a webpage dynamically using
JavaScript. We used methods like getElementById, querySelector, createElement, and appendChild to
change elements in real time. Through practical exercises, we built interactive components such as
dynamic lists and live content updates. DOM manipulation helped us understand how JavaScript
transforms static HTML into responsive, data-driven UI.

4.3 Events & User Interaction

JavaScript event handling enables webpages to respond to user actions like clicks, typing, scrolling,
or form submissions. We implemented event listeners (addEventListener) to trigger functions based
on specific interactions. This module taught us how to build interactive elements such as validation
inputs, buttons, and alerts. It also improved our understanding of user-centered design and responsive
behavior in web applications.

4.4 Basic Fetch API

The Fetch API allows JavaScript to make network requests and retrieve data from servers or external
APIs. We practiced sending GET and POST requests, handling JSON responses, and managing errors.
This feature helps connect the frontend with real-time data sources. Through hands-on tasks, we
learned how web applications communicate with backend services to display dynamic content.

4.5 Props and Data Passing (Frontend Data Flow Basics)

Although typically used in frameworks like React, the concept of props represents the idea of passing
data from one component or function to another. In this internship, we learned how structured data
flows improve application modularity and reusability. Understanding data passing helped us build UI
elements that adapt based on input, making applications more organized and maintainable.

4.6 ES6 Features

ES6 introduced modern JavaScript features that simplify coding and improve readability. We learned
arrow functions, template literals, spread/rest operators, destructuring, and block-scoped variables (let,
const). These features helped us write cleaner and more efficient code. ES6 concepts were used
throughout our scripts, making development faster and more modular

Page | 7
 Full Stack Development

4.7 Learning Outcomes

By the end of this module, we gained confidence in writing interactive JavaScript code, manipulating the
DOM, and handling user events effectively. These skills formed a strong foundation for building
responsive, user-friendly web applications.

Page | 8
CHAPTER 5 – Tailwind CSS – Utility-First Design

5.1 Introduction to Tailwind CSS

Tailwind CSS is a modern utility-first CSS framework that provides pre-defined classes for styling
elements directly in HTML. Instead of writing custom CSS files, developers use small utility classes
to rapidly build responsive and consistent user interfaces. During the internship, we explored how
Tailwind improves development speed and reduces CSS complexity. Its simplicity makes it highly
suitable for both beginners and large-scale applications.

5.2 Tailwind Utility Classes

Tailwind offers a wide range of utility classes for spacing, colors, typography, borders, shadows,
flexbox, and grid layouts. By combining these small classes, we can design fully responsive
interfaces without writing traditional CSS. Utilities like p-4, m-2, text-xl, bg-blue-500, and
rounded-lg were frequently used. This modular approach encouraged clean, reusable, and
predictable styling throughout our projects

5.3 Responsive Design with Tailwind

Tailwind provides built-in responsive breakpoints such as sm, md, lg, and xl, allowing developers to
create mobile-first designs effortlessly. We learned how to adjust layouts, spacing, typography, and
visibility based on screen sizes using classes like sm:flex, md:text-xl, and lg:grid-cols-3. This made it
easy to ensure our pages looked good on phones, tablets, and desktops.

5.4 Component Styling

Using Tailwind, we built reusable components such as buttons, cards, navigation bars, and hero
sections. Utility classes helped define consistent spacing, colors, and typography across all
components. We also combined Tailwind with simple JavaScript to create interactive UI elements.
This component-driven approach aligned well with modern frontend workflows and improved
development efficiency.

5.5 Learning Outcomes

Through this module, we gained the ability to design responsive and visually appealing user interfaces
using Tailwind CSS without relying heavily on custom CSS. We learned how utility classes speed up
development and maintain design consistency. This experience strengthened our understanding of
modern UI development and prepared us for professional front-end workflows.
 Full Stack Development

CHAPTER 6 – Version Control – Git & GitHub

6.1 Introduction to Git

Git is a distributed version control system that helps developers track changes in their code over
time. It allows teams to work collaboratively without overwriting each other’s work. During the
internship, Git was used to maintain different stages of project development and ensure code
safety. It also helped in reverting mistakes and managing multiple versions of the project
efficiently.

6.2 Git Commands (Init, Add, Commit)

Basic Git commands form the foundation of version control.

 git init initializes a new repository.
 git add stages changes to be saved.
 git commit records those changes with a message.
These commands helped organize daily progress and maintain a clear development history.

6.3 GitHub Repository Setup

GitHub is a cloud-based platform used to store and manage Git repositories online. During the
internship, repositories were created to store project files, push local commits, and maintain backup
versions. GitHub also provides issue tracking, documentation, and project hosting, making
collaboration more structured and transparent.

6.4 Branching & Collaboration

Branches allow developers to work on new features independently without affecting the main code.
We practiced creating branches, switching between them, merging updates, and resolving conflicts.
This made teamwork easier and taught the importance of organized collaboration when working on
multi-module projects.

6.5 Learning Outcomes

By the end of this module, I learned how to use Git for version control and GitHub for remote
collaboration. I understood how to track changes, manage repositories, and work efficiently using
branches. These skills improved code quality, organization, and teamwork throughout the project.

Page | 10
 Full Stack Development

CHAPTER 7 – PROJECT IMPLEMENTATION: SERVICE DESK FOR

7.1 Hosting Platforms Overview

Web hosting platforms allow developers to publish their websites on the internet so users can access
them anytime. During the internship, we explored popular hosting services like Netlify, GitHub Pages,
and Render. These platforms support static as well as dynamic sites, offering features such as
continuous deployment, free SSL certificates, and fast global delivery. Understanding hosting options
helps developers choose the right platform based on project requirements and performance needs.

7.2 Netlify Deployment

Netlify provides a simple and efficient workflow for deploying modern web applications. We learned
how to connect a GitHub repository, configure build settings, and automatically deploy changes
through continuous integration. Netlify also offers features like environment variables, form handling,
and preview builds. Deploying our project on Netlify demonstrated how easily a static or frontend site
can go live with minimal setup.

7.3 GitHub Pages Deployment

GitHub Pages is a free service that hosts static websites directly from a GitHub repository. During the
training, we practiced creating repositories, enabling GitHub Pages, and structuring files for smooth
deployment. This method is ideal for hosting portfolios, documentation, and small projects. It also
integrates directly with version control, ensuring quick updates and reliable hosting.

7.4 Website Testing

Before deployment, website testing ensures the application works smoothly across devices and browsers.
We evaluated responsiveness, load time, broken links, and overall user experience. Tools like browser
inspector, Lighthouse, and online validators helped identify issues that needed fixing. Testing the hosted
site ensured it performed well for real users and maintained a professional, error-free appearance

Page | 11
 Full Stack Development

CHAPTER 8 – SQL – Relational Databases

8.1 Introduction to SQL

SQL (Structured Query Language) is a standard language used to manage and interact with relational
databases. It allows developers to create, update, and retrieve structured data efficiently using
commands. SQL is widely used in web applications for storing user information, product details, and
transactional data. During the internship, we explored the role of SQL in backend systems and how it
ensures data accuracy and consistency. Understanding SQL is essential for building dynamic, data-
driven applications.

8.2 Tables, Rows & Columns

Relational databases store data in the form of tables, where each table contains rows and columns.
Columns define data attributes such as name, age, or email, while rows represent individual records.
This structured format helps maintain organized and searchable information. We learned how to
create tables using appropriate data types and constraints to ensure clean data storage. Understanding
table structure is the foundation of designing efficient database schemas.

8.3 CRUD Operations

CRUD stands for Create, Read, Update, and Delete—four essential operations used to work with
database records. Using SQL commands like INSERT, SELECT, UPDATE, and DELETE,
developers manage data throughout an application’s lifecycle. We practiced running these queries to
add new users, retrieve data, modify records, and remove unnecessary entries. CRUD operations
form the backbone of most backend functionalities. Mastering these commands allowed us to interact
effectively with SQL databases.

8.4 Joins & Constraints

Joins allow combining data from multiple tables using related columns, enabling complex queries such
as linking customers with their orders. We explored INNER JOIN, LEFT JOIN, and RIGHT JOIN to
understand data relationships. Constraints like PRIMARY KEY, FOREIGN KEY, UNIQUE, and
NOT NULL ensure data integrity and prevent invalid entries. These features help maintain accurate
and meaningful connections between database tables. Learning joins and constraints improved our
ability to design normalized databases.

8.5 Learning Outcomes

By the end of the SQL module, we gained confidence in writing efficient queries and managing relational
databases. We understood how to design tables, enforce relationships, and maintain data integrity through
constraints. CRUD operations helped us work with real-world datasets and simulate backend features.
The module strengthened our ability to build structured and scalable web applications. Overall, SQL
provided a strong foundation for backend and data-driven development.

Page | 12
 Full Stack Development

CHAPTER 9 - MongoDB – NoSQL Databases

9.1 Introduction to MongoDB

MongoDB is a popular NoSQL database that stores information in flexible, JSON-like documents instead
of traditional tables. This schema-less structure allows developers to store data without predefined
formats, making it ideal for rapidly changing applications. Its scalability, high performance, and ease of
use make it a preferred choice for modern web development. MongoDB integrates well with JavaScript-
based applications and supports powerful querying capabilities. During the internship, we explored how
MongoDB simplifies data storage for dynamic web projects.

9.2 Documents & Collections

In MongoDB, data is stored in documents, which are similar to JSON objects containing key-value
pairs. Multiple related documents form a collection, similar to tables in relational databases but
without strict schemas. This flexible structure allows fields to differ across documents, supporting
diverse and evolving data formats. We learned how collections group related data, making retrieval
and management efficient. Understanding this hierarchy helped us design clean and scalable database
structures

9.3 CRUD Operations in MongoDB

MongoDB supports all major CRUD operations: creating new documents, reading existing ones,
updating fields, and deleting data when required. Using commands like insertOne, find, updateOne,
and deleteOne, we practiced handling real-world database tasks. With the help of Mongoose and the
MongoDB shell, we executed structured queries to manage data effectively. These CRUD skills
became essential when building dynamic applications that require continuous data interaction.

9.4 MongoDB Compass Overview

MongoDB Compass is a graphical tool used to visually explore and manage databases. It allows
developers to view collections, documents, indexes, and query performance without writing code.
During the internship, we used Compass to insert data, run filters, analyze schema structures, and
validate CRUD operations. Its user-friendly interface made database learning easier and helped in
debugging issues quickly. Compass also provided insights into data relationships and distribution.

9.5 Learning Outcomes

By the end of this module, we gained confidence in using MongoDB for storing and managing data in
web applications. We understood the difference between structured and unstructured databases and how
NoSQL flexibility improves development speed. CRUD operations, Compass navigation, and document
modeling became strong foundational skills. This module prepared us to integrate MongoDB with
frontend and backend workflows. Overall, MongoDB improved our ability to build scalable, data-driven
applications.
Page | 13
 Full Stack Development

CHAPTER 10 – PROJECT IMPLEMENTATION: PERSONAL PORTFOLIO

WEBSITE

Project Overview

The Personal Portfolio Website is a fully responsive web application designed to showcase a user’s
profile, skills, projects, and contact information. The goal of the project was to create a professional
online identity using core web technologies such as HTML, CSS, JavaScript, and Tailwind CSS. The
website includes visually appealing sections, smooth navigation, and a clean layout optimized for both
mobile and desktop users. This project integrated the concepts learned during the internship, including
responsive design, user interaction, version control practices, and hosting techniques.

Objective and Purpose

The primary objective of the project was to build a personal portfolio that highlights an individual’s
abilities in web development. It serves as a central platform for recruiters to view the candidate’s skills,
academic background, and development projects. The purpose was also to apply front-end development
concepts, improve UI/UX design skills, and understand the professional workflow of building, testing,
and deploying a website. Through this project, I gained practical experience in transforming static layouts
into dynamic, interactive web pages.

System Architecture

The system follows a client-side architecture where all rendering happens in the browser using HTML,
CSS, Tailwind CSS, and JavaScript. The structure is divided into reusable sections such as Home, About,
Skills, Projects, and Contact. Each section is linked through internal navigation, creating a seamless
scrolling experience. JavaScript handles interactive features like form validation and dynamic content
updates. The deployment relies on hosting platforms like Netlify, which serve the static files globally for
high performance and reliability.

Technology Stack

The project uses HTML for structural design, CSS and Tailwind CSS for responsive styling, and
JavaScript for interactivity and form handling. Tailwind CSS was chosen to speed up UI development
with utility-first classes. Git and GitHub were used for version control, ensuring smooth tracking of
updates. The final website was deployed on Netlify, enabling fast and secure hosting. Additional included
VS Code for development, Git Bash for version control commands, and Chrome DevTools for testing and
debugging.

Functional Modules

The portfolio includes the following modules:

 Home Section: Intro banner with name and role.
 About Section: Personal introduction, education, and background.
 Skills Section: List of technical skills with styled icons.
 Projects Section: Showcases completed works with descriptions and links.

Page | 14
 Full Stack Development
 Contact Section: Includes a contact form with JavaScript-based validation.
Utility modules include navigation, responsive layout settings, and CSS components. Each module is built
as a self-contained block to ensure easier maintenance and future scalability.

Folder Structure

The project was organized using a clean and modular folder structure. The assets folder stores images,
icons, and media files, while the css folder contains custom and Tailwind-generated stylesheets.
JavaScript files are placed in a separate js folder for handling interactions and validations. The main
HTML file acts as the entry point, linking all the styles and scripts. This structured approach improved
readability and made future updates easier to manage.

Key Features Implemented

The website includes a fully responsive layout that adapts to various screen sizes using Tailwind’s
responsive utilities. A smooth navigation bar enables easy movement across sections. JavaScript form
validation ensures that users enter correct information before submitting. Tailwind components were used
to design modern cards and grids for the projects section. Additional features include hover animations,
transitions, mobile menu handling, and consistent theme styling.

Design, Development, and Integration

The interface was first sketched and planned using a wireframe-style layout. HTML was used to build the
fundamental structure, followed by Tailwind CSS styling to create a clean and modern UI. JavaScript was
integrated to add interactive behaviors like menu toggles and form validation. Git was used throughout
the development process to commit changes and maintain a clean workflow. After testing the UI across
different devices, the final build was deployed to Netlify.

Testing and Debugging

The website was thoroughly tested using browser developer tools to check layout responsiveness, fix
alignment issues, and adjust breakpoints. JavaScript functions were debugged using console logs to
ensure that all interactions worked correctly. Lighthouse was used to assess accessibility, performance,
and SEO. Cross-browser testing was conducted to ensure the design appeared consistent in Chrome,
Edge, and Firefox. Errors related to form validation, fonts, and media scaling were resolved during the
debugging phase.

Deployment

The project was deployed on Netlify, taking advantage of its automatic build and drag-and-drop
deployment features. The GitHub repository was connected to enable continuous deployment upon new
commits. After deployment, the live link was tested on different devices for confirmation. Metadata and
favicon support were added to enhance the professional appearance of the website. The deployment
ensured high uptime, fast global loading, and a reliable live URL for sharing with recruiters.

Project Outcomes and Achievements

Through this project, I gained hands-on experience in building responsive UIs, organizing web assets,
applying Tailwind classes effectively, and deploying websites. I learned how to structure a complete
frontend project, handle user interactions, and apply best practices in design and accessibility. The
portfolio now serves as a personal branding tool and supports future job applications. The project
successfully integrated all the skills learned during the internship.
Page | 15
 Full Stack Development

ACTIVITY LOG

Day Person
BRIEF DESCRIPTION OF
LEARNING OUTCOME
In-charge
THE DAILY ACTIVITY
Signature
Introduction to Tailwind CSS and
Day- 1 environment setup. Understood utility-first styling
&2 and Tailwind workflow

Practiced Tailwind utility classes for

Day – 3 spacing, colors, layout, and Gained skills to structure web
&4 typography pages effectively

Built responsive components (cards, Strengthened ability to combine

Day – 5 navbars, grids) using Tailwind. UI and logic effectively.
&6

JavaScript Events and Fetch API basics. Gained experience designing

Day – 7 Implemented real-time form interactions modern UI layouts.
&8

Implemented ES6 features:

let/const,arrow functions,
Day – 9 template strings. Learned to fetch data and respond
& 10 to user inputs.

Improved coding
Day – 11 Created small JS projects integrating Tailwind efficiency using modern
& 12 UI. JS syntax.

Completed a mini responsive website using Demonstrated ability to build

Day – 13 Tailwind + JavaScript. modern UI-based web interfaces.
& 14

Page | 16
 Full Stack Development

WEEKLY REPORT

WEEKLY REPORT (WEEKS-1 & 2)

Objective:

To build a strong foundation in core web technologies by learning HTML, CSS, and basic
JavaScript, enabling students to create structured, styled, and interactive webpages.

Weekly Report:

During the first two weeks, students were introduced to the fundamentals of web development.
The sessions covered HTML for webpage structure, CSS for styling and layout, and basic
JavaScript for adding interactivity. Activities included creating static pages, designing responsive
layouts using Flexbox and Grid, and implementing simple event-driven features through
JavaScript. By the end of Week 2, participants were able to build fully functional, responsive, and
user-interactive webpages using core frontend technologies.

Page | 17
 Full Stack Development

ACTIVITY LOG

Day Person
BRIEF DESCRIPTION OF
LEARNING OUTCOME
In-charge
THE DAILY
Signature
ACTIVITY

Day 1-2 Introduction to Tailwind CSS and Understood utility-first styling and
environment setup. Tailwind workflow.

Practiced Tailwind utility classes for Learned to style components

Day 3-4
spacing, colors, layout, efficiently using Tailwind utilities.
and typography

Day 5- 6 DOM manipulation and event handling Practiced creating interactive web
pages

Day 7-8 ES6 concepts – let/const, arrow Enhanced modern JS coding skills
functions, template literals

Day 9-10 Hands-on mini tasks using JS Improved logic and problem-
(calculator, form solving
validation)

Day 11-12 Introduction to Git and GitHub Learned basics of version control
and repositories

Day 13–14 Completed a mini responsive website using

Tailwind + JavaScript.
Demonstrated ability to build modern
UI-based web interfaces.

Page | 19
 Full Stack Development

WEEKLY REPORT (WEEKS 3 & 4)

Objective:

To enhance frontend skills through JavaScript logic, DOM manipulation, and introduction to Tailwind CSS
for modern UI development.

Weekly Report:

In Weeks 3 and 4, students advanced from basic scripting to dynamic web development. They practiced
JavaScript functions, arrays, events, and DOM manipulation to update content programmatically. Tailwind
CSS was introduced to build fast, responsive UIs using utility-first classes. Hands-on exercises included
creating interactive components, styling UI sections, and combining JS + Tailwind for dynamic page behavior.
By the end of Week 4, students were comfortable building interactive interfaces with modern
styling techniques.

Page | 19
 Full Stack Development

Day Person
BRIEF DESCRIPTION OF
LEARNING OUTCOME
In-charge
THE DAILY
Signature
ACTIVITY

Introduction to Git & GitHub. Learned Understood version control and

Day 1-2 init, add, commit, push basic Git workflow.
commands.

Created GitHub repositories and practiced Learned collaboration techniques

Day – 3-4
branching & merging. and repository management.

Learned fundamental SQL structure

Day 5-6 Introduction to SQL: tables, rows, columns, and relational concepts.
constraints.

Day 7-8 Performed CRUD operations and simple Gained hands-on experience with
JOINs in SQL. database queries.

Introduction to MongoDB: documents, Improved ability to work with

Day 9-10 collections, Compass usage. NoSQL databases.

Day 11-12 Integrated React frontend with [Link] Achieved seamless data exchange
backend via Axios. between client and server

Day 13-14 Compared SQL vs NoSQL; created sample Developed understanding of

datasets. database selection & use-cases.

Page | 20
 Full Stack Development

WEEKLY REPORT (WEEKS 5 & 6)

Objective:

To introduce backend-related concepts such as version control, web deployment, SQL basics, and
MongoDB for storing data.

Weekly Report:

Weeks 5 and 6 focused on strengthening development workflow and data-handling skills. Students
learned Git commands for tracking code, setting up GitHub repositories, and collaborating using
branches. Deployment platforms like Netlify and GitHub Pages were used to host live websites.
Introduction to SQL covered creating tables and performing CRUD operations, while MongoDB sessions
explained NoSQL structure and basic document queries. By the end of Week 6, participants could deploy
websites online and work with both relational and NoSQL databases.

Page | 21
 Full Stack Development

ACTIVITY LOG

Day Person
BRIEF DESCRIPTION OF
LEARNING OUTCOME
In-charge
THE DAILY ACTIVITY
Signature

Learned navigation and routing

Day 1-2 techniques
Planned project structure and selected
sections for the portfolio website.

Understood data integration from

APIs
Day 3-4
Developed pages: Home, About, Skills,
Projects, Contact.

Styled portfolio using Tailwind,added Created modern UI with

Day 5-6
animations and responsiveness professional design standards.

Added JavaScript interactions and form Strengthened interactive behavior

Day 7-8 validation. handling.

Day 9-10 Deployed site using Netlify and linked Gained live hosting and
GitHub repository. deployment experience.

Day 11-12 Performed website testing (mobile, Ensured performance and usability
responsiveness, bug fixing). across devices.

Day 13–14 Prepared final documentation, screenshots, Completed full project cycle with
and project report. documentation.

Page | 22
 Full Stack Development

WEEKLY REPORT (WEEKS 7 & 8)

Objective:

To apply all learned skills in developing and deploying a complete web project — a Personal Portfolio
Website.

Weekly Report:

The final two weeks were dedicated to the capstone project. Students designed and developed a complete
personal portfolio website using HTML, CSS, Tailwind, and JavaScript. They added sections like About,
Skills, Projects, and Contact, integrated form validation, and optimized the UI for responsiveness. The
site was deployed on Netlify and linked to a GitHub repository for version control. By the end of Week 8,
each participant successfully delivered a polished, fully functional, and hosted portfolio project
demonstrating their overall learning.

Page |23
CERTIFICATE

Page | 24