1
00:00:06,750 --> 00:00:08,250
In this section.

2
00:00:08,250 --> 00:00:12,960
Let's build portfolio websites using React.

3
00:00:13,230 --> 00:00:21,690
We are not going to use any CSS framework like bootstrap or tearing CSS, but instead we are going to

4
00:00:21,690 --> 00:00:27,840
use our custom CSS and HTML to build something like this.

5
00:00:28,050 --> 00:00:33,450
One cool thing about this project is that it is really responsive.

6
00:00:33,480 --> 00:00:42,510
If I reduce the browser window or size, you can see how the elements are being arranged like that.

7
00:00:42,510 --> 00:00:45,600
And this is what we are going to build.

8
00:00:45,720 --> 00:00:46,290
All right.

9
00:00:46,290 --> 00:00:48,810
Let's get started with React.

10
00:00:48,840 --> 00:00:49,480
Great.

11
00:00:49,500 --> 00:00:55,080
I have already created React projects with default configuration.

12
00:00:55,170 --> 00:00:58,950
Before you continue, let's do some housekeeping here.

13
00:00:58,980 --> 00:01:06,900
Inside the SLC, let's remove the app dot CSS file because we are going to write everything from scratch.

14
00:01:06,930 --> 00:01:08,700
I don't need this file.

15
00:01:08,730 --> 00:01:10,320
Let me delete it.

16
00:01:10,320 --> 00:01:18,660
And then when you go to update JS file because we remove the CSS, let's remove the imports and everything

17
00:01:18,660 --> 00:01:19,500
from here.

18
00:01:19,710 --> 00:01:25,740
And inside this day, let's remove everything, including the class name.

19
00:01:28,130 --> 00:01:28,790
Good.

20
00:01:28,820 --> 00:01:39,260
Next is let's go into the index and here let's remove this comment and let's remove the report data

21
00:01:39,260 --> 00:01:46,340
and then let's maintain the index, of course, because we are going to use that one as a global CSV

22
00:01:46,340 --> 00:01:47,240
for application.

23
00:01:47,420 --> 00:01:55,970
So inside the index, let's remove this one and let's remove this font family here and let's reset everything

24
00:01:55,970 --> 00:02:04,730
back to default that is pattern to zero and then box in to border box.

25
00:02:04,730 --> 00:02:07,700
Now we are done with the housekeeping.

26
00:02:07,790 --> 00:02:11,480
The next step is we are going to use font.

27
00:02:11,480 --> 00:02:16,160
Awesome to have something like this one you see here.

28
00:02:16,190 --> 00:02:22,010
If you go to the services page you can see I use font awesome for this.

29
00:02:22,550 --> 00:02:24,410
So let's go ahead and use font.

30
00:02:24,410 --> 00:02:25,190
Awesome.

31
00:02:25,190 --> 00:02:34,340
If you go to font, also make sure that you log in after I log in, then click on Manage Kids and next

32
00:02:34,340 --> 00:02:36,380
is click on three icons.

33
00:02:37,290 --> 00:02:40,290
And click on copy after copy.

34
00:02:40,290 --> 00:02:46,730
And let's go to the public and then index the HTML and inside the head tag.

35
00:02:46,740 --> 00:02:49,080
Let's place the font.

36
00:02:49,080 --> 00:02:49,770
Awesome.

37
00:02:49,770 --> 00:02:52,560
So our code is one asked font.

38
00:02:53,550 --> 00:02:54,390
Awesome.

39
00:02:54,510 --> 00:02:57,300
And I will pass it as that.

40
00:02:57,600 --> 00:03:02,070
The next thing that we need to install is called Google Fonts.

41
00:03:02,070 --> 00:03:07,550
And if you go to fonts, Google, we can select any font of your choice.

42
00:03:07,560 --> 00:03:13,290
I selected play Roboto and Sarah, so you can go ahead and search.

43
00:03:13,320 --> 00:03:17,940
Let's say you are looking for play fonts, search and hit enter.

44
00:03:17,940 --> 00:03:25,500
And this is a font I used and you can scroll down and select the style based on your need.

45
00:03:25,620 --> 00:03:33,630
And after you finish, click on this icon and you can see all the font that you have selected and then

46
00:03:33,630 --> 00:03:43,680
under use on the web, click on links and let's copy this one and let's go to our HTML again and after

47
00:03:43,680 --> 00:03:44,820
the font, awesome.

48
00:03:44,820 --> 00:03:47,040
I'm going to add my Google fonts.

49
00:03:47,040 --> 00:03:50,910
So comment here and say Google font.

50
00:03:52,580 --> 00:03:56,030
And let me paste that and that is it.

51
00:03:56,060 --> 00:04:01,190
Lastly, I'll provide the images that we are going to use for this project.

52
00:04:01,310 --> 00:04:06,410
So I'm going to copy and paste the folder inside my CRC.

53
00:04:06,530 --> 00:04:11,630
Next step is let's run our server to make sure that everything is correct.

54
00:04:11,630 --> 00:04:19,070
So let me open the terminal and Mickey's of John starts or NPM run starts.

55
00:04:19,519 --> 00:04:20,550
All right.

56
00:04:20,570 --> 00:04:23,300
Our React app is up and running.

57
00:04:23,330 --> 00:04:24,500
The next video.

58
00:04:24,530 --> 00:04:27,710
Let's get started with the nav bar.