All language subtitles for 4. Building the Boilerplate HTML

In this video.

What we're going to do is go ahead and build out the HTML template for our baby name generator application.

Now, this over here is not going to contain a lot of view and nux concepts actually is probably going

to contain none whatsoever.

So if you want to skip this section, just go to the branch that I linked on this video and just go

ahead and copy the HTML.

If not, well, let's go ahead and start building it.

So the first thing that we want to do is we want to have an H one.

And this is going to be the title of our application, the name of our app.

The name of our app is, of course, baby name generator like.

So we also have a P tag and this is going to describe the app so we can say choose your options and

click the.

And click the and then over here you can say find names button below like so.

Okay, so we have the title, then we have our little description.

And if we went ahead and save this, you can see we actually see it inside of Logo 3000, which is great.

This is awesome.

Now, of course, the styles are not there yet.

We'll worry about the styles in the next video.

Okay.

So what we're going to do now is we're going to have another div, so let's create another div.

We're going to give this div a class.

We're not going to apply the classes for now, but let's just give it a class.

And over here we're going to say this is going to be the options container.

So we're going to say options container like so.

So this is going to contain all of the different options.

Now I'm also going to create another div and we're going to give that a class and that's going to say

option container.

And so this is going to house one individual option.

So we're going to have multiple options, I think three to be precise, so we can paste that three times.

So the first option over here is choosing the gender.

So it's actually howzat inside of an H1.

So we're going to say or h four.

So we're going to say choose.

Choose a gender.

So that's going to be option number one.

And then right below what we're going to have are a bunch of buttons, of course.

So over here let's actually have a div for this to house all of the different buttons.

So I'm going to call this let's call it option buttons like so.

And then right over here we're going to have a bunch of different buttons.

So button.

So the first option that we have is boy, and then we're going to have another button for unisex.

And then over here we're going to have another button for girl.

Okay?

So that's really good.

So now what we can do here is basically copy what we have here and paste it right in there.

And so now we're going to talk about the other options.

So what's the option?

Well, this one is going to be the popularity of the name.

So over here we can say something like choose the names popularity.

Okay.

And so this is either going to be unique or trendy.

So let's go over here.

Let's say this is trendy and then over here this is going to be unique and we can get rid of this.

Let's get rid of that.

Let's save it so we can get some nice formatting.

So now that leaves us with the very last option.

So let's go ahead and do that.

So we're going to go over here.

We're going to copy what we got right there.

Now this one's going to be the length of the name.

So we're going to say over here, choose the names.

Length.

Choose names, length.

We're going to have three options here.

So let's have another button.

So option number one is going to be longer.

Option number two is going to be all.

And then option number three is going to be short.

So now that is really all it is that we need for our h html.

That's pretty much it.

And if I went ahead and looked at the application, this is actually well, well, this should be a

working HTML template.

You can see that this is really ultimately what we want.

Now, of course, stylistically, this is very ugly, so let's actually work on these styles in the

next video.