Coding Help Tips Resources Tutorials
Google Apps Scripts and Web Development Tutorials and Resources by Laurence Svekis
41) Canvas Signature Pad + Save PNG — exercise41_signature_pad.html <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Signature Pad — Canvas + Pointer Events</title> <!– Build: Simple signature/drawing pad using <canvas> + Pointer Events with Save PNG. Objectives: – Use pointerdown/move/up/cancel to draw smooth lines on a canvas. – Handle DPR (devicePixelRatio) for crisp rendering. – … Read more
31) MutationObserver: Live DOM Change Log Build: A playground that logs DOM changes (add/remove nodes, attribute/text changes) from a target container in real time.Objectives: 32) IntersectionObserver: Lazy Images + Sentinels Build: A grid of 60 images that load only when they approach the viewport; a sentinel at the end indicates “end reached.”Objectives: 33) Drag & … Read more
11) Tabs Component (ARIA) Build: Keyboard-accessible tab interface with ARIA roles/states and panels.Objectives: 12) Accordion (ARIA) Build: Single-expand/collapse FAQ-style accordion with semantic buttons and ARIA linkage.Objectives: 13) Live Search with Debounce Build: Product cards filtered by a debounced input; matches highlighted.Objectives: 14) Countdown + Progress Bar Build: 10-second timer that updates a <progress> bar and … Read more
Download PDF Download Source Code 21) DOM Traversal Visualizer Build: Click any nested element to highlight the target, its ancestors, and its siblings, and show the path to root.Objectives: closest, parents/children/siblings, DOM introspection.Steps: Open file → click around the left “tree” → watch highlights and path update.Code (save as exercise21_traversal.html) <!doctype html> <html lang=”en”> <head> … Read more
Source code Each one includes: what you’ll build, learning objectives, step-by-step instructions, a single self-contained HTML file (copy–paste into a .html file and open in a browser), and a short breakdown of how the code works. 1) Select, Read, and Update DOM Content, Attributes, and Styles What you’ll build: A tiny product list with buttons … Read more
At the end, there’s one single .gs file you can paste into your Apps Script project. It creates the sheets, seeds data, and lets you run each exercise from a custom menu. How to get set up (once) Exercise 1 — Create & Seed a “Sales” sheet Objective: Learn to create a sheet, write headers/rows, … Read more
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The following exercises are designed to help you understand and practice key DOM manipulation concepts. Exercise 1: Selecting Elements Objective: Learn how to select single and multiple elements … Read more
How to Use These Exercises Exercise 1: Hello, World! 👋 Objective: Learn the most basic function of Apps Script: creating a function and logging a message to the execution log. Instructions: Write a script that logs the message “Hello, World!” to the console. Solution: Explanation: Exercise 2: Send a Simple Email 📧 Objective: Use the … Read more
Download PDF Guide Welcome to the exciting world of web development! You’re about to learn how to build websites from scratch. But you won’t be doing it alone. This guide is built around a revolutionary idea: using Artificial Intelligence (AI) like Gemini or ChatGPT as your personal tutor, coding partner, and creative assistant. Think of … Read more
Welcome to Your Ultimate Guide to Google Apps Script Ever find yourself lost in a sea of repetitive tasks within Google Sheets, Docs, or Gmail? Have you ever thought, “There has to be a better way to do this”? There is, and you’ve found it. Enter Google Apps Script, the powerful, cloud-based scripting platform built … Read more