Original subtitles

In the last video we did an in-depth breakdown of how we're going to create the custom a software development

page.

This is our first service.

We have listed.

And if we come over we still just have our dummy component on the screen.

But you saw what we're about to turn this into and hopefully that makes the code a lot more clearer

as to what it's doing as we go through and build it out.

So let's begin and we'll come over to the components folder and let's add a new file for our custom

software.

J.S. will open that up and we'll start off by importing a lot of the components that we're used to.

So we'll import react from react import lady from react or lobby or import the link from router Dom

import make styles and use theme from app material dash UI core slash styles and then we'll import the

grid from material UI core grid we'll import the icon button from material UI core icon button and then

we'll import the typography component from material UI typography.

And lastly we will import use media query from material UI slash core slash use media query.

Now it's come down and we'll create our constant of use styles with our Make styles function giving

us access to the theme from an arrow function that we will return in object and then down below.

Let's export default our function custom software open it up and create our constant of classes using

our use styles hook.

Now what's come over and we'll return a grid container direction equal to column and this will be our

wrapping grid for the entire page inside of the overall wrapping grid.

Let's add a grid item container with a direction of row and we'll open this up and this will have a

grid item if you remember from the walkthrough.

This is actually going to be the first arrow in that little extra navigation that we're adding here

on the services pages.

So what's come up and let's underneath these imports let's import the back arrow from dot dot slash

assets slash back arrow and we'll also import the forward arrow from assets forward arrow and now inside

of the great item that we have.

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

and then old of back to services page and then we can close that image and the icon button is simply

doing the same thing that the button component does except is specialized to deal with only containing

an image.

So it works perfectly for this case.

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

and we'll import the custom software file that we just created from dot slash custom custom software.

And underneath where we're rendering our dummy custom software component.

Let's now go ahead and we can copy that render proper from any of the other routes and paste that here

changing our route now to the custom software route so we can save that and our page will refresh now

and you can see the arrow that we have created on the screen let's keep going and get the rest of that

first section set up so we'll foot back over to the custom software page we can actually close out of

app J.S. and now we'll create a grid item adjacent to this grid item containing our arrow and this will

be a grid item container with a direction of column and this will be the container for our heading text

and the heading of paragraphs that we'd win over so let's start with a grid item.

And this will be for the title so we'll use a typography variant of H two and open this up to have the

text custom software development then we'll add a separate item underneath that grid item and this will

wrap the typography components for all of our body paragraphs.

So we'll create a typography variant of body one and then we'll add the paragraph prop and we can open

that up.

And now let's go over and switch to the design file.

So make sure that you have the adobe SD file open and you can come in here and let's just copy the text

right out of the design file so we'll make it all easier.

Sure not having to switch back and forth and you can actually just cover that up cover up the browser

with Adobe SD and then switch into the code.

Ed go ahead and paste that first paragraph and then we'll add another typography variance body one paragraph

we'll open that up and now I actually copy that blank typography component and paste it two more times.

So we have three empty ones to paste in the rest of the paragraphs.

So make sure you come and copy these over from the design files so you don't have to type any of this

paste that in.

Get that last one.

And there we go.

So let's close out of the design file for a little bit but leave it open actually if you're still going

to work because we will keep using it to copy over the rest of that text.

But for now let's go ahead and save this file.

We'll see the page refresh and now we've got our text on the screen although not perfectly styled for

sure let's keep going though and next to our grid item container direction column.

So adjacent to that grid item here let's add another grid item.

So just a grid item and this will contain an icon button which will wrap an image with a source of forward

arrow and then an ult of forward to IOW slash Android app development page and then close off the image

we can hit save.

We'll see the page refresh and our Arrow has appeared we're already on a good path for this page and

using our typography component really just makes it feel like it comes together so quickly because all

of those styles are automatically added to all of our text but this is a good place to stop for a minute

and take a break if you need one before we move on.

In the next video.