Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,080 --> 00:00:08,760
In the last video we did an in-depth breakdown of how we're going to create the custom a software development
2
00:00:08,760 --> 00:00:10,410
page.
3
00:00:10,420 --> 00:00:12,340
This is our first service.
4
00:00:12,340 --> 00:00:13,570
We have listed.
5
00:00:13,570 --> 00:00:18,880
And if we come over we still just have our dummy component on the screen.
6
00:00:19,060 --> 00:00:24,820
But you saw what we're about to turn this into and hopefully that makes the code a lot more clearer
7
00:00:24,910 --> 00:00:28,470
as to what it's doing as we go through and build it out.
8
00:00:28,480 --> 00:00:36,430
So let's begin and we'll come over to the components folder and let's add a new file for our custom
9
00:00:36,580 --> 00:00:38,100
software.
10
00:00:38,150 --> 00:00:45,550
J.S. will open that up and we'll start off by importing a lot of the components that we're used to.
11
00:00:45,550 --> 00:01:04,100
So we'll import react from react import lady from react or lobby or import the link from router Dom
12
00:01:04,720 --> 00:01:19,240
import make styles and use theme from app material dash UI core slash styles and then we'll import the
13
00:01:19,270 --> 00:01:34,780
grid from material UI core grid we'll import the icon button from material UI core icon button and then
14
00:01:34,810 --> 00:01:42,220
we'll import the typography component from material UI typography.
15
00:01:42,220 --> 00:01:54,570
And lastly we will import use media query from material UI slash core slash use media query.
16
00:01:54,620 --> 00:02:04,220
Now it's come down and we'll create our constant of use styles with our Make styles function giving
17
00:02:04,220 --> 00:02:11,990
us access to the theme from an arrow function that we will return in object and then down below.
18
00:02:12,020 --> 00:02:22,910
Let's export default our function custom software open it up and create our constant of classes using
19
00:02:22,910 --> 00:02:26,320
our use styles hook.
20
00:02:26,340 --> 00:02:36,810
Now what's come over and we'll return a grid container direction equal to column and this will be our
21
00:02:36,810 --> 00:02:43,690
wrapping grid for the entire page inside of the overall wrapping grid.
22
00:02:43,690 --> 00:02:52,990
Let's add a grid item container with a direction of row and we'll open this up and this will have a
23
00:02:52,990 --> 00:02:57,990
grid item if you remember from the walkthrough.
24
00:02:58,000 --> 00:03:04,090
This is actually going to be the first arrow in that little extra navigation that we're adding here
25
00:03:04,090 --> 00:03:05,800
on the services pages.
26
00:03:05,800 --> 00:03:14,920
So what's come up and let's underneath these imports let's import the back arrow from dot dot slash
27
00:03:15,430 --> 00:03:28,390
assets slash back arrow and we'll also import the forward arrow from assets forward arrow and now inside
28
00:03:28,390 --> 00:03:30,370
of the great item that we have.
29
00:03:30,430 --> 00:03:39,850
Let's add an icon button we'll open that up and in here we'll add our image with a source of back arrow
30
00:03:40,190 --> 00:03:50,590
and then old of back to services page and then we can close that image and the icon button is simply
31
00:03:50,590 --> 00:03:57,160
doing the same thing that the button component does except is specialized to deal with only containing
32
00:03:57,190 --> 00:03:58,240
an image.
33
00:03:58,240 --> 00:04:01,270
So it works perfectly for this case.
34
00:04:01,270 --> 00:04:08,500
We can go ahead and save this now and let's flip over to the app dot J.S. file and here let's go up
35
00:04:08,740 --> 00:04:18,820
and we'll import the custom software file that we just created from dot slash custom custom software.
36
00:04:18,910 --> 00:04:23,380
And underneath where we're rendering our dummy custom software component.
37
00:04:23,380 --> 00:04:30,010
Let's now go ahead and we can copy that render proper from any of the other routes and paste that here
38
00:04:30,220 --> 00:04:37,390
changing our route now to the custom software route so we can save that and our page will refresh now
39
00:04:37,630 --> 00:04:43,960
and you can see the arrow that we have created on the screen let's keep going and get the rest of that
40
00:04:43,960 --> 00:04:50,170
first section set up so we'll foot back over to the custom software page we can actually close out of
41
00:04:50,170 --> 00:04:57,820
app J.S. and now we'll create a grid item adjacent to this grid item containing our arrow and this will
42
00:04:57,820 --> 00:05:09,110
be a grid item container with a direction of column and this will be the container for our heading text
43
00:05:09,380 --> 00:05:15,980
and the heading of paragraphs that we'd win over so let's start with a grid item.
44
00:05:16,100 --> 00:05:24,710
And this will be for the title so we'll use a typography variant of H two and open this up to have the
45
00:05:24,710 --> 00:05:34,250
text custom software development then we'll add a separate item underneath that grid item and this will
46
00:05:34,250 --> 00:05:39,290
wrap the typography components for all of our body paragraphs.
47
00:05:40,090 --> 00:05:50,590
So we'll create a typography variant of body one and then we'll add the paragraph prop and we can open
48
00:05:50,590 --> 00:05:51,350
that up.
49
00:05:51,400 --> 00:05:55,700
And now let's go over and switch to the design file.
50
00:05:55,750 --> 00:06:03,940
So make sure that you have the adobe SD file open and you can come in here and let's just copy the text
51
00:06:04,210 --> 00:06:07,110
right out of the design file so we'll make it all easier.
52
00:06:07,100 --> 00:06:12,580
Sure not having to switch back and forth and you can actually just cover that up cover up the browser
53
00:06:12,610 --> 00:06:15,610
with Adobe SD and then switch into the code.
54
00:06:15,620 --> 00:06:27,040
Ed go ahead and paste that first paragraph and then we'll add another typography variance body one paragraph
55
00:06:27,550 --> 00:06:35,120
we'll open that up and now I actually copy that blank typography component and paste it two more times.
56
00:06:35,140 --> 00:06:39,580
So we have three empty ones to paste in the rest of the paragraphs.
57
00:06:39,580 --> 00:06:44,950
So make sure you come and copy these over from the design files so you don't have to type any of this
58
00:06:45,850 --> 00:06:47,710
paste that in.
59
00:06:48,270 --> 00:06:49,780
Get that last one.
60
00:06:49,870 --> 00:06:50,530
And there we go.
61
00:06:50,590 --> 00:06:54,910
So let's close out of the design file for a little bit but leave it open actually if you're still going
62
00:06:54,910 --> 00:06:58,740
to work because we will keep using it to copy over the rest of that text.
63
00:06:58,780 --> 00:07:01,840
But for now let's go ahead and save this file.
64
00:07:01,840 --> 00:07:08,080
We'll see the page refresh and now we've got our text on the screen although not perfectly styled for
65
00:07:08,080 --> 00:07:15,580
sure let's keep going though and next to our grid item container direction column.
66
00:07:15,700 --> 00:07:20,440
So adjacent to that grid item here let's add another grid item.
67
00:07:20,470 --> 00:07:30,160
So just a grid item and this will contain an icon button which will wrap an image with a source of forward
68
00:07:30,550 --> 00:07:43,880
arrow and then an ult of forward to IOW slash Android app development page and then close off the image
69
00:07:44,100 --> 00:07:45,410
we can hit save.
70
00:07:45,410 --> 00:07:53,390
We'll see the page refresh and our Arrow has appeared we're already on a good path for this page and
71
00:07:53,450 --> 00:07:59,290
using our typography component really just makes it feel like it comes together so quickly because all
72
00:07:59,290 --> 00:08:05,390
of those styles are automatically added to all of our text but this is a good place to stop for a minute
73
00:08:05,420 --> 00:08:08,120
and take a break if you need one before we move on.
74
00:08:08,120 --> 00:08:09,140
In the next video.
8460
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.