All language subtitles for 104 First Design and Development Steps (Step 4).en_US

All right, so now that steps one, two,

and three are completed,

it's time to finally start with step number four,

which is going to be the actual design

and development phase.

And so in this lecture,

we are going to do some quick setup in order to be able

to start working on the actual website very soon.

So back in VS Code, as always,

we need to start by creating our files.

So index.html.

And, for some reason, it created it

inside of the index folder, but we want it outside.

Okay, so if we now close this,

then the index.html is clearly outside.

And then we also want style.css.

And for some reason it keeps creating them inside,

but we can easily fix that, right?

Now, here, we will once again scaffold our HTML,

but of course, if you want to practice a little bit more,

you can also write it by hand.

But I will just use exclamation mark

and then enter, like this.

And then, starting with the title here,

Omnifood, for now.

A little bit later, we might add something there,

but, for now, let's call it just Omnifood.

And then I also want to connect the style.css file.

So remember that is link.

Then here, we need to specify this rel property.

Set it to stylesheet,

and then the actual path.

So that's the href.

And actually I want to put this style here

in a separate CSS folder this time.

So we're gonna have multiple CSS files

and multiple image files,

and so I want to create a folder for each of them.

Okay.

So actually let's take everything out of the content folder

and then delete it because here

we already have the image folder

that we will want to be using.

So let's take that out and, why not? The content as well.

And then this folder is empty,

and so we no longer need that, actually.

All right.

So we have our image folder as we always had,

and then let's create a new folder here called css.

And later, we will then also have another folder

for JavaScript, but that will be a lot later.

Okay.

But anyway, now here, we need to specify the path

to that file, as always.

And so that is at css/style.css, right?

Give it a first save

and that then formats the HTML here, as always.

And then here, let's just add the h1 element.

And here, we can immediately grab the content from here.

Why not?

So the headline of Omnifood is this one.

So let's actually used that right away.

So,

okay.

And so for now, that's actually enough for the HTML.

Let's just make sure that it works by going live right away.

Now that opened it in a wrong browser for me,

but I can also manually do it.

So 127.0.0.1,

and then it is port 5500 I think.

And so here we go.

So that is our HTML right there.

And now let's go actually to our CSS.

And here, as always, I'm going to start

with the global reset.

So selecting everything and then setting padding and margin

to 0 in order to override the default styles

of all browsers,

and then also activating the border-box setting

in our box model.

Okay.

So that is our global reset, as always.

And just to see if the CSS is correctly connected,

now all the paddings and margins should be gone here.

And indeed they are.

And so now let's also start adding some simple styles

to the body.

And I will start by setting the font-family simply

to sans-serif.

That's because, for now, I don't want

to choose any specific typeface yet.

I think it's best that we first build a little bit

of the page at least before we can figure out

which typeface is the best fit for our design

and for our website personality.

Then here, I also like to reset the line-height

on the entire page to 1

and set the font-weight to 400.

And finally let's set a text color to 555.

So this is a great color that I like to use a lot.

So basically one of those colors

which have only three numbers, so like 333 or 555,

which is, remember, the same as this, right?

So I find these quite easy to work with,

and so usually I reach for one of them

as my base gray color.

Okay.

Let's just check it out here.

And indeed our CSS is already working.

And so this is basically our initial CSS setup here

in the code.

So as I said, that's the code.

And now let's think a little bit about the design.

So basically taking our very first design decisions here

and setting up some small design systems as well.

So here, I will add a big comment block, and then in there,

I will basically write all the design settings

that we want for our overall design here.

And let's start with the typography.

So TYPOGRAPHY SYSTEM.

Now here, I want to use those font sizes

that we have been using in the previous section as well,

so let's actually open one of the files from that.

So just to copy that,

so it is on my Desktop, then here in Components,

and then let's just get the very first one.

And so here we have these two systems,

so just copy them and paste them here.

Spacing, that's for later.

So this is for the font sizes in pixels.

Okay.

But then the SPACING SYSTEM comes a bit later

because, for typography,

we can actually define some more,

basically defaults here.

So we can also specify default font weights

and also default line heights.

So not really defaults,

but more of commonly used settings that we used.

So I like to do this here,

so specifying kind of a design system,

so that then, whenever I need something,

I just have to go here to the top of my CSS file

and then reach it from there.

And so that will help us a lot

in maintaining a consistent design across the entire page.

So for example, I can say that the default line-height

is 1, which is what we set here.

And then as we keep growing the page,

we will then keep adding more and more here.

Okay?

So we move that, just add a dash here

just to make it a bit more visible.

And of course, here too.

Okay, so typography is our first design ingredient.

Remember that.

And so let's now go through all of them here.

So the second one, remember, is colors

and we already have our primary color.

So that's here in the content.

Right.

Okay.

And then, remember, we also need to generate some tints

and some shades and we might also need some accent colors.

So again, all of that can be found

in the web design lecture on colors.

So tint, which is basically darker versions,

and shades, which are lighter versions.

Or, maybe it's the other way around. I never know.

Then we will also at some point define some accents

and of course, our grays.

And the grays, we already have, at least one of them,

so this 555,

but over time, we will keep adding more of them.

So let's just add some dash here again.

Okay. And again, we will add these here over time.

So I'm not yet going to generate all the possible tints

that I might need and all the possible shades

because, well, I might not need them then,

and so I will simply generate them as we go.

Okay.

So just in order to save some time and the same, of course,

about the accents and the gray colors.

The next design ingredient is images, but for that,

we cannot really set up any system,

so there's no values to define for images.

However, I can show you where I actually got

all of these images here.

So, remember, there is all of these different images,

so like these customers, these ones here in the gallery,

and, well, really a ton of images.

And of course I needed to get them from somewhere

and my main source that I already mentioned also before

is unsplash.com.

And as always, the link is on my resources page.

And so then it's, of course, very easy.

All you have to do is, for example, to search for food.

And then whatever you need,

you can just click here on this download arrow,

and this will then immediately download the image

and you can then use it for free,

without any restrictions, wherever you want.

So I think this one here is actually

on the gallery or something,

and you will see many of these images here actually

on our webpage, while the restaurant does not really exist.

But again, there is really a ton of high quality images

that are really, really nice.

So this one here, remember,

was actually the background image

for the header that we built in the last section

and it is also very important in this project

because here we have this hero image that I created.

So it's made out of these three images

and one of them is, again, this beautiful image here

of this woman eating some food.

Okay. And so, yeah, this is how I got these images.

Then as for the customers,

there is a very nice page, or website,

which is called UI Faces.

So this one here.

And here, you can download all of these faces

basically completely for free

and, just as the images from Unsplash,

you can just use them wherever you want

and free of charge, of course.

So that's where I got those.

And I think that's it.

These other ones.

So these app screens here,

I actually designed them completely on my own,

basically based on the design of our site here.

Next up, there would be icons, but again,

there's not really anything to specify there.

So let's go to the next one, which is shadows.

So here, we might, at some point, define some rules

for shadows or basically some standard that we want

to repeat over and over again

because, just with all the other design ingredients,

it looks a lot better if we stay consistent

throughout the design and don't use, for example,

two very similar shadows,

but which are not exactly the same.

So for now, there's nothing here,

but a bit later, there might.

Then the same for BORDER-RADIUS,

which is the next ingredient.

So here we will also, a little bit later, specify something.

And finally, our less design ingredient that matters here

is WHITESPACE.

And so here, we now have this SPACING SYSTEM.

So that system that we are going to use.

And well, I guess that's actually it.

So that's the only thing we can specify here for whitespace.

And so I think that's it for now.

And again, we will keep filling this up as we go.

Here, we can actually also say that the default

that we already set before is 400,

and then we will, again, keep adding more.

All right. Very nice.

So with this, we have basically everything in place

to finally start coding and start building this project.

Now, just one more thing that we need to learn about

before is a little bit about responsive design.

That's because the responsive web design principles need

to be applied from the very, very beginning of a project.

And up until this point, we never cared about this,

but now we are building a real world project.

And so, then, of course, we need to make it responsive

from the very beginning, make it adapt to all screen sizes.

And so, therefore, let's now quickly learn the basics

of responsive web design.