Back to Subject
Practice MCQ

Unit 6 - Notes

CSE121

Unit 6: Full Stack Web Development & UI/UX

1. Introduction to Web Development & Design

1.1 Overview of Web Development

Web development refers to the tasks associated with creating, building, and maintaining websites and web applications that run online on a browser. It involves web design, web content development, client-side/server-side scripting, and network security configuration.

  • Static Websites: Sites that display the same content to every visitor (fixed HTML).
  • Dynamic Websites: Sites that generate content on the fly based on user interaction or database queries (e.g., Facebook, Amazon).

1.2 User Interface (UI) Design

UI Design focuses on the look, feel, and interactivity of a product. It is a subset of User Experience (UX) design.

  • Goal: To create interfaces which users find easy to use and pleasurable.
  • Key Elements:
    • Visual Design: Colors, fonts, and images.
    • Interactive Design: Buttons, toggles, and dropdowns.
    • Information Architecture: How content is organized and labeled.
  • Significance: A good UI reduces user error, improves efficiency, and enhances brand perception.

2. The Full Stack Architecture

Full Stack development encompasses both the client-side (frontend) and server-side (backend) of an application.

2.1 Frontend (Client-Side)

The part of the website that the user sees and interacts with.

  • Responsibility: Rendering the user interface, handling user input, and making requests to the server.
  • Core Technologies: HTML, CSS, JavaScript.

2.2 Backend (Server-Side)

The "under the hood" logic that powers the website. It handles data processing, business logic, authentication, and database interactions.

  • Responsibility: Responding to frontend requests (API calls) and managing data.
  • Components: The Server, The Application Logic, and The Database.
  • Languages: PHP, Python, Java, Node.js.

2.3 Databases

Structured collections of data used to store and retrieve application information.

  • Relational Databases (SQL): Store data in tables with rows and columns (e.g., MySQL, PostgreSQL). Best for structured data.
  • Non-Relational Databases (NoSQL): Store data in documents or key-value pairs (e.g., MongoDB). Best for unstructured data or rapid scaling.

3. Core Development Concepts

3.1 CRUD Applications

CRUD is an acronym representing the four fundamental operations of persistent storage. Most dynamic web apps are essentially CRUD wrappers.

  1. Create (POST): Adding new entries (e.g., Signing up a new user).
  2. Read (GET): Retrieving existing entries (e.g., Viewing a profile).
  3. Update (PUT/PATCH): Modifying existing entries (e.g., Changing a password).
  4. Delete (DELETE): Removing entries (e.g., Deleting a post).

3.2 Responsive Web Design (RWD)

An approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

  • Mechanism: Uses CSS Media Queries (@media) and flexible grid layouts.
  • Fluid Grids: Elements resize based on percentages rather than fixed pixels.
  • Flexible Images: Images scale within their containing elements.

3.3 Mobile-First Development

A design philosophy where the web application is designed for mobile devices (smallest screen) first, then progressively enhanced for tablets and desktops.

  • Why: Mobile traffic often exceeds desktop traffic; forces prioritization of essential content.
  • Approach: Write CSS for mobile first, then add min-width media queries for larger screens.

3.4 Single Page Applications (SPA)

A web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.

  • Behavior: Feels like a native app (no page reloads).
  • Technology: Heavily relies on JavaScript frameworks (React, Vue, Angular) and APIs.
  • Pros: Fast user experience, reduced bandwidth.
  • Cons: SEO challenges (search engines may not index dynamic content easily).

4. Technologies, Languages, and Tools

4.1 VS Code (Visual Studio Code)

The industry-standard Integrated Development Environment (IDE) for web development.

  • Features: Syntax highlighting, code completion (IntelliSense), built-in Git control, terminal integration.
  • Extensions: A vast marketplace (e.g., "Live Server" for real-time preview, "Prettier" for code formatting).

4.2 HyperText Markup Language (HTML)

The skeleton of the web. It defines the structure of the content.

HTML
<!-- Example HTML Structure -->
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
    </header>
    <main>
        <p>This is a paragraph.</p>
        <button id="clickBtn">Click Me</button>
    </main>
</body>
</html>

4.3 Cascading Style Sheets (CSS)

The skin of the web. It defines the presentation (layout, colors, fonts).

CSS
/* Example CSS */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

4.4 JavaScript (JS)

The muscles of the web. It creates dynamic behavior and interactivity.

JAVASCRIPT
// Example JavaScript
document.getElementById("clickBtn").addEventListener("click", function() {
    alert("Button was clicked!");
    // Logic to fetch data from backend could go here
});

4.5 PHP (Hypertext Preprocessor)

A server-side scripting language embedded in HTML. Used for backend logic.

PHP
<?php
// Example PHP
$name = "John Doe";
echo "Hello, " . $name;

// Basic Database Connection
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

4.6 Frameworks

Libraries of pre-written code to speed up development.

  • Frontend Frameworks: React.js, Angular, Vue.js (for building SPAs).
  • Backend Frameworks: Laravel (PHP), Express.js (Node), Django (Python).
  • CSS Frameworks: Bootstrap, Tailwind CSS (for rapid UI styling).

5. Overview of AR/VR

5.1 Significance

Augmented Reality (AR) and Virtual Reality (VR) are immersive technologies changing how humans interact with digital systems.

  • VR (Virtual Reality): Replaces the user's real-world environment with a simulated one. Total immersion.
  • AR (Augmented Reality): Overlays digital information (images, text, 3D models) onto the real world.

5.2 How Does AR/VR Work?

  • Tracking: The system monitors the user's head and eye movements (6 Degrees of Freedom - 6DoF) to adjust the visual perspective in real-time.
  • Rendering: High-performance GPUs generate 3D images slightly different for each eye to create depth perception (stereoscopy).
  • Sensors: Accelerometers, gyroscopes, and magnetometers detect position and orientation.

5.3 Hardware and Devices

  1. Head-Mounted Displays (HMDs):
    • Tethered: Oculus Rift, HTC Vive (Connected to PC).
    • Standalone: Meta Quest, Apple Vision Pro.
    • Mobile: Google Cardboard (relies on smartphone).
  2. Input Devices: Hand controllers, haptic gloves, treadmills.
  3. AR Devices: Smartphones (ARCore/ARKit), Smart Glasses (Google Glass, Microsoft HoloLens).

5.4 Software

  • Game Engines: Unity 3D (C#) and Unreal Engine (C++) are the primary platforms for building AR/VR apps.
  • SDKs: ARKit (Apple), ARCore (Google), Vuforia.

5.5 Applications

  • Healthcare: Surgical simulations, treating PTSD, anatomy visualization.
  • Education: Virtual field trips, interactive history lessons.
  • Retail: "Try before you buy" (AR furniture placement or makeup testing).
  • Real Estate: Virtual property tours.
  • Gaming: Immersive entertainment (Beat Saber, Pokémon GO).

6. Job Roles and Skillsets

6.1 Full Stack Developer

Role: Capable of working on both frontend and backend.
Skillset:

  • Languages: HTML, CSS, JavaScript, SQL, plus one backend language (Python/PHP/Node).
  • Frameworks: React/Angular, Express/Django/Laravel.
  • Tools: Git, Docker, AWS/Azure, REST APIs.
  • Soft Skills: Problem-solving, system architecture understanding.

6.2 UI/UX Designer

Role: Researching user needs and designing the visual interface.
Skillset:

  • Tools: Figma, Adobe XD, Sketch.
  • Concepts: Wireframing, Prototyping, User Research, Color Theory, Typography.
  • Coding: Basic HTML/CSS knowledge is highly valued for communication with devs.

6.3 AR/VR Developer

Role: Creating immersive 3D experiences.
Skillset:

  • Languages: C# (for Unity) or C++ (for Unreal).
  • 3D Modeling: Blender, Maya (basic understanding).
  • Math: Linear algebra, 3D vectors, physics simulation.
  • Optimization: Managing frame rates and memory for smooth rendering.