All language subtitles for 16. Website Development Page - Setup

Let's get started on the last of these services pages.

The Web site development page.

So we'll begin by coming over and on our components folder create a new file and we'll name that our

Web sites dot J.S. here we can import react from react.

Import the link from react router Dom import make styles and use theme from app material.

Dash UI such core sash styles or import the grid from app material UI slash core grid.

Import the icon button from at materials dash UI slash core slash icon button import typography from

app material dash UI slash core slash typography import use media query from material UI use media query

and lastly import the hidden component from material dash UI slash core slash hidden.

Now we can create our constant of use styles with our Make styles hook theme arrow function return the

object and then export default our function websites sites open it up create our consent classes use

styles create a constant theme use theme and return are grid container direction column bam you will

probably have that perfectly memorized by the time you finish this course let's go to the custom software

page and we'll scroll down and let's grab this first grid item with the heading in the arrows we'll

grab that first grid item container and we will copy that and we'll come over to the websites and we'll

paste that in just like we did before just like we did before.

We also need to come up and let's create our constant of matches medium with the use media query with

our theme break points down for medium and then the constant matches X as with the use media query for

the extra small breakpoint

extra small then let's come up and let's import back arrow from assets back arrow and import forward

arrow from assets slash forward arrow then we need to come over to the app DOJ s file and let's copy

any of the render props and scroll down to where we have our component for the website and we'll paste

this in.

Change this to Web sites and then scroll up and import the Web sites from dot slash Web sites let's

save this now and we'll get an error because we haven't saved this file at all.

But let's finish it up.

Take props as the input and see.

I think that was the last thing.

So let's save that now and the page will refresh.

And here we see our title again.

Let's go back to the custom software page real quick and let's copy these first three styles.

Once again flip back over and paste those inside of our styles object and we'll save this.

And now the heading is styled so close our custom software.

And then we need to change the routes for our arrows to make sure that our navigation is going to the

right place.

So now that we're going to be on the website development page it's changed that title Roll clicks.

We don't forget website development page the back arrow is going to take us back to the mobile apps

page.

So let's say back to the Iaw slash Android app development page and then our forward arrow actually

make sure the prop stops sets select index that will be set to 2 and then the forward arrow will be

taking us to these slash services route.

So since we're on the last services page the Web site's development the Web site development page we're

just going to want to go in a big circle and take it back to the services page now.

So we'll say forward to the services not.

Services and services page and then we will change the set selected index property to zero.

I will make sure the services page is selected in our menu.

So if we save this we can now see the page refresh and if we click the forward arrow it takes us to

the services page.

We can go to the custom software development page.

Use its forward arrow to go to the IRS and Android app development page and use the forward arrow again

to go to the Web site development page and then we can go all the way backwards as well.

So that's a nice little bit of extra functionality for our desktop users but let's go back to the Web

site development page and we need to change the paragraphs here.

So I'm going to open up the design file and I'm going to scroll on down to the Web site development

page and let's copy these two paragraphs out of here.

So paste in the first one copy the second paragraph we don't need an extra space copy the second paragraph

we'll paste that in and then we do not need these last two typography components.

So we'll get rid of those and we can minimize the design file for now and save the page and we'll see

now the correct text is on the page.

Now we can start working on the next row for the content of this page.

So it will come down and underneath the previous grid items so with only one grid tag underneath us

let's open up a new grid item container direction of row.

And with the class name remember of classes dog row container to make sure we have the appropriate borders

we can open that up and inside this we will have to grid items.

So might create two of these grid items right now.

And then inside of the first grid item we will have a grid container with a direction of column.

The reason that I have a grid item wrapping the grid container instead of having a grid item container

here is because I don't want this to be taking up the 100 percent width of the screen that is allocated

with the container prop.

So by nesting it like this it will make the alignment between these outer two grid items much easier

so that's always something to keep in mind that 100 percent with from the container prop it's not always

desirable.

And so you may have to nest the container within an external item sometimes which then allows you to

specify the position of all of this content by specifying the justify in a line items properties on

the wrapping row.

And that will move around these items irrespective of the content inside.

Whereas otherwise if this was taking up 100 percent of the width it wouldn't be able to be moved around

by our line items and justify properties.

So that's something that you may have to mess with some times in your own projects inside of this container.

Direction of column.

We're gonna want a grid item and that will wrap a typography variant of H four with the gutter bottom

property.

And then this will say analytics.

All right.

And underneath this great item we will have another grid item and this will wrap our image with a source

of analytics and an old of graph with magnifying glass revealing ones and zeros.

So pretty details all tag on that one but I think that that's good.

And then we need to come up and import our analytics image.

So underneath here we'll import the analytics from our assets analytics.

And while we're here let's go ahead and import s e o from assets such as C O import outreach from assets

slash outreach and then import e commerce from assets e commerce.

Now we can scroll back down and let's save the page so all of this will refresh and you can see we already

have our analytics titles sitting on top of our analytics icon that looks really good.

Let's go ahead and now in this second grid item that one that we had left empty.

Let's go ahead here and add a typography variance of body one and we can open this up and inside of

here we can open up the design file real quick and go into this paragraph.

Copy that text and paste that right into our code.

So then we can save the page and we'll see that refresh and you can see that our text is actually sitting

down below it we can go ahead and fix this if we come up to the RO container and let's add in a line

items property here and add that of center.

And since we're in a direction of row and the line items specifies the cross axis that's going to be

centering of the items along the vertical axis which should put our text here in the middle of the icon

but then we also need a max width on our paragraph to make sure that it doesn't take up so much space

like that.

So on our paragraph here let's add a class name of classes dot paragraph container and then I will come

up to our style objects and add the paragraph or graph container and it will set this style to a max

width of 30 m and let's save the page and we'll see it jump and you can see that it did exactly what

we had wanted is a max width so that the text was not spanning the full within the page and was now

sitting alongside the icon and then by specifying the align items of center we moved it from sitting

here at the top to being down in the center vertically with this icon.

So that was really good and matches the design file I like to nit pick of course though and I want to

change a little thing where this magnifying glass I have it sticking out I'll side the graph and so

that's making it align with the title of to the top with the end here of the magnifying glass and I'd

really like the bar graph to be aligned with the title instead.

So I'd give the magnifying glass kind of a hanging overlook to it.

So let's go ahead and on our analytics image.

So down here with our analytics image let's add a style set to a margin left of negative two point seventy

five m and we can save that and it will jump over and you can see that that looks very much more nicely

aligned the rest of the page is just going to be repeating this section and then changing the icon title

and the text for the different section content but that structure is going to be the exact same.

So this is a good place to stop and take a break and we'll finish that off in the next video.