Click to edit Master title style

WEB DEVELOPMENT
PRESENTED BY
S P R I YA D A R S H I N I ( 2 3 U C D A 0 3 3 )
2nd B.sc. CSDA
UNDER THE GUIDENCE OF
M I S S . K . S I VA P R I YA
A S S I S TA N T P R O F F E S O R
D E PA R T M E N T O F C O M P U T E R S C I E N C E
U N I T E D C O L L E G E O F A RT S A N D S C I E N C E
C O I M B AT O R E - 6 4 1 0 2 0
1
Whattoisedit
Click Web Development?
Master title style

• Definition:
• Web development refers to the process of building and
maintaining websites and web applications.
• It involves a range of tasks including designing, programming,
and managing content.

• Key Components:
• Frontend: What users see and interact with.
• Backend: The server-side functionality (databases, server
logic).
• Full-Stack: Combining both frontend and backend development.

2 2
Front-End
Click to editDevelopment
Master title style

• What is Front-End Development?

• Deals with the visual part of a website that users interact with
directly.
• Focuses on user experience (UX) and user interface (UI).
• Technologies Used:
• HTML: Structures the content on the web page.
• CSS: Styles the visual appearance of the website.
• JavaScript: Adds interactivity (e.g., animations, dynamic
content).
• Key Tools/Frameworks:
• React.js, Vue.js, Angular: JavaScript libraries/frameworks for
building dynamic UIs.
3 3
• Bootstrap, Tailwind CSS: CSS frameworks for faster design.
Click to edit
Flowchart Master
Layout fortitle style Web
Front-End
Development:
ENSURE
PLANNING
START PLANNING
RESPONSIVENESS

ADD JAVA SCRIPT FOR

PLAN & DESIGN INTERACTIVITY

SET UP PROJECT TESTING AND

STRUCTURE DEBUGGING

VERSION
WRITE HTML
CONTROL DEPLOYMENT

STYLE WITH CSS OPTIMIZATION

END
4
Click to edit
Back-End Master title style
Development

• What is Back-End Development?

• Focuses on the server side of the application. It handles data
processing, storage, and retrieval.
• Manages user authentication, security, and database
communication.
• Technologies Used:
• Node.js, Python (Django, Flask), Ruby (Rails), PHP, Java, C#:
Programming languages and frameworks used for server-side
development.
• Databases: MySQL, MongoDB, PostgreSQL for storing and
managing data.

5
 Flowchart Layout for Back-End Web
Click to edit Master title style
Development:
Database Design &
PLANNING
START PLANNING
Integration

Define Project Authentication &

Requirements Authorization

Set up Handle Business

Development Logic & Data
Environment Processing

Choose Back-End
Testing & Debugging
Framework Deployment

Create Server & API

Version Control
Endpoints END
6
Click
Whattois edit Master in
a Database title
Webstyle
Development?

• A database in web development is a structured

collection of data that can be stored, accessed,
managed, and updated by web applications. It allows
websites and applications to store large amounts of
information such as user data, content, transactions,
and settings in an organized way. Databases play a
vital role in enabling dynamic, data-driven websites,
where content can change based on user interaction
or other factors.

7 7
Click to edit
Flowchart Master
Layout fortitle style Web Development
database

Implement Data
PLANNING
START PLANNING
Models & Migrations

Define Data Connect Back-End to

Requirements Database Backup & Recovery

Choose Database
CRUD Operations Monitor & Maintain
Type
Database

Design Database mplement Data

Schema Validation & Integrity Deploy Database

Set Up Database Database

Instance Optimization END
8 8
Whattoisedit
Click Hosting
Masterintitle
Web Development?
style

• Hosting in web development refers to the process of

storing your website's files, data, and resources on a
server so that they can be accessed by users on the
internet. It’s the service that makes your website or
web application available to the public through a web
browser. Without hosting, your website files (such as
HTML, CSS, images, videos, and scripts) would
remain on your local computer and would not be
accessible by others on the web.

9 9
Click to edit
Flowchart Master
Layout fortitle styleWeb Development
hosting

Configure DNS
PLANNING
START PLANNING
Settings
Test Website Online

Develop Web Set Up SSL Certificate

Prepare Files for Upload
Application Locally (Optional)

Choose Hosting Upload Files to the

Provider Server Launch Website

Monitor Website
Select Domain Name Set Up Database Performance &
Security

Set Up Hosting Configure Web

Account Server END
10
10
Click to edit
Full-Stack Master title style
Development

• What is Full-Stack Development?

• Full-stack developers work on both the frontend and backend,
providing end-to-end solutions.
• Full-Stack Workflow:
1.Frontend: HTML, CSS, JavaScript (React, Vue).
2.Backend: Node.js, Python, Ruby.
3.Database: MySQL, MongoDB.
4.Server: Apache, Nginx.
• Tools/Technologies:
• Git & GitHub: Version control for code management and collaboration.
• API: RESTful APIs or GraphQL for communication between frontend
and backend. 11
11
Full-Stack
Click Workflow
to edit Master title style

FRONT END BACK END

HOSTING \
DATA BASE
CLOUDING

12
Click to edit Web
Responsive Master title style
Design

Why It Matters:
• Responsive design ensures websites look good and work well on
all devices (desktops, tablets, smartphones).

• Techniques:
• Media Queries: Adjust layout based on screen size.
Flexbox/Grid: CSS techniques to create flexible layouts.

13
13
 Web Development Process
Click to edit Master title style

PLANNING DEPLOYMENT

DESIGN MAINTENANCE

DEVELOPMENT

TESTING

14
14
Steps
Click toin Building
edit Master a Website
title style

1.Planning: Define goals, target audience, and

functionality.
2.Design: Wireframes, prototypes, UI/UX design.
3.Development: Coding the frontend and backend.
4.Testing: Ensure the website works across
browsers and devices.
5.Deployment: Publish the website online using web
hosting or cloud services.
6.Maintenance: Update content and fix issues over
time.
15
Click to edit
Popular WebMaster title style
Development Tools

Frontend Tools:
• Text Editors: VS Code, Sublime Text, Atom.
• Frameworks: React, Vue, Angular, Bootstrap.
• Design Tools: Figma, Adobe XD, Sketch.

Backend Tools:
• Server Management: Apache, Nginx.
• Databases: MySQL, PostgreSQL, MongoDB.
• Version Control: Git, GitHub.

16
16
Click to edit Master
Web Hosting title style
and Deployment

What is Web Hosting?

• Web hosting is where your website files are stored and
served to users.
Popular Hosting Platforms:
• Shared Hosting: Bluehost, HostGator.
• Cloud Hosting: AWS, Google Cloud, DigitalOcean.
• Static Hosting: GitHub Pages, Netlify, Vercel.

17
17
Conclusion
Click to edit Master title style

• Web development is a broad field with many possibilities for

specialization.
• With the right tools and continuous learning, anyone can become
proficient in creating amazing websites and web applications.
• Keep practicing, exploring new technologies, and stay up-to-date
with trends.

18
18
Click to edit Master title style

THANK YOU FOR YOUR ATTENTION

19
19