-: 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 Z 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 I have here.
So where we have this big headline
which is a bit informative
about what this section is all about.
And then above that in this small and color text
there is a very direct description of this section.
So basically naming the this 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.
So 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 the 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 the 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 this 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 part 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 part
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 our Z pattern.
So basically all those elements would 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 all 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 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've worked as well
but I think it's cleaner to just keep adding new containers
like this.
Then 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'll 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 it right here immediately.
So step img 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 parrot element is called the step image box.
And so then
of course we need the all 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.
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 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 01 of course.
And now it's actually time
for 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 year 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.
It 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 gonna 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 now let's just add a paragraph again
for the description of this step here.
So step this correction, okay?
Let's removing these columns 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 the 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 they're of course not side by side yet
but of course we want them side by side.
And so let's now use our 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 transform 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 is 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 width a hundred percent
or let's even go for 50% for now
because a 100% also seems kind of large.
And so with this, we are safe, at least for now.
So we 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 step image box here, okay?
But for now, let's not worry too much about the visual style
and instead, let's keep adding our next step here,
okay?
Now before going back, remember
that now we want it 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 the 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 remember, we can hit command slash
for that or control slash 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 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
well 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 it iPhone app delivery screen
and 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, 02
triple clicking here and putting it here
and is of course belongs again in the h3.
And then finally, step number three.
So creating the HTML is always some copy pasting.
That's just completely normal.
So just as I'm doing here, okay?
Here we need to use step 03 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 not.
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 wide
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 this 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 this 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 so 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, 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 this section here.
It seemed kind of randomly, right, just as 333.
So I told you back then that I simply like 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 I'm just declaring it after this one
so it will then override it.
So no need to replace that one.
And so you 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
while 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 this startup website personality
which uses more of the gray color
than 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 used a color from open color here.
For example, this one here.
So this is actually quite similar to 333.
And so yeah, 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 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 our 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 a 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.
We can always tone it down a little bit then.
And the font 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, it'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 these colors on...
And let me show it to you.
So remember using this orange color
on this background color right here.
So the color 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 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 upper case.
So text transform upper case
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 BO
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 .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 there is also the padding of the section itself
but it will not be.
Let me explain you 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 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.