- [Instructor] Now that we're ready to generate some HTML,
let's start by creating some atomic parts.
We'll have these at our disposal
to use across several pages.
And remember, we're only doing the HTML markup here,
no CSS yet.
So we'll focus on creating proper, accessible
and SEO friendly markup.
Let's start with a header section.
So here's our prompt.
I'm working on a website
that's going to have several reusable HTML sections.
This is going to set the context for the rest of the chat.
Can you generate a header section for me
that includes the site title as a headline,
as well as a navigation menu?
The HTML you generate should be SEO Friendly and accessible.
Okay, so let's go ahead and take this
and put it into our GitHub repo.
Note that we have the code
and then there are features and additional considerations
that the AI is going to tell us about,
like replacing the logo with an actual logo.
So in our GitHub repo,
I already have a file called header.html.
I'll paste this in here and then we'll review it,
href index.html class logo, image source logo,
and then your site name and your site name.
This includes the title here and then an h1
and this is wrapped inside an anchor tag.
Now, I didn't want a logo necessarily,
so I am actually going to get rid of that.
I just want the site name.
And then we have our nav,
and then this is an unordered list.
It's got the pages. Pretty basic. It's wrapped in a nav.
I like that. It also includes a div called container,
which gives us some flexibility later on.
So this is good, minor adjustments.
Next, let's do an author bio section.
Okay, so here is the prompt.
Next I'd like an author bio section.
Can you make HTML markup that includes a headshot,
you can use a placeholder image as well as a sub headline
with the author's name, bio,
and a link list with social links?
And I'm going to include for LinkedIn,
Facebook, Threads, and Instagram.
Okay, so again, it generates the HTML
and then gives us enhancements and additional tips.
So I'm going to copy this
and then we'll put it in the author bio.Html file
and review it, section, author, bio,
class, bio, image.
We've got the image, author avatar, bio content.
So it looks like they're prefixing.
Most of the content here with the word bio uses an h3
and then some information about, I didn't provide it a bio.
So this is just giving us placeholder text
and then a link list.
And notice here, it's using the font awesome classes.
So something to note, I actually like this
because it's going to help us style it later,
but it uses the font awesome icons
because that's probably very common in the model
it learned on.
No notes on that.
So next, let's just do a generic card section
for laying out data.
This could be multiple blog posts, images,
or just pieces of text.
So we'll say, next, I'd like to create a set of cards
that I plan to style in columns.
Can you create markup for six cards
that will be easy to style using CSS grid.
This is definitely my least instructive prompt, I think
but let's see what Bard comes up with.
Okay, so let's copy that HTML.
It also provides the CSS here
because I explicitly asked it to use CSS,
so I think it makes sense that it provides the CSS for us,
but we're not going to worry about that right now.
Okay, so it has a section with a class called cards.
Each card is an article element.
Each element kind of mixes up the content here,
which I like, and it only generated three, but that's okay.
This looks good. No notes.
The last thing we'll do is create an article,
and so this will be the biggest HTML section we have.
Finally, I'd like to create a simple article layout
with a headline, author byline, a featured image,
let me add the comma there, a featured image
and the article itself.
Then under the article,
there should be date and categories.
Please be sure to use SEO friendly accessible markup
using the appropriate HTML tags, properties, and schema.
I'm going to specifically ask you to use schema here
because we want search engines to know
when we're using a date
and the blog post and things like that.
Okay, so looking at the results of this.
This looks good.
It is using the date, time, and a time tag, which is good.
I like to look for that.
It is including the schema separately,
which I think is strange.
So we're going to have to kind of copy two things here.
So we'll grab that,
and then we will put it in our article.html.
Now, I could ask it to just include the item scope here,
but I think it'll be faster for me to copy and paste.
And everything else looked good here.
So there you have it.
We have a set of these items that we can use.
We have some atomic parts.
Now, let's see if we can get some full layouts going.