Why study JavaScript?
Web Development 1. HTML → content
Reviewer 2. CSS → style/layout
3. JS → behavior
1. Web History and Technologies PHP
PHP = Hypertext Preprocessor
HTML Open-source server-side scripting language
- HTML = HyperText Markup Language Free, widely used (WordPress, social networks)
Executes on the server → sends output to browser
- Standard markup for structuring web pages Good for beginners & large-scale apps
- Elements describe headings, paragraphs, links, etc.
SQL
- Tells browsers how to display content SQL = Structured Query Language
Accesses & manipulates databases
HTML History ANSI Standard (1986), ISO (1987)
1989 – Tim Berners-Lee invented WWW Requires RDBMS (MySQL, Oracle, SQL Server)
1991 – HTML invented by Tim Berners-Lee Used with PHP/ASP + HTML/CSS for database-
1993 – HTML+ (Dave Raggett) driven sites
1995 – HTML 2.0 (RDMS - Relational Database Management System)
1997 – HTML 3.2 (W3C Recommendation)
1999 – HTML 4.01 RDBMS Examples
2000 – XHTML 1.0 MySQL, MS SQL Server, Oracle, IBM DB2, MS Access
2008 – HTML5 Draft (WHATWG)
2012 – HTML5 Living Standard
Bootstrap
2014 – HTML5 (W3C Recommendation) CSS Framework by Twitter (2011)
2016 – HTML5.1 Candidate Recommendation Responsive design, grid system, prebuilt UI
2017 – HTML5.1 (2nd Ed.), HTML5.2 (latest) Bootstrap 4 (2018) → faster, more responsive
Bootstrap 5 (2021) → no jQuery, only JS, modern
CSS browsers
- CSS = Cascading Style Sheets Use of CDN (Content Delivery Network)
- Controls style & layout of web pages Grid System
- Based on 12 columns
- External CSS saves time → affects multiple pages
- Uses classes: .container, .row, .col-md-6, etc.
- Introduced in 1996
- Breakpoints: xs, sm, md, lg, xl
JavaScript
- Programming language of the web
2. CSS Layout and Responsiveness
- Can update HTML & CSS dynamically
Box Model
- Handles calculations, DOM (Document Object Model), Content → Padding → Border → Margin
validation
Flexbox
History
- display: flex; creates flexible layouts
1995 – Released by Netscape (Brendan Eich)
Provides interactivity (events, DOM manipulation) - Properties: justify-content, align-items, flex-direction,
Supports frameworks: React, Vue, Angular flex-wrap
Responsive Design
- @media queries
- Mobile-first design principle
3. Semantic HTML and Accessibility
Semantic Tags
<header>, <nav>, <section>, <article>, <footer>
<strong> (important), <em> (emphasis)
<figure> + <figcaption>
Accessibility
Use alt for images
Proper heading order (<h1> to <h6>)
ARIA roles (role='navigation')
High contrast, keyboard-friendly
4. Web Evolution
Web 1.0 (1991–2004)
- Static, read-only
Web 2.0 (2004–present)
- Interactive, blogs, social media, AJAX, APIs
Web 3.0 (emerging)
- Semantic & decentralized web (AI, blockchain, crypto)
5. Web System Components
Client-Side (Front-End) – Runs in the browser. Uses
HTML (structure), CSS (style), JS (interactivity).
Server-Side (Back-End) – Runs on the server. Handles
logic, security, and connects to databases (e.g., PHP,
Node.js).
Database – Stores and manages data (e.g., MySQL,
Oracle, MongoDB).
Communication Layer – Client ↔ Server via
HTTP/HTTPS, APIs.
Web Browser – User interface for accessing web
pages (e.g., Chrome, Firefox).
Web Server – Hosts sites and processes requests (e.g.,
Apache, Nginx).
Extras – Caching, CDNs, and security (SSL/TLS).
Simplified flow: Browser (Client) ↔ Web Server (Back-
End) ↔ Database
