All language subtitles for 003 Getting Started With The Home Page_Downloadly.ir_en

[Maximillian Schwarzmuller] So now

we added the dose four pages.

It's now time to start filling them with some life.

And it's of course up to you

with which page you wanna start.

Now I'll start very classic with the starting page

with the HomePage here, and I'll start populating that page.

And on this HomePage, I wanna do two things.

I wanna output two things.

The first thing that should be rendered

is like a Hero section.

And that's just how we typically call that.

It's this wall -- section where we present our main product

or in the case of a blog, maybe ourselves.

So that's this hero section where we present ourselves.

And then the second part is the Featured Posts section.

Now we have no posts yet, but we can still start working

on that and just output some dummy content for the moment.

And we'll then replace the dummy content

with actual posts once we have some.

So these are the two kinds of things I wanna output here

and therefore in the component where we returned JSX,

I wanna have two main sections that will be output here.

Now I want to keep my page component relatively lean

and not put too much markup in here.

I also don't wanna add a Styling file

for the page component.

That is something you don't have to do

but something you will often see,

that page components are relatively lean focus

on getting data with getStaticProps if they need to,

something we will add later,

and don't do too much regarding styling or HTML.

Instead we use separate React components for that,

and we then just use those separate React components here.

So in the HomePage component

we could want to output a Hero component side

by side to a Featured Posts component.

And of course, we would need to wrap this with a fragment.

So with this Fragment component provided by React,

since we're not allowed to

have adjacent JSX elements otherwise.

Now of course, such a Hero

and Featured Posts component doesn't exist yet.

And hence, it's now our job to create it.

And therefore I'll add a brand new Components folder

on the root project level.

So side by side to the Pages folder

and the goal of this folder is to store all the

individual components that will be used in this project.

And in here, I'll add a new folder

the HomePage folder, because I wanna store

the HomePage specific components in there.

You can of course name this folder however you want though.

But I'll create that HomePage folder

in the Components folder.

And inside of that HomePage folder, I'll add two components.

The Hero component, and this Featured Posts component.

Now both components will also need some styling.

And since this is still no CSS course,

and I don't wanna bore you with writing CSS styles

you find styling files attached.

Attached you find two CSS files,

featured-posts.module.CSS and hero module.CSS.

And you should just download those two CSS files

and add them in that HomePage folder

in the Components folder side-by-side

to these two JavaScript files

because we're going to use these styles.

Now, of course you are free to bring your own styles

and tweak everything in the way you want.

These are just some basic styles which we can use

so that we don't have to write our own styles.

Now, one important word about those styles though,

in there in those files,

I'm using a feature called CSS variables.

I am extracting certain values like colors

but also sizes and dimensions from CSS variables.

And these CSS variables are defined in the Globals CSS file

which I gave you right from the start.

So, which was part of the starting project

you found in the last lectures.

And the interesting thing about CS modules is

that we now have one place where we can define

and manage our colors and our sizes.

And when we change it here

it will affect the entire application.

Now this is totally independent from Next.js

This is a default CSS feature.

I'm just using it here,

and I want to make you aware of that

in case you look into my CSS files

and wonder what these strange things are.

Now, that means that of course you can also

easily tweak your dimensions and colors

by simply changing the values in the Globals CSS file.

But with that out of the way, let's go

to the hero.js file and let's start working

on that and let's build that Hero component.