Web Development
Internship Report
Submitted by: Akhilesh Tiwari
Branch: Computer Science
Academy: NTI, Rewa
Internship Duration: Jan 2025 – March 2025
Introduction to the Internship
ABC Technologies Duration and Role Core Technologies
Internship
A concentrated 2-month Gained hands-on experience
Focused on full-stack web tenure as a Web Developer with HTML, CSS, JavaScript,
development to build modern Intern. React.js, Node.js, and
websites and applications. MongoDB.
HTML – Structuring Web Content
HTML (HyperText Markup Language) is the backbone of web pages, providing the fundamental structure for all content.
Headings (H1 to H6): Organise content hierarchically.
Paragraphs (P): Standard text blocks.
Links (A): Connect to other web resources.
Images (IMG): Embed visual content.
Divisions (DIV) & Spans (SPAN): Generic containers for layout and styling.
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World</h1> <p>This is
CSS – Styling Web Pages
CSS (Cascading Style Sheets) enhances the visual presentation of
HTML documents, controlling elements like colour, typography,
and layout.
Styling Properties: Define colours, fonts, spacing, and overall
page layout.
Selectors: Utilise classes and IDs to precisely target specific
HTML elements for styling.
Responsive Design: Media queries adapt layouts for various
screen sizes and devices.
body { background-color: #f0f0f0; font-
family: Arial, sans-serif; color: #333;}
CSS Grid & Flexbox: Responsive Layouts
CSS Grid and Flexbox are powerful layout modules designed for building complex, responsive web interfaces.
Flexbox: One-Dimensional Layout Grid: Two-Dimensional Layout
Aligns and distributes items within a container along a Controls the placement of items in both rows and
single axis (row or column). Ideal for component-level columns simultaneously. Perfect for overall page
layouts. structure.
.flex-container { display: flex; .grid-container { display: grid; grid-
justify-content: space-between;} template-columns: 1fr 1fr;}
JavaScript – Enabling Interactivity
JavaScript adds dynamic behaviour, logic, and interactivity to static web pages, transforming
them into rich, user-friendly applications.
DOM Manipulation: Modify HTML and CSS in real-time.
Event Handling: Respond to user interactions like clicks, hovers, and form submissions.
AJAX & APIs: Fetch and send data asynchronously without full page reloads.
Animations: Create engaging visual effects.
React.js: Component-Based UI
Development
React is a JavaScript library for building user interfaces, known for its declarative approach and efficient rendering.
JSX Syntax Reusable Components
Seamlessly combines HTML-like Build encapsulated UI blocks that can
syntax with JavaScript logic for be reused throughout the application,
intuitive UI creation. promoting modularity.
Hooks API Props & State
Functions like useState and Manage data flow within components,
useEffect simplify state management with props for passing data down and
and side effects in functional state for internal data management.
components.
Node.js & Express: Powering the Backend
Node.js allows JavaScript to run on the server, while Express.js provides a robust framework for building web applications and APIs.
Server-Side JS: Execute JavaScript code outside the browser environment.
REST APIs: Develop powerful and scalable APIs for data exchange.
Authentication: Implement secure user authentication and authorization.
Middleware: Functions that process requests before they reach route handlers.
const express = require('express');const app =
express();app.get('/', (req, res) => res.send('Hello
Node!'));app.listen(3000, () => console.log('Server running
on port 3000'));
MongoDB – Flexible NoSQL Database
MongoDB is a leading NoSQL database that stores data in flexible, JSON-like documents, offering high scalability and performance.
Collections & Documents
1
Data is organised into collections (tables) of documents (rows), providing a natural way to store complex data structures.
Schema-less Design
2
Unlike traditional relational databases, MongoDB allows documents within a collection to have different fields, offering immense flexibility.
CRUD Operations
Supports standard Create, Read, Update, and Delete operations for efficient data management.
{ "name": "Akhilesh Tiwari", "email": "akhilesh.t@example.com", "role": "Intern", "skills": ["HTML", "CSS", "JS"]}
3
Project: Personal
Portfolio Website
As part of my internship, I developed a comprehensive personal
portfolio website to showcase my web development skills.
Core Pages Key Features
• Home: Introduction and key • Responsive Layout: Adapts
highlights. seamlessly to various
• About Me: Detailed • devices.
Card-Based Project Grid:
professional background. Visually appealing and easy
• Projects: Demonstrates my to navigate.
development work with a • Smooth Scrolling &
card-based grid. Animations: Enhances user
• Contact Form: For inquiries experience.
and collaborations.
