Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,220 --> 00:00:06,470
With our animation in place we're ready to get started on building the.
2
00:00:06,490 --> 00:00:14,890
Hero block where the animation is if you don't remember exactly what the hero block looked like.
3
00:00:14,960 --> 00:00:22,400
Go ahead and check the design file and open that up as we're building it as a reference and try to imagine
4
00:00:22,460 --> 00:00:30,050
how you would structure the grid containers and items to create the layout that I designed.
5
00:00:30,110 --> 00:00:36,770
We'll go ahead though and jump over to the code editor with our project directory open and we'll get
6
00:00:36,770 --> 00:00:40,510
started and here we are.
7
00:00:40,520 --> 00:00:45,810
And let's go up and we'll start by underneath the make styles import.
8
00:00:45,830 --> 00:00:57,160
Let's go ahead and import the grid component from material UI core grid then we'll come down to our
9
00:00:57,160 --> 00:01:04,300
return statement and let's make this a multi line statement by wrapping that with parentheses and we
10
00:01:04,300 --> 00:01:06,720
can go ahead and open this up.
11
00:01:06,760 --> 00:01:11,440
And here I'm going to start with a grid component.
12
00:01:11,470 --> 00:01:12,940
We'll open that up.
13
00:01:12,940 --> 00:01:21,800
And this is going to be the grid item which holds all of the content for our home page the home page
14
00:01:21,860 --> 00:01:24,420
is built kind of in blocks.
15
00:01:24,440 --> 00:01:30,530
And each of these blogs sits on top of one another with the hero block at the top.
16
00:01:30,530 --> 00:01:37,040
And then our services block the revolution block and you'll see that style as you go through the design
17
00:01:37,040 --> 00:01:43,640
file and sense all of these blocks are sitting on top of one another from top to bottom.
18
00:01:43,640 --> 00:01:52,720
We're actually going to want this outer grid component to be a container with a direction of a column.
19
00:01:52,790 --> 00:01:58,520
And so that's going to align all of the blocks for the home page from top to bottom.
20
00:01:58,700 --> 00:02:03,120
So that means we need to start with a grid item.
21
00:02:03,260 --> 00:02:09,810
And this is going to contain all of the hero block content inside that grid item.
22
00:02:09,890 --> 00:02:16,200
We're going to need a another grid container that will contain the grid items for the hero block.
23
00:02:16,310 --> 00:02:23,180
And the first item in that is going to be all of the text with the slogan bringing West Coast technology
24
00:02:23,210 --> 00:02:24,550
to the Midwest.
25
00:02:24,560 --> 00:02:27,620
That is going to be our first item that we're going to want.
26
00:02:27,620 --> 00:02:31,610
On the left and on the right we're going to want our animation.
27
00:02:31,610 --> 00:02:36,870
And so with those two great items I just said that we're going to want it from a left to right.
28
00:02:36,890 --> 00:02:44,810
And so this is going to be a grid container with a direction direction of row.
29
00:02:44,810 --> 00:02:45,810
And that's the default.
30
00:02:45,810 --> 00:02:50,100
But I'm going to set it there just to be extra clear about what's going on.
31
00:02:50,120 --> 00:02:58,490
So in this grid container I said that the first grid item that we're going to have is going to be for
32
00:02:58,490 --> 00:03:05,810
all of the text in our hero BLOCK We're going to start by getting all of this on the screen and then
33
00:03:05,810 --> 00:03:09,280
in the next video we're going to go ahead and style at all.
34
00:03:09,290 --> 00:03:20,710
So we'll start with just a div right now containing the text bringing bringing in West Coast technology.
35
00:03:20,870 --> 00:03:26,900
And then here I'm going to insert a line break and then right after the line break we're going to say
36
00:03:26,930 --> 00:03:31,270
to the mid mid west.
37
00:03:31,850 --> 00:03:40,000
So there's our slogan and let's go ahead now and create the other grid item next to it which we said
38
00:03:40,020 --> 00:03:42,870
was going to be holding our animation.
39
00:03:42,890 --> 00:03:50,100
So we'll copy the audio component up into there but we haven't actually finished the text yet.
40
00:03:50,210 --> 00:03:57,290
Because if you look at the design file we also wanted to have a learn more button and a free estimate
41
00:03:57,290 --> 00:03:59,720
button next to the text as well.
42
00:03:59,720 --> 00:04:02,530
So we need to come up and underneath our grid.
43
00:04:02,530 --> 00:04:03,740
Important Statement.
44
00:04:03,740 --> 00:04:05,390
Let's import the.
45
00:04:05,420 --> 00:04:15,930
Button component from material dash UI slash core slash button we're going to want to place these buttons
46
00:04:15,960 --> 00:04:22,470
underneath our slogan but I'm actually going to put them in their own container so that they're easier
47
00:04:22,470 --> 00:04:23,680
to align.
48
00:04:23,790 --> 00:04:31,530
So let's create a another grid container inside underneath the div and each of our buttons is going
49
00:04:31,530 --> 00:04:33,690
to be inside of a grid item.
50
00:04:33,690 --> 00:04:41,460
So we'll start with a grid item here for our button and we're going to set a variance on this button
51
00:04:41,700 --> 00:04:48,600
to contained which we'll give it that field in look and so we'll open that up and give it the text free
52
00:04:48,990 --> 00:04:54,030
estimate and then we'll come down and make sure you're getting all this in the right place.
53
00:04:54,030 --> 00:05:03,570
So underneath that grid item will add another grid item and this will be a button of variance outlined
54
00:05:04,230 --> 00:05:10,770
and then we'll close that up and inside here put the text learn more now.
55
00:05:10,820 --> 00:05:18,810
I also want a little arrow inside the learn more button and to do this I've actually set up this button
56
00:05:18,900 --> 00:05:26,280
arrow dot J.S. component in your UI folder and you actually won't need to make this I'm going to attach
57
00:05:26,310 --> 00:05:32,160
this component to this video so you can download it and then you'll just need to move that into your
58
00:05:32,160 --> 00:05:38,170
UI folder I found when I was first building this site.
59
00:05:38,310 --> 00:05:44,590
I want to use this arrow within different buttons across all the different pages on my Web site.
60
00:05:44,700 --> 00:05:50,940
And so instead of copying this little button over and over again I decided to make it a little basic
61
00:05:50,940 --> 00:05:56,190
react component so that I could actually just import and customize it.
62
00:05:56,240 --> 00:06:05,210
You can see it takes props and it uses these props to set a class name from our class prop the width
63
00:06:05,630 --> 00:06:14,000
for the arrow the height of the arrow as well as the fill of the arrow so we can change its color its
64
00:06:14,060 --> 00:06:21,000
size and we can pass in whatever class we want if we need to customize these styles further.
65
00:06:21,170 --> 00:06:23,570
Let's go ahead and close out of this now.
66
00:06:23,630 --> 00:06:27,730
And underneath our button import let's go ahead and we'll import the.
67
00:06:27,770 --> 00:06:38,160
Button arrow from up one directory components and then UI and button arrow.
68
00:06:38,200 --> 00:06:41,150
Now we can go ahead and inside of here.
69
00:06:41,200 --> 00:06:43,650
Let's go ahead and we'll open this up.
70
00:06:43,690 --> 00:06:45,410
Put our learn more.
71
00:06:45,490 --> 00:06:54,250
And then underneath that learn more text we will render our button arrow and let's set a width equal
72
00:06:54,250 --> 00:07:04,200
to 15 pixels and a height height also equal to 15 pixels and a feel equal to red.
73
00:07:04,210 --> 00:07:07,590
And I'm just doing that so we can actually see it on the screen.
74
00:07:07,750 --> 00:07:11,890
And let's go ahead and close up that button arrow as well.
75
00:07:11,890 --> 00:07:20,200
So if we go ahead and save this now we'll see our page refresh and we can now see a structure much closer
76
00:07:20,230 --> 00:07:24,450
to what the hero block in the design file looks like.
77
00:07:24,520 --> 00:07:27,730
Obviously there are still a lot of changes we need to make.
78
00:07:27,730 --> 00:07:31,540
But you can see that we have the skeleton in place.
79
00:07:31,560 --> 00:07:38,310
Let's go ahead and finish this up and style it and make it look exactly like that design file as well
80
00:07:38,310 --> 00:07:42,780
as responsive for different screen sizes in the next video.
8965
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.