HOME BOOKS VIDEO COURSES
NEWSLETTER CONTACT
HTML5 for Masterminds
How to develop websites and web applications with HTML5, CSS, JavaScript, and PHP
4th Edition 2026
ISBN: 978-1-0699942-2-6
Buy Now
Figures
Book publishers automatically compress the images in ebooks to reduce the size of the file. This may affect the quality of textbooks and turn some images illegible. If this is affecting you, you can download all the images included in the HTML5 for Masterminds book or open the image you want to see from the list.
Download Figures
19.1 MBytes
CHAPTER 1 — WEB DEVELOPMENT
Figure 1-1: Clients and Servers
Figure 1-2: Website's files
Figure 1-3: URLs
Figure 1-4: VS Code editor
Figure 1-5: Option to open a project's folder
Figure 1-6: Adding files and folders to our project
Figure 1-7: Opening a file
Figure 1-8: HTML element
Figure 1-9: HTML document in the browser
Figure 1-10: CSS property
Figure 1-11: Open File option
Figure 1-12: Opening developer tools
Figure 1-13: Developer tools
Figure 1-14: VS Code AI panel
Figure 1-15: Accepting the changes proposed by the agent
Figure 1-16: Starting new conversations
Figure 1-17: Installing additional AI agents
CHAPTER 2 - HTML
Figure 2-1: Browser showing the document's icon
Figure 2-2: Visual representation of a typical layout
Figure 2-3: Visual representation of an HTML5 document
Figure 2-4: Title represented by an <h1> element with styles by default
Figure 2-5: Quotes defined inside <p> elements
Figure 2-6: Text displayed with a <pre> element
Figure 2-7: Line breaks in a paragraph defined by <br> elements
Figure 2-8: Highlighted text
Figure 2-9: Complementing the <article> element
Figure 2-10: Complementing the <footer> element
Figure 2-11: Programming code presented by the <code> and <pre> elements
Figure 2-12: Hyperlinks
Figure 2-13: Navigation between documents
Figure 2-14: Link to external documents
Figure 2-15: Image in the document
Figure 2-16: Image with a custom size
Figure 2-17: Image with a caption
Figure 2-18: Unordered list
Figure 2-19: Ordered list
Figure 2-20: List in reverse order
Figure 2-21: List of terms and descriptions
Figure 2-22: List of quotes
Figure 2-23: The <details> element before and after it is clicked
Figure 2-24: Table with styles by default
Figure 2-25: Table's header with default styles
Figure 2-26: Multicolumn cells
Figure 2-27: Text translated by the browser
Figure 2-28: Tooltip with additional information
Figure 2-29: Form in the browser
Figure 2-30: Form with two input fields and a Submit button
Figure 2-31: Elements identified by a label
Figure 2-32: Input fields of different types
Figure 2-33: Input of type range
Figure 2-34: Inputs of type radio
Figure 2-35: Inputs of type checkbox
Figure 2-36: Input of type date
Figure 2-37: Input of type color
Figure 2-38: Input of type image
Figure 2-39: The <textarea> element
Figure 2-40: Selecting a value with the <select> element
Figure 2-41: Predefined values with the <datalist> element
Figure 2-42: Progress bar
Figure 2-43: Bar created with the <meter> element
Figure 2-44: Input field with a placeholder
Figure 2-45: Error in an input field with a custom pattern
Figure 2-46: Name/value pairs added to the URL
Figure 2-47: Web page produced by process.php
CHAPTER 3 - CSS
Figure 3-1: Cascading styles
Figure 3-2: Descendant selectors
Figure 3-3: Child selector
Figure 3-4: Adjacent Sibling selector
Figure 3-5: General Sibling selector
Figure 3-6: The :nth-child() pseudo-class
Figure 3-7: The :not() pseudo-class
Figure 3-8: The font property
Figure 3-9: The text-align property
Figure 3-10: The word-spacing property
Figure 3-11: The text-decoration property
Figure 3-12: Title with custom font
Figure 3-13: Google Font
Figure 3-14: Title with custom color
Figure 3-15: Custom boxes
Figure 3-16: Main content with a custom size
Figure 3-17: Content overflow
Figure 3-18: Overflow hidden
Figure 3-19: Scrollbars
Figure 3-20: Margins, paddings, and borders
Figure 3-21: Header with custom margins and paddings
Figure 3-22: Background color
Figure 3-23: Background image
Figure 3-24: Background image
Figure 3-25: Background image combined with a background color
Figure 3-26: Solid border
Figure 3-27: Dashed border
Figure 3-28: Round corners
Figure 3-29: Different corners
Figure 3-30: Elliptic corners
Figure 3-31: Second border
Figure 3-32: Pattern to build a border
Figure 3-33: Border image of type stretch
Figure 3-34: Border image of type round
Figure 3-35: Basic shadow
Figure 3-36: Realistic shadow
Figure 3-37: Bigger shadow
Figure 3-38: Inner shadow
Figure 3-39: Text shadow
Figure 3-40: Linear gradient
Figure 3-41: Different starting position for a linear gradient
Figure 3-42: Linear gradient with a direction set in degrees
Figure 3-43: Multicolor linear gradient
Figure 3-44: Translucent gradient
Figure 3-45: Linear gradient with color-stop values
Figure 3-46: Radial gradient
Figure 3-47: Radial gradient with color-stops values
Figure 3-48: Assigning a background color with a variable
Figure 3-49: Using global variables in multiple elements
Figure 3-50: Image with a size determined from CSS
Figure 3-51: Clipping an image to its container
Figure 3-52: Automatically resizing an image
Figure 3-53: Fitting the image
Figure 3-54: Aligning the image
Figure 3-55: Blur effect on an image
Figure 3-56: Mirror image with scale()
Figure 3-57: Horizontal skew
Figure 3-58: Coordinate system
Figure 3-59: 3D effect with perspective
Figure 3-60: 3D effect using the perspective property
CHAPTER 4 - WEB DESIGN
Figure 4-1: Block and Inline elements
Figure 4-2: Inline-Block elements
Figure 4-3: Image and paragraph with styles by default
Figure 4-4: Image floats to the left
Figure 4-5: Image floats to the right
Figure 4-6: The image is taller than its container
Figure 4-7: The image does not overflow its container anymore
Figure 4-8: Document's normal flow
Figure 4-9: Boxes organized with the float property
Figure 4-10: Boxes automatically fill the space available
Figure 4-11: Space between boxes
Figure 4-12: Relative position
Figure 4-13: Absolute position
Figure 4-14: Custom z index
Figure 4-15: Structure to present a slide with additional information
Figure 4-16: Slide over an image
Figure 4-17: Content in two columns
Figure 4-18: Columns separated by a rule
Figure 4-19: Same values for the flex property distribute the space equally
Figure 4-20: Uneven distribution with flex
Figure 4-21: Only the free space is distributed
Figure 4-22: Empty space distributed among the boxes
Figure 4-23: Boxes with a maximum size
Figure 4-24: Axes of flexible containers
Figure 4-25: Boxes in reverse order
Figure 4-26: New positions for every box defined by the order property
Figure 4-27: Boxes and empty space inside a flexible container
Figure 4-28: Empty space distributed with justify-content: flex-end
Figure 4-29: Empty space distributed with justify-content: center
Figure 4-30: Empty space distributed with justify-content: space-between
Figure 4-31: Empty space distributed with justify-content: space-around
Figure 4-32: Vertical alignment with align-items: center
Figure 4-33: Stretching the boxes with align-items: stretch
Figure 4-34: Boxes aligned with align-items: flex-start
Figure 4-35: Boxes aligned with align-items: flex-end
Figure 4-36: Boxes aligned with align-items: baseline
Figure 4-37: Box aligned with align-self
Figure 4-38: Multiple lines in a flexible container
Figure 4-39: New line order using flex-wrap: wrap-reverse
Figure 4-40: Lines aligned with align-content: flex-start
Figure 4-41: Lines aligned with align-content: flex-end
Figure 4-42: Lines aligned with align-content: center
Figure 4-43: Lines aligned with align-content: space-between
Figure 4-44: Lines aligned with align-content: space-around
Figure 4-45: Document with basic rules
Figure 4-46: Header
Figure 4-47: Menu
Figure 4-48: Main content
Figure 4-49: Absolute position for the <time> element
Figure 4-50: Articles
Figure 4-51: Footer
Figure 4-52: Photos page
Figure 4-53: Submenus
Figure 4-54: Grid lines
Figure 4-55: Grid items
Figure 4-56: Simple grid layout
Figure 4-57: Google Chrome's badge to visualize the grid
Figure 4-58: Grid on the browser
Figure 4-59: Gap between items
Figure 4-60: Automatic size
Figure 4-61: Column width calculated with fractions
Figure 4-62: Fixed and flexible columns
Figure 4-63: Spanning an item
Figure 4-64: Spanning multiple items
Figure 4-65: Spanning items vertically
Figure 4-66: Rows with fixed heights
Figure 4-67: New rows with predefined height
Figure 4-68: Scrollable gallery
Figure 4-69: Layout defined by grid areas
Figure 4-70: Horizontal Alignment
Figure 4-71: Item alignment
Figure 4-72: Nested grids with different column sizes
Figure 4-73: Overlapping items
Figure 4-74: Website designed with a Grid Layout
Figure 4-75: Common styles for the whole document
Figure 4-76: Header styles
Figure 4-77: New style for the links
Figure 4-78: Main content title
Figure 4-79: Destinations gallery
CHAPTER 5 - RESPONSIVE WEB DESIGN
Figure 5-1: Device toolbar
Figure 5-2: Original logo
Figure 5-3: Logo for small screens
Figure 5-4: Device selector in Google Chrome
Figure 5-5: Page on a device with a scale of 3
Figure 5-6: Relative font size
Figure 5-7: Font size relative to the size set by the browser
Figure 5-8: Landing page
Figure 5-9: Mobile grid
Figure 5-10: Responsive website
Figure 5-11: Repositioning the date in smaller screens
Figure 5-12: Repositioning the columns
Figure 5-13: Styling the header and footer for small screens
Figure 5-14: Menu displayed with JavaScript code
CHAPTER 6 - JAVASCRIPT
Figure 6-1: Dialog box generated by the alert() function
Figure 6-2: Dialog box showing the value of a variable
Figure 6-3: Dialog box showing a string stored in a variable
Figure 6-4: Multiple lines of text in a dialog box
Figure 6-5: Values displayed by the Badge object
Figure 6-6: Styles assigned from JavaScript
Figure 6-7: Element's width modified from JavaScript
Figure 6-8: New content added to an element
Figure 6-9: New element added to the document
Figure 6-10: Only the element that received the event is affected
Figure 6-11: The element is modified with the values received by the function
Figure 6-12: Progress bar
Figure 6-13: Google Chrome console
Figure 6-14: Error reported on the console
Figure 6-15: Messages on the console
Figure 6-16: Information about an error
Figure 6-17: Exception displayed on the console
Figure 6-18: Running an asynchronous operation
CHAPTER 7 - BACK-END DEVELOPMENT
Figure 7-1: Front-End and Back-End development
Figure 7-2: Back-End technologies
Figure 7-3: Registering a domain
Figure 7-4: Hostinger dashboard for a single website
Figure 7-5: Nameservers assigned to a domain in a Hostinger account
Figure 7-6: Assigning nameservers to a domain
Figure 7-7: Creating an FTP account for our server
Figure 7-8: FileZilla toolbar
Figure 7-9: Adding an FTP account to FileZilla
Figure 7-10: Transferring files
Figure 7-11: MAMP's main screen
Listing 7-12: Using incremental operators
Figure 7-13: Document generated by PHP
Figure 7-14: HTML elements generated by PHP
Figure 7-15: List created with a foreach loop
Figure 7-16: Document with values inserted by the user
Figure 7-17: Form submitted with errors (left) and successfully (right)
Figure 7-18: Displaying the values inserted by the user
Figure 7-19: List of cookies in the browser
Figure 7-20: Reading values from multiple objects
Figure 7-21: Initializing an object with its own values
Figure 7-22: Using an object created from a subclass
Figure 7-23: Creating the database
Figure 7-24: phpMyAdmin control panel
Figure 7-25: Creating a database locally
Figure 7-26: Selecting a database
Figure 7-27: Tables in a database
Figure 7-28: Columns in a table
Figure 7-29: Table records
Figure 7-30: Creating a table
Figure 7-31: Form to create columns
Figure 7-32: Definition of columns
Figure 7-33: Setting auto increment for the identifier
Figure 7-34: Table configuration
Figure 7-35: SQL tab in phpMyAdmin
Figure 7-36: Record added to a table
Figure 7-37: Multiple records added to a table
Figure 7-38: Selecting specific columns
Figure 7-39: Sorting records
Figure 7-40: Filtering records
Figure 7-41: Listing records
Figure 7-42: Searching values in records
Figure 7-43: Displaying the details of a record
Figure 7-44: Configuring the table to store users' data
Listing 7-45: Defining a for loop to iterate over an array
Figure 7-46: Main page
Figure 7-47: Products list
Figure 7-48: Add to cart link
Figure 7-49: Shopping cart
CHAPTER 9 - MEDIA
Figure 9-1: Video poster
Figure 9-2: Custom video player
Figure 9-3: Closed captioning
Figure 9-4: Information about the track
CHAPTER 10 - CANVAS API
Figure 10-1: Rectangles on the canvas
Figure 10-2: Linear gradient for the canvas
Figure 10-3: Open path
Figure 10-4: Close path
Figure 10-5: Solid triangle
Figure 10-6: Clipping area
Figure 10-7: Semicircle with the arc() method
Figure 10-8: Representation of Bézier curves and their control points
Figure 10-9: Different types of lines
Figure 10-10: Working with text
Figure 10-11: Text with a shadow
Figure 10-12: Applying transformations
Figure 10-13: Modifying the transformation matrix
Figure 10-14: Applying globalCompositeOperation
Figure 10-15: Image on the canvas
Figure 10-16: Image stretched to cover the canvas
Figure 10-17: A piece of the image on the canvas
Figure 10-18: Pattern
Figure 10-19: Negative image
Figure 10-20: Image created from the canvas' content
Figure 10-21: Simple Animation
Figure 10-22: Simple Video Game
Figure 10-23: Mirror image of a video
CHAPTER 11 - WEBGL
Figure 11-1: Cube in a 3D coordinate system
Figure 11-2: Object displaced on the x axis
Figure 11-3: Mesh to build a sphere
Figure 11-4: Animated wireframe cube
Figure 11-5: Light reflecting on a cube
Figure 11-6: Cube with texture
Figure 11-7: Switching textures
Figure 11-8: Cube turned into a dice
Figure 11-9: 3D text on the canvas
Figure 11-10: Video texture
Figure 11-11: glTF model
Figure 11-12: Expanding the area occupied by the sphere
Figure 11-13: 3D video game for the Web
CHAPTER 13 - STORAGE
Figure 13-1: Objects with different properties stored in an Object Store
Figure 13-2: Information about an image in the user's computer
Figure 13-3: Information about a Blob
Figure 13-4: Image created from a Blob
Figure 13-5: Progress bar to show progress while loading a file
CHAPTER 14 - DRAG AND DROP API
Figure 14-1: Drop Box
Figure 14-2: The image number 4 was not admitted
Figure 14-3: Images dragged onto a canvas
CHAPTER 15 - GEOLOCATION API
Figure 16-1: Entries list
Figure 16-2: Intercepting navigation
Figure 16-3: Single-page application
Figure 16-4: Downloading text from the server
Figure 16-5: Downloading an image from the server
Figure 16-6: Downloading JSON data
Figure 16-7: Processing a stream of data
Figure 16-8: Aborting a request
Figure 16-9: Sending data
Figure 16-10: Sending files
CHAPTER 17 - COMMUNICATION
Figure 17-1: Sending messages between windows
Figure 17-2: Two way communication throw ports
Figure 17-3: Application talking with the WebSocket server
Figure 17-4: Talking to a custom server
Figure 17-5: Peer to peer communication
Figure 17-6: ICE Servers
Figure 17-7: Sending data with data channels
Select Country
Paperback
$ 39.95 BUY NOW
Kindle
$ 12.99 BUY NOW
Apple Books
$ 12.99 BUY NOW
Google Books
$ 12.99 BUY NOW
Information
4th Edition 2026
ISBN: 978-1-0699942-2-6
More than 600 Codes Explained!