Full Stack

Development
PART -01
 What is Full Stack Development?
• Full Stack Development involves building both the front-end and
back-end of a web application.
• It includes working with multiple technologies to deliver a
complete web solution.
• Key Technologies Covered in This Course:
⚬ Front-End: HTML5, CSS3, JavaScript, React, Bootstrap
⚬ Back-End: Node.js, Laravel
⚬ Databases: MySQL, PostgreSQL
⚬ APIs: RESTful API, GraphQL
⚬ Security: Authentication, Authorization
⚬ Tools: Git, CI/CD, AWS

FSD
 Course Learning Objectives
• By the end of this course, you will:
⚬ Understand the structure of modern web applications using
front-end and back-end technologies.
⚬ Learn to integrate front-end and back-end frameworks for
building a full stack application.
⚬ Gain knowledge of state management, authentication, and
security in web applications.
⚬ Explore deployment strategies and optimize performance.
⚬ Work on real-world projects and present a full stack
development solution.

FSD
 Front-End vs Back-End Development
• Front-End (Client-Side)
⚬ Technologies: HTML5, CSS3, JavaScript, React, Bootstrap.
⚬ Focus: User interface (UI), user experience (UX), responsive
design.
⚬ Role: Handles everything users see and interact with on the
website.
• Back-End (Server-Side)
⚬ Technologies: Node.js, Express.js, SQL/NoSQL Databases, REST
APIs.
⚬ Focus: Server logic, databases, API integration, security.
⚬ Role: Manages data, server-side logic, and ensures smooth
communication between server and client.
FSD
 Introduction to HTML, CSS3, and Sass

• HTML/HTML5 (Hypertext Markup Language)

⚬ Purpose: Defines the structure of web pages.
⚬ Key Elements:
• Tags: <div>, <h1>, <p>, etc.
• Attributes: class, id, etc.
• Role: The backbone of all web pages, organizing content in a
structured way.

FSD
 Introduction to HTML, CSS3, and Sass

• Sass (Syntactically Awesome Stylesheets)

⚬ Purpose: A CSS preprocessor that adds powerful features to
CSS.
• Key Features:
⚬ Variables: Reuse values like colors or font sizes.
⚬ Nesting: Write cleaner, more organized CSS.
⚬ Mixins: Reusable chunks of CSS code.
• Role: Helps manage and streamline large CSS codebases with
advanced features.

FSD
 What is a Framework?

• Definition: A framework is a collection of pre-written code that

developers can use to simplify and speed up development.
• Purpose: Provides structure and tools for building web
applications.
• Benefits:
⚬ Efficiency: Reduces repetitive coding tasks.
⚬ Consistency: Enforces best practices and design patterns.
⚬ Scalability: Makes maintaining large projects easier.

FSD
 Introduction to Bootstrap 5.x
• What is Bootstrap?: A popular front-end framework for building
responsive, mobile-first websites.
• Key Features:
⚬ Responsive Grid System: Easily create layouts for different
screen sizes.
⚬ Pre-Built Components: Includes buttons, navbars, modals, etc.
⚬ Customization: Modify styles using variables or add your own
CSS.
⚬ No jQuery Required: Bootstrap 5 no longer depends on jQuery,
improving performance.
• Why Use It?: Simplifies the process of designing modern,
responsive websites. FSD
 Why React?
• Popularity: React is one of the most widely used JavaScript
libraries for building user interfaces.
• Component-Based Architecture: Encourages reusable, modular
code through components.
• Fast Rendering: Uses a virtual DOM, which improves the speed
and performance of updates.
• Flexibility: Works well with other libraries or frameworks, and can
be used for single-page or mobile applications.
• Large Ecosystem: Supported by a strong community with a vast
range of tools and libraries.

FSD
 Introduction to React
• What is React?: A JavaScript library developed by Facebook for
building dynamic, interactive user interfaces.
• Key Features:
⚬ JSX (JavaScript XML): A syntax that allows you to write HTML
within JavaScript.
⚬ State Management: Handles the changing state of a
component dynamically.
⚬ Virtual DOM: React creates a virtual copy of the real DOM to
make updates faster and more efficient.
⚬ Reusable Components: Build encapsulated components that
manage their own state and reuse them across the application.
• Why Use It?: Simplifies the process of building complex user
interfaces while improving performance and scalability. FSD
 Why Laravel?
• MVC Architecture: Laravel follows the Model-View-Controller
pattern, separating business logic from presentation, making code
more organized and scalable.
• Eloquent ORM: Built-in ORM for database management, making
data manipulation easy with an elegant syntax.
• Routing: Simplifies defining web routes and managing web
requests.
• Built-in Authentication: Ready-to-use authentication for login,
registration, and password reset.
• Blade Templating Engine: Lightweight templating engine for
writing dynamic HTML.
• Artisan CLI: A command-line interface that streamlines common
FSD
 Node.js?

What is Node.js?
• Definition: Node.js is a JavaScript runtime built on Chrome’s V8
JavaScript engine that allows you to run JavaScript on the server
side.
• Purpose: Enables building fast, scalable, and efficient back-end
applications using JavaScript.

FSD
 Why Use Node.js?

• Non-blocking I/O: Node.js uses an event-driven, non-blocking I/O

model, making it lightweight and efficient, perfect for real-time
applications.
• JavaScript Everywhere: With Node.js, you can use JavaScript for
both the front-end and back-end, making development seamless.
• Package Ecosystem (npm): Node.js has the largest ecosystem
of open-source libraries available through the Node Package
Manager (npm).
• High Performance: Runs on the V8 engine, making it extremely
fast for executing JavaScript on the server side.
FSD
 Key Features:

• Asynchronous Programming: Handles multiple requests

concurrently without waiting for I/O tasks to complete.
• Scalable: Suitable for handling large numbers of concurrent
connections, making it great for building scalable network
applications.
• Built-in Modules: Comes with useful modules for building HTTP
servers, file systems, and handling network requests.

FSD
 Platforms for Building APIs

• Laravel: A PHP framework for building robust RESTful APIs with

built-in security and scalability.
• Node.js: JavaScript-based platform for creating fast, scalable APIs
using frameworks like Express.
• Django: A Python-based framework ideal for rapid API
development with built-in features.
• Spring Boot: A Java-based framework designed for creating
powerful, production-ready APIs.
• Flask: A lightweight Python framework perfect for building simple
APIs.
FSD
 Continuous Integration and Deployment
(CI/CD) for Mobile Apps
• Automating Testing & Deployment:
⚬ CI/CD streamlines the app development process by automating
code testing, building, and deployment, ensuring faster release
cycles and fewer bugs.
• Tools:
⚬ Jenkins: An open-source automation server for building and
testing apps.
⚬ CircleCI: A popular CI/CD platform that automates app testing
and deployment.
⚬ Fastlane: A tool specifically designed to automate iOS and
Android app release processes, including screenshots and app
metadata management. FSD
PART -
02
MEDIA QUERIES
 Introduction to Media Queries

• Definition: Media queries are a CSS feature used to apply styles

based on the device characteristics such as width, height,
orientation, and resolution.
• Purpose: To make websites responsive and adaptable to different
screen sizes and devices.

FSD
 Basic Syntax of Media Queries
@media (media-feature) {
/* CSS rules */
}

@media (max-width: 600px) {

body {
background-color: lightblue;
}
}
Explanation: The above query changes the background color to light
blue when the viewport width is 600px or smaller.

FSD
 Common Media Features
Width and Height:
• min-width: Specifies the minimum width of the viewport or the element.
It is used to apply styles when the width is greater than or equal to a
certain value.
• max-width: Specifies the maximum width of the viewport or the element.
It applies styles when the width is less than or equal to a specific value.
• min-height: Specifies the minimum height of the viewport or the
element. It is used to apply styles when the height is greater than or
equal to a given value.
• max-height: Specifies the maximum height of the viewport or the
@media
element.(min-width:
It applies 600px) {
styles when the height is less than or equal to a
/*specific
Stylesvalue.
apply when the viewport is at least 600px wide */
}
FSD
 Orientation

• portrait: Indicates that the content is displayed in a vertical orientation,

where the height is greater than the width.
• landscape: Indicates that the content is displayed in a horizontal
orientation, where the width is greater than the height.

@media (orientation: landscape) {

/* Styles apply when the device is in landscape mode */
}

FSD
 Resolution
• min-resolution: Defines the minimum resolution of the output device,
typically used to target high-resolution screens like retina displays.
• max-resolution: Defines the maximum resolution of the output device.

@media (min-resolution: 300dpi) {

/* Styles apply for screens with at least 300 dots per inch */
}

FSD
 Aspect Ratio:
• min-aspect-ratio: Specifies the minimum aspect ratio (width to height) of
the viewport or the element.
• max-aspect-ratio: Specifies the maximum aspect ratio.

@media (min-aspect-ratio: 16/9) {

/* Styles apply when the aspect ratio is at least 16:9 */
}

FSD
 Combining Media Queries

Combining Features: Using and, not, and only operators

@media (min-width: 600px) and (orientation: landscape) {
/* Styles for landscape mode on devices 600px or wider */
}

Multiple Queries: Applying different styles based on multiple conditions

@media (max-width: 600px), (min-width: 1200px) {
/* Styles for either small or very large screens */
}

FSD
 Media Queries in Practice
@media (max-width: 400px) {
h1 {
font-size: 24px;
}
}
@media (min-width: 401px) and (max-width: 800px) {
h1 {
font-size: 32px;
}
} Explanation: Adjusts the font
@media (min-width: 801px) { size of headings based on the
h1 { screen width.
font-size: 40px;
}
} FSD
 Best Practices

• Use Mobile-First Approach: Write default styles for smaller screens, then use
media queries for larger devices.
• Test on Real Devices: Ensure your styles work well across different screen sizes.
• Avoid Overloading: Keep your media queries concise and necessary.

Tools for Testing Media Queries

• Browser DevTools: Inspect and test responsiveness using device simulators.

• Online Tools: Tools like Responsinator, BrowserStack, and Viewport Resizer

FSD
 What is useState?

• useState is a hook in React that lets you add state to functional components.
• It returns an array with two values:
⚬ The current state.
￭ A function to update the state.
￭ Example Usage of useState:

const [count, setCount] = useState(0);

// `count` is the current state value.
// `setCount` is the function used to update `count`.

FSD
 What is useEffect?
• useEffect is a hook that lets you perform side effects in your components, like
fetching data, setting up a subscription, or manually changing the DOM.
• It runs after the component renders and can be configured to run only when
specific values change.
useEffect(() => {
// Code that runs after the component renders or updates
// This is where you perform side effects, such as data fetching, subscriptions, or
DOM updates
}, [dependencies]);

• Function: The first argument is a function that contains the code you want to run after the component
renders or updates.
• Dependency Array: The second argument is an optional array of dependencies:
⚬ If you pass an empty array [], the effect runs only once when the component mounts (similar to
componentDidMount).
⚬ If you pass specific variables in the array, the effect runs whenever those variables change.
⚬ If you omit the dependency array, the effect runs after every render (not recommended for performance
reasons). FSD
 What is useEffect?
import React, { useEffect, useState } from 'react';
export default function Demo() {
// Using useState to manage the count
const [count, setCount] = useState(0);
// Using useEffect to log the count value whenever it changes
useEffect(() => {
console.log('The count is:', count);
}, [count]); // The dependency array, so useEffect runs when count
changes
return (
<div className="tutorial">
<h1>Count: {count}</h1>
<button onClick={() => setCount(count -
1)}>Decrement</button>
<button onClick={() => setCount(count +
1)}>Increment</button> FSD
PART -
03BOOTSTRAP
 Introduction to Bootstrap 5.x
• Overview of Bootstrap:
⚬ A popular HTML, CSS, and JS framework.
⚬ Used for responsive, mobile-first web design.
⚬ Developed by Twitter and now maintained by the open-source
community.
• Benefits of Bootstrap 5.x:
⚬ Pre-built components that save development time.
⚬ Fully responsive: Adapts to different screen sizes.
⚬ No jQuery dependency: Pure JavaScript for faster performance.
⚬ Activity: Discuss the differences between Bootstrap 4 and 5 in
groups.

FSD
 Setting Up Bootstrap 5.x
• CDN Integration:
⚬ Quick setup with just a <link> tag.
⚬ Example: <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bo
otstrap.min.css">
• Local Installation:
⚬ Download Bootstrap files and include them in your project.
• Practical Task:
⚬ Create a basic project structure: HTML file with Bootstrap CSS.
⚬ Activity: Hands-on with adding a button and customizing it:
<button class="btn btn-success">Success Button</button>

FSD
 Understanding the Bootstrap Grid
System
• Containers: .container, .container-fluid
⚬ .container is a fixed-width container.
⚬ .container-fluid stretches across the full width.
• Rows and Columns:
⚬ .row creates a horizontal group of columns.
⚬ Columns are created using .col-* classes (e.g., .col-6, .col-lg-4).
• In-class Activity:
⚬ Hands-on practice: Students create a basic 3-column layout
using Bootstrap's grid system.

FSD
 Bootstrap’s Mobile-First Design
• Breakpoints:
⚬ Define column widths for different screen sizes (e.g., .col-sm-
*, .col-md-*, .col-lg-*).
• Responsiveness in Action:
⚬ Use of media queries for layouts that adapt to different screen
widths.
• Examples:
⚬ Example 1: Create a two-column layout for mobile, three-
column for tablet, and four-column for desktop.
• Practical Task:
⚬ Adjust a given layout based on different screen sizes and test
using the browser's responsive tools. FSD
 Grid System in Action
• Creating a 3-Column Layout
<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
• Activity:
⚬ Students create a layout with unequal column widths, e.g., 4-4-
8 for larger screens, and stack them vertically on smaller
screens. FSD
 Working with Buttons in Bootstrap

• Types of Buttons: Primary, secondary, danger, warning, etc.

• Example:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
• In-Class Activity:
Ask students to style buttons with custom colors and rounded corners
using Bootstrap utilities.

FSD
 Creating Responsive Navbars
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link"
href="#">Home</a></li>
</ul>
</div> FSD
 Creating Responsive Navbars

• Navbar Basics:
⚬ navbar-light vs. navbar-dark
⚬ navbar-expand-* for responsiveness
• Activity:
⚬ Students create a responsive navbar with additional items like
a search bar, dropdown, etc.

FSD
 Utilities and Customizing Bootstrap
• Utility Classes:
⚬ Quick styling: Padding, margin, text colors, backgrounds.
⚬ Example: .p-3, .m-3, .text-center, .bg-primary.
• Customization:
⚬ Override default styles with your own custom CSS.
⚬ Sass variables for deeper customization.
• Practical Task:
⚬ Create a card with customized margins, padding, and
background color using utility classes.

FSD
 Responsive Design Challenge

• Challenge:
⚬ Create a fully responsive layout for a homepage that includes a
header, two columns for content, and a footer.
⚬ Ensure it looks good on both mobile and desktop.
• Activity:
⚬ Group work: Each group presents their design and explains
their code.

FSD
PART -
04JAVASCRIPT
 • Variables Core JavaScript Concepts
⚬ Definition: Containers for storing data values.
⚬ Types: var, let, and const
• Examples:
⚬ var name = "John";
⚬ let age = 25;
⚬ const PI = 3.1415;
• Functions
⚬ Purpose: Reusable blocks of code to perform specific tasks.
⚬ Syntax: function functionName(parameters) { //code }
• Example
function greet(name) {
return "Hello, " + name;
FSD
 Core JavaScript Concepts

• Loops
• Types: for, while, do-while, forEach
• Usage: Iterate over data, repeat tasks.
• Example
for (let i = 0; i < 5; i++) {
console.log(i);
}

FSD
 DOM Manipulation and Event Handling
• Introduction to DOM Manipulation
⚬ DOM: The Document Object Model represents HTML elements as
objects.
⚬ Accessing Elements:
￭ document.getElementById()
￭ document.querySelector()
⚬ Changing Elements:
￭ Example: document.getElementById("header").innerText =
"Welcome!";
⚬ Event Handling in JavaScript
￭ Events: Actions the user or browser can trigger (e.g., click,
keypress).
￭ Event Listener: Code that executes in response to an event.
FSD
 DOM Manipulation Example
• Adding and Removing Elements:
const newElement = document.createElement("div");
newElement.innerText = "New Content";
document.body.appendChild(newElement);
• Changing Styles:
document.querySelector("h1").style.color = "blue";
• Event Example: Button Click
document.getElementById("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});

FSD
PART -
05 PHP
 Introduction to PHP

• What is PHP?
⚬ PHP stands for Hypertext Preprocessor.
⚬ It’s a widely-used, open-source scripting language for web
development.
• How PHP Works
⚬ Embedded in HTML to generate dynamic content.
⚬ Runs on the server, returning HTML output to the browser.

FSD
 PHP Syntax and Variables
• PHP Syntax
⚬ PHP code is embedded within <?php ... ?> tags.
￭ Example:
<?php
echo "Hello, World!";
?>

Variables in PHP
• Variables start with $ (e.g., $name = "John";).
• Basic data types: String, Integer, Float, Boolean, Array, Object,
NULL
FSD
 Control Structures

• Conditional Statements
• if, else, elseif, switch.
⚬ Example:
if ($age > 18) {
echo "Adult";
} else {
echo "Minor";
}

FSD
 Loops in PHP
• Purpose: Execute a block of code repeatedly while a condition is
true.
• Types of Loops:
⚬ for Loop: Iterates a fixed number of times
￭ for ($i = 0; $i < 10; $i++) { echo $i; }
⚬ while Loop: Runs as long as the condition is true
￭ $i = 0; while ($i < 10) { echo $i; $i++; }
⚬ do...while Loop: Runs the block at least once
￭ $i = 0; do { echo $i; $i++; } while ($i < 10);
⚬ foreach Loop: Iterates over each item in an array.
￭ $colors = ["red", "green", "blue"];
￭ foreach ($colors as $color) { echo $color; } FSD
 Functions in PHP
What is a Function?: A block of code that performs a specific task and can
be reused.
Syntax Returning Values
function functionName() { Use return to send a value back.
// Code to be executed function add($a, $b) {
} return $a + $b;
Calling a Function: }
functionName(); $sum = add(5, 3); // $sum is 8
Functions with Parameters: Built-in Functions: PHP has many built-in
Pass data into a function using parameters
functions like strlen(), array_push(), etc.
function greet($name) {
echo "Hello, $name!";
}
greet("John"); FSD
 Working with Arrays

• Types of Arrays
⚬ Indexed Array: $fruits = array("Apple", "Banana", "Orange");
⚬ Associative Array: $ages = array("John" => 25, "Jane" => 30);
⚬ Multidimensional Array: Nested arrays for complex data.
• Looping through Arrays
⚬ Using foreach loop
foreach ($fruits as $fruit) {
echo $fruit;
}

FSD
 Form Handling and Superglobals
• Handling Form Data
• Using $_GET and $_POST to retrieve form inputs.
• Example:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
echo "Hello, $name!";
}

Common Superglobals
• $_GET, $_POST, $_SERVER, $_SESSION, $_COOKIE, $_FILES

FSD
 Form Handling and Superglobals

<form method="post" action="<?php echo

htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<input type="submit" value="Submit">
</form>

FSD
 Object-Oriented Programming (OOP)
• Introduction to OOP
• Classes and objects structure code in a reusable way.
• Defining a Class
class Car {
public $color;
function __construct($color) {
$this->color = $color;
}
function getColor() {
return $this->color;
}
}
$car = new Car("red");
echo $car->getColor(); FSD
 Connecting PHP to a Database
• Using MySQL with PHP
• Establishing a connection:

$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
Basic CRUD Operations • Using PDO for Security
• Create: INSERT INTO $pdo=new
• Read: SELECT * FROM PDO("mysql:host=localhost;dbname=testdb",
• Update: UPDATE table SET
"username", "password");
• Delete: DELETE FROM
FSD