Original subtitles

The custom software development page is going to give us a great taste of how we can use the grid components

to create really unique and complex layouts.

This is the first of our three services pages and they'll all have a couple common items.

If we come over to these screenshot you'll see that we have some text up at the top.

We have some icons down in the middle and we also have the arrows up at the top.

I am going to be making another executive design decision and instead of having the arrow on the right

being all the way in the right corner I'm actually just going to have that next to the paragraph so

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

be adding those arrows as an extra little secondary navigation allowing the user to quickly flip back

and forth between the different services pages.

So here on the custom software development page since it's the first page the back arrow would take

you back to the services page and the forward Arrow would take you forward to the Iaw slash Android

app development page.

We'll only use these arrows on the desktop navigation and on the mobile site they will actually be hidden.

Let's take a look at how we're going to structure this then.

And it will start off like usual with a container for the entire page and then there's going to be our

grid a container with a direction of column.

The first item in this grid container direction column is the top item containing our arrows and text

and that itself is a grid item container which will be laid out from left to right.

And the second half which is also a grid item container laid out from left to right in our first grid

item container.

Our first item will be the arrow here on the left which is simply the grid item wrapping an image.

And that will be the arrow and then the second grid item will actually be a grid item container with

a direction of column.

And this will allow us to stack that title and those paragraph texts on top of each other leaving Lastly

our last arrow which is again a grid item with an image inside.

So that is the three items in this top grid item container and in the second to grid item container

we have the icon and its title which will be a grid item container with a direction of column wrapping

a grid item that has a typography variant H for inside.

And you can see that is our title save energy.

And underneath that adjacent to that grid item is our grid item wrapping the image.

And since those items are both within the container direction of column that is how we get them stacked

on top of each other like that.

And then of course our second item is the same similar structure.

But this time it has this save time title but it is still just our grid item wrapping a typography component

sitting on top of the other grid item wrapping our image in the last one follows the same structure

as well with save money.

We'll go back to the top and inside of our grid item container up there.

We have the title now is a grid item typography variant H2 sitting on top of the typography variant

body one with the other typography variant body ones as well all right.

So this will be the first part of the custom software development page and that will be followed by

this section containing two animations.

So both of these icons are going to be animations but we'll start out with our container for this whole

row.

And remember this is already inside the container direction column for the entire page.

So this just needs to be a grid item but also a container.

And I put the direction of Rho on there explicitly just so you remember that this is being laid out

from left to right.

And a here will also be using the justify of space around and you can see that that is going to create

this space in between.

And it will actually also create space on the sides as well.

So it'll make sure that we have enough padding around this but in this grid item container the first

item within it will be the left hand item for our digital documents and data and that itself is going

to be a grid item container.

Notice here that is laid out from left to right.

And then the second grid item is also a grid item container laid out from left to right.

Within these item containers the first item is the text with our title and the body text.

So that is going to be within a grid item container direction of column to get those stacking on top

of one another.

And that is followed by the grid item with our lady component for the animation.

The second item container follows a similar structure except that it has its animation first.

And so that is our grid item wrapping the body animation followed by the grid item container wrapping

the text.

And that is with a direction of column again and inside of this container direction column you have

first the item wrapping your title typography variant H 4 followed by the item for all of your other

typography is or in this case we might even just have all the typography in one item as well.

It just depends on whether or not we need specific alignment for individual items or whether or not

the container will be able to align it for us but we'll get more into that as we go and only scale side

you can see the is set up with the same structure with your typography varying in age 4 and the first

grid item inside the item container direction column followed by your typography body one you always

want to see if you can start by breaking down and design into these layouts like this.

And if you're able to think about the grid structures when you see designs like this it will make it

really easy to end up translating that into code no matter what the design looks like but we'll continue

on and down farther on the page below.

These are icons centered we are going to have this nice icon for root cause analysis again we'll need

a container for this whole row which will actually be a grid item container since it's an item of the

overall container of the page and again I said direction of row explicitly just so that we're aware

of it but justify is set to center on this item container and that is obviously going to give us the

censored look that we see within this item container we'll have just a one item and that will be the

item for wrapping of the picture and our text so that will be an item a container with a direction of

column so that the tree is sitting on top of the text instead of to the left of it within this item

container we'll first have the item wrapping in image for our tree followed by the item for all of our

text see that is a grid item container with a direction of column again to create these stacked layout

and inside of this item container we have an item of for the title well your typography variant age

4 and we also have the typography body ones as well lastly on the page it will be similar to the icons

that we had above.

And here we will again have two animations.

We will have the container for the whole row and that is the item container with a direction of row

again where they justify the space around with the first item for the automation section being a grid

item container as well.

And the section for the user experience design which will also be a grid item container.

Each of these containers will have two items first for the text and that will be an item container direction

column followed by an item wrapping our lady component second side will be set up similarly with the

grid item with the audio component first and then the grid item container direction column second and

then inside of these item containers with the direction of column.

We first have the item for our typography variant.

H 4 followed by the typography for our body elements and the second side will be set up in the exact

same way.

So if you'd looked at the design file at first it may seem a little daunting of how are we going to

put all that together and create all the correct alignments and make sure that it's responsive but hopefully

walking through it like this and seeing all of the items in containers and how they're laid out on the

screen.

Hopefully that breaks it down a little more clearly for you and allows you to really wrap your head

around how these items are allocating space and how you can use the different stacking of items and

containers to align your different items to create any of the different layouts that we need.

So hopefully again this is becoming more and more clear to you a skill that you'll continue to polish

all the way through the end of the course and beyond.

So let's continue and we'll start working on this page in the next video.