All language subtitles for 15. Website Development Page - Overview

The website development page is definitely the most simple out of all the services pages that we've

built so far.

After the heading part which we already have created from the last two services sections it will then

just be the same component essentially with an icon and some text that will just be aligning in different

places along its container.

So if we go and we can check out the screenshot and you'll see the familiar header and arrows that we

have been working with and then you'll see below where we have an icon with a title and then a paragraph

to the right of the icon we'll start out as we always do with a container for the entire page which

will be our grid container with a direction of column and this container will consist of a few different

grid items or in this case it will be a grid item container.

And for the bottom half a grid item container as well the top we have already gone through and built

twice now.

So we're pretty familiar with the grid item wrapping the image followed by the grid item container the

direction of column and then the last grid item wrapping the image for the forward arrow in the second

grid item container.

However you see we'll have a container a grid item container direction of column which is going to hold

the title and then the image underneath that is going to be followed by a container for the text.

And by structuring it like this we should be able to easily to the text next to the other container

like the design that paragraph of course is just our typography variant body one wrapped inside of a

grid item and then in the container to the left.

So the container direction column you see will have a grid item wrapping a typography variant H for

sitting on top of a grid item wrapping the image up above.

In that first grid item container we are familiar with the header and its H variant typography title

and then the body one variant paragraphs underneath.

So that's all pretty familiar to us.

Like I said this should be the simplest out of all the ones we've built so far underneath this section

on the page.

We're just really going to be repeating the analytics section structure with the title on top of the

image with some text next to it.

As you can see in this next screenshot where we have two more examples we'll first have the bottom row

and that is a grid item container and that is wrapping a grid item container direction of column for

the title and the icon followed by the grid item wrapping our body one typography for the paragraph

inside of that container direction of column we'll start off with an item typography variant H four

for our title followed by an item wrapping an image for the icon the other icon is set up in the exact

same way and we will actually be repeating this another time for another icon but I didn't include it

in this just because there's no need to repeat all of this code over and over again so we'll just be

positioning these items along their containers using either the Flex start or flex end properties and

by now you should be able to tell which of these is which although for clarity obviously the top one

is going to be the flights end and the outreach to the bottom section.

That would be the Flex start but it should be pretty straightforward so I'll see you over and the code

editor and we'll get started on it.