An overview of full stack web development

1. AN OVERVIEW OF FULL STACK
WEB DEVELOPMENT
Composed by Longsaar Francis

2. LONGSAAR FRANCIS MUKNAAN
CURRENT GDG ON CAMPUS LEAD, ATBU CHAPTER
I AM A FULL-STACK WEB&MOBILE DEVELOPER
& ALSO A COMPUTER SCIENCE STUDENT

3. INTRODUCTION
An Overview And guide To Full-Stack Web Development

4. WHAT IS WEB DEVELOPMENT?
• Definition: Web development is simply the process
of writing software programs that run on a
browser.
• It consists of two main parts: The front-end and
the back-end. Why it matters: Knowing both helps
in understanding full-stack development.

5. WHAT IS FRONTEND DEVELOPMENT?
• Front-end development refers to the process of building the
user-facing components of a web application (buttons,
forms, modals, e.t.c).
• Frontend is everything users directly interact with on a
website or application.
• Key Technologies:
⚬ HTML, CSS, JavaScript – The core building blocks
⚬ Frameworks/Libraries: React, Vue, Angular

6. WHO IS A FRONTEND DEVELOPER?
• A frontend developer is a professional who uses HTML, CSS,
and JavaScript to design and build the visual and interactive
elements of websites and applications that users engage
with directly.
• They ensure the interface is responsive, accessible, and
visually appealing. Every feature you see and interact with
on a website (like buttons, menus, and animations) is
created by a frontend developer.

7. WHAT IS BACKEND DEVELOPMENT?
• Backend development refers to the process of
building the server-side logic of a website or
application, focusing on the underlying
infrastructure that users don't directly see.
• This includes: Databases, Application
Programming Interfaces (APIs), Data
management.

8. WHAT IS BACKEND DEVELOPMENT?
• Backend handles business logic, database interactions, and
server-side processing.
• Key Technologies:
- Server-side programming: JavaScript, Python, Java, PHP
- RESTful APIs vs GraphQL
- Frameworks/Libraries: NodeJS, Express, Django, Flask,
Spring, Struts, Laravel, CodeIgnit

9. WHAT IS BACKEND DEVELOPMENT?
• Backend handles business logic, database interactions, and
server-side processing.
• Key Technologies:
- Server-side programming: JavaScript, Python, Java, PHP
- RESTful APIs vs GraphQL
- Frameworks/Libraries: NodeJS, Express, Django, Flask,
Spring, Struts, Laravel, CodeIgnit

10. WHO IS A BACKEND DEVELOPER?
• A backend developer focuses on creating and maintaining
the server-side components of web applications.
• A backend developer focuses on creating and maintaining
the server-side components of web applications. They are
primarily tasked with developing server-side APIs, handling
database operations, and ensuring that the backend can
manage high traffic volumes efficiently.

11. WHAT IS FULL-STACK WEB DEVELOPMENT?
• Full stack development refers to the process of building
complete application software, encompassing both,
Front-end and Backend.
• It is a practice of working with both the frontend
(client-side) and backend (server-side) of web
applications

12. WHO IS A FULL-STACK DEVELOPER?
• A full-stack developer is a programmer who has expertise in both
front-end and back-end development. This means they can
handle all aspects of building a website or application, from
creating the user interface and user experience (UI/UX) to
managing the server-side logic, database integration, and API
connectivity.

13. FULLSTACK WEB DEVELOPMENT STACKS
• Development Stacks: A development or software stack, is a
collection of technologies and tools used to build and deploy a
software application. In web development they include:
• MERN Stack:
- MongoDB (database)
- Express.js (back-end framework)
- React (front-end library)
- Node.js (back-end runtime environment)

14. FULLSTACK WEB DEVELOPMENT STACKS
• MEAN Stack:
- MongoDB (database)
- Express.js (back-end framework)
- Angular.js (front-end library)
- Node.js (back-end runtime environment)
• LAMP Stack:
- Linux (Operating System)
- Apache (Web Server)
- MySQL (database)
- PHP (back-end programming language)

15. THE FULL-STACK ROADMAP (OVERVIEW)
Three Pillars of Full-Stack Development:
• Frontend – User Interface (HTML, CSS, JS, React, Vue, Angular)
• Backend – Server-side logic (Node.js, Django, Ruby on Rails)
• Database – Data storage & retrieval (MongoDB, PostgreSQL,
Firebase)

16. FRONTEND ROADMAP OVERVIEW

17. FRONTEND ROADMAP OVERVIEW

18. BACKEND ROADMAP OVERVIEW

19. BACKEND ROADMAP OVERVIEW

20. DATABASES & STORAGE
• A database is a collection of organized data that is stored in a
way that allows for efficient retrieval and manipulation. It is a
central repository of information that can be accessed, updated,
and managed by authorized users.
• Think of a database like a digital filing cabinet: it stores and
organizes data in a structured way, making it easy to find and
use the information you need.

21. DATABASES & STORAGE
• SQL (Relational) Databases: Store data in tables with a defined
structure (PostgreSQL, MySQL)
• NoSQL (Non-Relational) Databases: Store data in flexible formats
(key-value, document, graph) (MongoDB, Firebase)

22. DATABASES & STORAGE

23. DATABASES & STORAGE

24. DATABASES & STORAGE
• How Databases Store and Retrieve Data: Think of it like a library:
data is organized in tables, and you query it to retrieve what you
need.
• ORM (Object-Relational Mapping): A tool that helps your
programming language talk to the database in a more intuitive
way (Prisma, Mongoose, Sequelize).

25. DEVOPS & DEPLOYMENT
Key Topics:
• Version Control: Git, GitHub/GitLab
• CI/CD: GitHub Actions, Docker, Kubernetes
• Cloud Services: AWS, Vercel, Netlify, Firebase
• Security Best Practices: HTTPS, API Security, Rate Limiting Visual:
A deployment workflow diagram.

26. LEARNING PATH & CAREER GROWTH
Becoming a Full-Stack Developer:
• Learn frontend basics Master backend Understand
→ →
databases Explore DevOps
→
• Work on projects & contribute to open-source
Stay updated with trends

27. RESOURCES & NEXT STEPS
• Free Platforms: MDN Web Docs, FreeCodeCamp, The Odin
Project, w3schools
• Progress Tracking & Detailed Roadmaps (roadmap.sh)
• Paid Courses: Udemy, Coursera, Educative.io
• Practice Sites: LeetCode, HackerRank

28. RECAP & CLOSING THOUGHTS
• Introduction – Overview of full-stack web development and why
it's important.
• Understanding Web Development – Breakdown of frontend vs
backend.
• Frontend Development – Key technologies like HTML, CSS,
JavaScript, and frameworks.
• Backend Development – Server-side logic, APIs, authentication,
and databases.
• What is Full-Stack Development? – Combining frontend,
backend, and database knowledge.

29. RECAP & CLOSING THOUGHTS
• Web Application Model – How client-server interactions work.
• Full-Stack Roadmap – Essential technologies and skills for each
layer.
• Databases & Storage – SQL vs NoSQL and ORM tools.
• DevOps & Deployment – Git, CI/CD, cloud hosting, and security
best practices.
• Essential Tools – Code editors, API testing, and package
managers.

30. THANK
YOU