Episode Transcript
[00:00:05] Welcome to Prompting Curiosity, a podcast for the AI curious. No coding background required. I'm your host, Dr. Shantae Cofield, also known as the Maestro, and I created this show to explore what these AI tools actually are. Really, though, are the files in the computer, how to use them, and what they might mean for how we think, work, create, and move through life. Whether you're skeptical, intrigued, or already experimenting, you're in the right place. All that I ask is that you stay curious. All right, let's get into it.
[00:00:37] Hello, hello, hello, my curious people, and welcome to episode 46 of Prompting Curiosity. I am your grateful host, the Maestro, and today we are talking about web development basics for aspiring coders. I promise the episode is going to be more interesting than that title, but the title is the title. It's what we're talking about. So fair warning, this episode is going to be a. It's going to be slightly technical, but more so in the sense that I'm going to be explaining technical terms, not that it's going to be some super technical, you know, impossible to understand episode. So y' all know I've been playing around with this vibe coding stuff since, like, last December, so December 2025, and that's like six months total. And when I made the outline for my vibe coding workshop, which I ran last week, but at the time that I'm recording this, I haven't run it yet. The time I'm recording this, it is tomorrow. The. The workshop will be tomorrow, but the time you listen to this, it will have happened last week. Um, but I did actually, like, a practice run, if you will, with my mafia. And so when I was developing the outline for, uh, really showed me how helpful it was that I took the time to learn some web development basics instead of just asking Claude to make stuff and hoping for the best. As I was going through and learning vibe coding, I felt like, you know, having that little bit of foundation and taking the extra time to be like, wait, what is this? And what. What is that? And if you've listened to all the episodes so far, you know, I've talked about this in the past of as you're learning things like, just ask Claude or ChatGPT, whatever you're using, ask it and be like, what is this? Why? What does it mean? And really try to grasp what's going on.
[00:02:16] Uh, and, you know, that's been incredibly, incredibly helpful for me.
[00:02:20] So way more helpful than. Than just, you know, again, asking Claude to make stuff and then hoping for the best and be like, I don't know what's going on. And just, you know, for me, just. That feels uncomfortable to be so in the dark. It already feels uncomfortable that things feel so fragile to me because I don't know 100 what's going on. I'm, like, not in control of the things. Uh, so to be, like, fully unaware of what's going on, that was. That's not a good feeling to me, which is why I took the time to learn things and I took some extra courses and things like that. And I think it's been really helpful. So I wanted to make that episode, make this episode for you folks. So if you are in the terrible AI silos on threats, then perhaps you've seen the curmudgeon coders over there that just shit on vibe coders, and they continue to rant that if you use AI, you will never be an actual coder and all of your stuff is going to break. This honestly scared me for a little bit, and then I was like, still building shit, and now I'm on the other side of it and I'm like, shut the fuck up. Right? It is whack behavior. And two, it's objectively not true.
[00:03:17] All right, As a reminder, it's backing up just for a little step. Vibe coding is a term coined by Andre. I don't have to pronounce his name. I say Andre, but maybe it's Andre. Like, it's soft J, Silent J. I don't know, uh, Carpathy. He is the co founder of OpenAI and it refers to simply telling AI what you want it to build and letting AI handle everything.
[00:03:35] The reality is, though, if you are really in it, if you're vibe coding with any kind of consistency and regularity, you cannot help but learn some parts of coding and web development. It is an. It is an inevitability.
[00:03:50] One of the favorite, My favorite, uh, people to follow on Instagram is this woman, Liz. She's. I think she's called Liz, the developer. She speaks to this and she's like, you will learn, right? It's, like, impossible not to. Because you're in it and you're doing it over and over again. You're seeing it generated. And when you have a problem, you're trying to troubleshoot with it, you can't help but learn some things, right? Not all of it, right? Will you be able to write the code yourself? Maybe a small amount at best. Like, very, very small amount.
[00:04:19] But generally speaking, no. But you will have a basic understanding of the processes that are taking place, right? And you'll know what to ask.
[00:04:27] So you'll know what to ask AI. So what I want to do with this episode is give you a little bit of a head start on things and just introduce you to some very basic web development concepts that are helpful, you know, that I think are helpful and in having at least, you know, a cursory understanding of as you embark on your vibe coding journey. So to start off a quick definition, web development. What is that? Web development is the process of building and maintaining m websites and web applications.
[00:04:59] This includes everything from how something looks in a browser to how it stores and moves data behind the scenes. Okay, Building, um, stuff on the Internet.
[00:05:08] I might make a part two of this where we talk about server side versus client side, AKA back end versus front end. But one, I gotta, like, learn that a bit more. And two is not as interesting. And three, today we're just gonna discuss the big rocks. So, uh, none of that stuff. So next definition, web app. Because I said it in the, in the web development definition, right? The definition of web development. The process of building and maintaining websites and web applications.
[00:05:34] Next part here.
[00:05:36] What is a web app? A web app is short for web application. A web application is a website that does something. It has functionality. So if you're like, wait a minute, you just said that web development is the process of building and maintaining websites and web applications. Yes, they can be different things, but for the purposes of what we're learning, if it kind of, if it hurts your head, then just think of it at the same team, same thing, right? A web app is a website. Think of it like that. If that's going to help you, that's totally fine. All right, I am highlighting this. That. Yes, your website is technically a web app, right? It's kind of like the square rectangle thing. Like all rectangles. No, all squares are, uh, rectangles. But not all rectangles are whatever. Whatever the. That thing is, right? One of those kind of situations. But understand that the website that you have, for all intents and purposes, is a web app. I am highlighting this because I need you to understand that if you are building something with AI that has any kind of functionality, any kind of functionality at all, right? It's a tool, it's a form, it's a dashboard. It's something that does something. You are building a web app, okay? That web app will live at a URL. You access it from a browser, right? So Chrome, Safari, whatever. And it is not something that you download from an app store, right? So we hear Web app. And we kind of think, we hear the word app and we think an app for our phone. Those are different.
[00:07:00] All right.
[00:07:01] A web app is a tool with functionality that lives in a URL that you access via a browser. Chrome, Safari, whatever, we call it an app, but it is not the same thing as a mobile app. Right. Uh, you can access it from your phone, but you will need to go through a URL first.
[00:07:18] A mobile app gets downloaded from the App Store or Google Play and it runs natively on your device. It is completely different under the hood as compared with a web app, which is what you are going to be building and making and vibe coding with AI, right? You will be vibe coding web apps. Your website is a web app. Anything you build will be a web app. And I need you. That's all I need you to understand. Okay, um, so the terms, we're going to go over three terms and, uh, two or three like kind of bigger concepts, like I gotta look at the outline again, but not a ton of stuff. Okay? But the three terms to start off with, these are three terms that you have likely heard before. And I want to briefly define them and just give you everything that I think you need to know about them, which is very simple. So the three terms are HTML, CSS and JavaScript.
[00:08:13] Right. The quick and dirty is that HTML, CSS and JavaScript are three programming languages that work together to turn a blank screen into a functioning web page. That's it. That's all I need to know with that. I'm not even going to tell you what the acronyms stand for. HTML, css, they stand for things. I'm not even going to worry about that. Just understand that they are three programming languages that work together and they make the thing appear on your screen. So for those of you that are a little bit like. Wait, wait, wait, what? A programming language simply refers to a set of rules that a computer can read and act on. Different languages have different rules and different syntax. Meaning. Think of syntax like grammar, right? And they're designed to do different things. So HTML, CSS, JavaScript, those are programming languages. They control three different things and allow you to have a web app. Right? Uh, they allow you to have a web page. They create the web page. So HTML controls what exists on the web page. Text, images, buttons that is dictated and governed by HTML CSS controls the styling of the web page and how it looks. So the colors or the fonts or the spacing. So if you're like, hey, I want this background to be black.
[00:09:29] What AI is going to make for you is css. It's going to generate code, right? This is all looks, it's all code. But the specific language, the specific way that the code is written, the things that are included in that code are dependent on what that language is. So HTML has a set of rules and a set of syntax. CSS has a set of rules instead of syntax. JavaScript, same thing, and they control different things. So if I want to control what's actually on the page, I want text to be on this page and I want to control what it says. I want images to be on this page, buttons, that's going to be HTML. If I want to control or change the style of the web page or the styling, how it looks, the colors, the fonts, things like that, that's css.
[00:10:09] And then the last one that we're Talking about is JavaScript. JavaScript controls what actions you can perform on the page, meaning what happens if you push a button. Okay. Um, it is helpful to have a basic understanding of these three things. And by basic, I mean just what I just said. That's it.
[00:10:24] Particularly for troubleshooting or when you're looking to change or fix something on the page yourself.
[00:10:31] Right. This understanding these three different things allows you to ask for those things from AI and you don't have to go back and forth as much. Right. And you just have. You have a grasp as to what the heck is going on.
[00:10:40] So for me, it's, it's really, in my opinion, it's really helpful.
[00:10:43] Wow, I had like a stroke there. It's really helpful for tasks like changing things on your website. So we want to change how something looks. Again, the background of, of one of the sections that's going to be the css.
[00:10:55] Uh, if you want to add animation to something, that's going to be CSS and JavaScript. Right. I manage both of my websites. I build out my own sales pages. I have a bunch of, you know, personal web apps that I've developed. And having a basic understanding of what those three things are, very basic understanding has been really helpful. So I want to introduce that to you. Okay. Um, the next and last two things. Oh, it's not gonna be the most complicated episode. I just want to give you the overview. The next and last two things that I'm going to introduce you to have more to do with the functionality of your web apps and making it so that you're not relegated to only using them on the computer that you built them on. This right here, folks, is the biggest Thing, the number one thing that I see gate kept in these wack ass Internet streets.
[00:11:43] So when you vibe code a web app, what's happening under the hood? Right. Is that files that, in this case, Claude. Claude is making files that contain HTML, CSS and JavaScript, the browser on your computer. So Chrome, Safari, pick your poison. Whatever. The browser will read those files. It reads what's on it, what's in them, and it will use the stuff that's in them, um, to the code that is on them. That's what the files contain. They contain code. It will use that to assemble the web app. Right. Remember, a web app is a tool with functionality that lives at a URL and you access it in a browser.
[00:12:27] So Chrome is reading these files and those files are on your computer. Yes, literally the files are in the computer.
[00:12:37] But what happens if you want to access this web app? You want to use this web app on your phone or on a laptop or on a tablet or on a different computer. Anything else in the computer that you built it on?
[00:12:49] Right. The issue here is that the browser, Chrome that is on, that you're using on that phone or that laptop or that other computer, it doesn't have access to the files. Right. Because the files are only on the computer that you used to build the web app. The solution here, deploying. So if you're like, I built this awesome dashboard, it will only, if it's local, you haven't deployed it, it will only exist. And you can only use it on the computer that you built that dashboard on. You can't go over to your laptop and be like, okay, now I'm going to use it over here. You cannot do that. You have to deploy it.
[00:13:31] Uh, deploying means taking the files, those files that Claude made for you that have HTML, CSS and JavaScript, those files make up your app and you're going to upload those to a remote server that is always on, it's always connected to the Internet.
[00:13:46] A URL will then be attached to that server so that anyone in this case probably is going to be you. You can type that URL. I think you typed that address into a browser, whatever browser you want, on whatever computer you want. And the browser can now access those files at any time. Right. What we're looking to do basically is put our files in something like Dropbox. Right.
[00:14:07] Uh, I'm old, so I like to use Dropbox, but something the equivalent of Dropbox, but for, uh, for these specific files for your web app. Right. And it's always on it's always available and Chrome can read them.
[00:14:22] That is what deploying it means. If you do not deploy your web app right, you don't put those files in a remote server, then you will only ever be able to use it on the computer where those files live.
[00:14:36] So I am not going to go through the how to deploy a web app, but I do want to share that the hosting platform that I use to deploy all my web apps, it's called Vercel V E R C E L.
[00:14:51] If you are looking to deploy your web app, which I suggest that you do, right, AKA you want to be able to use it from anywhere on any device, ask Claude how to deploy it with Vercel.
[00:15:03] There are other hosting platforms out there. I use Vercel because it was the first one I was introduced to. But also it integrates very easily with other things and other systems, other components and things that I personally use. Uh, all right, last thing I'm going to go over.
[00:15:21] Easiest one, a database, right? We all know what a database is. It is just a place to store stuff.
[00:15:27] So if you want or you need your web app to remember things across sessions, like you'll be able to save something, whether it's like information about a client or the last time you took a dose of medication, you will need a database attached to your web app.
[00:15:43] My preferred and recommended database provider is Supabase.
[00:15:49] Cool name, right? S U P A B A S E Supabase.
[00:15:54] I use it because it was the first one I have when all those courses that I took, that's what they used. And there's a reason that they all use it. It's just, it's one of the biggest players in the game, but it integrates very nicely with other things that I use to build my web apps. And for those of you that are thinking you might want to build something that other people use, it has built in authentication and authorization capabilities, translation. Each user can have their own private data, right? Keep their data separate and keep it private.
[00:16:22] I'm not going to go over how to set up Supabase or how to integrate it.
[00:16:26] Just like I didn't go over Vercel, I just want you to know about it, right? So if you are like, yeah, I need to use it, I want to use this. You just tell Claude that you want to use Supabase as the database for your web app and it will walk you through all of the parts. It'll walk you through everything. Right? Again, I just want to put Supabase on your radar so that you know, you use that. You even know you need a database in the first place. And also so that you don't have to go searching around and be like, well, which one should I use? Which database should I use? Right.
[00:16:56] All right, deep breath there. You have it right, though, that everything I just went through, that is what I consider essential or at least the most helpful when it comes to web development basics for revive coding. Right. Yes, this is slightly a bit more technical in the past episodes, but it wasn't that technical. And also, I believe in you.
[00:17:17] All right, real quick, before I wrap it up, our last things. Last, how I used AI this week. If you're new here, welcome. Um, each episode I share a quick example of how I used AI that week. So this week I used AI to Vibe code, a Blur privacy tool, Chrome extension. And it didn't work. Right, a little bit of a mouthful there. And it didn't. It didn't even work. Um, I should say it half worked. So just to start off with, a Chrome extension is a small program that runs inside of your Chrome browser and it adds a additional functionality to it. Very cool. Uh, you don't need cloud code to build this, to make this regular cloud works. So the reason that this came up was I was looking to do a screen recording for my custom of my custom dashboard that I use for my messaging clients, and I wanted to blur out their names and their sensitive info, like, you know, the phone number and their email, things like that.
[00:18:06] Uh, Blur extensions do exist already, but some of them, you have to pay for them and they don't work exactly how I wanted. And I'm also just always curious about what I can build myself. So I asked Claude and I was like, is this hard? Like, you know me, like, will it take that long? And I was like, no, this is like, it'll be super quick.
[00:18:22] And it was like, you don't even need to use Claude code. I can just make it for you. And I was like, great.
[00:18:27] So I told Cloud what I needed, it built the two files and it told me how to upload it to Chrome Dev tools and to launch it. It was like a super, super quick process, but it only half worked. And when I say it half worked, I mean that it worked fully and completely on my regular websites, but not on my dashboard. So on my dashboard, it would blur things out exactly what I want to blur out. It was perfect. But then once I navigated away from that particular screen to a different area of the dashboard and then navigated back, the blurs were Gone. So that was annoying. Um, and part of that is because of the specific framework that I used to build a dashboard. And I understand this because I took the time to learn about this stuff, and I was like, oh, I think this is part of the problem.
[00:19:11] Um, so if I wanted to spend more time troubleshooting, going back and forth, I probably could have figured it out with. With Claude. But it went back and forth a few times and it wasn't working. And I was like, this is not worth it. Um, so I went and I, uh, went and found. I just used another one. I did a little bit more searching in the Chrome, uh, Tools, a Chrome extension store, and I found a free one and it works totally fine.
[00:19:35] But, uh, I'm sharing this to introduce the Chrome extensions because they're pretty cool. And maybe I'll do another episode about that once I kind of get a little bit more into it. But it's a very cool thing that you can do on your own, and Cloud will walk you through it. Um, and also, I wanted to highlight the fact that not all builds go according to plan.
[00:19:56] Sometimes, you know, many times the thing that takes the longest when it comes to building is the troubleshooting component. Especially if you have, like, more technical functionality. If it seems to, like, look like something and basic functionality, that's fine. But if it's, like, integrates with other things, lots of moving parts, um, there can be more troubleshooting involved, and that oftentimes takes the longest. So, like I said, sometimes it's the longest, the longest part. And sometimes it'll just be so annoying that it will have you just completely walk away from the thing altogether.
[00:20:25] Um, very real, very real outcome. It's not always like, oh, I just made this thing that's so great. So I always want to keep it. Keep it 100 with y'. All. So that, my friends, that is all for today. Hopefully you found this episode helpful if you did consider leaving a little rating or review. We got 30, baby. Y' all are the best. We got 30 ratings. We got a bunch of reviews. I would love more just, uh, because they're really fun to read again, you know, podcasting is such a unidirectional medium. I'm just talking to this screen, so it's really great to hear from you and see, you know, that things are helping you. So see if the spirit moves you would love a rating or review.
[00:21:06] Do not forget that I have a companion newsletter and blog, the Curious Companion, and it drops every Thursday.
[00:21:18] And it's basically. And by basically, I mean exactly the podcast in text format. So this might be a good episode to check that out. Um, so you can refer back to it. So if you prefer to read or you want a written record of the things, join the newsletter fam. Check out the blog you can head to prompting curiosity.com forward slash newsletter or prompting curiosity.com blog and you can also. I know this is terrible. CTAs. I got a million CTAs. But you got options. You can head to either of those, or you can check out the links in the show Notes. As always, endlessly, endlessly. One more time. Endlessly appreciative for every single one of you. Until we chat again next Thursday, stay curious.
