Designing a Chat Webpage - HTML and CSS Basics

Coding HTML and CSS for a chat webpage. We're going to code a little CSS. Code a chat interface on a webpage.

Yeah, this is just HTML. Okay, we're not doing any sending of the chat messages. We're setting up the interface where we will have the chat messages still.

So the idea of this ongoing conversation with the AI, we're going to have that on a webpage, but we have to make the webpage. We're going to open up Chat Site One and have a look. We might just build this ourselves.

Sure enough. Sure enough. Although, oh no, that's a lot of stuff.

It would be nice to have the boilerplate. There you go. Chat Site One HTML.

Okay, great. Download. Python for AI apps.

There we go. Yep. Okay.

Chat Site One. There you go. All right.

Chat Site—no. Yikes. That's a lot of stuff.

We want to type some of this, though. We don't want to have all of it. There you go.

Okay, that's what we have. That's all we get for free. We’ve got to type stuff.

We're going to start with this. And we're going to get to that. So this is just the raw text, right? And we're going to style it till we have that.

That's quite a bit of work. So there is a little HTML and CSS in this class after all.

Turn off this "done" thing. All right. Templates.

All right. Chat Site One. That said, maybe we should just keep with the naming convention.

Yeah. Why would we change now? Index 05, right? We're going with that. We've got this Chat Site One, which we're going to rename Index 05.

You probably won't have to do that part. You'll have it provided like so. You're just seeing how the process happens here.

I mean, it's obviously a design course already. But there are all kinds of little tweaks to be made every time it runs. If you look at the body of the HTML, look, it’s all just raw text.

There are no tags even. So nothing's going to even be structured whatsoever, which is why it all just is a blob.

Type Control-B. View the page in the browser. Just a blob of raw text—of unformatted text, right? Just raw, unformatted text.

Let's not say "blob." Wrap the first three lines in H1, H2, and H3 tags. Yeah, we'll start structuring this.

So "Welcome to Greenleaf." H1. "You Are Source."

H2. "About Us." H3.

Wrap the first four text chunks in P tags. OK. And these are 12.

Good. Four text blocks in P tags. All right.

At Greenleaf, you've got something for everything. P tag 1. P tag 2. And I deliberately gave you this raw text to work on. I want to have a little bit of HTML and CSS in here.

Since we are making webpages, web apps. And I think it's just good, no matter what your level is with this stuff. Gives you a firmer—you know, a better grasp and sense of what we're making.

You know, if you're building it up from the beginning. And wrap the last line of text in an H2. This is the heading for the chat box.

In other words, that is the chat box. H2. H2.

We don't need dots. Wrap the body contents in a div of class "container." Inside the container, wrap the—we’ll make it one step, it's fine.

Inside the container, wrap the About Us and AI Chat Assistant parts in their own divs with class names of "about-us" and "chat-container." So that's the idea. We wrap everything in a container.

A div of class "container, " which means we take all the body content and we tab it in and then put that div. So the CSS—we're not going to write.

That's way too long. That involves flex and many other stuff. We'll be locating that momentarily as well.

And that's basically it. About Us container. We're going to have an About Us container and Chat container.

So containers—you don't have—you know, Devs don't usually call their things "container" like that, but it's fine. Just to be clear. It's not "About Us, " the text.

It's "About Us, " the text holder. And we don't really need quotes here since the bold is setting them apart enough. So here we're going to take all that About Us stuff.

Tab it in. And we're going to make a div of About Us container. Then we're going to tab in the H2, which is our AI chat sidebar thing.

And we're going to call that Chat container. So again, we're dividing the text from the Chat container. The Chat container is going to hold these form elements for submitting chat questions and handling the response.

Close that container, too. All right. Separators here.

We have to close the—this is the About Us container and the Chat container—and then the container proper. Close all that.

Make a static folder for images, CSS, and JS. We have all that. Inside static, make three folders.

CSS, JS, and images. CSS, JS (which is empty), and images. Writing 100-plus lines of CSS is outside the scope of this course.

So the CSS provided is greenleaf.css. So in your CSS folder, make a folder called "static." If you do not already have one—you know, I think you already have one. In static, make three folders if they do not already exist.

Writing 100-plus lines of CSS is outside the scope of this course. So in your CSS folder, you should find—boom, boom, boom—greenleaf.css. If not, locate the file and put it in the CSS folder. If file—no, stop.

It's fine. They'll find it. I'll put it at the end of the chapter.

Import the pre-written greenleaf.css file into the head of Index 05. So actually, the rule is go in order—put the name of the file first. And you do need the static path.

When you run your template, you don't have to say templates. It knows. But here, you do have to say static.

And you need to do./ because you're escaping. The./ is to escape the templates folder in which it is located. Add the hero image—which is where it resides—located.

Okay. Add the hero image. We have a hero image, which we'll deploy as—okay.

No, but first refresh in the browser. The styling should take effect. Dividing the two container divs into simulator trampoline.

What? Whoa, what? Good grief. What the hell is that? Dividing the two container divs into a two-column layout. Okay.

So unless there's a problem with the names, we have to import. We'll say: `` All right.

We've imported the CSS now into the HTML. And the CSS has the container, which is using a grid layout—beyond scope, of course, although grid is cool.

There's your About Us container with About and Chat Box as the names. And here they are allocated to the grid template as About and Chat Box, which is how you get your two-column layout. And the grid columns are in a width ratio of 3 to 2. So the About part is three-fifths of the total width.

Chat is two-fifths of the total. Some shared styles—the input that we're going to make to type your question, the button that you're going to click, the chat window—which is where the chat appears—and inside the chat window is where the entire chat appears.

Higher chat appears here. Individual user and AI messages. Both use this class in the chat window.

So only user messages get this extra class, which moves the text over to the right and gives it a kind of aqua background. And the AI chat messages appear over to the left and have this kind of greenish background—like a greeny aqua. User/AI. So, like in chat on your phone, right? You have your chat messages on one side of your phone and the replies on the other, and they each have their own color-coded background.

That's what we're emulating here. Complete with border-radius and everything. It looks pretty nice.

You'll see. So let's refresh this thing, which is the unstyled page, unstructured page. And oh yeah, we changed the name.

We'll call it Index 05. "File couldn't be found." Really? Huh. Okay.

Index 05 can't be found. Fair enough. Send it fresh.

Here we go. Not bad. Coming along.

Yep. Color's not quite right. The background is too green.

That's okay. We'll get to it. Tone down the green later.

Okay. Maybe we'll try that right now. That's like—that's green.

It's nice. That's not nice. Let's try to make the green a little nicer on the body.

Dark green. Yeah, we don't want that. We want more like that kind of green.

We want that. Okay, fine. Let's see what that looks like.

Hmm. Yeah, we need a little darker. We don't want it so bright.

That's fine. And then this one's not so great either, right? The container green. It's not that great.

Background color. Let's see what we got. Oh, that really shouldn't have a color, actually.

Let's turn that off for now. And let's turn that off for the time being. And turn off the border, obviously.

Chat Assistant. Welcome. This could all be a little wider, right? Container width.

We'll go 1050. Now, there are no media queries. This is not dynamic, right? We're not doing that.

Like, if it were dynamic, we’d get to mobile view. And we’d hit a breakpoint. And then the Chat Assistant box would go underneath the Welcome.

Or maybe go to the top. But outside of scope, of course, to really play with the CSS a lot. This is just to make it look nice.

Your source for the finest saplings and seeds at 1200. Yeah, or 11. 1125.

Okay, good. I wanted that in one line. Next, add the hero image.

We have a hero image, which we will deploy as the background image of the header. So do we have the CSS? Yes. All set to go.

Green Leaf Tree Nursery. There it is. That is the background image.

But the reason it's not showing up is we don't have a header. And we'll do that above the container so that it goes wide.

Add an empty header above the container. That is what I just did.