Plat Tech - 3rd Lesson

User, Browser, Internet, Web Server, App/API, Data

Web Platform Architecture

Structure

Presentation

Behavior

Protocol

Name to IP

Delivery

HTML -

CSS -

JavaScript -

HTTP/HTTPS -

DNS -

Cloud/CDN -

HTML (Structure)

Defines what each elements is: headings, paragraphs, forms, buttons, links.

CSS (Presentation)

Controls how the page looks: colors, spacing, layout, responsiveness, fonts, and animations.

JavaScript (Behavior)

Adds interaction and logic: buttons, validation, dynamic content, and DOM manipulation

HTML

it is the skeleton

CSS

it is the appearance

JavaScript

It is the behavior

Static Website

Pre-built files are delivered as-is.

Examples: portfolio, landing page, documentation

Dynamic Web Application

Request triggers app logic and often data retrieval

Examples: Online Banking, Gmail, LMS, e-commerce.

Browser - Get/index.html - web server - file - render

Architecture of a static website.

Browser - GET/student/123 - Server - Application - Database - Response

Architecture of a dynamic web application.

True

Static sites can still use JavaScript, APIs, authentication, search, animation, and cloud hosting.

Enter URL - DNS lookup - HTTPS connection - HTTP request - Server response - Browser renders

URL flow

protocol

subdomain

domain

path

____________: https

____________: www

____________: example.com

____________:/products

Domain Name System

translates a human-readable domain name into an IP address so the browser knows which server to connect to.

HTTPS

it is an HTTP communication protected using TLS encryption, especially important for banking, credentials, shopping, personal data, and APIs.

Transport layer security

What does TLS stand for?

GET

Retrieve

POST

submit/create

Put

replace/update

patch

partial update

Delete

delete

200, 201

Success status codes

301, 302

Redirection status codes

400, 401, 403

Client problem status codes

500, 502, 503

Server problem status codes

HTML - DOM - CSS - CSSOM - Render Tree - Layout - Paint - Compositing - Screen

Browser Rendering Pipeline

Elements Tab

Shows DOM and CSS. It is where students can temporarily change text or style in the browser

Network Tab

it is where you reload the page to see requests for HTML, CSS, JS, Images, Icons, Fonts, and API data.

Inspect a request

it is where you look for URL, method, status code, headers, response, and timing.

They changed the DOM/CSS representation, not the source files

why DevTools edits disappear after reload?

defines structure/content

What does HTML do?

To resolve a domain name into an IP address

Why does the browser need DNS

No, it may download CSS, JS, images, fonts, api and more.

Does the browser download only HTML?

It manipulates the DOM and may trigger layout or paint updates

What happens when JavaScript changes an HTML element?

Stored on the device

Requires physical device

Limited by device capacity

Sharing is usually manual

Backup is user-managed

Local Storage

Laptop - SSD - Files

Local storage structure

Stored on provider infrastructure

Accessible through network

Capacity can be subscribed/provisioned

Built-in sharing and multi-device access

Provider manages infrastructure

Cloud Storage

Device - Internet - Provider - Files

Cloud storage structure

True

Cloud Storage and backup are related but not identical

infrastructure delivered as a service.

Cloud computing is not the absence of infrastructure. it is ?

Accessibility

Synchronization

Sharing

Collaboration

Version History

Scalability

Availability

Security

Key Features of Cloud Storage

Accessibility

Multi-device access through network, authentication, and sync

Synchronization

Keeps cloud and device copies aligned

Sharing

Permissions and links control access

Collaboration

Comments, co-editing, conflict handling

Version History

Trace and restore previous versions

Scalability

Logical Capacity as a service

Availability

Resilient design, but not 100% guaranteed

Security

Auth, authorization, encryption, audit

controls

Google Drive - Strong Google Workspace Integration, Dropbox - Strong sync/share experience

Collaboration on Google Drive and Dropbox

Google Drive - Docs, Sheets, Slides, Forms, Dropbox - External productivity integration

Collaboration on Google Drive and Dropbox

Google Drive - Collaboration ecosystem, Dropbox - File sync and sharing

Typical strength of Google Drive and Dropbox

User

Application

Internet

Cloud Service - auth api, storage, metadata, security/management

Cloud Storage Architecture

Student - Browser/App - Authentication - HTTPS - Cloud Service - Processing - Storage - Metadata - Sync

Upload Sequence in Cloud Storage

Storage

It is where the data is kept.

Example: files stored in a cloud drive

Synchronization

Keeps data consistent or available across devices or locations.

Important: deletion may also synchronize.

Backup

A separate recoverable copy used to restore data after loss, corruption, or accidental deletion.

Accessibility

Collaboration

Scalability

Availability

Sharing

Cost Efficiency

Centralized Management

Integration

Benefits of Cloud Storage

Weak Passwords

Compromised accounts

Accidental sharing

Phishing

Excessive permissions

Privacy questions

Internet dependency

vendor lock-in

Cost Growth

Rsks of Cloud