All language subtitles for 3. Project Overview Continued

For the next set of pages we're really just going to be focused on refining our layout skills and implementing

that with the grid system.

So you'll see we'll start with this services page and it is actually almost exactly the same as the

little setup on the home page.

In the services section.

But this is kind of mirrored so that shouldn't be too hard to put together.

And we'll just kind of keep the ball rolling until we move on to the custom software development page

so each of these individual pages is going to introduce slightly more complex layouts and structures.

And so we'll have to be mindful of that especially as we're making it responsive for all screen sizes.

But the first thing to note here is up at the top.

We have these arrows.

And so those were going to be using to just provide a little bit of extra navigation just between the

custom software development Iaw and Android app development and Web site development pages just so that

somebody's interested in reading about all of them can do so quickly here without having to go through

any of the other navigation below the main text.

We have this little set of icons here and below that and we get down into the more complex structure

of this page so the two icons here as well as the two icons here are all actually animations and so

incorporating the animations within an interesting layout structure like this I think is gonna be pretty

cool and we'll really just help nail down for you guys both of those concepts both including animations

and the layout system and just how you can really use those two together to create some really good

looking layouts so moving on down are the call to action which as I said like is on every page.

And here we are at the I Os and Android app development page so again we'll have those extra navigation

arrows.

And again we're going to be incorporating in animations.

So this icon here is actually going to be an animation of kind of these outlines between different devices

shifting into one another.

So I thought that was a good way to represent not only the integration with web applications but also

the simultaneous platform support.

So you kind of see this transform into all of those and then below that we just have a little set of

icons to just sort of add a little extra to the text that I had up here since I tried to be as clean

with my information as possible and not overload the user with too much at any one time.

And I just think that these little icons and the words together really express a lot and really capture

a lot about ISIS and mobile app development in general.

They really couldn't necessarily be explained just with text but visually does a really good job of

getting the message across.

And then of course that brings us down to the Web site development page again here.

We're really just focusing on the different layout structures and the different types of things that

are possible here and making sure of course that it looks great on all screen sizes.

And so here and we're just really going to be focusing on the alignment of these and how they all kind

of lock together and move in together when the screen gets smaller.

I really like the look of the revolution page and I'm really proud of this one so I hope that you guys

enjoy getting to build this as well.

And the revolution is really just why I am calling my vision technology and process

I think that those combined to be the revolutionary aspects of this business and I think it also is

just a catchy name.

And so the revolution the layouts here at the top of the revolution page are as different than what

you've done before.

So these shouldn't be too hard and definitely by the time we've gotten to this point in the course you'll

probably feel like a master at putting layouts together.

And so this shouldn't be too difficult at all.

Although this icon here will be an animation as well.

Another shifting outline animation like the previous one but when you scroll down farther to the process

section this is where I really like the look at the design and I think it creates an interesting effect.

So using these full screen images we're creating little blocks and sections that the user can move through

very cleanly and easily being able to differentiate one step from another once we have the basic structure

for one of these down.

It actually will be the same process for each of these little sections.

And so this page will honestly probably be easier than you think.

But I still think that it works really cool and I am really proud of it.

The About Us page is going to be the last page where we're just focusing on complex layouts.

And so here we have some more elements used in some more interesting ways.

See here we have a little interesting layout and putting all these together as well as the alignment

will be the focus of course here the last two pages are where we really start getting into some interesting

functionality with the contact page here.

You see that we're starting to now use inputs.

So all of the things like managing that estate and validation will all be taken care of there but it

also has another interesting component where this actually needs to send out a message to myself to

make sure that I'm aware obviously that somebody is trying to get in contact with me and we're going

to use Google Cloud functions to put that together.

And so that's where we're going to get into an email handler that is going to perfectly take care of

what we want to do in a really easy way compared to a lot of the other setups that would be necessary

before we actually send the message out though.

We are going to cover a another little topic which is models or dialogues or whatever you'd like to

call the little pop ups.

They're kind of gray out the rest of the screen and then present you with a little window to make some

further action.

So here we're going to use that as a confirmation screen just to make sure that they've put in all the

right information before they send it out to me for me to get back in contact with them lastly that

brings us to the estimate page.

Now this was personally my probably favorite page to build out of all of them because it really involved

the most creativity and I really think that it turned out nicely.

So this icon over here is going to be a little animation where this little dot just kind of rides on

that wave and the same little spot and then over here we have of course all of the questions and so

the way that we're actually going to structure this in the application I think is really interesting

and kind of clever and enables some pretty cool little tricks that are going to help when we need to

actually then calculate the estimate cost and present the pop up displaying to the users a list of the

features that they have selected as well as again a confirmation for their information so that I can

get back to them with the final details for their estimate so this last page I feel like really brings

it all together because we're using the moto again we have all of our inputs and to pull up the list

of features that they've selected.

That is an interesting little trick as well as here on the estimate itself handling the arrows here

for navigation between questions as well as the ability to seeing lacked a question and then have that

be added to where it will keep track of our features and keep track of the actual cost when we're ready

to get the estimate.

So putting all of that together entirely from scratch is really going to be fun and I think you guys

are going to learn a ton from doing that that will really give you some tricks and insights when you

want to go and implement functionality in your own projects.

So now you guys have seen the entire project that we're about to get into and just how much and how

varied content you are really about to learn here in material UI and so I say let's just get started

and go start talking about how we can take the images from this design from these files which is how

most of the time you will be getting your website design in the real world when somebody is ready for

you to build it for them.

Taking the images and assets and icons out of here and properly exporting them and optimizing them for

use in our project.