Multi-Theme Template Tutorial 3 - Multiple Pages with Dynamic Content
Watch as I write a static page that hosts multiple clients on one template. This is a single page JavaScript application that gives the illusion of multiple pages by dynamically calling data and updating the DOM in realtime.
This tutorial will be an example of a baseball league website where each team gets it's own theme and content, images, text, videos, API endpoints etc...
GitHub tutorial code:
https://github.com/aaronrs2002/multi-...
Demo of different teams using the same template:
https://aaronrs2002.github.io/multi-t...
https://aaronrs2002.github.io/multi-t...
Outline:
01:32 - Write a content card and assign it specific data ("data targets")
03:13 - Update footer style
04:35 - Build out json for multiple pages
06:20 - Prepare HTML for multiple images
08:19 - One baseball league website multiple team/clients represented
08:35 - Darken image to make text legible (recommended above css filters)
10:25 - Saving images in json data
12:42 - Consistent sizing brings balance
15:25 - Mobile menu & navigation
21:17 - Nav links must display "active" or "not active"
23:22 - Write a contact form
25:54 - Each client get custom endpoints for posting
29:04 - Manage multi-page content
30:56 - Writing data targets within dynamic content
34:05 - Insert dynamic YouTube video player
37:21 - Target story data to the second page (this is the same data used for the teaser substring)
38:35 - Adding JavaScript into json content
39:52 - Adding contact info to json data (this data appears in multiple areas)
43:34 - Applying different background images per team/client. We did this with CSS. Now we will do it with JavaScript
44:24 - Crop, shape, and filter background images without Photoshop
49:08 - POST with traditional HTML functionality
50:54 - Replace old mobile images