All language subtitles for 17. Website Development Page - Responsive Design

Like I've said in the last two videos the rest of this page is just going to be this same sort of structure

repeated for a couple of different icons.

So let's go ahead and we're going to copy this entire grid item the row.

We're going to copy that and let's paste that again.

And now we can change the title to the e commerce section and the image to the e commerce image that

we had imported.

And then we can remove that margin left and we'll change the alt to world outline made of dollar signs.

Let's go and open the design file real quick and we can come over to the Commerce section and let's

grab these two sentences and we'll put them typography and we can copy that typography component paste

that again and then and copy in our second sentence and then let's add the paragraph prop to both of

these typography components her graph and now we can hide the design file save the page.

And once this reloads you can see our new section let's move it over to the right end of the screen

where I had wanted it and so on this row container.

Let's add the justify property of flex and so we can save that and we'll see it.

Now jump over to the appropriate side of the screen I want to go and now add on the title here for e-commerce

add in the line of center we can save that.

And now that title is censored up with the icon which looks better in this case even though the left

a line looks better on that case in my opinion.

But we do have a bit of a little spacing problem here.

This paragraph is pressed all the way up against that icon right there.

So let's go and on the paragraph wrapping item and a style with a margin left margin left of one M.

save that and then we get just a nice little border here that looks the same as it is right there the

spacing here though you might notice is actually being caused by that little extra bar graph right there

a little part of the graph.

So technically it's press all the way against it but you can't really tell.

So it looks fine let's go ahead and come back over and we'll actually copy the entire analytics grid.

Item row again we'll copy that and paste it in underneath the e commerce section we'll change this now

to outreach and then change the image to outreach.

Change the ult to a megaphone and then it will remove this style here but then add these style on to

the paragraph wrapping item a style of the margin left of one m to be consistent with the spacing on

the other paragraphs so we'll then also want to open the design file and come over to our one paragraph

for the outreach section and we can paste that in over the paragraph we have there so we can minimize

that and save this now to see the page refresh and the outreach section has joined.

Well let's go up here and again we'll actually this time copy the e commerce sections so the e commerce

icon since it's already aligned to the right and we'll come underneath our grid item for the outreach

section and we'll just paste that in we can change the title appeared to MCO and then change the image

to the s EO image with an old and old of Web site standing on winners podium and that's why I like to

use the double quote because then you never have to escape a single quote within it.

But if I use the single quotes I couldn't use an apostrophe there had to escape it or something.

But using double quotes all the time just kind of gets around that I actually meant to set this title

to the full search engine optimization but then I even went here instead of the space let's add a line

break.

And so that way this will actually be stacked on top of each other.

It'll look a little bit better with our icon and if we come over to the design file real quick let's

go down to the SC O.S. and let's copy these sentences so we'll paste that one at the second one paste

in here and then let's copy this typography component paste it so that we can copy in our third sentence.

OK.

Now let's minimize this.

Save the page.

And once this reloads now we see these search engine optimization section it seriously looks like the

design file just jumped to life on our page automatically and I really like how they automatically share

the space and they just move into each other like that.

That looks really good but let's start messing with the spacing a little bit because these are definitely

too close to each other up here and all the icons in general are just it's a little too crammed right

now.

So let's go ahead and give this some spacing we'll start by coming up to the analytics section so here

and on this row container for the analytic section.

Let's add a style of margin top of 15 m and then on the e commerce section on this row container.

Let's add a style margin bottom 15 m and a margin top of 15 m then we'll come down to the S E O section.

Search engine optimization and on this row container will add a style of a margin top 15 m and the margin

bottom bottom of 15 m as well.

So if we go ahead and save that the page will refresh and you can see it's now much more spaced out.

This really looks good whitespace makes such a big difference in the readability and just the overall

feel of your design.

So that really improved it a lot and I like how this looks but let's go ahead and see how it starts

to respond when we shrink the screen.

You can see that it already jumped to a little bit of weird behavior here.

You don't even know what's going on.

So we definitely need to address some of this and instead of having these staggered layout how is the

left and right and the right and the left was actually as soon as we get down to our medium break point

when the title jumps into the center.

I think do we still actually have enough space here.

This layout looks ok but once we get down into here.

So once we get to the smaller breakpoint where there's no longer enough space that's when we really

need to make sure that everything on the rest of this page is centered as well so we can go ahead and

get this right to our medium break point and then go a little bit farther thing.

This should probably be around the small and will come up.

And let's add a matches small constant so our constant of matches S M where they use media query for

the theme break points down small and now we can scroll down and for all of the row containers for all

of our sections here.

Let's change the direction of row to a matches S M ternary statement setting column.

If that is true.

Otherwise leaving row will go ahead and copy that scroll down to the rest of these row containers and

we will paste that direction property in as well.

So we'll get that all the way down to our S O direction column.

We can save that and you can see that it jumps here a little bit so that it's sitting underneath OK.

I just figured out what that problem was that's causing that weird alignment how it's jumping there

we actually definitely don't want that.

So the problem was that we put the class's paragraph container on all the typography components instead

of on their actual containers.

So let's go ahead and cut that class name.

Put it on the grid.

Item wrapping those typography components and then get rid of those other ones so we don't need that.

We'll scroll up here.

See we don't need it here.

We want it on this grid item.

Paste the get rid of these paste the class here get rid of it here.

Paste on the grid item and now I think that was all of them.

So if we save this now the page will refresh and now or paragraphs are actually much shorter and properly

styled so that as we shrink all the way down you see they look fine all the way even in the medium breakpoint

still look very good until we get to the small break point where now they're being centered and it all

looks perfect all the way down we can still tweak this a little because this text here is actually still

left aligned even though it's in the center.

So we'll start up here on the analytics section the analytics section typography variant body one and

let's add in a line here of matches S M center otherwise undefined and then we can go ahead and copy

this in on all of these typography paragraphs for all the sections we're going to paste that align property

onto there.

So we don't need it on the title here on the body one and then on the body one body one body one we

can save that and this will refresh and it now all that text is center aligned as well if you remember

when we were up here at this larger break point we have a margin 1 m right here pushing that text to

the left of our icon.

But when we're shrunken down here that margin left 1 m is actually still being applied even though you

may not be able to see it.

So let's go and find all the places that where we used that margin left of 1 m and add a ternary statements.

Now check the matches small breakpoint and if that's true we'll set it to 0.

Otherwise we'll leave the 1 m and we can go ahead and copy that actually we'll scroll up and we'll paste

that here we'll paste it here and the analytics section didn't need it so we'll save that.

And the text will jump a little bit.

Probably can't tell but now it is perfectly centered we can go ahead and shrink this all the way down

and you'll see there's no horizontal scrolling but did the page has adapted perfectly to the smaller

layout.

I think that this looks really great except honestly looks like these titles.

They could also be centred here.

So when we added the line of small center or undefined on the body paragraphs let's go ahead and actually

put that onto our titles as well.

So there's analytics we already have it for e-commerce here on outreach and then on search engine optimization

it already has it as well.

So we'll save that and that will just make sure now our title is centered there.

And now it really is perfect for this smaller screen size.

I think this looks perfect and I love the way that it responds and just maintains that the spacing to

create the best user experience possible.

So if you noticed we're not even really resizing anything now we're really just changing the position.

Of these items on the page so that they take up the space in the most efficient way possible.

So that's one of the main concepts of responsive design one that I'm sure you've picked up on throughout

this course already.

We can go ahead and add the finishing touch to this Web site page.

If we come up and let's import underneath our images or import the call to action from slash UI slash

call to action and then underneath with only one grid item below us let's add a grid item for our call

to action with set value equal to props does set value closed off save the code the page refreshes and

our call to action has been properly added and it's responsive gives us everything looks great.

So we've finished it up.

We've knocked out all of these services pages now and I don't think it was too difficult.

I don't think that any of these were worse than you really could have imagined.

And I think that we definitely learned a lot about the flexibility of the grid components and how you

can use it in ways that you may not have even imagined to make some really cool looking layouts.

I really like this one and just how diverse layouts you're able to create with this but the fact that

they're all still so perfectly responsive to whatever screen size you want that just really impresses

me and is just another reason of why I love material UI so so so much.

But we can go ahead and definitely take a break.

Now if you've been working for a little bit because that was a milestone and now I believe that we're

actually halfway done with all of the pages on the site because we've completed the home page the services

page and then the custom software mobile apps and now the Web sites page as well.

So we have five completed pages on this Web site and the only pages left are the about us page the revolution

page the Contact Us page and the Free Estimate page.

So with five down and only four left we're over the hill.

You've made it through the bulk of the work and the rest should be smooth sailing from here.