A little coding challenge that it was able to accomplish in almost no time.

I mean, I'm really impressed, and it only took two prompts.

I had to correct it, you know, that first one.

Apparently, Claude is the game to beat in town.

As of yesterday, June 20th, 2024, Claude's models, their new model Sonnet, is outperforming in most instances all the other big players in the AI LLM game.

Now, if you're an ordinary person like me, a lot of that is just jargon that I don't know what it means.

Let's get digging a little bit, though, and do something kind of basic, kind of not.

We're going to build a one-page website.

Now, let me highlight a few things from Claude, first and foremost.

A, I like the interface here.

This is basic stuff if you're using the and it gives you a response up here, just like ChatGPT, Copilot, MetaAI, anything that you've been using or have seen used or even heard talked about.

This is what we're talking about when we say LLMs.

It's large language models that we can talk to like a little chat, and it responds to us mostly intelligently.

Now, what I want to do today is look at a few of the nitty-gritties.

We could just stay right here and prompt Claude 3.5, and I am on the free version.

I might point that out.

But I want to go a few steps deeper.

So on Anthropic's page, you can find out more information on their model, what it does, how it does it, all that stuff.

It's got links to papers and research and pricing and API access.

And what's this?

Speaking of API access, let's dig into the documentation a little bit.

So if you go a little deeper and you look into the documentation here, there's all sorts of stuff that you can get into.

What we're going to do is check out this right here.

This is a prompt library, which is fantastic to do exactly what it says.

Explore example prompts for inspiration.

If you've ever been using AI and just kind of curious about what you can actually do, other than have it reply to you in the form of a poem or other such pretty useless things, this is a good starting point.

We're going to go there in just a second to get our website prompt, in fact.

Two other things to point out, though, there's an intro section here that you can explore the capabilities and development flow if you are on the technical side of things and interested in using this for development.

And in a future video, I plan on going through this quick start.

And this is actually getting what's called an API key and doing this from your computer, from the terminal, from the command line, and actually prompting instead of typing on their website, prompting the AI model.

Now, that's way ahead of where we are today, but just a tease of what's to come and what you can do with this LLM.

Let's go back over here to our prompt library, though.

So they have all kinds of prompts, some of them witty and clever.

Spreadsheet Sourcer is a good example of that.

All of them witty and clever, actually.

They've got categories here for us.

But I want to go to this website wizard, OK?

And we've got here system prompts and user prompts.

So what's the difference?

Well, a system prompt is something that you're instructing the model, the AI model, to be.

So in this case, your task is to create a one-page website with these specifications and some general guidelines for what the system should be doing.

This is very useful when you're using the API requests and not just the chat window.

You can type this in the chat window also.

And in fact, let's do it both ways.

So let's get started.

Let's take this system prompt.

Let's go over here and say that and then shift return for a new line.

Please respond only with yes if you understand your role, OK?

And so it's going to take that The alternative to this is over here on the console.

So this is kind of the developer version of all that.

We can enter a system prompt up here.

And don't worry, there's links for all of this stuff in the description.

It's all found in different places on Anthropic's website.

Don't be intimidated.

Just start trying this stuff out.

I'm going to paste that system prompt in here.

When you first use the console, you can see that you actually have to have credits to do this.

Then they've got this one-page website for this learning platform called EduQuest.

So this is the prompt that they're using.

And I've actually modified it over here in another window to fit our purposes.

And I'm going to take that.

I'm going to come back in here and I'm going to basically what we're saying is, hey, create this one-page website.

Change the title there.

Create a one-page website for an online learning platform.

Got sheet.

A fixed navigation bar with links to two categories.

Actually, we're going to put my name in here because that's kind of the brand right now.

So we've got a navigation bar with these two categories.

A hero section with a video background.

We may have to add that ourselves.

A dynamic tagline that changes between these statements.

A feature course section.

A success story is basically a testimonial section.

A footer with links to the newsletter.

FAQ, privacy policy, and contact us.

And include filler placeholder content for the video background.

For the course cards, because I've got that video, we'll see what it does with the video.

And let's just try this out.

And right out of the gate, you can see the speed that it's going here.

This is pretty fast compared to some stuff I've seen.

Okay, so we got some problems in commenting there.

It looks like this whole thing is commented out, but we can change that ourselves.

No, it's not.

It's just not.

The format is just showing it grayed out.

It's not commented out.

This first line is.

All right, so it's putting all the style in there.

And yeah, this should be in a CSS file probably, but we're going to keep it in here.

You know, I didn't specify any colors, so we'll see what it comes up with in terms of colors.

It looks like background being dark and color of font being white is what it's going for.

We got this stuff.

Look, we've got that video.

This is probably not going to work.

We need to down.

Now it's putting in the JavaScript for the taglines, setting the interval, rotate.

I mean, this is doing a lot.

Okay, now copy this.

And then what we're going to do is go over here to we're going to load up an HTML file.

I'm going to paste all of that in right here.

And then I've got a live server.

And there it is.

So this is rotating between the things.

It does have a get started button.

It does have featured course cards and it has success stories.

And is it responsive?

It is responsive.

So it's got breakpoints in there.

It's got the bottom stuff going on there.

Wow.

So that's super impressive.

You know, some things I'll get rid of.

I don't need a search bar up here.

That's not going to do anything for me.

Need links to YouTube and to the course page right there.

And this needs to be a sign up link as well.

But on the whole, pretty cool.

That spat out a decent starting point for a website in a matter of a couple minutes.

So I'm impressed with that.

The other thing that I thought was incredibly cool.

Look at this right here.

Cosmic Street keystrokes.

Write me a complete web app as a single HTML file using WASD to move around, blah, blah, blah, you should make the website very aesthetic and use Tailwind.

Now it's got example output that works.

But I want to see what happens when I throw this in myself.

To Claude.

It's still right in the JavaScript.

Okay, there you go.

Copy this.

Let's bring this over into our page here.

And this is just auto refreshing.

Look at this.

Wow.

Now, I don't see the JavaScript working.

So it doesn't look like this one is actually working.

Like current word is this const words.

So we've got a word list in there.

This is completely different from the anthropic example.

Where is it cosmic keystrokes.

So here's the example output that they gave.

Let me just paste that back in here.

And then go back here and look, this is actually working.

So let's try ours again.

So you enter the word and you get a high score up here.

And WASD does this up and down.

What word was that boy?

Boy, and there you go.

I'm going to get 10,000 points.

Watch, watch and learn against.

Oh, oh, no.

I clicked the wrong word.

Go back to a new word.

I don't know what I just clicked.

Right, agent, agent.

There.

So 11,000 points.

So pretty cool.

I mean, come on.

Let's go back here, though, and see what's going on in our actual prompt window.

Works to move around, but there are no words scrolling.

You're right.

The words aren't scrolling as intended.

Let's modify the game.

I'll update the code.

Here's a revised version.

Seems like it took a shorter amount of time.

Let's see if we can get this working.

Hey.

Oh, and this is even resilience quest.

All right.

So I did get some points that time.

Ambition.

Only problem with this.

Persevere.

Wow, that's cool.

So this is actually even better courage in terms of the interface than the one that they gave the example for.

However, there's too many words.

So we could we could prompt this some more and get it to do us a little bit different.

And we could also have the arrow keys instead of the WASD keys, because this just almost this just makes it so I can't move out of way of other words.

And of course, we're typing some discover while all this is going on.

But I mean, this is sweet.

Little coding challenge that it was able to accomplish in almost no time.

I mean, I'm really impressed.

And it only took two prompts.

I had to correct it.

You know, that first one didn't work right out of the gate, but good enough.

And look, I can talk and obtain victory here.

Speaking of victory, all at the same time, 125.

Now I like the scoring in the other game because we got up to 10,000 pretty quick.

This one is a little bit lower score, a little bit lower stakes, but hey, that's OK.

Hope that was helpful for you.

Subscribe to my channel where I teach coding and spreadsheets to business professionals and hope you have a fantastic day.