Original subtitles

Let's start by taking a look

at the project that we're gonna be designing

throughout this section,

as we learn about all the different web design rules.

And just like in the other sections,

the first thing that we need

is to get our starter files from the code

that we downloaded in the very beginning.

So here in the starter files,

we need now this folder, Design.

So for the first time,

this project is not going to build on the previous one.

So here you really need to go into your starter files

and grab this folder here.

So paste that wherever you are working,

for me, it's the desktop.

So close this down

and then I'll just open a new VS code window.

All right, and then you can click open here

or also in the Menu Bar.

You can use Open in there.

So from the desktop, we want the Design folder.

And so this is now our new project folder.

So here we already have an index.html file

and a style.css as well,

along with a couple of images

that we need for this project as well.

Now what's different about this project is

that this time I already coded all the HTML

that we're gonna need for this project.

So basically what we're going to do,

as we go through the section,

is to adjust the CSS

and also learn some new CSS properties

in order to apply these different web design rules.

But now let's take a look by clicking here, on Go Live.

And this is how our project looks like

in the very beginning.

So it's really just a bare bone webpage,

everything in black and white

and everything I did here was

to simply apply some margins.

And I also already built the layout.

So what I want you to do after this video

is to take 10 or 15 minutes to analyze this HTML

and also the CSS that I wrote.

So for example, here, we have this global reset as always.

We have a container element

and we have some CSS Grid here also applied to this page.

So for example, here we have these 3 columns.

And so there we use this grid-3-cols class.

So this one here,

so this is basically grid with 3 columns,

so inside of this section.

So yeah, so it's just a grid with 3 columns,

as I was saying.

So that's why we have to repeat 3 times, 1fr,

so just as we learned in the previous section.

Then here in the header,

there is another grid with these 2 elements here,

side by side.

And yeah, as I was saying,

there's a lot of margins already being applied,

but basically that's it.

So again, I think it would be a very good idea

that you analyze this CSS code and also the HTML.

So this here is an element

that I think we didn't use before,

but basically the element already says what it is.

So this is just a semantic element,

which means that it is a section.

So for example, this one here is gonna be one section,

then this one and all of this here.

So those are sections in the webpage.

And so we have an element in HTML,

which is exactly called section.

So once again, we could have used a generic div here,

but div doesn't have any meaning and section does.

So that's the better choice.

Then another element that is important is the span element.

Yeah. This here, right here.

So as it says here actually,

the span is just a generic INLINE element

that we use for text,

but it doesn't have any meaning.

So it's a little bit like the div element,

which also doesn't have any meaning,

but for INLINE elements.

So when we just need a small element for some texts,

we always reach for the span element.

All right, and then here,

was also the blockquote element

that we didn't talk about before.

And this one is simply,

usually to write some quote.

So quoting someone, in this case,

is writing their testimonial.

So basically Mary and Sarah saying something

about these chairs.

And so for that, we can use a blockquote.

All right, so again,

take some time to go through all this code

and try to understand it.

And again, if you don't understand everything, 100%,

that's not a problem at all

because the main focus of this section

is not really in the code,

at least not so much in the HTML,

but it's really on the web design rules and guidelines

that we're about to learn.

And speaking of that,

the final result of this project

will not be this, but this.

So this looks quite different, right?

It has a different typeface,

so a different font, a more modern one.

It has some green colors here

and the text is also not black.

And there's a lot of rules here applied

that make the typography look really good.

Then we have these carts here

with some shadows and everything is nicely rounded.

And we have this accent color here in the bottom.

So yeah, this is basically applying some

of the guidelines that we're gonna learn

through this project here,

as it looks like in the beginning.

So I hope that sounds exciting.

And so let's now actually get started

with learning about web design.