Original subtitles

Let's now start building the how it works section.

And so here we are going to build something similar

to what I draw in this sketch here.

So yet another one of these beautiful sketches here

that I have,

and you see that we have something like a Z pattern here.

So similar to that example

that is here on the bottom right

now here each of the rows of the C pattern

will be for one of the steps of how Omnifood works.

Okay.

So with those big numbers,

a bit similar to that very first design

that I have here at the very top.

So we're gonna have those big numbers,

then something like a smaller heading

and then some description of the step itself.

And then on the side of that,

there's going to be one of the three application screens

that we got from Omnifood.

And above all that I also want to add a headline,

something like this other small design example,

that they have here.

So where we have this big headline,

which is a bit informative about

what the section is all about.

And then above that in this small in color text,

there is a very direct description of the section.

So basically naming the section.

And so, as I mentioned before,

this is a very nice pattern that I have been seeing.

And so I would like to use that now right here.

Okay.

So I hope this looks like fun.

Hence of let's now get started with this.

And actually in the last lecture,

we already created the section here.

And of course also these container and grid classes,

but let's remove all of this

and start over with a blank section.

And so now let's add our first container element here

for the section heading.

So I'm gonna give it to class of container

because of course we're gonna want to have

these headings centered on the page.

And here, it's now time to use the H2 element.

So after H1 that we had here,

so right here,

this is the primary heading with the H1.

And so remember there should only be one H1 per page.

And so now in each of the sections,

we're going to use the H2.

And again, I'm giving each of the headings

a class name so that I can select everything using classes.

And so this is a heading secondary.

Okay.

And I think here, we actually do have the heading.

So that's this one,

your daily dose of health in three simple steps.

So this is quite a descriptive heading of the section.

But remember that now before that,

we also want to add basically the name of the section

to make it a little bit easier

for the eye to scan quickly the page

in case we don't have the time

to read this big heading here,

then we can simply read how it works.

And then immediately it becomes clear

what this section is all about.

Now here,

you might think that we could use like an H3 element,

for example,

because this one is simply smaller than the H2.

And so H3 might look like a good choice,

but actually it is not a good choice

because if this was an H3 here,

this would actually not be a heading of any new parts

inside of this section.

So basically this H3,

the goal of it is to describe what this H2 is all about.

So basically naming it in a way, right?

And so I believe that here using a heading like this,

so an element which has the semantic meaning of a heading

is not the right choice.

So we can of course use H3 in this section here,

but it should then actually

describe some new parts of the section.

Okay. And we will in fact use an H3 in a minute,

and then it will make a bit more sense.

So here we should just use something generic,

like a paragraph, or maybe even a span.

So remember span is like a generic text element.

And so let's use that here

and let's call it a subheading,

so not heating.

That's right.

And so here we write, "how it works."

Okay.

All right. And now let's actually add or Z pattern.

So basically all those elements which have the text

and the images.

So basically the content that we want for this section.

Now where should we put all that?

Should we put it also inside of this container right here?

Well, not really.

Right? Because for the layout of that component,

so of that Z pattern, we will probably need or grid.

Right. And so we do not want that grid here.

Here we only want these headings.

And so we can simply create a new div element

and also call it a container that is no problem at all.

Okay.

Now we could also of course have created

simply a new div in here like this

and then call that one a grid.

So that would have worked as well.

But I think it's cleaner

to just keep adding new containers like this,

then these pieces are a bit more self-contained, right?

So we have just one container for the headings.

And then we can actually nicely copy that here

from one section to the next one,

without worrying what comes next.

All right.

So then here we have our container

and this is probably where the grid will be,

but for now let's not worry about the visual part here

and only about the content.

So if you remember the sketch that I showed you

in the beginning of this lecture,

you will remember that there was like a box on the left side

with some text content,

and then on the right side the image, right?

And so let's now create boxes for those two.

So let's call this a step text box,

and then the other one will be a text box for the image.

Let's actually put that right here immediately.

So step

image box.

and since we're here,

and since this one is very easy,

let's immediately put the image right here.

And so it is inside the app folder.

And then of course,

we're starting with the app screen, number one,

then let's give it a class of step image,

which is why the parent element

is called the step image box.

And so then of course we need the alt text.

Never forget that.

And here, this is actually on an iPhone.

So I'm calling it iPhone app preferences,

selection,

screen, giving it a save.

That's not correct.

And let's just quickly take a look at the image,

just so the description makes more sense.

And so, yeah, this is like a screen

where the user can select their preferences.

And so that's why that's the description

that I gave it here.

Now. Okay.

And now here as for the text content,

remember we want the number of the step.

Then we want like a, a heading a smaller one

and then some text description after that.

So let's use a P here for each of them.

So here let's call it the step number

and it starts with zero one of course.

And now it's actually time for a that H3

that I mentioned before.

And first of all, let's get our content here.

So we have these three blocks

and this one is the first one.

Let's get that.

And let's just paste that in here for now.

Okay.

So we have all of this here

and it's kind of separated here with this colon.

So this here is probably the right text for the heading

and this then for kind of the description of this step.

Okay.

Well actually it shouldn't be here

that doesn't make any sense.

It should be here indeed.

And now I'm just cutting this part here

and I'm gonna put it inside an H3.

And again,

I'm assuming that this one here

might be reused across the page.

And so I'm giving it a more general name

and I'm not call it like step heading or something.

Okay.

So I'm calling it heading tertiary now

because it might be reused somewhere else.

And so on headings that happens all the time

and therefore they are a nice candidate of giving them

like a general name like this.

Okay.

And I'll, let's just add a paragraph again,

for the description of the step here,

the sort of step description.

Okay.

Next removing these colon here

and there we go.

So as I was saying before,

now here it actually makes sense to use an H3

because this kind of introduces a new part

inside of this section,

which is this piece of content that comes after it.

So here it does make sense to use an H3

while here it really didn't make a lot of sense.

So that's why we went with this generic span here.

Okay.

Now let's just take a quick look here.

And well,

there we go.

So the image as always is very large

and there of course not side-by-side yet,

but of course we want them side by side.

And so let's now use or grid class,

so let's go up here.

And so the container,

we already have it right here

and then let's add the grid.

And just like this,

we easily transformed this into a grid container,

which has this gap here.

So all without writing any new, additional CSS.

And then of course this one is the one with two columns.

Okay.

Now this gap here is just temporary.

It might not be the one that we use in the end.

So we're probably gonna change that later

and here quickly getting rid of this background color.

Okay,

nice.

And now this image as always is way too big.

So let's make it flexible by saying that it should occupy

only basically 100% of the available parent.

So images are always one of the first things

that we have to style, because as I mentioned,

they do not automatically scale up or down like text.

So let's just say with a hundred percent

or let's even go for 50% for now

because a hundred percent also seems kind of large.

And so with this, we are safe at least for now.

So we're just experimenting here anyway for now.

And so, yeah, that looks better.

Can of course, inspect this very quickly.

And indeed now each of the two columns

are the same size as we can see here.

And yeah,

the image occupies exactly half,

so 50% of the parent container,

which of course, is this a step image box here.

Okay.

But for now let's not worry too much about the visual style.

And instead let's keep adding or next step here.

Okay.

Now, before going back, remember that,

now we wanted the opposite way.

So here we have the text on the left side,

the image on the right.

But since we're building a Z pattern,

which remember is quite popular on startup sites

like this one,

then we will now have the image on the left side,

and the text on the right.

And so what that means is that the next element in the grid

will be again, an image, right?

So it's the opposite now.

So yeah,

Here we had first step text box

and then the step image box,

but now we will have the step image box first.

And here I forgot to close this.

Now that's better,

but still Google Chrome managed to fix the code

because you see that actually it looked the same before.

So it looked correct before.

And so that's because browsers are actually very forgiving

with our errors in the HTML.

They will still try to understand it

and then fix these errors internally.

But anyway,

let's now go to step two

and let me actually add some comments here.

So right in the HTML,

and to remember we can hit CMD + / for that

or CTRL + / on windows.

So here that's step zero one,

just so we don't get confused as the code gets longer

and longer.

So step two, and eventually we're gonna have a step three

and why not copy a, this here immediately.

So two and three,

but of course we now need different descriptions.

So now we need to describe this one here.

So it's still an iPhone app.

Let's call it the meal approving plan,

because while that's what this one here is all about,

basically.

So there's one of these meals here per day,

and then the user can approve it or not.

And then the app screen number three

is basically for the delivery, right?

So let's call that iPhone app

delivery screen into your screen as well.

Now. Okay.

And now let's get the step text box here,

but remember that here in step number two,

it should appear after the image

so that it's on the right side

then while here in step number three,

we are building the Z pattern.

And so it is now back to the beginning.

Okay.

And now just replacing the content here, zero two

triple clicking here

and putting it here

and this of course belongs again in the H3.

And then, finally step number three.

So creating the HTML is always some copy and pasting.

That's just completely normal.

So just as I'm doing here, okay.

Ah, here, we need to use step zero three,

but now we should be good.

And indeed, we now have a nice Z pattern.

So beautiful, well, except for,

of course the text formatting

and the size of these images,

but the content itself is already arranged in the right way.

So the layout is already working,

thanks to our reusable grid.

And yeah. So now let's take care.

I would say of styling first,

this heading

and this subheading right here.

So that's the heading tertiary.

Oh, actually, no,

it's the heading secondary and the subheading.

And so these are gonna be reusable.

So let's put them up here.

So close to the other heading

and well, since we're building another heading here,

we can use some of the same design elements as here.

So we might use the same color,

the same font weight

and maybe also the same letter spacing here

in the heading secondary.

And so we should probably not just copy them here, right.

That would not make a lot of sense.

So instead we can create

a list of selectors for the heading primary

and the heading secondary,

and then simply add these styles

that are common to them right here.

So moving down so that we can select all three of them

at the same time

and then move them all up here.

And so now immediately with this,

the heading secondary also has this color, this font weight,

and also the decreased letter spacing.

Now of course the font size should be smaller.

So let's go maybe one step down from 52 to 44.

So that's exactly why we have the system.

Otherwise.

Now we would have to think about this font size.

So it should be used 40 pixels or 45 or 35, but no,

we don't have to think.

We just choose it's value.

And then we just check out if it looks nice or not,

and let's actually do that right now.

And yeah, I think that is not too big.

The color is also good.

We just didn't define any line height

because it is just one line, at least in this width,

because imagine that the page gets small.

Well then the line height is not too well-defined

so let's give it some line height here.

And since the text is still quite large,

let's go with 1.2 here.

And that didn't look as if it changed a lot, but yeah,

but still, that looks good.

So let's keep it this way

and yeah, about the color here,

I just chose it at the beginning of the section here,

it seemed kind of randomly right, just as 333.

So I told you back then

that I simply liked to use these gray colors,

which all have the same number.

So we used 333 for basically the darker text

and then 555 for the lighter text.

But of course we could also have,

for example, used a shadow

or actually a shade.

So for example, instead of using like 333

we could have used this value here.

So just to illustrate that, let me actually do that here.

So just declaring it after this one.

So it will then override it.

So no need to replace that one.

And so you'll see that this still looks quite decent.

Maybe it's a bit too dark.

Let's go with this one

and I'm not gonna keep this anyway,

but just to show you

that this actually does look quite good as well.

And it nicely integrates actually

with the rest of the colors,

like with this orange color.

And that makes sense because well that was actually

the starting point of creating this color

in the first place.

Now, the reason why I'm not using this color here

for our design

and a similar one for the rest of the text

is because that will kind of move us away a little bit

from the typical look of the startup website personality,

which uses more of the gray color

than a really this like earthy looking colors.

So colors like brown and things like that.

So here we are going more for the,

a little bit more traditional gray, I would say.

And so that's why I simply went with a regular gray

instead of using a shade

also instead of using a shade, we could,

of course also use the color from open color here,

for example, this one here.

So this is actually quite similar to 333.

And so why not try that out as well?

I will actually keep this here just as a comment,

like as a reference that you could have used that one.

Okay.

And so this looks decent as well.

However, these gray colors here,

they have a little bit of a blue touch.

So if you look closely, they are a gray,

but they are pushed a little bit into the blue direction.

So I think that doesn't really fit our background color here

and of course, or primary color as well.

And so that's the reason why I went against that.

So just trying to give you some more insights

into the design choices here, right.

And so again, for a startup personality,

I think one of these neutral grays

that is really a true gray works just fine.

Okay. But anyway, now about the subheading,

first of all,

let's actually make it a block

because remember that we used a span

and the span is an inline element.

And so we need to make it a block

before doing anything else.

Then let's give it a font size

and let's just start at 20 pixels

and we can always tone it down a little bit then

and the font the weight of course

needs to be a bit smaller now.

So not 700, maybe 500.

So slightly above the regular.

So medium.

I think I called that.

And now here, remember we want our primary color.

So that's, that's already here.

So that's this one,

but actually we should not use this one

because remember that there is some issues

with using this colors on

and let me show it to you.

So remember using this orange color

on this background color right here.

So the color of contrast ratio was not perfect for that.

And so I will actually use this orange color for the

subheadings as well.

Now in this case,

of course it is on the regular white background.

So it might be okay,

but probably at some later point it will not.

And so let's give it again, this darker orange color.

And just by the way,

I'm noticing here that the text is way too big.

So let's put it a little bit down.

So maybe 1.6

and here I'm going for that darker tone now.

Okay.

Let's now also make it uppercase.

So text transform uppercase,

and also some margin to the bottom

of 1.6 rem.

And by the way,

maybe you've been noticing something

that I have been doing for some time actually,

which is to write these property names here in VS code,

simply like this.

So without any hyphen, for example, and simply keep writing.

And so that works because VS code will still recognize

what I want when I then use the auto-complete

with enter like this

Right.

And I can even like do it just with the first few words,

and then I can start writing the B O for bottom

and then still VS code will recognize it.

And I also do it for stuff like background color,

so I can immediately start writing the color

and then immediately it will give me the property

that I'm looking for.

Right. So that's just another nice trick of VS code

and yeah, here we're just missing some

big spacing below this heading.

And also we can give this one here,

an additional touch

by adding some space between the letters.

So when the text is really small and uppercase,

it looks nicer.

Like it gives it some space to breathe

if we add some letter spacing there.

So I believe that will look really nice.

So letter spacing like 0.75 pixels,

and of course you can experiment around with this

as you like.

And actually this is already

the second time we have used some letter spacing.

So let's add that here to our design decisions basically.

So we have used this one

and also minus 0.5 pixels before.

And we have also already used a 1.2 at some point.

So let's call this medium, for example,

the name doesn't really matter.

It's just so we keep on

keeping track basically of our design decisions.

Okay. Now just here,

let's add some big space to the bottom here.

So again, using that trick of simply starting

to write the second part of the property name

and here again,

let's actually go for 9.6 rem.

Okay.

You might think that this maybe looks a bit too much

because that is also the padding of the section itself,

but it will not be, let me explain your why.

And so the reason is because as I said, we have 9.6 REM,

so 96 pixels here.

So between the beginning of the section

and the beginning of the content,

but we also have 96 pixels here.

So this one is also plus another 96 pixels.

And so here we have like a 192 pixels, I think,

between all of this.

And so having then 92 pixels here

should be then good again.

So basically to have this part here,

so this heading stand out nicely from the content

that comes next

and that will, of course be, way better visible

once we actually style all of this here,

but let's leave that to the next lecture actually.

So hopefully I see you there soon.