(upbeat music)
- [Narrator] So, how did it go?
Were you able to solve the challenge?
Let's see how I solved this.
First I'll navigate to VS code
and inside the pages directory
add a new page called about.vue.
And in here, we want to have a template where
we would add name and bio.
So for that, I would add a div
and a heading
with my name
and paragraph with my bio.
Now we have the template set up,
we would run the common MPM run
dev to start up to local development mode.
Now if we navigate to the browser,
we would see, like, very minimal looking page with what
I added the H one and the paragraph.
Let's add a bit of CSS to this
to make it look more presentable.
So I'll close this and add a style section here.
And in here I will add a class called container
and style that to have, maybe we just want to
increase the font size for now.
So we would set that text pixels and make the texts
centered.
So align the text to the center.
And let's see what that looks like.
Ooh. So we have ES links yelling
at us to fix these errors.
So the first thing here is we need to always
add an extra line towards the end
and just have one space between both.
And finally the component name should be about,
it should be more toward.
To fix that, I always like to add
a script tag and add a name
for the components and give that make it more toward, right?
So about speech.
So these arrows stop right?
To improve this,
I will just add, like, a background and a border
probably either a background color or a border.
So let's just add targets the body and add a border
of eight pixels solid, I like the color salmon.
And we want to set the margin here
to zero.
And yeah, looks good.
And finally make the height full screen.
So 100 view VH should do it.
Nice.
I think this is good.
This is where I'd pause this in terms of styling
but the idea is that we can generate a new page
and style it, add contents to it
and even make it dynamic here in the script stack.
I know that you'll try this challenge,
and I hope you had way better designs than I did.
And you found this challenge interesting.