Instructor: 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.
Let's close this down
and then I'm just opening 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,
ns 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 gonna 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 three columns
and so there we use this grid-3-cols class.
So this one here, so this is basically grid
with three columns, so inside of this section.
So yeah, so it's just a grid with three columns
as I was saying.
So that's why we have repeat three times one fr.
So just as we learned in the previous section.
Then here in the header, there is another grid
with these two 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 diff here
but diff doesn't have any meaning and section does,
so that's the better choice.
Then another element that is important is the span element.
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 diff element
which also doesn't have any meaning
but for inline elements.
So when we just need a small element for some text,
we always reach for the span element.
All right, and then here was also the blackquote 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 it's basically Mary and Sarah are 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 cards 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.