Digital Library

Web Dev with an AI Sidekick Master the foundations of web development with hands-on AI-assisted learning for absolute… (Mark J. Price)（Z-Library）

Share E-Book
Read Without Registration

Web Dev with an AI Sidekick Master the foundations of web development with hands-on AI-assisted learning for absolute… (Mark J. Price)（Z-Library）

Author

AI
Language English

Start from zero and learn web development by building a real survey website with AI as your coding partner, guiding you through each concept, exercise, and deployment step in a practical, beginner-friendly way Key Features • Learn with AI chatbots as a 24/7 tutor while you code and ask questions anytime • Master frontend and backend basics, then build a full survey website with Django • Set up modern tools like OpenAI Codex, Claude Code, GitHub Copilot, and Docker for real-world workflows Web Dev with an AI Sidekick is a beginner-friendly guide that turns learning into a conversation. Instead of passively reading lessons, you actively work with an AI that explains concepts, generates examples, answers your questions, and helps you fix mistakes as you go. It feels like having a personal tutor available whenever you need support. You start from the very basics and build real skills step by step. Learn how web pages are structured with HTML, styled with CSS, and then made interactive with JavaScript and TypeScript. Understand how data is stored and queried with SQL, how backend logic works with Python, and how full websites are built using Django. You also explore simple command-line tasks with Bash to strengthen your development workflow. As your confidence grows, you bring everything together by building a complete survey creation app with analytics. You design surveys, collect responses, display results in tables and charts, and understand how testing, debugging, and deployment work in practice. Throughout the journey, you also learn how to use AI responsibly by writing clear prompts, reviewing results carefully, and verifying outputs with documentation. By the end, you will have a deployed website and the confidence to continue learning on your own. Who this book is for This book is for complete beginners who are curious about web development and excited about AI.

Format PDF
Size 24.8 MB
7
Views
(First 20 pages)

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

Page 1
(This page has no text content)
Page 2
Web Dev with an AI Sidekick Master the foundations of web development with hands-on AI-assisted learning for absolute beginners Mark J. Price
Page 3
Web Dev with an AI Sidekick Copyright © 2026 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Portfolio Director: Ashwin Nair Relationship Lead: Nitin Nainani Project Manager: Ruvika Rao Content Engineer: Adrija Mitra Technical Editor: Arjun Varma Indexer: Tejal Soni Proofreader: Adrija Mitra Production Designer: Deepak Chavan Growth Lead: Priyadarshini Sharma First published: May 2026 Production reference: 1210526 Published by Packt Publishing Ltd. Grosvenor House 11 St Paul’s Square Birmingham B3 1RB, UK. ISBN 978-1-80611-125-1 www.packtpub.com
Page 4
Foreword Computer Science as a subject never stands still. Teaching it can often feel like trying to keep pace with a discipline that is constantly reinventing itself. In recent years, the rapid emergence of artificial intelligence has accelerated this challenge even further. AI has, in many respects, made teaching computer science both easier and more difficult than ever before. Easier, due to the tools available to teachers and students being extraordinarily powerful. More difficult, because those same tools can obscure the very fundamentals we are trying to teach. In the classroom, it is not enough to simply introduce students to programming languages and frameworks. We must help them navigate an ecosystem where AI-assisted development is com- monplace. Students will experiment with code-generating tools and lean on these when the going gets tough. They may rely on them to produce working solutions before they fully understand variables, program flow, or the techniques used. While this can accelerate progress, it often leaves students unable to explain why their code works. As educators, our responsibility is to ensure students do not mistake correct output for genuine understanding. Mark Price’s .NET books have been a popular addition to Greenhead College’s programming book library. His books are structured in a way that respects the learner’s journey, carefully scaffolding concepts while still engaging with modern, real-world development practices. Clear explanations, well-chosen examples, and a strong emphasis on building understanding step by step have made his books some of the most reliable resources I have used in both introductory and intermediate programming courses. They have proven particularly effective in supporting students through substantial coursework projects, where confidence and clarity matter just as much as technical correctness. With the rise of AI-assisted development, the landscape is shifting again. The question is no lon- ger should students use AI tools, but how can they use them responsibly and effectively. This is why a book like Web Dev with an AI Sidekick feels so timely. Rather than ignoring AI or treating it as a shortcut, the book directly addresses the tension educators now face: how to embrace these tools while ensuring they enhance learning instead of replacing it.
Page 5
My expectation for this book is that it will bring the same strengths that have defined Mark Price’s previous work. If AI is approached with the same measured and thoughtful mindset that he has applied to frameworks and languages throughout his writing, this book will help students develop not only functional solutions, but real understanding. That balance, between capability and com- prehension, is exactly what educators and learners need in this new era of software development. Stephen Wood Head of Computer Science at Greenhead College
Page 6
Contributors About the author Mark J. Price has over 30 years of experience teaching programming and technical subjects to a wide range of learners. He has worked extensively with students at different stages, from school-age learners and apprentices to experienced professionals, helping them build practical skills and confidence in technology. Alongside his work in software development, Mark has taught mathematics and computing, with a focus on making complex ideas clear and approachable. His teaching style emphasizes understanding how systems work, rather than memorizing syntax, so that learners can apply their knowledge in real situations. Mark holds a BSc in Computer Science and has spent much of his career developing courses, writing books, and supporting learners as they move from foundational concepts to building complete, working projects. Thank you to all my readers. Your support means I get to write these books and celebrate your successes. Special thanks to the readers who give me actionable feed- back via my GitHub repository and email, and who interact with me and the book communities on Discord. You help make my books even better with every edition.
Page 7
About the reviewers Sunil Raj Thota is a software engineer specializing in web development, AI applications, and agentic AI systems. He currently works on the Agentic AI Foundation team at Amazon, building intelligent agent-driven solutions. Previously, he contributed to Amazon QuickSight and held roles at Yahoo Inc., where he enhanced user engagement across Yahoo and AOL Mail products. Sunil has also worked as a Research Assistant at Northeastern University and as a Senior Software Engineer at MOURI Tech, leading web optimization and deployment projects. He co-founded ISF Technologies, championing user-centric design and agile methodologies. He holds a Master’s in Analytics from Northeastern University. David Guida is a Montreal-based software engineer and architect with nearly 20 years of expe- rience building robust, distributed systems. He has spent his career untangling the complexities of modern software design and has a deep-seated passion for mentoring developers as they master architecture and scale. Currently, he’s at Microsoft working on some very cool projects, and when he’s not busy coding, blogging, or hunting for his next favorite book, you can usually find him in the kitchen baking cakes.    Jo Van Eyck is an experienced software engineer and technical coach based in Belgium. He helps teams ship software they’re proud of. He writes articles and publishes videos about whatever is currently rewiring his thinking, which lately means AI-assisted coding, the changing shape of the engineering role, and how to best prepare for this transition.
Page 8
Table of Contents Preface xxxiii Free benefits with your book  ............................................................................................. xl Chapter 1: Introduction to Web Development with an AI Sidekick 1 Breaking down the chapters of this book ............................................................................ 2 Frontend Web Development • 2 Backend Web Development • 3 Survey Project • 4 Why these languages and skills? • 4 How to use this book • 6 Setting up your web development environment ................................................................. 9 Downloading and installing VS Code • 9 Installing other extensions • 11 Understanding VS Code versions • 12 Keyboard shortcuts for VS Code • 12 Learning with an AI chatbot as your coach ........................................................................ 13 OpenAI’s ChatGPT • 14 Anthropic’s Claude • 15 Google’s Gemini • 16 Which chatbot to choose? • 17 Getting the most from the book’s suggested prompts • 17 AI magnifies whatever habits you already have • 19 Your learning style • 21 Configuring an AI chatbot for learning • 21 Coding with an AI assistant as your coworker ................................................................... 25 Understanding the tool–model relationship • 25
Page 9
Table of Contentsviii The importance of a great harness • 27 GitHub Copilot • 28 Google’s Gemini Code Assist • 29 AI coding tool costs and capabilities • 30 AI agents and multi-agent workflows • 33 Practical tips for collaborating with any AI • 35 Pros and cons of AI tools ................................................................................................... 36 Companies are increasingly using AI tools • 36 Human + AI = success • 36 Limits of AI • 36 How AI impacts junior and senior developers differently • 37 AI shifts work from writing code to judging code • 38 Developer job market • 39 It’s all about you • 39 Practice, references, and resources .................................................................................... 40 Studying with NotebookLM • 40 Check your understanding • 40 Links • 41 Summary .......................................................................................................................... 41 Learn more on Discord ...................................................................................................... 42 Part 1: Frontend Web Development 43 Chapter 2: HTML – Structuring Your Web Pages 45 What is HTML? ................................................................................................................. 46 HTML is made of elements • 46 Comments in HTML • 48 The basic structure of a web page • 48 Try it out! • 49 Headings give content hierarchy • 50 Paragraphs hold readable text • 51
Page 10
Table of Contents ix Links connect the web • 51 Images add visual content • 52 Lists group related items • 53 Tables structure data, not layout • 53 HTML elements nest inside one another • 54 Using <div> as a generic container • 55 HTML describes meaning, not appearance • 55 What good structure gives you • 56 HTML DOM (document object model) • 57 The beginner takeaway • 58 Building a basic web page ................................................................................................. 59 Build a web page in VS code and preview it live • 59 Generating bitmap images for web pages • 64 Try these quick edits to prove it’s live • 66 Working with forms and inputs ........................................................................................ 66 Create contact.html • 66 Link to the contact form from index.html • 69 Try it out in live preview • 70 A quick, practical table of common form elements • 71 What “posting back to the web server” means • 72 AI exercises ........................................................................................................................ 73 History of HTML • 73 HTML chapter quiz • 74 Create a custom quiz • 76 Mini-challenge: build a “Workshop Signup” website • 76 Other markup languages .................................................................................................. 79 What “markup language” means • 79 SVG: markup for graphics • 80 A very short history of markup languages • 81 Why beginners should care • 81
Page 11
Table of Contentsx References and resources .................................................................................................. 82 MDN web docs (beginners should start here) • 82 W3C HTML specification (official but not beginner friendly) • 82 WHATWG HTML living standard • 83 How beginners should actually use these resources • 83 Summary .......................................................................................................................... 84 Get this book’s PDF version and more  .............................................................................. 84 Chapter 3: CSS – Styling Your Web Pages 85 CSS basics ......................................................................................................................... 86 Adding CSS to a web page • 86 Selectors and rules • 88 Classes and IDs • 89 The cascade and specificity • 91 The box model • 92 The four-sides model • 96 What is box-sizing and why use border-box? • 98 How to write a CSS comment • 100 Inheritance vs non-inherited properties • 101 Web Content Accessibility Guidelines (WCAG) • 103 Colors, fonts, and layout ................................................................................................. 104 Working with color • 104 Fonts and typography • 105 Layout fundamentals • 107 Responsive design ........................................................................................................... 109 What responsive design actually means • 109 The viewport and why it matters • 109 Try it out: simulate mobile devices in your browser • 110 Flexible layouts instead of fixed widths • 110 Responsive typography • 111 Fluid font sizing with clamp() • 111
Page 12
Table of Contents xi Media queries • 112 Mobile-first thinking • 113 Images and responsiveness • 114 AI challenge – CSS debugging ........................................................................................... 114 The broken page • 115 Step 1: Describe the problem in plain English • 117 Step 2: Ask AI the right way • 117 Step 3: Read the explanation, not just the fix • 117 Step 4: Apply fixes incrementally • 118 Step 5: Ask “what else could go wrong?” • 118 Debugging CSS with browser developer tools • 119 What this exercise teaches you • 120 Your takeaway • 120 Transforms and animation ............................................................................................. 120 CSS transforms • 121 The transition property • 122 Keyframe animations • 123 Timing functions and realism • 124 Reduced motion and accessibility • 124 Practice, references, and resources ................................................................................... 124 Check your understanding • 125 Links • 125 Summary ......................................................................................................................... 126 Get this book’s PDF version and more  ............................................................................. 127 Chapter 4: SVG – Drawing Scalable Graphics 129 SVG fundamentals for drawing shapes ........................................................................... 130 Presentation attributes • 134 Hands-on mini-task • 138 Scaling, grouping, and styling graphics ........................................................................... 139 Scaling with viewBox • 139
Page 13
Table of Contentsxii Grouping elements with <g> • 140 Styling SVG with CSS • 141 Transforms on groups • 142 Custom shapes using paths .............................................................................................. 142 The <path> element • 143 Why paths look intimidating at first • 143 A closed shape with Z • 144 Drawing curves with paths • 145 A cool-looking blob using paths and fill • 147 Icons are paths • 147 Styling and animating paths • 149 Mini-tasks • 149 Converting shapes into path commands • 150 Practical advice for SVG • 154 SVG as a reusable design system ....................................................................................... 154 Defining and reusing shapes with <defs> and <use> • 154 Gradients: paint that isn’t flat • 156 Patterns: repeating designs as paint • 157 Combining <use> with gradients and patterns • 158 Reusable icons with <symbol> • 158 Making SVG accessible ..................................................................................................... 159 Providing a text alternative with <title> • 159 Adding longer descriptions with <desc> • 160 Linking text with aria-labelledby • 160 Declaring the SVG as an image with role=”img” • 161 Hiding decorative SVGs • 161 Inline SVG vs <img> SVG • 161 Practice, references, and resources ................................................................................... 162 Check your understanding • 162 Links • 162 Summary ........................................................................................................................ 164 Learn more on Discord .................................................................................................... 164
Page 14
Table of Contents xiii Chapter 5: JavaScript – Making Web Pages Interactive 165 Introducing JavaScript .................................................................................................... 166 JavaScript is a full programming language • 166 Running JavaScript • 166 Is JavaScript difficult? • 167 Using browser developer tools to find errors and bugs • 168 Programming basics ....................................................................................................... 168 Setting up a web page with code • 168 Execution order is top-to-bottom • 170 Comments for documenting your code • 172 Logging to the console • 173 Using template literals for custom output • 175 Variables for storing data • 176 Scope is where your variables live • 178 Data types: number, string, Boolean, array, and object • 180 Functions: reusable code, parameters, return values • 182 Hooking up event handlers • 183 Conditionals: if / else with Booleans and comparisons • 184 Loops: repeating work and iterating arrays • 186 Error handling • 187 Putting it together with events • 190 Mini exercise and quiz • 192 DOM manipulation .......................................................................................................... 192 Example 1: Selecting elements and changing text • 195 Example 2: Reading user input and updating the DOM • 198 Example 3: Adding, removing, and counting list items • 199 Example 4: Event delegation • 201 Example 5: Toggling classes and hiding sections • 203 Summary of DOM commands • 204
Page 15
Table of Contentsxiv Practice, references, and resources .................................................................................. 206 Check your understanding • 206 Links • 207 Summary ....................................................................................................................... 208 Get this book’s PDF version and more  ............................................................................ 209 Chapter 6: TypeScript – Safer JavaScript 211 Why TypeScript? .............................................................................................................. 212 Comparing JavaScript to TypeScript • 212 TypeScript tooling • 213 Is TypeScript necessary? • 214 How TypeScript fits into the JavaScript toolchain • 215 What tools work best with TypeScript • 215 Why teams commit to TypeScript long-term • 216 Which frameworks and libraries use TypeScript • 216 Declaration files and third-party libraries • 217 Who created TypeScript and why • 218 Why future TypeScript versions may break your code • 218 Setting up TypeScript ..................................................................................................... 220 Prerequisite: Node.js • 220 Installing the TypeScript compiler • 222 Editor support • 223 Your first TypeScript project • 223 Introducing tsconfig.json • 224 Platform notes (Windows vs macOS vs Linux) • 227 Setup summary • 227 Basic types and interfaces ............................................................................................... 228 Basic types • 228 Type inference • 229 Arrays • 229 Objects and inline types • 230
Page 16
Table of Contents xv Interfaces • 230 The type keyword • 231 Structural typing vs nominal typing • 231 Literal types • 232 Union types • 234 Optional properties • 235 Making absence explicit with null and undefined • 236 Optional parameters versus default parameter values • 237 Preventing errors instead of catching them • 238 Interfaces and the DOM • 241 Summary of basic types and interfaces • 241 Hands-on exercise: making TypeScript work for you ...................................................... 242 Step 1: Initialize a TypeScript project • 242 Step 2: Create a new TypeScript file • 242 Step 3: Create a value that must match the interface • 242 Step 4: Add a function with typed parameters and a return value • 243 Step 5: Introduce an optional property • 245 Step 6: Work with arrays of typed objects • 246 Optional challenges • 246 Practice, references, and resources .................................................................................. 247 Check your understanding • 247 Links • 247 Summary ........................................................................................................................ 248 Get this book’s PDF version and more  ............................................................................ 249 Part 2: Backend Web Development 251 Chapter 7: SQL – Managing Data 253 Introduction to SQL and databases ................................................................................. 254 What is a database? • 254 SQL dialects • 256
Page 17
Table of Contentsxvi How SQL is used to query data • 256 SQL data types • 258 Database schema design • 260 Normalization: storing facts once • 261 Primary and foreign keys • 262 NULL values • 267 Constraints • 268 SQL naming conventions for database objects • 270 Setting up SQLite and a sample database ......................................................................... 271 Creating a Media sample database for SQLite • 273 Managing a SQLite database with SQLiteStudio • 274 Writing queries and joining tables ................................................................................... 277 Tools for running queries • 277 VS Code and the SQLite extension • 280 SELECT: the shape of a query • 281 Filtering rows with WHERE • 282 Sorting results with ORDER BY • 282 Limiting the number of rows in the results • 283 Selecting calculated values • 283 Joining tables: bringing related data together • 284 Querying many-to-many relationships • 285 Types of joins • 285 Aggregates: asking summary questions • 288 Filtering groups with HAVING • 289 A useful order for designing queries • 290 Syntax check: quick quiz • 290 Query exercises: write the SQL • 292 A warning about SQL injection attacks • 292 Modifying data ................................................................................................................ 293 INSERT: adding new rows • 293 UPDATE: changing existing rows • 294
Page 18
Table of Contents xvii DELETE: removing rows • 296 Deleting with foreign keys • 296 Transactions • 297 Improving performance with indexes ............................................................................. 299 What an index is • 299 Why indexes make reads faster • 299 Why indexes slow down writes • 300 How to choose effective indexes • 300 When not to index • 301 How to identify performance issues • 301 Practice, references, and resources .................................................................................. 303 Check your understanding • 303 Links • 303 Summary ........................................................................................................................ 305 Get this book’s PDF version and more  ............................................................................ 306 Chapter 8: Python – Programming on the Backend 307 Introducing Python ........................................................................................................ 308 Clean syntax using indentation • 308 Professional Python • 309 A rich standard library • 309 Python is interpreted, not compiled • 309 A vast ecosystem • 310 Installing Python • 310 Trying out the Python interactive shell • 313 Syntax and basics ............................................................................................................. 313 Writing Python code files and running them • 314 Running Python files with the UI • 315 The importance of indentation • 316 Python comments • 317 Python statements and variables • 317
Page 19
Table of Contentsxviii Python data types • 318 Python expressions • 318 Python comparisons • 319 Conditional statements • 319 Looping statements • 321 Python input and output • 323 Data structures ............................................................................................................... 323 Lists • 324 Tuples • 325 Dictionaries • 325 Sets • 326 Collections summary • 327 Strings in more depth ..................................................................................................... 328 Creating strings • 328 F-strings • 329 String methods • 329 Indexing and slicing strings • 330 Substrings • 330 User input starts as a string • 330 Strings are immutable • 331 Functions and classes ...................................................................................................... 331 Defining functions • 331 Function parameters • 332 Returning values from functions • 332 Local variables and scope • 333 Default parameter values • 333 Grouping data and behavior with classes • 334 Python’s optional type hints • 337 Decorators • 339 Guidance for writing functions • 342
Page 20
Table of Contents xix Errors and debugging basics ........................................................................................... 343 Common errors • 343 Debugging • 344 Make incremental changes • 345 Handling runtime errors safely • 345 Modules, imports, and packages ..................................................................................... 347 Importing standard modules • 347 Defining your own modules • 348 Preventing execution in modules • 349 What’s important for beginners about modules • 349 Packages and how they relate to modules • 350 Installing packages • 350 How packages work • 351 Package versions • 351 Virtual environments ...................................................................................................... 352 The problem • 352 The solution • 353 Creating a virtual environment • 353 VS Code and virtual environments • 354 File input and output ...................................................................................................... 355 Writing text to a file • 356 Reading text from a file • 356 Files are just big strings • 357 Using JSON for structured data • 357 Paths and file locations • 358 Common file I/O errors • 358 File I/O summary • 358 A small, cohesive mini-project ........................................................................................ 359 Writing the code • 360 Trying the project • 364
The above is a preview of the first 20 pages. Register to read the complete e-book.

Recommended for You

Loading recommended books...
Failed to load, please try again later

Tip the Site

Scan the WeChat Pay or Alipay code to tip. No login required.

WeChat Pay
Alipay
← Back to List