Chapter: 1

Getting familiar with Full

Stack Web Development
 Disclaimer
The content is curated from online/offline resources
and used for educational purpose only.
Learning Objectives
You will learn in this lesson:
• Basics of Web Applications
• Application Development Model and Life Cycle
• Static Application Development using HTML & CSS
Why do we utilize web applications?
• Accessibility
• Interactivity
• Convenience
• Cross-Platform
• Scalability

Source : https://www.ade-technologies.com/blog/what-is-web-applicationdevelopment/
What are some well-known examples of web apps?

Source : https://www.shno.co/blog/web-application-examples
Who is Full Stack Developer?
• A full-stack developer helps build and maintain both
the front-end and the back-end of a website.
• Develop and maintain web services and interfaces
• Contribute to front-end and back-end development
processes
• Build new product features or APIs
• Perform tests, troubleshoot software, and fix bugs
• Collaborate with other departments on projects and
sprints

Source : https://www.thinknexttraining.com/
What is MERN Stack?
• The MERN stack is a set of JavaScript-based technologies used for building full-stack web applications.
• It consists of four main components:

• Together, these technologies enable developers to create efficient, scalable, and modern web applications using
a single programming language, JavaScript.

Source : https://www.imaginarycloud.com/blog/what-is-mern-stack-and-how-does-it-work/
What are some well-known applications built with the MERN stack?

Image Source: https://medium.com/marketing-in- Image Source: https://www.quora.com/What-are-the-differences-

the-age-of-digital/uber-dont-eats-828895771334 between-touch-Facebook-com-and-m-Facebook-com

Image Source: https://abcnews.go.com/GMA/Travel/booking-

Image Source: https://parade.com/shopping/walmart-beautiful-wrap-me-up-accent-chair
vacation-rental-avoid-fake-listing/story?id=99957705
Mean Vs Mern

VS

MERN STACK MEAN STACK

Source : https://www.biztechcs.com/blog/mern-vs-mean-vs-full-stack/
Market Trends in MERN Stack
Demand for professionals skilled in the MERN stack
• MERN Stack Developer
• Full Stack Developer
• Front-end Developer (React)
• Back-end Developer (Node.js/Express)
• MERN Stack Architect
• Technical Lead (MERN)
• DevOps Engineer (MERN)
• Product Engineer (MERN)
• Technical Consultant (MERN)

State of MERN in 2024

Source : https://chudovo.com/why-react-js-is-becoming-increasingly-popular/
Why the MERN stack is widely used and beneficial?

Open Source and Community

Full-Stack JavaScript
Support

Efficient Development JSON Everywhere

Component-Based Architecture Modern Web Applications

Scalability Flexibility and Customization

Performance Strong Ecosystem

MERN Stack Architecture

Source : https://ellow.io/wp-content/uploads/2023/12/Architectural-Structure-of-MERN-Stack.png
Disadvantages of MERN Stack

Learning Curve Data Migration

SEO Challenges Tooling and Boilerplate

Performance Bottlenecks Complex State Management

Road MAP for MERN Stack

Source : https://community.codenewbie.org/itsnitinr/beginner-s-guide-to-the-mern-stack-roadmap-resources-37kj
What is Web Application
• A web application is a software program that
runs on a web server and is accessed through
a web browser.
• Unlike traditional desktop applications, web
applications do not require installation on the
user's device.
• They can be accessed from anywhere with an
internet connection.

Source : https://cdn.educba.com/academy/wp-content/uploads/2019/05/web-application.gif
Web application architecture
2. Request
Data: URL
Encoding
Send HTTP GET/POST data
Cookies
Request with a
URL link

4. HTML
1. Request (www.google.com) Web Application
Web Server
Cookies Shared after the request
6. Static
3.
Client 5. Response (Requested data or error
resources: HTML Data
message) CSS Templates
FRONT END JavaScript
Data: sending back the HTML, CSS, Images
Other files
JavaScript, and other resources needed
to render the Google homepage. 200
OK: The request was successful.

Database
Error: File system
404 Not Found: The requested
resource could not be found.
500 Internal Server Error: The server BACK END
encountered an error processing the
request.
Web Development Life Cycle:
• The Web Development Life Cycle (WDLC) outlines Stages of WDLC
the stages involved in creating and maintaining a web
application or website.
Gathering Relevant Information
• This systematic approach helps ensure the project is
completed efficiently, meets user requirements, and Planning - Sitemap and Wireframe
is easy to maintain.
Design & Layout

Content Creation

Development

Testing, Review, and Launch

Maintenance and Updating

Web Development Model
• A web development model is a structured framework Common Web Development Models
that outlines the processes and methodologies
involved in developing a website or web application.
Waterfall Model
• These models guide the development team through a
series of defined phases and activities, ensuring that
the project is systematically planned, executed, and Iterative Model
delivered.
• The choice of a development model often depends on Prototype Model
the project's complexity, requirements, timeline, and
the development team's experience.
Spiral Model

Agile Model
What is Waterfall Model

Source : https://www.javatpoint.com/software-engineering-software-development-life-cycle
Waterfall Model

Advantages Disadvantages

Before the next phase of development, An error can be fixed only during the
each phase must be completed phase

Suited for smaller projects where The testing period comes quite late in the
requirements are well defined developmental process
What is Iterative Model?

Source : https://www.javatpoint.com/software-engineering-software-development-life-cycle
Iterative Model

Advantages Disadvantages

Some working functionality can be

developed and early in the software More resources may be required.
development life cycle (SDLC).

It is easily adaptable to the ever- Although cost of change is lesser, but

changing needs of the project as well it is not very suitable for changing
as the client. requirements.
What is Prototype Model

Source : https://www.javatpoint.com/software-engineering-software-development-life-cycle
Prototype Model

Advantages Disadvantages

This model is flexible in design This model is costly

There is scope for refinement, which It has poor documentation because of

means new requirements can be easily continuously changing customer
accommodated. requirements.
What is Spiral Model

Source : https://www.javatpoint.com/software-engineering-software-development-life-cycle
What are the advantages and disadvantages of the Spiral Model?

Advantages Disadvantages

Risk handling is one of the important

advantages of the Spiral model, it is the It is not suitable for small projects as it is
best development model to follow due to expensive
the risk analysis and risk handling at
every phase.

In this model, we can easily change It is much more complex than other SDLC
requirements at later phases and can be models. The process is complex.
incorporated accurately.
Agile Model

Source : https://www.javatpoint.com/software-engineering-software-development-life-cycle
What are the advantages and disadvantages of the Agile Model?

Advantages Disadvantages

Customer satisfaction by rapid, continuous

delivery of useful software There is a lack of emphasis on necessary
designing and documentation.

People and interactions are emphasized

rather than processes and tools.
Customers, developers, and testers The project can easily get taken off track if
constantly interact with each other. the customer representative is unclear
about what final outcome they want
Classroom Activity

Prepare an application development plan for the Static Portfolio Website

Solution: GitHub Link

What is Frontend and Backend Technologies
• The frontend contains the user interface and code
related to user interactions with the application.
• The backend contains all the code required for the
application to run, including integrations with data
systems, communicating with other applications, and
processing data.

Source : https://miro.medium.com/v2/resize:fit:2000/0*RfvInMt7Z1TSCa8N
What is Frontend and Backend Languages

Source : https://blog.geekster.in/wp-content/uploads/2022/06/Frontend-And-Backend-Languages-1024x1024.png
Classroom Activity

Create a portfolio website to showcase their educational background, personal

achievements, and project work
Solution: GitHub Link
Summary
Well done! You have completed this course and now
you understand about:
• Fundamental concepts and components of web
applications.
• Overview of the stages and methodologies involved
in web development projects.
• Understanding the MERN stack for building full-stack
applications.
• Learned about technologies used for front-end and
back-end development.
• Create a Portfolio website using HTML and CSS.
Reference
• Web Development Life Cycle Process In 2021 (sassyinfotech.com)
• Web Development Life Cycle: 7 Steps To Build Web App in 2024 (monocubed.com)
• https://media.geeksforgeeks.org/
• https://acropolium.com/blog/modern-web-app-architecture/
Quiz
1. How to create a link to an email?

a) <a href="mailto:xxx@yyy">
b) <a href="xxx@yyy">
c) Mail>xxx@yyy
d) Mail href="xxx@yyy"

Answer: A
<a href="mailto:xxx@yyy">
Quiz
2. Which of the following HTML code will make an image clickable?

a) <a href="https://www.edunetfoundation.org/">Edunetfoundation Home Page</a>

b) <img src="https://www.edunetfoundation.org/Edunetfoundation-logo">
c) <a href="https://www.edunetfoundation.org/">Edunetfoundation Home Page</a>
d) </img>
e) <a href="https://www.edunetfoundation.org/">Edunetfoundation Home Page</a>
f) <img src="https://www.edunetfoundation.org/Edunetfoundation-logo" />
g) <a href="https://www.edunetfoundation.org/"><img
src="https://www.edunetfoundation.com/Edunetfoundation-logo" /></a>

Answer: D.
<a href="https://www.edunetfoundation.org/"><img
src="https://www.edunetfoundation.com/Edunetfoundation-logo" /></a>
Quiz
3. What should be the value of the “width” property of
the following table: (<table style="width:'???'">), to
make the width of the table fit the current width of the
browser window?

a) 100%
b) 640px
c) 100em
d) 1024px

Answer: A
100%​
Quiz
4. For grouping together one or more <h1> to <h6>
element what element is used?

a) <header>
b) <hgroup>
c) <div>
d) <section>

Answer: B
<hgroup>
Quiz
5. How do you center a block element horizontally in CSS?

a) text-align: center;
b) margin: auto;
c) align: center;
d) justify-content: center;

Answer: B
A. margin: auto;
Thank you!