Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,090 --> 00:00:07,900
The custom software development page is going to give us a great taste of how we can use the grid components
2
00:00:08,110 --> 00:00:12,520
to create really unique and complex layouts.
3
00:00:12,520 --> 00:00:19,540
This is the first of our three services pages and they'll all have a couple common items.
4
00:00:19,540 --> 00:00:25,210
If we come over to these screenshot you'll see that we have some text up at the top.
5
00:00:25,240 --> 00:00:31,660
We have some icons down in the middle and we also have the arrows up at the top.
6
00:00:31,680 --> 00:00:38,640
I am going to be making another executive design decision and instead of having the arrow on the right
7
00:00:38,670 --> 00:00:44,400
being all the way in the right corner I'm actually just going to have that next to the paragraph so
8
00:00:44,400 --> 00:00:50,610
it won't be so far away and I just think from testing it that that seems to look a bit better but we'll
9
00:00:50,610 --> 00:00:57,390
be adding those arrows as an extra little secondary navigation allowing the user to quickly flip back
10
00:00:57,390 --> 00:01:00,410
and forth between the different services pages.
11
00:01:00,510 --> 00:01:07,140
So here on the custom software development page since it's the first page the back arrow would take
12
00:01:07,140 --> 00:01:13,620
you back to the services page and the forward Arrow would take you forward to the Iaw slash Android
13
00:01:13,620 --> 00:01:15,350
app development page.
14
00:01:15,720 --> 00:01:23,810
We'll only use these arrows on the desktop navigation and on the mobile site they will actually be hidden.
15
00:01:23,820 --> 00:01:26,860
Let's take a look at how we're going to structure this then.
16
00:01:27,260 --> 00:01:33,630
And it will start off like usual with a container for the entire page and then there's going to be our
17
00:01:33,630 --> 00:01:37,560
grid a container with a direction of column.
18
00:01:37,560 --> 00:01:44,400
The first item in this grid container direction column is the top item containing our arrows and text
19
00:01:44,760 --> 00:01:50,600
and that itself is a grid item container which will be laid out from left to right.
20
00:01:50,640 --> 00:01:58,590
And the second half which is also a grid item container laid out from left to right in our first grid
21
00:01:58,620 --> 00:01:59,670
item container.
22
00:01:59,820 --> 00:02:06,930
Our first item will be the arrow here on the left which is simply the grid item wrapping an image.
23
00:02:06,930 --> 00:02:13,980
And that will be the arrow and then the second grid item will actually be a grid item container with
24
00:02:13,980 --> 00:02:15,510
a direction of column.
25
00:02:15,510 --> 00:02:22,920
And this will allow us to stack that title and those paragraph texts on top of each other leaving Lastly
26
00:02:23,190 --> 00:02:28,450
our last arrow which is again a grid item with an image inside.
27
00:02:28,470 --> 00:02:36,210
So that is the three items in this top grid item container and in the second to grid item container
28
00:02:36,510 --> 00:02:44,940
we have the icon and its title which will be a grid item container with a direction of column wrapping
29
00:02:44,940 --> 00:02:49,620
a grid item that has a typography variant H for inside.
30
00:02:49,620 --> 00:02:52,370
And you can see that is our title save energy.
31
00:02:52,410 --> 00:02:58,270
And underneath that adjacent to that grid item is our grid item wrapping the image.
32
00:02:58,320 --> 00:03:04,830
And since those items are both within the container direction of column that is how we get them stacked
33
00:03:04,860 --> 00:03:07,140
on top of each other like that.
34
00:03:07,140 --> 00:03:11,580
And then of course our second item is the same similar structure.
35
00:03:11,580 --> 00:03:19,110
But this time it has this save time title but it is still just our grid item wrapping a typography component
36
00:03:19,170 --> 00:03:25,320
sitting on top of the other grid item wrapping our image in the last one follows the same structure
37
00:03:25,620 --> 00:03:28,120
as well with save money.
38
00:03:28,350 --> 00:03:33,110
We'll go back to the top and inside of our grid item container up there.
39
00:03:33,180 --> 00:03:42,170
We have the title now is a grid item typography variant H2 sitting on top of the typography variant
40
00:03:42,180 --> 00:03:48,840
body one with the other typography variant body ones as well all right.
41
00:03:48,880 --> 00:03:55,930
So this will be the first part of the custom software development page and that will be followed by
42
00:03:55,990 --> 00:03:59,370
this section containing two animations.
43
00:03:59,380 --> 00:04:05,770
So both of these icons are going to be animations but we'll start out with our container for this whole
44
00:04:05,770 --> 00:04:06,550
row.
45
00:04:06,550 --> 00:04:12,220
And remember this is already inside the container direction column for the entire page.
46
00:04:12,220 --> 00:04:16,520
So this just needs to be a grid item but also a container.
47
00:04:16,600 --> 00:04:22,450
And I put the direction of Rho on there explicitly just so you remember that this is being laid out
48
00:04:22,450 --> 00:04:23,920
from left to right.
49
00:04:24,040 --> 00:04:30,160
And a here will also be using the justify of space around and you can see that that is going to create
50
00:04:30,160 --> 00:04:31,780
this space in between.
51
00:04:31,780 --> 00:04:35,930
And it will actually also create space on the sides as well.
52
00:04:36,100 --> 00:04:42,340
So it'll make sure that we have enough padding around this but in this grid item container the first
53
00:04:42,400 --> 00:04:49,630
item within it will be the left hand item for our digital documents and data and that itself is going
54
00:04:49,630 --> 00:04:51,990
to be a grid item container.
55
00:04:52,030 --> 00:04:55,540
Notice here that is laid out from left to right.
56
00:04:55,540 --> 00:05:02,710
And then the second grid item is also a grid item container laid out from left to right.
57
00:05:02,710 --> 00:05:10,240
Within these item containers the first item is the text with our title and the body text.
58
00:05:10,240 --> 00:05:16,450
So that is going to be within a grid item container direction of column to get those stacking on top
59
00:05:16,450 --> 00:05:17,470
of one another.
60
00:05:17,620 --> 00:05:24,090
And that is followed by the grid item with our lady component for the animation.
61
00:05:24,110 --> 00:05:30,820
The second item container follows a similar structure except that it has its animation first.
62
00:05:30,900 --> 00:05:38,600
And so that is our grid item wrapping the body animation followed by the grid item container wrapping
63
00:05:38,600 --> 00:05:39,830
the text.
64
00:05:39,890 --> 00:05:46,310
And that is with a direction of column again and inside of this container direction column you have
65
00:05:46,310 --> 00:05:54,530
first the item wrapping your title typography variant H 4 followed by the item for all of your other
66
00:05:54,620 --> 00:06:00,400
typography is or in this case we might even just have all the typography in one item as well.
67
00:06:00,470 --> 00:06:06,320
It just depends on whether or not we need specific alignment for individual items or whether or not
68
00:06:06,320 --> 00:06:12,770
the container will be able to align it for us but we'll get more into that as we go and only scale side
69
00:06:12,830 --> 00:06:18,230
you can see the is set up with the same structure with your typography varying in age 4 and the first
70
00:06:18,230 --> 00:06:27,110
grid item inside the item container direction column followed by your typography body one you always
71
00:06:27,110 --> 00:06:32,800
want to see if you can start by breaking down and design into these layouts like this.
72
00:06:32,900 --> 00:06:39,170
And if you're able to think about the grid structures when you see designs like this it will make it
73
00:06:39,170 --> 00:06:45,440
really easy to end up translating that into code no matter what the design looks like but we'll continue
74
00:06:45,440 --> 00:06:48,370
on and down farther on the page below.
75
00:06:48,380 --> 00:06:57,020
These are icons centered we are going to have this nice icon for root cause analysis again we'll need
76
00:06:57,020 --> 00:07:03,500
a container for this whole row which will actually be a grid item container since it's an item of the
77
00:07:03,500 --> 00:07:09,650
overall container of the page and again I said direction of row explicitly just so that we're aware
78
00:07:09,650 --> 00:07:16,100
of it but justify is set to center on this item container and that is obviously going to give us the
79
00:07:16,130 --> 00:07:23,550
censored look that we see within this item container we'll have just a one item and that will be the
80
00:07:23,550 --> 00:07:31,710
item for wrapping of the picture and our text so that will be an item a container with a direction of
81
00:07:31,770 --> 00:07:38,480
column so that the tree is sitting on top of the text instead of to the left of it within this item
82
00:07:38,480 --> 00:07:46,280
container we'll first have the item wrapping in image for our tree followed by the item for all of our
83
00:07:46,280 --> 00:07:54,200
text see that is a grid item container with a direction of column again to create these stacked layout
84
00:07:54,520 --> 00:08:01,130
and inside of this item container we have an item of for the title well your typography variant age
85
00:08:01,130 --> 00:08:10,810
4 and we also have the typography body ones as well lastly on the page it will be similar to the icons
86
00:08:10,810 --> 00:08:12,210
that we had above.
87
00:08:12,250 --> 00:08:16,420
And here we will again have two animations.
88
00:08:16,480 --> 00:08:23,080
We will have the container for the whole row and that is the item container with a direction of row
89
00:08:23,350 --> 00:08:30,010
again where they justify the space around with the first item for the automation section being a grid
90
00:08:30,160 --> 00:08:32,240
item container as well.
91
00:08:32,470 --> 00:08:38,460
And the section for the user experience design which will also be a grid item container.
92
00:08:39,440 --> 00:08:46,640
Each of these containers will have two items first for the text and that will be an item container direction
93
00:08:46,640 --> 00:08:55,230
column followed by an item wrapping our lady component second side will be set up similarly with the
94
00:08:55,230 --> 00:09:01,560
grid item with the audio component first and then the grid item container direction column second and
95
00:09:01,560 --> 00:09:05,160
then inside of these item containers with the direction of column.
96
00:09:05,190 --> 00:09:08,610
We first have the item for our typography variant.
97
00:09:08,630 --> 00:09:16,980
H 4 followed by the typography for our body elements and the second side will be set up in the exact
98
00:09:17,100 --> 00:09:17,910
same way.
99
00:09:19,000 --> 00:09:24,400
So if you'd looked at the design file at first it may seem a little daunting of how are we going to
100
00:09:24,430 --> 00:09:30,850
put all that together and create all the correct alignments and make sure that it's responsive but hopefully
101
00:09:30,850 --> 00:09:37,240
walking through it like this and seeing all of the items in containers and how they're laid out on the
102
00:09:37,240 --> 00:09:38,080
screen.
103
00:09:38,110 --> 00:09:42,760
Hopefully that breaks it down a little more clearly for you and allows you to really wrap your head
104
00:09:43,000 --> 00:09:50,050
around how these items are allocating space and how you can use the different stacking of items and
105
00:09:50,050 --> 00:09:56,080
containers to align your different items to create any of the different layouts that we need.
106
00:09:56,080 --> 00:10:01,330
So hopefully again this is becoming more and more clear to you a skill that you'll continue to polish
107
00:10:01,360 --> 00:10:03,780
all the way through the end of the course and beyond.
108
00:10:03,790 --> 00:10:08,710
So let's continue and we'll start working on this page in the next video.
12755
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.