1
00:00:09,440 --> 00:00:16,460
In this video, we are going to render a couple of components that we may need for our project.

2
00:00:17,030 --> 00:00:24,440
And since this project is all about CSS or any CSS framework, I'm going to give you the components

3
00:00:24,440 --> 00:00:25,730
for each section.

4
00:00:25,730 --> 00:00:31,730
And again, you don't need to be familiar with having sources before you can continue on, but also

5
00:00:31,730 --> 00:00:36,380
you can use your own CSS framework or your own custom CSS.

6
00:00:36,380 --> 00:00:37,940
So let's get started.

7
00:00:38,090 --> 00:00:42,020
So this is where we left by rendering the log in page.

8
00:00:42,020 --> 00:00:49,250
When I go to log in, this is what we have and we are going to replace this one with tearing CSS form,

9
00:00:49,280 --> 00:00:50,840
likewise the home page.

10
00:00:50,840 --> 00:00:53,330
So let's get started with the homepage.

11
00:00:53,330 --> 00:00:54,950
So here we go.

12
00:00:55,190 --> 00:01:04,910
Inside the SLC components, let's create one folder and call it as home page and I'm going to drop the

13
00:01:04,910 --> 00:01:09,380
component for that and I'll provide this one also for you.

14
00:01:09,380 --> 00:01:12,440
And this is the home page component.

15
00:01:12,530 --> 00:01:15,740
The next step is let's go ahead and then render that.

16
00:01:15,740 --> 00:01:22,490
So inside the app, let's require the home page component and here we go.

17
00:01:22,640 --> 00:01:26,840
So we are going to create a route for that and going to be route.

18
00:01:26,840 --> 00:01:29,660
And the path is going to be.

19
00:01:30,860 --> 00:01:34,520
Forward slash meaning homepage and then the elements.

20
00:01:34,520 --> 00:01:38,090
And then the components is homepage.

21
00:01:40,550 --> 00:01:41,330
Let's save it.

22
00:01:41,430 --> 00:01:48,140
Now, let's have a look where we got some error here because there is no header found for that.

23
00:01:48,500 --> 00:01:51,980
So let's go ahead and also create a header component.

24
00:01:51,980 --> 00:01:57,380
So inside the components, let's create one for the core header.

25
00:01:58,550 --> 00:02:05,600
And as usual, I'm going to copy that component inside the header folder and that is it.

26
00:02:05,600 --> 00:02:07,280
So let's check it out and see.

27
00:02:07,280 --> 00:02:13,070
And this is what we have and you can change the image if you want it.

28
00:02:13,070 --> 00:02:16,130
So this is a home page component.

29
00:02:16,310 --> 00:02:16,710
Great.

30
00:02:16,710 --> 00:02:23,660
The next video, let's go ahead and then render the log in and then the registration form component.