Build an MVP from zero to $1 - Lesson 4

But we're talking about building today, which is important, maybe the most important thing.

Building.

What do I want to cover before I actually start building? Not a ton. I would rather build. A couple keywords though, you know, every time I try to like use red to kind of highlight a couple things, um, next Next week, we're going to be talking about selling. This is when we start telling the world about what we're building more broadly, like actual customers. The most important part about selling in my view is effort, proof of work, I guess is now the term. Crypto has taken that term, but proof of work is so important. Why? Because it's easy to write an email saying, "Hey, I built this. Would you use it?" It's much harder to actually build something, obviously, So that's a big part of why I think building is so important, why I do it before really selling anything, is because I love being able to say, "Hey, I built this." It just really shows proof of work. I'd say this roughly puts you, in terms of my inbox, roughly in the top 1%. No exaggeration. Roughly 1% of my inbox is people who have— People trying to sell me stuff, have proved that they've actually done something. Which makes sense. Cause if you ever read the book, there's kind of this often like 100, you know, 1,999, right. Or no, 1,990 thing. Right. Most people create, you know, a few people create, contribute, consume.

Right.

So when people build, you're kind of default, if you're, you're in the 1%. So your conversion rate should go through the roof. What are we talking about this time? Basically this idea that I've, I've used the phrasing over and over again, but basically the point of this sort of the 2 hours we have is to basically get from zero to one. When you start to sell, I think it's really important that it, one, it's almost self-serve where they can like, look, if there's a URL in the link that you can basically, they can go through the entire process and effectively give you money. That's why I think the prototype is important. Memo's important. All of this is stuff you can just send to people and they can just do it. I think that's really, really, really key. And so we're gonna spend a lot of, that's gonna be a focus, making sure we're not just building, well, and actually the opposite, we're gonna try to build less 'cause the goal is to get people to a dollar. So anything that we don't have to build that's later, we're not gonna build it. We're really gonna just focus on the customer journey from sort of zero to $1. If you get stuck, pro tip, and you will get stuck. I mean, building is kind of scary. It's really scary. When you get stuck and you will, like simple, simple mental model or mnemonic is big to small. So I don't know how you draw big to small, something like this. There's a couple images I found. There's this famous image people have probably seen. Who's seen this image, How to Draw an Owl? How to Draw an Owl. It's kind of funny because this is actually basically how you draw an owl. Like, it's not that different. Like, if you want to learn how to draw an owl, like, you actually do start like this. You basically start with the head and you start with the body, and then you draw in everything else. Like, it's not, it's not that different. So people make this joke, but this is how you learn to draw. Or if you want to draw like a house, you start with the biggest structure And then you shrink over time, right? So the same thing, if you ever get stuck building stuff, you basically just think big. And then, you know, like often what I do, it's kind of like, imagine if you're in like the Figma prototype, you're like, you know, I don't know, like settings, right? You don't actually have to do settings. You just have to have the link in the side that says settings. It's kind of like that where you want the overall stuff figured out, the header, the sidebar, the URL, the name, right? That's the biggest quote unquote. And then you can basically have these like voids where you maybe you don't actually figure it out. You just have like this big question mark and that's totally fine. So yeah, big to small, that will come up often. And then the goal here is really to just get to a point where, you know, you're, you're able to Google your way to an answer, right? Because ultimately, and you'll probably see me doing some Googling today. Basically, I mean, Googling is the job. Like that's really what we're all paid to do is just Google better than our peers. Right. And if you can do the big stuff, you can start to figure out, you know, you can like Google the answer and get the answer and then come back with the answer and put it here and then boom, you, you fix this issue. But if you don't actually have the body in which to put your solution into, I think it's just really hard to, to even know what to do. Like what, what next? How do I build this crazy big vision? Right. Like that Peloton for writers thing, which I also took a screenshot of here. You know, it just over— it's like, where do you even start with this? Right. Like, how do you— I just would have a hard time comprehending how do you actually even build something like this, even though I have built apps and I have built like things with a lot of functionality in them. It just, I do that over years. Right. So I start really small and then, you know, Gall— I think it's Gall's Law of System Design, which is like every complex system is a simple system that grows over time. No system is designed intelligently to be complicated. There are simple systems that grow over time. I have no idea how the world economy works. It seems to work. No one knows. It just works. Why? Because there was 2 humans exchanging seashells, and now there's 8 billion people. And we just— there was a problem, we fixed it, there's a problem, we fixed it. Now we have this crazy thing and no one really knows what's happened. Um, so kind of same thing happens with your app, um, you know, over time. Uh, so, so yeah, start small and, you know, tackle, tackle things over time. It's kind of the opposite of big to small, maybe small to big in that way. Um, and then ultimately when you— when I say build, I really just mean glue. It's like when you build, you're not assembling the bricks, right? You're buying these bricks. I don't know what a brick house looks like. And you're just doing this part, right? You're just doing the in-betweens. That's your job. This is kind of like open source, or this is like Figma components or libraries that you can find. Plugins. This is like, you know, something you copy pasted from Stack Overflow. And you know, this is like, you know, friend helped you out here, right? Everyone needs one of those. But really like the goal is to basically just have enough of an understanding of how things are put together that you can sort of know, okay, I need this kind of brick here and you kind of know where you can go get that brick. Right. And then the more, the more house building you do to extend the metaphor too far, like one brick over there might be like, hey, this is a human brick. Like you built all this, but you have a big hole here that fits me perfectly. Can I join? And then you can start to grow. Right. But the farther you, the kind of more progress you can make by yourself, the easier it's gonna help. It's gonna be to get those, to get help. From these other bricks. So yeah, that's basically it, I guess. Let me write GLUE so I don't forget it. But GLUE, Google, proof of work, zero to one, big to small, also small to big. Less is more is another way of saying that. Basically, really do almost nothing. And then we've said this a billion times, but be specific. This is kind of the same thing. But anytime you have an opportunity to be specific, and often specific just means like deleting stuff, right? Like if I wanted to be specific, I could change, I could delete this whole thing and just make it about glue, right? I've done nothing except add information or remove information by adding red and boom, I have a more specific lecture. I can make this whole thing about gluing and that would probably resonate more on Twitter. Like if I said, hey, I'm gonna, here's a thread on how to build stuff. No one, no one's really gonna care. But if I said, hey, here's this way on how to glue these, you know, bunch of no-code apps together, like people would be pretty compelled by that. So real life example.

Um, awesome.

Let's start building stuff. How do I unshare my screen? Let me unshare my screen and then I'm gonna start building stuff.

Stop sharing. Awesome.

Cool.

Let me share my screen. Awesome.

Well, what do we, what do we want to build? I actually haven't decided yet what, what we should be building. I thought it'd be fun to— I have all these domains. I thought it'd be fun to pick one, or we could build one of the things that we've been talking about, one of the student kind of examples. Julie, do you want to build Peloton for writers? Do you want to try? You want, do you think we can build Peloton for writers?

Me personally today, like in the next 30 minutes?

No.

No.

Lesson learned. Lesson learned. I'm coming back.

Okay. Well, I'm going to—

Let's see what your— Let's see what your—

What my domains are?

What your domains are.

I have this one, which is like, I don't know why I bought Sahil Yoga too, but this is my mom's name, was going to build her yoga studio. So we could do that basically from scratch. How would you— Let's say you want to launch a yoga studio. We could do that one. That'll be relatively easy. None of it will matter cuz we're gonna use the tools that we all use. We can do RoomLink, which is up here. Oh, it expired. I don't wanna pay for that. So it's gone. But I have roomlink.club and I have room.club, which might even work. So it might not be a good idea cuz I already built it.

Yeah. Thank you.

I can show people how I built this, but I have built this already. What's another one? NFT tattoo. Let's do— let's start with the yoga thing and we can, we can make it more elaborate, um, just because I have a base and it'll be a little bit easier. Um, so I, I've already told everybody, uh, that we're gonna start, you know, like start with the name, start with the domain. So that's kind of where we start here, which is you buy the .com, uh, or whatever name you have. I don't know, and then Google has added all these annoying things to your, to your thing. Um, So yeah, let's build stuff. Um, how do I build stuff? The first thing I would recommend is honestly go to Google, and this is kind of what I mentioned. I said that zero to one thing, like let's get people— people should be able to go from zero to $1. So the simplest thing to do, I believe, would be to basically just like make this redirect. Um, how do I make this redirect? Good question. Let's figure it out together. Oh, there's something here. I don't want this.

I want custom.

Why do I— I purposefully tried to do less research this time because I want to make sure that people understand how little I know when I figure this stuff out. People think I know a lot of stuff sometimes, and I want to make sure that people— oh, look, see, it's purple because I've Googled that before. I blame, uh, Google for having a terrible— a website, it's under website for some reason. Okay. So what you can do is you can set up forwarding. So this is the, the enviest of the envious piece, which is you basically, do I have my, I started making, oh, here's a business idea I had. Basically, I am a member of LA Fitness and I have a Tesla and I was like, I wanna build an app that allows you to basically type in Or I would actually just list ideal places to stay that would have both of these things. Anyway, let me go to my— oh yeah, here it is.

Sorry.

So here's a little thing that I built, but let, for now, let's make a new one and delete it. And so we can start out with a super simple one. So imagine this was the memo, right? Like imagine that we had a memo here. Why is this? Annoying me. That's really annoying today.

Why?

What? Moonshot, whatever, whatever it may be, right? Doesn't really matter. You have this URL, right? So you've been able, if you wanted to, you'd be able to share this with somebody and they'd be able to check it out. We've already covered all of this. So the simplest thing to do is to literally just do that with the URL, right? And so that's kind of how I start every single project. Is I just set this up to forward and now all of a sudden, oh, these are all gonna wipe.

Sure.

We'll do it from scratch again. Replace. I don't know what's happening. There you go. Boom. Now all like, in my view, like I'm basically done. Like in the sense that if someone wanted to, they could go to this URL. I could send it to someone. Oh, sometimes it takes time for the domain to propagate. So I'm not done actually, it's not done yet. This is why, you know, you want to do this stuff sooner rather than later is because this is like the one time bottleneck in which DNS has to propagate. Um, but in theory, if you went to shaminyoga.com, it would just redirect you to this place. And so in theory, if you had a you know, sign up for classes link here and you linked to, you know, let's say a Google Form or a Gumroad page or Stripe payment links, and we'll go through these as well, or Calendly, right? If you had that embedded in here, this is effectively a website, right? Like a website that you'd be linking to. Um, if I wanted to flesh it out and you could do all of this stuff in Notion. So this is something that I did. You know, you have these testimonials. You know, you can do these things where you drag and drop them to the left or the right. You can do bolding. You can basically make it look like a website. And this is kind of like almost like in between like what we're doing with the Figma stuff and what we're doing with the Notion memo stuff, right? So in this case, what I probably wanna do is like link this to Calendly. And what I often do to just remind myself that these will be links over time is I just underline them temporarily. In this case, I might underline the price tag. I'm not sure, but that just reminds me that this would work. And then I personally love using this website called Super. And Super is kind of like what we just did, which is we, in the sort of super basic case, we effectively took the Google domain and forwarded it, literally forwarded it, right? So the user would see the redirect happening, right? It would go from, uh, shaminyoga.com to, you know, notion.site/bull or whatever, right? Super basically does a couple things, but one thing that they do is they obfuscate that, right? And so if you go into my Super account, uh, might need to create a new one cuz I never know what my accounts are.

Does that work? Awesome.

Let's see if I have it set up. Oh yeah, I use it for SHL Capital, so that's an example, but I'll do it with a new one. Let's do Shamino Yoga again. Boom, I think that is the right URL.

Hit continue.

Boom. So they still haven't, I don't know how to hide this. They still, yeah. So now it's slightly better. I now have shaminyoga.super.site. It's better. Again, these are like small improvements, but there are improvements and the same flow will work. Oh yeah, this is how I, I hacked it last time. I was like, I'm Venmoing this as a way to get money. This counts. This totally counts as a way to— any way for that person, that person should be able to give you money. So now we can add the custom domain, shaminyoga.com. An error occurred, probably because it's linked to some old thing. Um, let's figure it out why. It's annoying that it doesn't tell me why. I mean, let's do Sahil Lavingia. The other one might be— all right, Super is not cooperative today. Why is this happening? Let's disable ad block.

Oh, weird.

Why is that?

I think Matt's right, uh, the setting up the DNS Yeah, yeah, it shouldn't, shouldn't matter yet, right?

Or does it, does it matter first?

You already said you already set it up, you already set it up to go to, uh, you already used it, right, to go to like a Google?

I should have wiped it. I should have wiped it when I—

what was, what was hosting that thing before?

It was before, but then I wiped it when I switched it to the, to these.

There's an A record right there.

Yeah, but these are the new ones. These are the Google ones.

I'm, I'm pretty sure for, uh, Super they use Vercel under the hood and they do, they do. Yeah.

Yeah.

So you've just gotta point to the Vercel servers.

Yeah. But they should tell me that here.

Yeah. Yeah. It's in their docs, but it should be there as well.

It used to tell me it's also on error occur. That's like a terrible, terrible thing. Uh, well, let, let me show you what I have on the other. Site. Let's see if the other site at least works. And this is what it should show. Well, does my other website work? It does work. Hmm, that's weird. I, my guess is that I had it set up for another demo and now there's like some weird conflicting thing. That works. Okay, let's try one more time and then yeah, we can go add the DNS one more time. It's not gonna work. All right, I'm still confused at why it shouldn't even know what the DNS is gonna be, but you're saying that basically you need to set the DNS, SuperDNS, SuperDNS.

Oh great.

Welcome to building stuff. I told you it's scary. Literally just Googling stuff all day long. Um, hmm. I don't know how much time I wanna spend on this without making progress. What to do, everybody? Julie, what do I do? Do I continue or do I give up? Why is everything broken?

Maybe I think if you just grab the DNS from, uh, Vercel, then that would work.

Yeah. What if I, I'll just take it from my other website cuz I have the other one already set up. Right. That should also work.

Yeah. You might need to look in Google Domains for that one.

Oh, it's not gonna show me anymore.

I, I would imagine not.

Oh, here it is. Uh, oh yeah. I mean, when I've done it, I've had to grab the A record. Somebody mentioned that.

All right, let's try this. Oh. Um, Anyway, no, I think it's good to show people this cuz this is kind of life when you try to set stuff up on the internet. Um, cool. So let's go back to this. So there's this one, a@, and then that a— oh, actually sometimes you have to just leave that blank, right?

Replace.

Boom. So now I have this new one and then I need the CNAME, which is www, and that goes there. So manage www cname, that—

nope, cname super.so.

Boom.

All right.

That at least fixes the DNS part of things. I'm still a little worried that it won't save properly, but let's see what happens when I go back. To my site, go to my settings, go to my domain, add a custom domain, go to Shamena Yoga. It might be maybe that I'm like on, on some— I'm not on the right plan or something like that. Two sites. I'm now paying for two sites.

Weird.

The DNS might be propagating.

No, I'm really— I'm pretty convinced that's not the issue. Uh, cuz there's no, all this is, all I'm doing is saving a, like something on their side. I'm not doing anything yet.

Yeah, true.

Like it, it should at least save this and then there should be an error over here. I think there's a bug. The fact that their DNS help center article doesn't even load.

Uh, when I, have you set this domain up on there before? It's probably, it could be that.

It could be. I mean, if I go to shaminyoga.com, what happens?

Nope.

I guess I maybe I removed it, went back anyway. Um, sorry everybody for that not working, but at least I have another website so I can show you what would've happened, right? Which is effectively not too much more than I would've clicked this, this would've shown up. It would've asked me with this to put in what I just entered this thing and I entered it. And then it normally takes like, It, I mean, depends. Sometimes it's super fast, sometimes it can take like an hour. So it might've taken a while anyway, but, and then the same thing that I would, you know, that happens when you go to shhl.capital, which is effectively, this is just a Notion page. If you go to shhl.capital, it just links to this one, right? And that means that if I make a change here, in theory, Super will cache it. So it won't update immediately, but pretty soon after it'll update. Sometimes I have to do this. Oh, they're too smart about caching. Well, in theory, this will update and it just makes it so much easier because if I wanted to deploy a website and we'll do that too, it's just a pain in the ass. It's just a huge pain in the ass to make a change on the internet. It's getting easier with Vercel and stuff, but it's so much easier in Notion to just go in here. I always have it here. Make some changes. And like when, when I talk about that 0 to 1 feedback loop, any, any opportunity for you to, to shrinken it, to make it super, super fast, you can get to the best possible, you know, memo, product, et cetera. You know, that stuff will pay, pay for itself. So anyway, cool. So that's, that's super as, as a glowing of a review as I can unfortunately give it right now. Last time I was able to do it in like a minute 40 all the way through, which is maybe why I broke it this time, but that's okay.

Let's stop for a second 'cause we have a few— Matt has a question and then I have a question.

Awesome.

Matt, wanna ask you a quick question about domains?

Yeah, sure. Yeah, it was just about when do you think about the social handles when you're buying the domain?

Do you like consider that beforehand or, or yeah, I mean, afterwards, honestly, most, it's, it's not meaningful enough for me to really care too much about. Um, if it's easy, I'll get them. Like if they're available, um, I'll definitely register them as users, uh, usernames. Um, if they're taken, then I have a broker and I just email them and say, hey, can you try to buy these for me? They're normally super affordable. And otherwise I just do like the name with an underscore at the end or something like that. You know, like I think it doesn't matter too much personally.

Yeah.

Especially nowadays, like those, they don't count, you know, the Twitter, the Twitter length doesn't really matter. And all the things that used to really matter, I think in that way just don't. And then Trisha has a question too, and then we'll go to Julius. One other reason to do it besides just purely the domain, which is nice, is that one, it allows you to have these new pages. So you can have not only, for example, if you can go to shl.capo for LPs, right? And it'll take you to the right page. So there's that. It kind of treats it more like a website. And then finally, and this is the thing I really wanted to show off, so hopefully it works. Is you can add themes and you could add colors and other things. And so you can do stuff like this, things that like make it, you know, if you're used to Notion, which by the way, 1% or less of the world even knows what Notion is. So it's not a huge deal. But you can do lots of stuff around here to kind of make, you know, you can add a navigation and you can add logos and styling and you can kind of make it more complicated. And more custom to you over time, right? Start with the black and white and then add stuff. You know, you could do all this kind of stuff later. You can remove this, et cetera, et cetera. You can add an image so you can do all sorts of stuff there. Oh yeah, custom fonts. We talked about this last time, but super easy way to like add a ton of personality, right? Like very, very quickly. So just like super, it's just a really easy way to just do some fast things. to add some, some, you know, some of your own voice, uh, some of your own voice to it. You can also even do global code. So if you know HTML or CSS, you can write your own, uh, CSS here. So if I wanted to say every single thing is going to have a 1 pixel red border, boom. Every now, every single element on the page has a 1 pixel red border, and I will actually go through and, and, and show people like some basic CSS if, if you wanna learn some. So yeah, you can do, you can do crazy stuff, right? Obviously you can go crazier and crazier with this if you want to, right? Like you can right align stuff, you can, you can make things fade out, you can do things on hover. Like CSS is like a very, very, very, very powerful language these days. So you can do a lot. You know, you could do animations, you could do all sorts of stuff to make it super, super custom. And if you go to super.so, you'll see some of the examples of what people have been able to do. Like, I think this is a pretty impressive one that Clubhouse, like this is their creator kind of section. And it, to me, like I can tell it's kind of Super because of this little thing that they always do and the hover states are kind of a giveaway for me personally. But like, to me, this is like pretty Clubhousey. You know, like this is certainly good enough. Um, and the, the speed of their team to be able to iterate on this instead of deploy to a website every time they wanna make a change, I guarantee you this is like 100 times better. Uh, so you could do all sorts of cool stuff, um, with, with Super. Um, if you, if you want to. Um, so yeah, it's pretty, it's pretty, it's pretty cool. Other questions have come up.

Let's see, Matt, the other Matt. Let's see. Oh, there, there are questions about tech stacks. There's questions. There are questions. Nikat, you want to ask your question about no-code software and tag on the tech stack question? Oh, sure. Hi. So yeah, like just the equivalent of, do you, or have you had experience and would you recommend any particular no-code tools? That could help build out logic? So if I'm building models in Rails, what the equivalent of that would be? Would you typically just use Rails because you're familiar with it? If you wanted to go mobile first, would you just— would you go about thinking about it in a certain way to explore options and make some choices?

Yeah, I think in terms of no-code, I would use a vertical-specific solution. So depending on what you're trying to build, Like in terms of if you wanted to build the most generic kind of the similar one-to-one in terms of like, you know, a schema kind of putting together a schema, I'd probably use Airtable. I think Airtable has kind of become the default for that. I can kind of show people what that looks like. But with Airtable, it's effectively like a database sort of concept. So you can kind of create, for example, I created this applicant tracker and you can, you know, this is kind of like the database, right? And you can have forms, you can put those forms into your website itself. It can be something as simple as you can share it and then just link it, or you can embed. And then the other powerful thing about Airtable is you can do, you can do, you know, these kinds of actions, right? And the most common one is probably, I mean, now you can do them all native. Everyone wants to own it. But you know, something like triggering an email. You could have a form. Every time someone fills out that form, that triggers an— that puts them into this effectively Google Sheet equivalent.

Right.

And then when things are updated, you can do sort of things like this. Right. So, for example, if you wanted to say—

are we supposed to see your screen right now?

Oh, yes. Do you not? Do other people see my screen?

Yeah, I can see it.

Yeah.

Oh, weird. Maybe you're like, look, like swipe left or right. Sometimes I'm looking at the wrong view. Um, but yeah, you can do, you can do stuff like every time, uh, you know, a, a, a thing, a, a, a row is, is updated, you can set, you know, um, like what I would do is basically check if the row was, I don't know, approved, for example, right? Let's say someone applied and said, I'm applying for a job at Gumroad and I think they're a good candidate. You could do something like if the conditions are met, you can check for if this is, if the specific condition is valid applicant's condition, Let's say I would do, you know, something like this, you know, right? Something like that. And then you could, you could say automatically send them an email, right? And so you could do this with any, anything basically. Like for example, what I would probably do if I wanted to no-code verification letters, which I built in Rails on Heroku. Um, is I would basically replace this with effectively an Airtable form. Uh, and then, you know, just shoot out an email, right? That basically just emails my mom in this case, like every, every time there's a form and there's not that much sort of custom logic here. Um, right. It's just like you fill out the form, you upload some documents. Um, and then there's a dashboard in which you're just updating database data. It's like really, really simple. So you could totally build this whole thing. In Airtable. And if you wanted to, I would just Google like Airtable Zapier. Um, and there's a bunch of these like tutorials, um, that will help you kind of do this, um, and set that up. So I would use, um, probably Airtable for the most generic. Um, if you wanted to build like a marketplace, Bubble is becoming, I think, the quick sort of default now. Um, bubble.io. Uh, and they do mostly marketplaces. You can do other stuff with it. Like they, everyone kind of promises everything you should really, I would always go to the showcase and find the close, like basically find someone who's solved almost your exact problem. Right. And then at least that will give you the confidence to be like, okay, this works. Right. You can actually use it for this. Cuz the, the one issue with no-code to be really careful of is that they say that they can solve your problem and they do for a while. And then you want to do something they can't do and then you're stuck with with them, right? Because you've invested in their platform and it's hard to leave. So I would just mess around going through these and you can kind of like, they have, you know, Bubble is often used for these kind of like local marketplaces, right? So, you know, if you wanted to do, this probably wouldn't work for me, but let's say, let's see what happens. But generally like an Airbnb-esque kind of UX/UI is kind of what these folks do. So you can like have, you know, conditions and, and these are all effectively just filtering similar to like, you know, Airtable. They're effectively just taking these inputs, right? And they're filtering, filtering the whatever results on them and then returning that in a view. Right. So it's not too complicated. Again, these are all like basically forms and lists. They're just collecting information and displaying information in, in various different, different ways. Yeah, any other questions?

More questions, Giannis.

Uh, I think I purposely kept this super light, so questions are really great.

Um, do you want to unmute and ask your question?

Yeah, so my question is about why not to start with, let's say, a WooCommerce lightweight theme instead of using Notion.

I mean, it's More obviously, the, the WooCommerce will provide more functionality, etc. That's why I'm asking.

Yeah, um, that's a good question. Um, you totally can, I think, use WordPress or WooCommerce or some of these other options. Um, the one downside potentially is you I, I guess it's not always true, but often with WordPress, like you need to get your own server and host it yourself. Um, though I do believe you can pay WordPress to do that for you. Um, I generally try to use tools that are free or close to free. Um, so that's normally my preference, um, is to just use the tools. And frankly, like these are just the tools that I kind of use. Like they're the ones in my doc, like I'm the most familiar with them. Um, so they're the ones that I kind of recommend the most. Um, I also, you know, going back to the glue thing, I find that if I'm using something, like if I've built stuff my own way, uh, it allows me to kind of like glue things better, a little bit better. Um, I find like when with WordPress, you're kind of locked into like WordPress, PHP, like their templates and plugins. Um, you're not exactly, but I find that I, I don't know, I just, it's a personal preference to be honest. I think WordPress is, is great. And that's actually how I started, like when I first started was building stuff on WordPress.

So yeah, your own way means you would just do Rails.

It was—

sorry, uh, when you say my, like, to build things your own way means you would just use Rails pretty much.

Most of the— yeah, Rails or Vercel now with Next.js. Like, mostly everything that I build, and I can show people if you, if you want to know kind of like the way that I approach stuff. Um, and there's some YouTube videos as well that I'll link, but I'll show you some examples of what I've built. So for example, verification letters, verification letters, it's private, but if anyone wants the source code, you can kind of see my approach. But I literally, I always, yeah, I generally use Rails and I, this stands for Checkpoint if you're curious. So this is like the initial Rails, you know, like if you just download Rails, you know, if you Google DHH, Create Rails, right? Like the videos that show up here. Um, or if you just go to like Rails tutorial, right? Um, and this is what I do. I basically, cuz it changes all the time. I like, I just go here and I just find, I just search like create or actually what is it? New, new blog. Yeah. Rails new blog. Right. So that's basically, I just, you just type this in once you download stuff. Um, and then that gives you the framework and let me delete all these tabs. Before I go crazy. And so this is that, right? This is just me spinning up a blank Rails repository. Uh, and then I just start committing to it, right? So I started, started adding stuff. Um, and then I just start from there. So this is like all the CSS that I added. Um, and then I just keep going.

Yeah.

So that, that's how I started. So, you know, for example, I took the, this comes with a welcome template., and then I just replaced it with my own code.

Right.

Um, and then over time, you know, added a new route, et cetera, et cetera, et cetera. So that's how I kind of start and go. Um, I do more recently have started doing more stuff with, uh, with, with, uh, Next.js. So an example of this would be a really, really simple example of this would be I built something called MetaZoom, which has a website and the website is very basic. I think actually, do I even, maybe I don't even use this as the website. Maybe I just put it all on here. Oh yeah, maybe I put it all in here. So this is the website for MetaZoom that I built. It's like an app that lets you share a pixelated version of your screen that no one uses, including myself. But it's kind of cool. Uh, and so this is similar in which I basically took like very similar idea. I just looked at, I like, it's called Vercel Next.js New App, you know? Um, and then I just went and I just followed their tutorials, you know, like I, I think I use this one. So for example, I can just take this one, create Git repository. I'm just gonna call this Next.js. Or actually let's do Shamini Yoga. This is definitely gonna mess around with the Vercel super settings is not pleased. Uh, so that's doing basically what I did with Rails, right? Which is the nice thing about this, it's just more modern. So they're kind of doing a lot more magic, but they're effectively doing what I did is they're taking the default repository, cloning it., and then spinning that up in terms of database.

Oh, sorry.

Well, I was just gonna, I hate to interrupt here, but I was just gonna ask quickly. Uh, so, so the, you were just showing like the whole, uh, Notion plus Super thing as just the quickest way to get poss— get started, right? Not like that was where you're gonna end up. I mean, I, how would you do a form on Notion, for example? Is it possible?

Um, so what I would do with a form, a couple options. One is I would either use Notion as like my homepage and then it would link to an Airtable form or a Google form. Like often, for example, uh, the Gumroad fundraisers that I do, I kind of do this way, which is if you go to fundraise, I have this doc that I share and I believe I use Cloudflare to map it to like raise.gumroad.com or something like that. So it's kind of a website. And then at the bottom, oh no, sorry. I linked the Google Form to that website. So at the bottom it just links to a Google Form, right? And then you just fill this out. So this is like the quick and dirty version. And this all shows up in a Google Sheet. And by the way, if you have everything in a Google Sheet, if you're, if to Matt's question, Matt Phillips' question, You can, like, database provider, I often just use, uh, like, uh, Heroku's built-in, uh, database. If I use, uh, Heroku, if I use Vercel and Next.js, I would use something like Supabase, S-U-P-A base, um, as the backend, uh, or like Prisma or something like that. Um, but every, if, if everything is in Google Sheets, then there's like tons of different options. Like there's this website called Sheet to Site, um, which basically takes your Google Sheet and turns it into a website. So there are a lot of these kind of like MVP examples, right? Where you have, uh, what's a good example? Like jobs boards, uh, lists of things like Nomad List, even AngelList, I think would, you know, could have used something like this in the beginning. So this effectively takes, it's pretty crazy, but this is effectively a Google Sheet and this whole thing and all, even the apps, I believe, uh, are all done via, um, Sheet to Site. It basically takes a Google Sheet and turns it into a whole website, which is pretty crazy. Even, even all these headers and sections and everything like that.

So you were going down the no-code path essentially before we start going off into the more coding.

But yeah, normally if I were to go, like, I would start with Super Notion, build that out, link to something like a Google Form. And then over time, kind of replace— I would probably replace the Google Form either with something custom that I'd built or, uh, with Airtable. And then with Airtable, the front end is still Airtable, right? So people are still going into, you know, the Airtable form and filling that out, but then the backend is going to be Airtable. And then eventually you could replace the frontend with something else, and then only the backend is Airtable, which no one ever sees. So you could like live with your database effectively hosted on Airtable forever. If you wanted to. That's kind of how I would do it because I know how to code. I kind of skip some of those steps. Um, but that would be my approach.

Yeah. Um, yeah. Cool.

Um, awesome. Where, what was I doing before? Oh yeah, I was doing this. Okay, cool. So I have deployed a, a thing to Vercel. So if you go here, shaminyoga.vercel.app, if I wanted to dare, I would try adding Shamini Yoga to this and it would probably revolt. And, uh, yeah, it's not available cuz it's probably Super has it now and they think they have it. Let me, let me, let me try to fix this. Um, and we can talk about HTML CSS cuz that's important. Let's remove the domain. Oh, it didn't even add it. So who knows, who knows what the hell happened here? I, I bet it's on some other account and it's just Creating all sorts of problems. Anyways, if I had it, it would set up here. So now you have this, right? And anyone can do this. Like I didn't have to write any code to have this, right? Um, this is just like the basic default Next.js, uh, example. So let's pull it, let's get it locally and let's make some changes to it so we can actually make it do what we want it to do. View GitHub repository. It's added it, created this shamini_yoga thing. It did all, all that stuff that I would've done with Rails manually. It did all that stuff for me, uh, which is pretty awesome. So let's, let's get it local. So I hit this code button and you're, you're right, Matt. Now that it's, it's, it's, there's so much magic here. Let me show you an example of the magic first, actually. So if I go to pages and go to index, which is the index page, I can just go in here with GitHub and edit it and say, you know, Shamena Yoga, for example, is the title, right? And I don't want people to know that it was generated by this awesome yoga studio, right? And I can just commit that change and you'll see this yellow dot, which basically means Vercel is verifying those changes are valid, and then they're, it's gonna deploy it. And so very quickly in around a minute and a half, if you go to this page, this Create Next App right here, uh, will update to Shamini Yoga, which is like pretty, pretty, pretty awesome. Yep. Boom. There you go.

Shamini Yoga.

Um, so let me clone it. I know some people, if you're not, uh, if you don't code a lot, uh, you might be like, oh no, I don't wanna do this. This is not, What I signed up for, but just, it's okay. Um, this is important. Uh, I think, I think everyone should know a little bit of HTML, a little bit of CSS, because once you know those things, you can basically do anything on the internet. Um, and a little bit of JavaScript too. So let's use an example. Uh, okay. So let me open this.

I mean, and to your original point, from someone who doesn't know how to code, it is Googleable.

It really is.

I mean, it really is.

It's— yeah, it's— it's— I mean, that's how we all learn, is just Googling.

I have messed around a lot with Super and Notion and adding little bits of CSS here and there.

Yeah, it's—

it's fun by Googling.

Okay, so let's take this. So the way you do that, you just go to code again. Look, this is a good example of like, what's the one big button that they want everyone to click, right? This one. Clone, hit that. Basically this is just the URL that maps to this. And then I need to type— actually, I also have the GitHub CLI installed, but I assume most people don't. So let's just do git clone. And boom, you might have to install Git again, all Googleable. Once that's done, use cd, which is change directory, cd into it, shaminyoga. And then according to this, I just have to run the development server. So npm, which stands for Node Package Manager. Oh, I don't have an— oh, I don't have Next installed. Um, what happens when a bug like this happens? I have no idea. What I do is I just copy And I just paste into Google and I just look at the answer and see what it tells me to do. And it probably just tells me to install, uh, Next.js.

You just need to do an npm install.

Don't tell me, I have Google. Don't worry, I got Google. npm i, which I assume stands for install. I'm surprised I didn't have it already.

Yeah, you just needed to do an npm install without Next because there'll be a package.json and it'll pull everything down in one go.

Oh, if I had done this, then I would probably already have been there.

No, no, you don't need to do that because you cloned the repo. It's like all made for you, isn't it?

Oh, I see. OK, let's try it again and see what happens. Oh, it worked. Always surprising. So now, now I should have in theory, the same thing running locally, right? So if I just go, yep, boom. So this is, if you notice the URL over here, this is like, anyone can see this. If you, if I send this to you and this one, no one can see except for me, right? This is local, localhost is my computer. It's running on my computer. Um, and then I will open this in VS Code. And boom, you have everything. I closed the thing, so it's gonna stop working. Yeah. Oops. I always do that.

Open this again. Awesome.

And it's really simple. You can ignore most of these, uh, but you can see, I mean, these are all, this is it. Like this, these are all the files. There's like 8 of them or something. So very manageable. Um, this is index. So, and, and this is, there's a tutorial on Next, which you can get into, but effectively the pages that are important, uh, is index.js, which is what this one that you're looking at now, or let me run it.

Yeah.

This one that you're looking at now. Right. And you'll notice you can kind of see welcome to Next.js. And if you don't know, If you're like, where is the page? Often what I do, I still do this today, is I just copy some text on the page. Welcome to, and then I just do a find in the repo and I find it. Okay, cool.

It's here.

Welcome to Next.js. Yep. Found it. Right. And if I change it to Shamena Yoga, boom. And if I save this code. Update name. This command is just a shortcut that I use, but I'll type it out. git commit -a is basically all the files. -m is the message. So basically, I'm just putting a message here, which is like update name. And then what I do is I just string the commands together. So this, I could do this as a separate command, but effectively, I do git push origin head, which is effectively just saying, push my changes to GitHub, right? Which is where they are. So if you went back to GitHub, you'll see that there's all these commits starting to show up. You'll see that I changed these, um, or I did that inline, but you'll see that 21 seconds ago I deploy, I pushed these changes, right? Um, this came because I did that npm install. And you can see that I made this change and you can see this, which I already made. But then also if I refresh this, in theory, not yet because it hasn't been a minute, this will show up and change too. So boom, now you have a website that's kind of like Super X, you know, it's your own name, except it's even more customizable. Unfortunately, the downside of doing it with code is that you don't get any of the nice Notion stuff, right? You're starting from scratch. So if we go to this page and let's say we wanted to take all of this as much as possible, you know, this is me just doing Apple A. If I just pasted this in here, it would kind of break, right? Like it would probably just be a bunch of text, but let's do it and then we'll go through some CSS. Uh, CSS is one of my favorite things ever. So let's just delete everything so that now It's just this. And now, by the way, if you're ever scared, just hit save and just go back here. Okay, cool. Yeah, that looks like everything got deleted except the one line of text. And I'm gonna make this say Shamini Yoga just to mimic what I have here, right? Boom. Shamini Yoga.

Awesome.

Let me just paste in all my Notion. You can see where I started with the Shamini Yoga, so I can delete that cuz that's already right above it. And let's hit save and go back.

Awesome. Basically done.

Uh, basically done. If I wanted to make something a link, how do I do that? I just have to hit a, which is an anchor tag, ref. Who knows what that stands for? Something reference, probably.

Hyperlink reference.

Hyperlink reference seems reasonable. Oh wow. I have a super comp— I have AI installed on my computer, so it tells me what to do. Apparently there's an Instagram handle called Shamini Yoga, so let's go with that one. Now if I refresh, Oh, it is a link. You can tell, but it doesn't look like a link. This is again, the downside, right? Is it's just text. So there's no visual real stuff happening. The reason that this is even lit up at all is because in the home.module.css class, which is being imported, if you go there, you know, there's an H1 somewhere that's doing that, or this title, that title A is probably doing that right here. Right? So if I deleted this, for example, saved, boom, it would stop doing most of that. And I personally don't like their defaults, so I'm gonna delete them all. I'm just gonna delete this and I'm gonna delete this. And we don't need this image thing either. And that's gonna make me remove all these things. These don't exist.

Bye-bye. This work.

Boom. Awesome. So it's starting to work. It's starting to have some look and feel like this. Um, and why did I delete that? I just think it's, there's just like, they're, they're too magical. They're trying to be too clever. I just use the global.css file, which is plenty good for me. And let's start writing some HTML and CSS.

We have, we have one question and then I have a question, just, you know, sort of looking at what you've just done for the no-coders among us who could learn this, but who could throw up a Notion plus Superpage in less than an hour. Yes. Tell me, tell me why.

Um, well, the reason is you can do all— one, confidence. You'll have confidence that you can, right? Um, but for example, like I built web3.xyz this month and there's stuff that you just cannot do in Notion, right? Uh, so for example, that image is new.

That purple image is new.

Oh, looks good. Yeah, it's a, it's a chest.

Um, looks good.

You know, for one, Notion doesn't do anything related to crypto, right? So if I wanted to do auth with MetaMask or anything, wouldn't work. Work, but I have this like glowing, this pulsing animation on the button. Yeah, just like custom logic like this or this share button. When you click it, it allows you to tweet. Just stuff like that doesn't exist if you wanted to do it via a no-code app. So even though I love no-code, I love code more because it allows for me to do custom stuff, like stuff like this. I log in with MetaMask, boom, like all this stuff refreshed automatically.

Like, to me, this is an example, I guess, of sort of what you were saying about my own work, which is to— like, I would always start with the other first and then build this behind the scenes so I didn't slow myself down. But that's because it would probably take me double or triple the amount of time.

Like, this started— this web3.xyz started exactly the same way that I just started Shamini Yoga, right? So like all I did was I slowly just added more functionality to feb3 until it does all of these things, right? But the initial commit was identical. And that's why I think it's important to go through some of this stuff, 'cause I do, I really think it's not that crazy. You definitely feel like you're losing your mind, but you'll be able to do it. Pretty easily. So for example, like it might be scary to be like, oh, I need to learn all the code to make something like this. Right. But it's just really not, I mean, it's, there's just not that much happening. And let me like go through some of it. So there's this main thing, and if you're ever confused, you can always open it up and see what's happening in the code itself. But you have this main and the way you reference it, right, is you just type main. Again, AI code.

Boom.

Now you have something centered, right? All I did was I said main max-width is 1,000 pixels and margin is 0 auto, which means top and bottom is 0 and left and right is auto. So this is shorthand for this, right?

So cool.

Now you have this H1. Again, this is— and by the way, everyone has access to this. Just Copilot GitHub free thing. So, you know, H1 is just referencing this.

Boom.

H2 is not referencing that because none of this is named. So what I should do is actually make this semantic HTML. There's probably a way to like, you know, actually let me, let me do that. Let's see if there is a, I bet you there's a plugin that will do markdown, markdown, or a website markdown to HTML. Let's see what happens. Oh yeah. Perfect.

Amazing.

So in theory, I can take markdown. I don't know if the problem is, I don't know if this is actually markdown. Is this not actually markdown? Yeah. The problem is Notion probably might not be using actual markdown. Um, let me try another example. Otherwise we can just do it, uh, manually. It's not that bad. I have to download something. Oh, that's annoying. I'll just do it manually. There's not much to do. Uh, well, two things means H2. H2 basically just means not header one. It's the second heading, right? Imagine you're just writing a document. This is kind of a document. Uh, Notion, when I pasted in, automatically converted these. So that's cool. These bolds, these just signify bold. So I just replace these with strong. By the way, this is what Notion is doing. Like Notion is just taking that and converting it into code in this way, almost identically in this, in this way using React components. Yeah.

You can open dev tools in, in Notion as well. I mean, to see what the code looks like.

Oh, really?

Yeah.

That's pretty funny. Yeah. So, you know, and I'm like, Figma's the same, like these are like, This is how everything is built, you know, just stuff like this. Uh, so that, and now if I refresh, you'll see that this stuff is starting to do things. You know, this is a list. How does a list work? Well, it's an unordered list and each one has an, is a, is a list item. So I just put these in here. And you're right. Like you could totally use a no-code thing for this and, you know, I would, but like, it'll take me less than, you know, take me 10, 15, 20 minutes to effectively do all of it in code, like worth it. You know, in my, in my opinion, it's, it makes sense to invest that. I mean, it, you know, it's just an hour or 2 hours for like unlimited customizability after the fact. It's generally worth it. So I just go through here. Oh, this is em, which is emphasis. And I just go back here. You know, it's starting to— it's starting to take shape. It's starting to take shape. Strong again. One thing I've missed is the paragraph tag, so I'll add those too. By the way, even in watching me, like, I feel like this class I've had like 2 or 3 startup ideas on how to— that could exist to make my life easier. This I'll change to an HR, which is a horizontal rule. And then that looks like the major stuff. So now I'll add the paragraph tags.

E, e, e, e.

Just so we don't lose it, there are two questions, one from Manish about Simon, both about payments.

Awesome.

Yeah, so maybe both of you can unmute and ask your questions and then we can sort of, we can talk about payment gateways and that process. Anish, you want to go first and then Simon?

Yeah, sure. My question was about the verification letters. So when the person— user fills out the form and they click submit, if you want to send them the product first, presumably you want to make sure that they made the payment. So wouldn't that clicking the button trigger sending the product before the payment was verified? Is— so is there a way to do them, uh, to send out the email conditional on receiving payment? You could do that for sure. Yeah. So what you could do is if you just went back to Airtable, you could create a new column here. Um, so let's do that. Let's see. I don't use Airtable much, but let's see if I can. Use— if I can do an example, just, yeah, I'm not a huge Airtable fan. Oh, here it is. Cool.

Awesome. Something like that.

Right. And then what you can do is you can make this a Boolean or checkbox in this case. And then what you can do is you can just basically just check for the checkbox being checked for it to send that email, right? So it only sends if this is checked. So that's one way to do it is you just have to make sure that like these are checked. So it'll basically— what you could do is you could say when, when a new row is added, which is them applying or whatnot, right? Send them an email saying, hey, you've been added. You know, click here to pay. Uh, you'll get another email upon successful payment. Um, and then you would, would get an email, you know, they would pay and then you would manually go in here and you would just go in here and hit has paid.

Right.

Um, there are even ways if you wanted to get super clever where you could effectively, let's say you're using Stripe or Gumroad or something like that. You could say, hey, when someone of this email, or you could say anytime someone pays, Check their email, and then if their email matches any of these emails, mark them as paid automatically and shoot them another thing. So you can like get crazy in terms of how, how connected you wanna make these pieces, but that's kind of how I would do it. And so for example, I'm gonna move my scout program to Airtable and then I'll be way better positioned to talk about it. But basically what I'm gonna plan to do is have like a kind of an approved column. Right. Where, um, and then boom, that, and then I just have to manually approve them. And every time I hit approve, they just get an email, uh, saying, hey, thanks for applying, you're in, or, or whatnot. Right. Um, you could also, I think, do a state instead if you wanted to be more clever and you could have multiple states. So you could, some people, what they do is they do, uh, what I've seen people do is they get kind of clever. And you can, you can even do stuff like number, right? And you could, you could say you could have state changed. So you could have like 1, 0, 1, 2, and you could just have an internal idea of what that means. Right. So for example, like this would be like state. So 0 might mean they just applied. 1 is that you've, you know, one person has approved it, but one person needs to approve it. The second person approves it. And then the, you know, The final person says, you know, sends out the email and the way you would change this is you just go in and change it to 1. And then same thing, the Zapier automation would just fire off, right? When that changes to 1. So if you wanted to avoid the manual method, you're saying that we would have to connect with the API, like the Stripe API in some way to get some kind of signal back that they paid. Exactly. Exactly. So let me see if there's an easy example of this. Like something like this, right, is an example. Not exactly this, but if you went like, let's say Stripe Airtable, see if they have a— no, they don't have an example of that. But like, yeah, this is an— this is basically an example of it, right? Which is you're, you're— every time there's a new charge, create a new contact or update an existing contact. Right. And this is effectively doing that. So yeah, you would— I would use something like this personally, or I would just do it manually. You know, a lot of people in the beginning, I would just probably do it completely manually. Like I would just have a Google Sheet and, you know, like the Google Forms might update them and then everything else is me manually doing it. That can work too.

Okay.

Thank you. But yeah, one of those. Awesome. Let's go back to my website and see how much progress we can make. Pretty close. I mean, we're getting there, you know, and I, I mean, there's not much that we've done. Like this is it. It's all fits on one page. I'm gonna add a margin top 20 pixels to every single— star is basically everything. This is one layer down. So anything that's nested within main, add a margin top. I'm also gonna add padding to the main. So there's some padding at the top. I wanna add some margin top to this header cuz it's kind of too close for me.

So boom, I have that.

Getting pretty close. What, what's missing? I guess we don't have the double columns. And we don't have the backgrounds, so we can do that. So the, there, there are sides. So let's make the background. Let's not do that. Uh, let's do F3, F3, F3, something like that. Also wanna do padding on these 20 pixels. That looks pretty close to what they do here. And now the hard part is you need to make them a grid. So I need to create a divider and put them inside of this, or div. Does that probably stand for divider?

Yeah.

And now I need to make it a grid. So custom styling, display By the way, I have no idea what I'm doing anymore, so I don't, don't know if this is gonna work. This is invented. Something happened. There's spacing is gone now. Oh yeah, it's cuz I moved it. So now that margin isn't automatically happening cuz they're no longer direct parents of this.

Julie, what's up?

Yeah, I had a question. Is there any like template code that you've ever used to just paste this? Cuz it seems like a common format.

Of, uh, like H1, H2, H3s with like, they're already bolded.

Maybe there's like a line splitting.

There probably is, to be honest. I just don't use any of them. Uh, yeah, my, my opinions are too specific to me that like everyone has their own opinions and I don't like theirs. Um, but yeah, there's a, there's a lot. I mean, you can do it like Foundation CSS has one. Bootstrap is, you know, the super famous one. The problem is they're just, they just do so much, you know, that I'm just like, I don't need, I don't need all of this crazy stuff that they do. Um, but there's, there's a lot. Um, super simple CSS framework, you know, there's like all of these examples. Uh, like this one is pretty popular, simple.scss. Um, you know, which has basic typography and links in it. So, you know, for example, I could basically take it and see what happens, right? Getting started to download the source files. Let's see what happens if I just paste all of this stuff in. Easy way to test is just go to the bottom and paste at the bottom and see what happens. And if we like it, maybe it's good enough.

Oh wow.

It looks good. I just delete all my code. Yeah. So you, you could totally use something like that. Oh yeah, let me, let me do the grid thing quickly as well. Where is this tag coming from? August tag somewhere.

Oh, here.

The other nice thing, by the way, I didn't mention this about YCode as well, is you have version control.

Right.

What's really nice about this is let's say I like these changes, but I have a friend, like I have a coworker that I want to make sure that they review my changes, right? You can't do that with Notion. You can't do that with any really any of the no-code stuff. But what you could do here is you could create a new branch. So GCO is Git checkout branch and create a new branch. Let's call this like update. Do what I did before. And boom, now I have this update. And if I go back to GitHub and go to my shaminyoga repo, which will be— you'll see this. I can open up a pull request, which has all of these changes that I've made nicely viewed. Nicely represented. And I can add more context here and it's— Vercel is deploying this, so in a second it'll be deployed. And then the cool thing is I can actually send people my preview URL. So right now I can send people this, but if I wanted to, I could send people the preview URL. Oh, the preview URL failed. Why did it fail? Let's see. It failed because, oh yeah, it failed because I'm fancy and I used these marks and you're technically supposed to replace them in HTML with better marks. So I think I got them all.

Yep.

Cool. So let me just push a fix and we'll wait for it to do it again. Okay, while it does that, I'm gonna Google my way to an answer of flexbox two-column grid. Okay, cool. This is the example. Always make sure that the example actually does what I want to do first., and then I can add this, which basically means this is what I need. Display flex, flex-direction column. This doesn't really matter what it says. What it matters is that I can copy paste it in here. So let's do that. And ooh, flex, not grid. Cool. Display flex. And I have to change these. To match just this, how you write code in here. Basically, it's the same thing. All I'm doing is changing the display of it. This is column, and let's make this text, right? And now let's see what happens. Oh, didn't work. But this worked. Awesome. Cool. So now I have this new thing and I can even send it to people. I can send it to people in this chat and it works. It does all the things. And if I like it, I can merge it. And now boom, all of this stuff is set, um, in, in master and it'll automatically get, make its way to the main, uh, main repository as well. Matt says I need flex row. Not flex-column. Oh, is that the— is that the wrong one?

Oh, boom, that was easy.

And if I wanted flex-gap, or is it just gap?

Yeah, cool.

So all of a sudden I want a gap.

Boom, awesome.

And I'll do the same thing here because we had You wanted these to also be in a, in a thing, so that goes in a div. So you have a div and then within that you have two divs, one for each column. You just have to make sure that the tags are closed properly. And if I go back here, boom, you've started to have stuff happen. This and this are kind of misaligned for some reason. So a way to fix that— oh wait, yes, a way— oh, let me add something here. Would be to add flex-1 to each of these. I think we should do it. Style equals to do flex-1 and boom. Now you have them. And now, I mean, you can kind of see they're pretty close, right? I mean, they even have the emojis. If I wanted to do an emoji at the top, I could easily do that too. I could just take this emoji that I have here, put it at the very top, wrap it in a, I don't know, a div style, do like font size 100 pixels or something like this, and then see what happens when I put this inside.

Boom.

So you can kind of see that if you just keep messing around, you'll get— pretty close to something that you really, really like. And then when, you know, some— you wanna do something like you can't really do in Notion. Like for example, let's say you wanna add a class to this and call this like pay button or something like that, right? Pay-button. And then at the bottom I just do pay-button and I wanna make it, you know, 20 pixels of padding. I wanna make it display block. I wanna make a background blue. I wanna make the text color white. I wanna make the font weight bold. I wanna make the font size 20 pixels. I wanna center the text. I wanna make it so that when you hover over it, becomes red. I want to make it when you click, becomes green.

Right?

Something like this. And maybe there's some inset shadow or something like that.

Right?

And these are all just shorthand, right? Like, this is just memorization, right? Just like learning a language. Like, I just know all the keywords at this point., and boom, you have this thing and it does all these things that I told it to do. Let's make it rounded cuz we'd like rounded things, border-radius 10 pixels.

Boom.

Right? Um, so like you could totally do this with Super. You could totally do this, uh, you know, with something else, but I just find like not that much work, frankly, with Super being pain in the ass, this might have even been faster. And you can do all sorts of custom stuff, right, as you want now. And everybody, you know, should be able to do something like this. The other nice thing is you can do things like pages. Like, for example, if you wanted to, it's a lot easier also, by the way, this is your, this is 100% you. So if you wanted to do something like embed a form, you could do that right in line, right? So let's say I wanted to add another horizontal rule, and I wanted to add a form, and that form has inputs, you know, phone number, something like this. And again, you probably want another button Submit application, right? Something like this.

Boom.

You have a form. There you go. So it just makes it so much easier to do custom stuff. I think if you want it to do inline things, this form wouldn't save anywhere, but you can hook that stuff up pretty, pretty darn easily as you, as you go. Or you could just take this and embed, like if you wanted to embed a Figma prototype, Or a Tally form, right? So there's, there's a website someone asked, like, how would you embed a form? You could use something like Tally or Typeform and embed that right in line, right? So I use Typeform. So let me open that up and show what that might look like. And again, this is like the glue, right? Like you can totally still use as much no-code as you want, but you get to do it on your playground. It's in your control. You are not doing it everything in their control, if that makes sense. So let me log in and show what embedding might look like.

When you finish embedding the form, can we talk about analytics? There are two questions about analytics.

Yes. Here. So here's a Flexile form. It's a waiting list. Oh yeah, here's a good example of, I own flexile.com. It is, I think, a Next.js app. It is a 100% full screen, like 100% width, 100% height iframe that, or it just embeds, uh, that embeds the, uh, Typeform. So technically this is a coded website. It's just the entire body is just the Typeform that I just put in here. Why did I do that instead of just linking to a Typeform? Literally just so I could have the domain. And over time, I will add more to this until it does more and more stuff. And so, you know, this form will be inline in our own code at some point, right? But I believe there's like an embed link in here that isn't as grotesque as the full page one that I did. So you can do something like, you know, here, this seems reasonable, like present as part of Oh, let's do a slider cuz I kind of like, I've never used this before. What happens? I'm not even gonna read their documentation. I'm just gonna take it and I'm just gonna hit paste in my website, see what happened. And then we, yes, we'll talk about analytics. Um, good chance that everything implodes. That's, that happens. Oh yeah, it's Next.js. So I might, it might have a pain in the ass. Um, No, it should be fine. What's— why doesn't it like what I did?

Oh, HTML attributes or—

oh yeah, it probably doesn't like these things. Can I, can I just do this? I don't need to style the button. I don't know why it wants me to style the button so aggressively. Let's just remove the styling and see if that fixes it. Let's see what happens. Is it gonna work? There's like an 80% chance it's not gonna work.

I'm done.

Oh wow. It actually worked. Crazy. It worked. I mean, so now you have like an app that's like your app, but you can add no-code to it really easily. I mean, that's pretty cool, I think. So yeah, that's kind of why I would do it this way and you can do analytics. So let's talk briefly about that. So what I personally do is Google Analytics, which is what I would recommend. So go to Google Analytics. Uh, I believe I have an account here too. Uh, let's see if we can set this up. So let's create— I don't even know what is this for. Gumroad's community website, I guess. Um, so that's my own personal stuff. How do I create a new account? This is like the real challenge, by the way. It's not even building stuff. It's just like figuring out how to use software that already exists. Admin, probably, right? All right. Admin.

This.

Create a property.

Samina Yoga.

Small.

Sure. Web. Samina.

Actually, let me just make sure it's gonna work. So I'll use this for now, but ideally you would use that. Samina Yoga. Great stream. Don't know why they call them streams now. How do I measure it? I have to add a thing. Okay. I can add this, that in, into the head section of your HTML. So the head is this thing, right? Capital H head. So I'm just gonna put this in here. I'd be surprised if this works because this looks like it's causing some issues, but let's see what happens. Yeah, see, that's not going to work. Did you mean this?

Why is this not working?

With Next.js, you have to do an unsafe set on the HTML. Just Google— Google Analytics Next.js. It'll come up.

Oh, I see.

Like this.

Yeah.

Ah, funny, funny. Do you have to do that here too? A script async. Oh no, they already do the async. So yeah, just this script and then Actually, what I'll do is I'll just copy this and then I'll change— actually, yeah, because then, uh, and this is going to be this tag probably. Next, what is this? Tracking ID. Yeah, which is probably that. Actually, it might not be.

Oh yeah, it is.

Okay, cool. Yeah, so tracking ID is just going to be this, which I guess you could do it there, but I'm just going to do it manually in here. And then in theory, I'm done. So if I just hit close off this and then go back to my reports It might require a deploy, but if I go into my code and open it up, it should show it— should show something happening. Yep, there's that code here. And in theory, if I go to the real-time section, it should show— oh, a human!

Me!

Portland! Hey, if other— actually, no, people can't visit this, uh, but let's, let's add this and merge it, and then people can visit, and we can just see where everybody else is. And then I need to— I'm creating a new pull request, new pull request update, so that adds the Google Analytics. There is, by the way, built-in Vercel Analytics. Uh, which we can set up too. So if we went there, you can turn on— I don't use them ever, but you can turn them on and, uh, oh, I can only have it on one, so I'll disable it on this one and then enable on this one. And then you get some default built-in, so for free, like didn't even have to Put any code at all. Um, oh, this failed probably for some reason similar to what it failed for last time. Asynchronous scripts are forbidden. Again, we just Google this, see what the answer is. And the answer is probably don't use async. What? Oh, it's a strict configuration. Oh, weird. You can do a script like that.

Really?

Who knows? I don't even know if that's gonna work, but we'll see. And then this'll tell us, and then if that does work, then we can deploy it and everyone should be able to visit and we should be able to see what happens. Let me assume it's gonna work and merge it anyway. But yeah, in terms of payments, I mean, I think, you know, what, what you could do is you could use Stripe payment links. Just like I embedded Airtable, you could go into Stripe and you can go create a payment link. You can use Calendly, you can use Gumroad. There's so many tools that now exist. Um, but the way to create a payment link is to create it, add a product. This has kind of become the new default, I think. Um, add a product, and then they will basically give you a link. So let me just do that real quickly. Shamena Yoga 5 Class Pack or something. Let's say it's $150 and save the product. And then effectively I'll get a payment link right here, and then boom, you have a payment link. You can even— I think they started to They're gonna add more and more functionality here so you can add more and more stuff. But effectively you just take this link and you'll be able to add it to your— oh, I can split. Oh, that's cool. I didn't know that's a new feature, but I can just take this. No, I don't wanna split it, please. And then boom, I just take this link and just like I embedded the other link, I can, I can put that right in line, right? So just right here.

You know, right?

And just change this.

Boom.

Right? Or I would link these, right? Um, and then when they visit it, they'd be taken to this page that people are probably already familiar with. They can check out. And then again, you can do all the, all this stuff. You could either hook up to the Stripe API yourself with code. You could use Zapier to do all sorts of crazy stuff. Yeah, you can do You can do anything you want really at this point. This, this part is actually like pretty easy. I think the hard part is not like this, the nitty-gritty small stuff. It's the big stuff. It's just like wrapping your head around how do you get a website with a domain? You know, how do you own that? And that's kind of what I wanted to spend most of the time today focused on. So let's see if Shamena Yoga. Shaminyoga.vercel.app if these count. Anyone want to visit this URL and see if it will work? Matt Phillips asks, do you need a cookie banner? Fuck cookie banners. I'm never going to do a cookie banner. The EU can sue my ass. I will never do a cookie banner. Technically you have to do them if you're in the US, even if you're, if you have, uh, you, uh, people, um, like Gumroad should definitely be doing them at our scale, but we're not going to because I hate them. Um, okay. There's still some bugs, so I'm gonna have to work on that. I'll work on that after this. But, uh, yeah, that's really all I wanted to cover. I, I, I, uh, hopefully didn't scare anyone away from code too much. Um, but yeah, that's how I start every single project. And there's probably, probably roughly the right amount of errors and Googling required. That's roughly my life whenever I build something new. Um, let me just check my notes to make sure I didn't miss anything. And we can see if anyone has extra questions. Yeah, I would definitely— like, if you're building anything related to events and paying for events, I would probably use Calendly. Like, you can almost think of, like, even these apps are, like, kind of layers on top of each other, right? Where there's, like, Stripe's API, which is maybe the lowest level that most people would ever really deal with. Then there's, like, Stripe Payments Links, which is, like, kind of built on top of that. Then there's, like, Gumroad, which is kind of, like, built on top of that in theory, even though, you know, in— at least mental model-wise, so it probably makes sense. And then Calendly is kind of on top. It's even more a more verticalized, specialized use case, right? And so when you use Calendly, you're really using like kind of like all of these other services plus a little bit of what Calendly does, which is like the event stuff, right? So yeah, but they, they, they're all relatively easy to plug in. Like once you have the skeleton, you know, all of these places have docs and stuff on like, okay, how do you integrate? How do you embed? How do you connect this and that together? Et cetera. This is very web specific. So mobile is slightly different. Unfortunately I haven't shipped a mobile app in a while, so I don't know exactly how I would start. But I think a lot of those tools like Bubble and, and stuff have kind of like deployments to, to, to, to apps. So, Touche recommends Expo or React Native. Yeah, Expo I've heard good things about, but I'm not familiar. That definitely requires code. I think if you start shipping iPhone apps and Android apps code is hard to escape, I think.

Yeah. Awesome.

Julie, do you have a name for your Peloton app?

No, no, no, I do not. But by next week I will. I definitely will. Gauntlet has been thrown down. I can't promise a not no-code website.

Yeah, I mean, I can show people crazier code if you want to see what like Web3 looks like, but it's really not. I, I, let me show you Web3. Web3 is in my view, crazy project. Like I, I can't even believe that I built that. Um, and let me show you how complicated it is. Um, so let's go do the same thing. Pages, index. Oh, there's only one page, one page website. So yeah, it's pretty crazy. At this point, but this is it. I mean, this is the entire game that we built in a month. And the, like, this is just a link. This is just a link, right? So like half of this is just, it's pretty basic. It's like what you're already used to. And then it's just me copy pasting a bunch of stuff to get the Web3 stuff to work. Literally, you know, like I, there's a create-next-web3-app or something I think it's called. And yeah, you can probably even tell like the links that I used cuz of the colors they are. And just like copy pasting, copy pasting. I think this is the example I used. Yeah. And then just kept messing around and editing and trying new things until it did what I wanted it to do. What is it? There's a better, oh yeah. Create Ethab maybe. Is this what I used? Yeah, something like this. There's like something that auto-generates it for you, which does it basically just gives you the right amounts of these imports at the top to make sure that you're, you're tracking. But if anyone wants to, you know, you can, you can go to this URL. It's public. It's, it's all open source. You can do exactly what I did before, which is do this code thing, click this, and then do git clone and get this. And then you'll be able to run it on your computer locally. And the only thing you have to do to run it locally, literally it's gonna be to run this command. And then you're gonna be all set to run, to, to do it. And then anytime you wanna push code, you just push it to main or in your own branch. And that's what these people have been doing. Like for example, this person who doesn't know how to code whatsoever came in and said, hey, I, your link to Notion is broken on the website, so I fixed it for you. And I could just go in here and be like, oh, you did fix it. Cool. And then I just merged it. Boom. And it went live and I was able to check. It's like, cool, you fixed the links.

Awesome.

Merged. And now it's live. I didn't even have to, like, I did it on my phone and then it just propagated and it's live and these are updated now. Um, so pretty cool stuff can happen when, yeah, when you use code, I think like very hard for this to happen if I was using, you know, some no-code app to ship it. Simon, do you want to unmute and ask? Yeah, can you hear me? Yeah. Yeah, so thanks for sharing that. It's like a quick coleslaw on how you build a website like that. It's pretty cool, and I like how the different examples of it But when you are coming up with these different projects like Web3 and the validation, I forgot the name, but different types of projects, what's in your mind? Are you trying to do something to practice or to learn, or do you have, okay, I'm going to try to make an app, make a website to make $50,000 a month or whatever? What kind of drives you on that? Yeah, I mean, definitely would we say like learning first, probably like learning oriented. So there's general, like for example, with Web3, it was like, I want to learn Web3 stuff. There is some monetary component, which is I feel like if I know more Web3 stuff and I can build something in it, founders will like think I will be a better investor for them basically. Uh, so there's a little bit of that. Um, for sure. But yeah, it's primarily like, I wanna learn something and it's kind of like if I wanted to learn color and all these teachers are like color wheels, color wheels, color wheels. I'm like, no, I just wanna go paint like things from life. And then they look ugly and then I make them better. And that's how I learn. Right. So there's all this like stuff about learning Web3. And I was just like, I just need to build something. Um, cuz otherwise I'm not gonna know what to learn. Like Web3 is massive. Web3 is the internet. That's a pretty big space. So it's mostly learning first. And then I also, I'm a big believer in planting seeds. And so that just means trying to connect with and I call them honeypots for co-founders almost, where I just like to build things so that people hopefully find them and stumble upon them and are like, oh, who built this? Like, who's the person behind this? So that's another one. What else? And then, yeah, just boredom, to be honest. Like the thing that I love about building stuff is that like, they're kind of like paintings that never end, right? You can constantly like make it better and better and better. Kind of like the memo, kind of like Figma. Like they just give me something to do. So that's probably the biggest reason, honestly, just like to help me deal with my anxiety or something, you know, just like something like a fidget. It's almost like a fidget more than anything, I think.

Yeah. Thanks.

Thanks.

Yeah. If I want, if I wanted to make money, I would definitely sort of, I definitely would work, but I would focus more on like much more boring, you know, kind of B2B SaaS probably exclusively. Would be my focus probably.

Yeah.

Matt asks— Matt, do you want to unmute as well?

Yeah, sure. Yeah, just do you write any sort of automated tests or anything? Probably not for the MVP side of it, when it's really fresh and new. But I'm just thinking when you've got paying customers and you're making changes further down the road. Do you do that for Gumroad or, you know? Yeah, definitely. Just quickly for those who don't know what automated tests are, but they're just like writing code to validate different components of systems that you don't break them over time with different changes.

Yeah. I mean, automated testing is a good example of that sort of manual to automation, right? Where you start off with— effectively when you have a really small thing, like what I was doing is I just refresh and I just check. Right? Like that's the, that'd be the fastest. But then over time, basically it's like, I don't like, let's say there's 3 pages. Then every time I make a change, I have to check 3 pages. Right. Um, and so it basically at some point, and, and this is often, and when you're by yourself, you don't really need them in my opinion, cuz you understand everything that's happening. Uh, but the biggest danger you have to worry about is regressions, right? Which is, it's unlikely that something new you're building is going to break because you're testing that new thing. But what might happen is this new thing breaks some old thing and you aren't testing that old thing. And that breaks, like for example, with Web3, I broke sharing of not full dots because I had beaten the game. And so I was only testing the sharing of the completed game. Right. And so at that point, someone found that and was like, you should have an automated test that like tests all the states properly. Uh, and I'm like, it's open source. You can do that yourself. I hate writing tests. Uh, and they did. And so now actually I'll share my screen really briefly. So now they added tests. Certainly Gumroad has a lot of tests. And there's even services, like there's a company that disclosure I invested in called QA Wolf, um, which is effectively trying to automate this stuff, which is, it's actually pretty cool, uh, where you basically can like build tests by doing it in your browser and then it'll create the code that you need. Uh, and then they, but we, we basically pay them to do testing on behalf of Gumroad. So every time there's a new deployment or a new PR, it effectively just automatically runs these tests. You know, clicking this and that. And then you can, you know, you, you, you basically, and then if something breaks, like in Slack, it'll be like, you're, you know, this thing broke, right? You can also do Percy. Percy is crazy. If people aren't familiar with Percy, mind-boggling stuff, but then you can do visual testing. So every time you imagine, every time you ship a PR or open a PR, it just tells you these are the pages and these are the changes that happen on these pages in red., and it's like amazing. So now every designer on your team can just like double-check all the changes if there are any, right? Um, but in, in Fweb3 land, there are some tests which are probably in test, presumably game.js. Yeah. So, so, so basically wrote these tests, um, that basically test, you know, the game smart contract should be able to seek verification. And it's not much, it's like 100 lines of code. You really just want to test the most important functions. I don't think you need to test everything personally, though I'm sure other people will disagree. There's a whole school of thought called test-driven development, which is write tests first and then You know, so here's, here's the walkthrough, right? Super simple test, right? Visit the homepage, click, you know, it shows this header, click the first tile, it shows this header, click the second tile, it shows this header, right? Super basic. Obviously you could add way more tests to get way more coverage. But for me, like just the most important basic thing, which is like It's kind of the $0 to $1, right? It's just like, test that, right? Like, make sure that someone can click through all the steps and get to the end. And as long as that doesn't break, you're probably fine. But yeah, I would say I'm probably on the spectrum of testing too late. Like, for example, when I built Web3, I did not do any testnet testing. Like, every time I wanted to test the smart contract, I just deployed it to mainnet and just tested it live. And everyone's like, what are you doing? You need to test on mainnet. And I'm like, why? Like, it's already on testnet. I'm like, what, what's the problem on mainnet? Like nothing. No one knows. I don't know. People are just, are so sacred, you know, like you should be testing in a certain way. It's all BS, you know, if it works, it works.

Yeah.

If people are curious about the way that I would spin this up with database, like verification letter style database on Rails. I have that already on YouTube, so you can go watch that on YouTube. The like Saturday session starts out with me doing exactly that, where I spin up Rails, I, uh, add it to Heroku, I set up the database on Heroku as well. Um, and so I can, you know, I have done that all as, uh, and it's all available if you wanna check that out. Um, but this, I, I would honestly going forward, the amount of magic you get with Vercel, it kind of makes me think that Vercel is more likely to be the future of new app development. Um, where you— the nice thing too is then you only have to worry about the front end. You're effectively just building front end, which means no backend. And then anytime you need a database, you just ping Airtable, right? Um, or many people use Firebase as well. Um, so you can just outsource effectively your backend to, uh, or the blockchain. Like in Web3's case, there's no database because the database is the blockchain. Let me show folks one more thing, which is if you go to the homepage, Pages, Index, the only data really that I use in this whole game is when I hit that button, which basically activates the Web3 thing. I don't know what any of this code does, to be honest. I still don't. It works though. I just copy-paste it. It gets my wallet address, and then I use that wallet address. You get its account, it sets it to account, but you can see it pulls it from Web3 React. Again, I don't know what this library does well enough, but effectively that just pings api/polygon with the wallet address, and then that hits this page, API Polygon, and that This is the magic that does all the— goes, hits this API with that wallet address and fetches all the transactions. And that's what lights up all the dots, is checking is that. But because this is all happening— there's no backend logic effectively. The only reason this is an API page instead of in the main page is so that it's kind of a Next.js technicality, but anything under API effectively obfuscates the end URL. So it basically keeps anything secret secret, like for in this case, the API key that I'm using. I don't want anyone to know, so it just kind of makes it opaque. Um, but that's it. Like, you, you can literally with zero, almost no, uh, code, basically just fork this repo as I did and then just run this command. The only one thing you will have to do is get a Polygon Scan API key and put it in your local file, and that's it. Like, you're ready to go. Why? Because all you're doing is spinning up effectively a JavaScript file. Just like, for example, this is one thing I wish I did, I didn't do, is if I wanted to sort of, you know, ultimately what the web, you know, what the web is, is just a series of, you know, just like a document. When you visit a URL, it's just spinning up, like effectively it's just loading a text file, right? So if you had, you know, an index.html, File. Let's open this up in my code. This is like zero, like zero references, zero external things, right?

Just HTML. Right.

And I had this file. All it is is HTML with hello in it. I could literally deploy this to Vercel. And if you went to that site, it would just say hello, right? Just like this.

Right.

So the only difference between this and this and the All that this code is doing is effectively a more complicated string, right? Because ultimately, this is what's here. And if you go to web3.xyz, it's also just a string. It's just a more complicated string that's being generated by all this code that was in that page that I had open over here. But it's, that's it. I mean, obviously I don't, I don't expect everyone to understand exactly what's happening, but there's really not much. Uh, it just loads this code, this effectively, this code compiles down into that index.html file, right? That's the magic of Next.js. But effectively it's just taking this code and turning it into this. And just like we were messing around with the HTML, CSS and everything like that, you know, we could do the exact same thing here. Right?

Like you could, you could do strong and then boom.

Right. And so what is like, you know, like facebook.com is just what we did, right? It's just like that. And like a little bit more code, right? But like, it's just an, it's just a string. It's just an index.html file. Um, that's how it all starts. Actually, at one point you could even go to facebook.com/index.html. That's what it was back in the day before we got better at making those URLs prettier and stuff. But yeah, that's basically it. I have so many tabs open, it's crazy.

Awesome.

Any other final questions before we wrap up? Oh, Nicka, what would you use?

The one that you said generates tests for you, Percy, right?

Oh yeah. Oh, QA Wolf. Yeah. Or like, yeah, there's a couple open source libraries as well. Like Cypress is one and yeah, they're pretty awesome. You just like download a browser extension, like do the test and then just copy paste your code and you're done. You don't have to like type all that crazy stuff. Crazy stuff anymore. Yeah, it's a pretty, it's a pretty cool, pretty cool service.

Yeah.

I would also pay for a service that would take Notion and turn it into HTML for me, for what it's worth, anybody listening. There are ways to do exports from Notion, but not exactly the HTML that I would love to be able to just paste that into. Uh, actually maybe there is, let me see.

HTML. Isn't that what Super does?

Kinda basically, but I like, I would love to like still do it on my own, you know, like on my own website.

Oh, okay.

Got it.

Yeah.

But yeah, actually I talked to the Super person and it's actually insane what they do. Um, which is they effectively built their own front end for Notion's backend. So when you visit Super, you're actually not touching Notion at all. They rebuilt their entire rendering engine effectively just to, to do their, to do their version of it. Which is bonkers to me, but. So every time Notion changes something, they would have to update their rendering engine. Exactly right.

Yeah.

Yeah. Or, or if they add like something, if they add a new component, but yeah, for example, if like, let's say Notion redesigned something., then Super would look the same. They would have to like update as well to match. They, and they don't match perfectly. They're slightly off, but yeah, I think it was, it was a performance reason. Like they said that the, basically Notion was, Notion's, Notion's front end is so bad. Uh, like it's not built for, you know, serving websites. Um, it's built for like an internal app, right?

Usage.

So it's not built for performance on first load. And so they basically just like said, we're gonna build our own version. But as you saw, like If you notice, like, I did h1, h2, unordered list, a, you know, anchor tag for a link, horizontal rule. Like, I think there's only like 40 or 50 tags total, right? So like, if you cover those, you— that's a good— that's like the internet, you know? Like, there's not that much more. If— and if you go to like twitter.com and you like disable CSS, you'll see it. Like, you'll just see h1, h2, h3. Oh, actually, let me show you one more cool, really cool thing, which is CSS-N-Guard. I don't know if folks, any folks remember this, but this is HTML CSS, right? So if you open it up, you'll see that this is a div with sections and an intro and a header and all, all the, all these components and paragraph tags and all these sorts of things, right? So all this design is just coming from the CSS file, uh, which means that if you effectively take the CSS file and replace it with a new CSS file, you could change the, like, aesthetic of the page without changing any of the content, right? That's the promise of CSS in general, was like this idea that you could sort of fork content and just, and, and sort of design. And so this is the exact same HTML with a different CSS file. This is the exact same CSS file CSS with a different— uh, sorry, HTML with a different CSS file. Uh, every single one of these is the exact same HTML that we're looking at, the exact same HTML every single time. It's just different CSS. Um, pretty crazy, huh? Like, this is all one, like, all one HTML file. So all the content is the same, all the text is the same. The BDF CSS design But, but, uh, just the different, different CSS, which is just changing the colors, basically colors, layout, formatting a little bit.

Um, yeah, pretty crazy.

Pretty, pretty crazy. But this is like 19 or like 2002 or 3 or something. It's pretty old. Still works though. That's the cool thing about the internet. It's like all super backwards compatible, I guess. If you do it right, if you code the right way, it almost becomes a game. It's like, how semantic can you code this? Even Gumroad, we have a new rebrand going live. People may have seen this exactly what we did, like just CSS. Like if you, if you go to a page on Gumroad, I can turn on rebrand just by changing a CSS file. The HTML is identical. So yeah, it's pretty, it's pretty cool. What you can do. Awesome. Well, we went super late. We could go on forever. Um, yeah, Matt Phillips says this is how— sorry, I don't know, I guess we have two Matts. That's why I say your last name. But, uh, yeah, this is basically how SuperOffice themes, right? If you are able to do that, then you can just replace CSS file and have a different theme. Um, which is exactly, exactly how they do it. Yeah, definitely download VS Studio Code.

It's awesome.

Visual Studio Code, VS Code, highly recommended. That's what I use personally. Download Copilot too, GitHub's GPT-3 powered code, the autofill on a code is, it's just, it's insane. How much, how little code I have to write these days. It's pretty awesome.

Yeah. Sweet. We're done. Great.

Have a good night.

Hopefully it wasn't too scary or weird, but yeah.

Homework. Matt Phillips asks for homework.

Homework.

Homework. I would, I would, I think a good homework assignment would be to take your Notion memo, kind of like what we talked a little bit with about with Encore. Take your Notion memo, kind of, I would, if you haven't yet, Figma-ize it, right? You can skip, you can go straight from Notion to code. And often you'll notice, like I was just, you know, when I was doing the button, I wasn't even going back cuz In my head, I can kind of render it. But I would recommend taking your Notion memo, putting it in Figma, changing the fonts and colors and layouts, kind of like CSS Zen Garden, like try to make it more interesting. This effectively, you can think of it like the marketing, you know, if you did Figma for your app, now you're doing Figma for your like one homepage marketing website. And then see how much of that you can get into HTML and CSS. And I will put a zip file of a basic HTML CSS set of files in Slack in the memos channel right now after this. So at least someone has a base. So you don't have to mess around with any Next.js or Rails or anything. It can just be HTML CSS.. You want, you can try to embed something in there. That would be kind of, I would say, like the ultimate test. I think that's pretty good homework. And then next week we'll talk, we'll do office hours on Friday, and then next week we'll do, we'll actually talk about selling it. So ideally it's in a place where you can give somebody a link and they will be able to give you a dollar in some capacity. I think would be, would be pretty awesome.

Great. Awesome.

Okay, see y'all everybody.

See you later. Bye everyone.

Bye bye bye.