Advanced Web Programming
Part 01 – Introduction to Web
Development Fundamentals
Dr. Amjad AbuHassan
11/21/2024 Dr. Amjad AbuHassan 1
Overview of the Web
Development Ecosystem
11/21/2024 Dr. Amjad AbuHassan 2
What is the Web Development Ecosystem?
● A collection of technologies, tools, and practices used in the creation and
maintenance of websites and web applications.
● Components
● Front-End Development
● Back-End Development
● Full-Stack Development
● Development Tools and Practices
11/21/2024 Dr. Amjad AbuHassan 3
Front-End Development
● Focuses on the user interface and experience.
● Technologies
● HTML: Structure of web pages.
● CSS: Styling and layout.
● JavaScript: Interactivity and dynamic content.
● Frameworks/Libraries
● React, Angular, [Link]
11/21/2024 Dr. Amjad AbuHassan 4
Back-End Development
● Manages server-side logic, databases, and application functionality.
● Technologies
● Languages: [Link], Python, Ruby, Java
● Databases: SQL (MySQL, PostgreSQL), NoSQL (MongoDB)
● Frameworks
● [Link], Django, Ruby on Rails
11/21/2024 Dr. Amjad AbuHassan 5
Key Differences
● Focus Area:
● Frontend: User Interface Design, Interactivity
● Backend: Data Management, Business Logic, Authentication
● Technologies:
● Frontend: HTML, CSS, JavaScript, Frontend Frameworks
● Backend: [Link], Python, Ruby, Databases, Backend Frameworks
● Tools:
● Frontend: Browser DevTools, UI/UX Design Tools
● Backend: Server Environments, Database Management Tools, API Testing Tools
11/21/2024 Dr. Amjad AbuHassan 6
Full-Stack Development
● Involves both front-end and back-end development.
● Skill Set:
● Proficiency in both client-side and server-side technologies.
● Benefits:
● Flexibility in development
● Better understanding of the overall application architecture
11/21/2024 Dr. Amjad AbuHassan 7
Development Tools
● IDEs and Text Editors:
● VS Code, Sublime Text, Atom
● Version Control Systems:
● Git, GitHub, GitLab
● Package Managers:
● npm, Yarn
● Build Tools:
● Webpack, Gulp, Grunt
11/21/2024 Dr. Amjad AbuHassan 8
Development Practices
● Responsive Design:
● Ensuring web applications work on various devices and screen sizes.
● Cross-Browser Compatibility:
● Ensuring web applications function correctly across different browsers.
● Accessibility:
● Making web applications usable for people with disabilities.
● Performance Optimization:
● Improving load times and responsiveness.
11/21/2024 Dr. Amjad AbuHassan 9
Modern Web Development Trends
● Progressive Web Apps (PWAs):
● Web applications that provide a native app-like experience.
● Single Page Applications (SPAs):
● Web applications that load a single HTML page and dynamically update as the user interacts
with the app.
● Serverless Architecture:
● Running code without managing server infrastructure.
● Microservices:
● Architecting applications as a collection of loosely coupled services.
11/21/2024 Dr. Amjad AbuHassan 10
Anatomy of an HTTP Request
11/21/2024 Dr. Amjad AbuHassan 23
Overview of HTTP Requests
● Recap
[Link]
11/21/2024 Dr. Amjad AbuHassan 24
Review of Essential Front-end
Technologies
11/21/2024 Dr. Amjad AbuHassan 25
HTML
11/21/2024 Dr. Amjad AbuHassan 26
Introduction to HTML
● Definition: HyperText Markup Language.
● Purpose: Structuring and presenting web content.
● Core Components: Elements, attributes, tags.
● Versions: HTML4, XHTML, HTML5.
11/21/2024 Dr. Amjad AbuHassan 27
Basic HTML Structure
● Doctype Declaration:
● <!DOCTYPE html>.
● HTML Document Structure:
● <html lang="en">
● <head>
● <body>
11/21/2024 Dr. Amjad AbuHassan 28
HTML Head Section
● Metadata: <meta charset="UTF-8">, <meta name="viewport"
content="width=device-width, initial-scale=1.0">
● Title: <title>Page Title</title>.
● Links and Scripts:
● <link rel="stylesheet" href="[Link]">
● <script src="[Link]"></script>
11/21/2024 Dr. Amjad AbuHassan 29
HTML Body Section
● Content Elements: Text, images, links, lists.
● Semantic Elements: <header>, <footer>,
<article>, <section>, <nav>, <aside>.
● Structural Elements: <div>, <span>.
11/21/2024 Dr. Amjad AbuHassan 30
Common HTML Tags
● Headings: <h1> to <h6>.
● Paragraphs: <p>.
● Links: <a href="url">link text</a>.
● Images: <img src="[Link]" alt="description">.
● Lists: Ordered <ol>, Unordered <ul>, Definition <dl>.
11/21/2024 Dr. Amjad AbuHassan 31
HTML Attributes
● Definition: Additional information about elements.
● Common Attributes: id, class, src, href, alt, style.
11/21/2024 Dr. Amjad AbuHassan 32
HTML Forms
● Purpose: Collecting user input.
● Form Elements: <form>, <input>, <textarea>, <button>, <select>, <option>, <label>
● Attributes: action, method, name, value, placeholder, required.
11/21/2024 Dr. Amjad AbuHassan 33
HTML Tables
● Structure: <table>, <tr>, <td>, <th>.
● Attributes: border, cellpadding,
cellspacing, colspan, rowspan.
11/21/2024 Dr. Amjad AbuHassan 34
HTML Lists
● Types: Ordered lists <ol>, unordered lists <ul>,
definition lists <dl>.
● List Items: <li> for ordered and unordered
lists, <dt> and <dd> for definition lists.
11/21/2024 Dr. Amjad AbuHassan 35
HTML Semantic Elements
● Purpose: Provide meaning and structure.
● Examples: <header>, <nav>, <main>, <footer>, <article>, <section>, <aside>,
<figure>, <figcaption>.
● Benefits: Improved accessibility, SEO, and readability.
11/21/2024 Dr. Amjad AbuHassan 36
HTML5 New Features
● Multimedia: <audio>, <video>.
● Graphics: <canvas>, <svg>.
● Forms: New input types like email, date, range.
● APIs: Geolocation, Local Storage, Web Workers.
11/21/2024 Dr. Amjad AbuHassan 37
HTML Validation
● Importance: Ensure code adheres
to standards.
● Tools: W3C Markup Validation
Service.
11/21/2024 Dr. Amjad AbuHassan 41
CSS
11/21/2024 Dr. Amjad AbuHassan 44
Overview of CSS
● Recap
Next Lecture
11/21/2024 Dr. Amjad AbuHassan 45
DOM
11/21/2024 Dr. Amjad AbuHassan 59
Introduction to the DOM
● Definition: Document Object Model (DOM)
● Purpose: Interface for HTML and XML documents
● Components: Nodes, elements, attributes, text
● Importance: Foundation for interactive web pages
11/21/2024 Dr. Amjad AbuHassan 60
The DOM Tree Structure
● Hierarchy: Parent, child, sibling
relationships
11/21/2024 Dr. Amjad AbuHassan 61
Visual Representation: Diagram of a DOM tree
11/21/2024 Dr. Amjad AbuHassan 62
Types of Nodes in the DOM
● Element Nodes: Represent HTML tags (e.g., <div>, <p>)
● Text Nodes: Represent text within elements
● Attribute Nodes: Represent attributes of elements (e.g., class, id)
● Comment Nodes: Represent comments in the code (e.g., <!-- comment -->)
11/21/2024 Dr. Amjad AbuHassan 63
Accessing DOM Elements
11/21/2024 Dr. Amjad AbuHassan 64
Modifying DOM Elements
11/21/2024 Dr. Amjad AbuHassan 65
Creating and Inserting DOM Elements
11/21/2024 Dr. Amjad AbuHassan 66
Removing DOM Elements
11/21/2024 Dr. Amjad AbuHassan 67
Event Handling in the DOM
● Types of Events: Click, mouseover, keydown, etc.
● Event Listeners: addEventListener, removeEventListener
11/21/2024 Dr. Amjad AbuHassan 68
Debugging DOM Manipulation
● Tools: Browser DevTools, [Link], breakpoints
● Techniques: Inspect element, monitor events, profile performance
11/21/2024 Dr. Amjad AbuHassan 71
DOM Manipulation Libraries
● Popular Libraries: jQuery, [Link]
● Benefits: Simplified syntax, cross-browser compatibility
11/21/2024 Dr. Amjad AbuHassan 72
Rendering
11/21/2024 Dr. Amjad AbuHassan 74
Introduction to Rendering
● Purpose: Converting HTML, CSS, and JavaScript into a visual display
● Components: Rendering engine:
● layout, paint, and composite
● Importance: Key for performance and user experience
● Types of Rendering:
● Client-Side Rendering (CSR): Rendering happens in the browser
● Server-Side Rendering (SSR): Initial rendering happens on the server
11/21/2024 Dr. Amjad AbuHassan 75
Rendering Pipeline Overview
● Stages:
● Parse HTML and CSS: Create the DOM and CSSOM trees
● Construct Render Tree: Combine DOM and CSSOM
● Layout: Calculate geometry of elements
● Paint: Fill pixels on the screen
● Composite: Combine layers and render final image
● Performance Tip: Minimize the amount of CSS and use efficient selectors
11/21/2024 Dr. Amjad AbuHassan 76
Rendering Pipeline Flowchart
11/21/2024 Dr. Amjad AbuHassan 77
DOM Tree Example
11/21/2024 Dr. Amjad AbuHassan 79
CSSOM Tree Example
11/21/2024 Dr. Amjad AbuHassan 80
CSSOM Tree Example cont.
11/21/2024 Dr. Amjad AbuHassan 81
Constructing the Render Tree
● Combining DOM and CSSOM: Create the render tree
● Render Tree: Represents visual elements
● Example:
● DOM: <body>, <h1>, <p>
● CSSOM: Styles for body, h1, p
● Render Tree: Styled h1 and p elements
● Exclusions: Non-visual elements (e.g., <head>, display: none)
● Performance Tip: Avoid complex CSS that can slow down render tree construction
11/21/2024 Dr. Amjad AbuHassan 82
Layout Phase
● Purpose: Calculate position and size of elements
● Process:
● Traverse render tree
● Calculate geometry
● Handle layout dependencies (e.g., flexbox, grid)
● Example: Box model: margin, border, padding, content
● Impact: Affects performance (e.g., reflows)
● Performance Tip: Minimize layout thrashing by reducing layout changes
11/21/2024 Dr. Amjad AbuHassan 84
Box Model Example
11/21/2024 Dr. Amjad AbuHassan 85
Layout Phase Example
11/21/2024 Dr. Amjad AbuHassan 86
Painting Phase
● Purpose: Fill pixels on the screen
● Process:
● Traverse render tree
● Apply styles (e.g., colors, shadows, borders)
● Performance Tip: Use CSS shorthand properties to reduce the amount of code
11/21/2024 Dr. Amjad AbuHassan 87
Diagram: Painting Process
● Render Tree:
● - <button style="background-color: blue; color: white; border: 1px solid black; box-shadow: 2px
2px 5px gray;">Click Me</button>
● Paint:
● - Fill background color: blue
● - Fill text color: white
● - Draw border: 1px solid black
● - Apply box-shadow: 2px 2px 5px gray
11/21/2024 Dr. Amjad AbuHassan 88
Compositing Phase
● Purpose: Combine layers to create the final image
● Layers: Separate layers for elements (e.g., fixed positions, animations)
● Process:
● Composite layers
● Render final image
● Example: Layers for a complex web page with fixed headers and animated content
● Performance Tip: Limit the number of layers to avoid excessive memory usage
11/21/2024 Dr. Amjad AbuHassan 89
Diagram: Compositing Layers
● Layers:
● 1. Background layer
● 2. Content layer
● 3. Fixed header layer
● 4. Animated content layer
● Compositing:
● - Merge layers 1, 2, 3, and 4 to create the final image
11/21/2024 Dr. Amjad AbuHassan 90
Reflows and Repaints
● Definitions:
● Reflow: Layout recalculation
● Repaint: Redrawing elements
● Triggers:
● Reflow: Adding/removing elements, resizing window, changing CSS properties affecting layout
● Repaint: Changing styles (e.g., color, visibility) without affecting layout (affect the appearance)
● Performance Impact: Minimize reflows and repaints for better performance
11/21/2024 Dr. Amjad AbuHassan 91
Reflows and Repaints cont.
● Best Practices:
● Batch DOM updates
● Minimize layout thrashing
● Use CSS transitions/animations
11/21/2024 Dr. Amjad AbuHassan 92
Modern Rendering Techniques
● Client-Side Rendering (CSR):
● Pros: Dynamic, interactive experiences
● Cons: Initial load time, SEO challenges
● Server-Side Rendering (SSR):
● Pros: Faster initial load, improved SEO
● Cons: Increased server load, complexity
11/21/2024 Dr. Amjad AbuHassan 97
Modern Rendering Techniques cont.
● Static Site Generation (SSG):
● Pros: Fast load times, simplicity
● Cons: Limited interactivity, build time
● Hybrid Approaches: Combining CSR, SSR, and SSG
● Future Trends: WebAssembly, Progressive Web Apps (PWAs)
11/21/2024 Dr. Amjad AbuHassan 98
