In this section.
Let's build portfolio websites using React.
We are not going to use any CSS framework like bootstrap or tearing CSS, but instead we are going to
use our custom CSS and HTML to build something like this.
One cool thing about this project is that it is really responsive.
If I reduce the browser window or size, you can see how the elements are being arranged like that.
And this is what we are going to build.
All right.
Let's get started with React.
Great.
I have already created React projects with default configuration.
Before you continue, let's do some housekeeping here.
Inside the SLC, let's remove the app dot CSS file because we are going to write everything from scratch.
I don't need this file.
Let me delete it.
And then when you go to update JS file because we remove the CSS, let's remove the imports and everything
from here.
And inside this day, let's remove everything, including the class name.
Good.
Next is let's go into the index and here let's remove this comment and let's remove the report data
and then let's maintain the index, of course, because we are going to use that one as a global CSV
for application.
So inside the index, let's remove this one and let's remove this font family here and let's reset everything
back to default that is pattern to zero and then box in to border box.
Now we are done with the housekeeping.
The next step is we are going to use font.
Awesome to have something like this one you see here.
If you go to the services page you can see I use font awesome for this.
So let's go ahead and use font.
Awesome.
If you go to font, also make sure that you log in after I log in, then click on Manage Kids and next
is click on three icons.
And click on copy after copy.
And let's go to the public and then index the HTML and inside the head tag.
Let's place the font.
Awesome.
So our code is one asked font.
Awesome.
And I will pass it as that.
The next thing that we need to install is called Google Fonts.
And if you go to fonts, Google, we can select any font of your choice.
I selected play Roboto and Sarah, so you can go ahead and search.
Let's say you are looking for play fonts, search and hit enter.
And this is a font I used and you can scroll down and select the style based on your need.
And after you finish, click on this icon and you can see all the font that you have selected and then
under use on the web, click on links and let's copy this one and let's go to our HTML again and after
the font, awesome.
I'm going to add my Google fonts.
So comment here and say Google font.
And let me paste that and that is it.
Lastly, I'll provide the images that we are going to use for this project.
So I'm going to copy and paste the folder inside my CRC.
Next step is let's run our server to make sure that everything is correct.
So let me open the terminal and Mickey's of John starts or NPM run starts.
All right.
Our React app is up and running.
The next video.
Let's get started with the nav bar.