0:00
hello everyone welcome to tutorial's
0:02
point my name is Faz and in this video
0:05
we will be creating this beautiful
0:07
reactjs project as you can see we have
0:10
this nav bar then we have this Banner
0:12
with the doctor and these two CTA
0:15
buttons in the next section we have
0:17
services with this H effect also we have
0:20
a doctor's component and then the health
0:25
logos moving on we have facilities
0:27
component with these two images some
0:30
text and a button we also have a
0:32
testimonials component and then finally
0:34
a footer we will be building this
0:37
beginner friendly project from
0:39
scratch if you like this project make
0:42
sure to comment down below and then we
0:44
will create a backend for this project
0:46
as well so make sure to watch this video
0:49
till the end and let's get started so I
0:51
have opened vs code and I have created a
0:54
folder named medic now open your
0:56
terminal and we'll create a react app
1:07
app now wait until the react project is
1:13
created okay so this process has been
1:16
completed successfully now let us clean
1:18
up some files I will remove these
1:20
unwanted files app. test.js index.css
1:23
okay so app. test.js logo report web by
1:27
vital setup tests let me delete the
1:29
these files also let me remove all the
1:32
pre-applied styling here and in app.js
1:39
one and let's call it hello world for
1:42
now okay let's remove the styling as
1:45
well in our index just remove these
1:50
things okay what else is there let me
1:53
remove the logo here okay now in our
1:55
public file we don't need these things
1:58
so let me just delete them for now and
2:03
index.html okay we can write here
2:11
landing page H save okay let's close all
2:16
of this and let's go back to
2:18
app.js now we are going to make our web
2:23
reactjs now let us start our application
2:26
now in the terminal simply write npm
2:28
start this will start our reactjs
2:37
course all right so this is our
2:39
application as you can see hello world
2:41
is written there now let me just go back
2:44
code okay let me uh remove this class
2:47
name we don't need this one and we are
2:50
going to start by creating our nav bar
2:53
all right let me just remove this div as
2:56
well I'm just going to wrap my app in
2:59
fragment right these are called react
3:01
fragments by the way okay now first
3:04
thing is that in our source folder I'm
3:06
going to create a new folder let's call
3:09
it Assets Now I'm going to store all my
3:16
okay so I'm just going to copy paste my
3:20
images folder in our assets as you can
3:23
see all of the images are here
3:28
great now you will find the code for
3:31
this video along with these images in
3:33
the uh Link in the description below
3:35
right it is a GitHub link so that you
3:37
can easily fork or download the code for
3:39
this video all right now let us get
3:41
started by building our naar firstly in
3:44
our source uh folder I'll create a new
3:46
folder let's call it components now
3:49
inside our component first one is going
3:51
to be of course Navar so I'll create a
3:54
new folder and I'll write naar now
3:57
inside naar I'll create a jsx F I'll
4:00
call it na. jsx and also a CSS file I'll
4:13
CSS all right now for our na bar.
4:17
jss for our na bar. jsx I'll write
4:21
rafc this is a shortcut to get our react
4:24
snippet now here we don't need this
4:26
import react I'm going to import our CSS
4:28
file so I'll write na bar. CSS all right
4:33
now we'll go into our app.js and here
4:36
we're going to import our Navar
4:38
component so I will write uh navbar and
4:43
as you can see it automatically will
4:44
import hit enter and there it is now hit
4:49
save let's go back to our browser to
4:51
check and as you can see it says now bar
4:54
but if you notice here as you can see
4:56
there is some pre-applied CSS as you can
4:58
see we have some Gap here so we need to
5:01
reset that right so I will go back to
5:07
code now inside our index.css I'm going
5:11
to write some pre-styling for our HTML
5:14
document margin will be
5:18
border sorry not border I meant padding
5:22
will be zero and box sizing would be
5:26
border box okay so let us save let us go
5:29
back to the browser and as you can see
5:31
the default styling is gone the gaps are
5:33
actually gone great let's go back to
5:40
code all right now before starting with
5:42
our naar I'm going to go to app.css and
5:46
I have already selected a font from
5:48
Google fonts so I will just copy and
5:51
paste it here so this is open Sans all
5:55
right and now for our HTML body I'm
5:59
going to going to have a font family of
6:03
open sense and the fallback font is
6:08
S hit save let's go back to browser to
6:11
check and as you can see the font is
6:14
changed let's go back to vual Studio
6:17
code and now let's finally start with
6:19
our naar that will be enough for this
6:21
video you will find the GitHub Link in
6:23
the description below you will also find
6:25
the links to other videos of this
6:27
project in the description now in the
6:29
next video we will build the Navar
6:31
component make sure to like this video
6:33
share it with your friends and I will
6:35
see you in the next one
