Attached to this lecture,
you can find the source code of this project here.
If you want to, you can download it,
but you don't have to because this module is not about
writing code, actually it's about analyzing
existing code and seeing what makes this card look,
well, the way it looks like here.
A little disclaimer from the beginning here, though,
we show you some design concepts here,
which applied to this card look,
and which can also be applied to websites in general.
There is no general right or wrong though, and you can,
of course also add a lot more concepts to this design topic.
Actually, you could create a whole course
just about this topic.
This is not what we want though.
So the idea is to give you some things at hand,
some easy things to remember,
which help you to create your own websites
as easy as possible.
Nevertheless, no matter if you downloaded this code or not,
let's quickly have a look
at what is behind this little card here.
For this, I'll show you the code now.
Here I am in the index HTML file.
We also have a style CSS file.
So the typical structure we know from this course already.
In the up here, we don't have any new things.
Basically, you can just see that I imported some fonts
from Google fonts already.
We'll dive into the fonts topic in a few minutes.
Besides that, we have a link to the style sheet
and that's it, basically.
In the body part, then, down here, we have a div.
So I'm working with divs here a lot
because, although we learned about semantic HTML elements
in this course already,
We only tackle a part of the website here,
well, this card, so to say,
and I want to focus on the design aspects.
Therefore, semantic HTML elements
are not the core focus of this module.
Therefore, we decided to use divs and classes instead,
which, by the way, is totally okay in general.
Therefore you can see our first div up here
with the class of card-container.
Because this div basically holds the entire content
of the card, so this part down here.
And inside this card, we have three elements
from the beginning, three paragraphs.
So these here.
The first paragraph is just some card info.
So what this monthly subscription is all about.
Then we have two elements about the price
of this monthly core subscription,
and some information about the pricing.
Afterwards, we have another div,
which is also kind of a container.
So this div right here.
This div then contains all the sub,
so all these subscription details and in there
we can find three equally structured divs.
So it's this div with the class sub-feature here,
we have divs once, twice, and a third time.
And each of this divs contains, well,
a div with the class icon.
In there we see we have an SVG element,
which is a new element in here.
And we'll talk about SVGs, also throughout this module.
Here the SVG just is an easy way to add, well,
these icons here, in front of the description
of what you get with this monthly subscription.
We'll dive into this a bit later.
Therefore, I'll skip this for the moment.
And besides this icon, we have a paragraph which describes,
well, the corresponding feature and we have this, as I said,
three times in total.
So second div here, and third div there.
And finally at the bottom, we have another div,
which is just a button-container,
and this holds this "join now" button,
which you can also find of course, here on this card.
So that's the HTML part,
nothing new in here besides this SVG part, maybe.
And in the style.css file,
we have a very, well, generic styling, so to say.
If you look at the properties in there, nothing new for you.
We have the background-color property.
We have some properties related to our fonts.
We have, of course, properties like the width
or the margin or our box shadow,
which we also use throughout the course.
So if you look at all these different properties here,
you shouldn't find anything new.
Because the core concept of this module is not talking
about new properties or new values to add here,
it's about how to use these existing concepts
and these concepts we know about correctly to achieve,
well, a good looking card in our case here.
And for this, I'll now leave VS code
and go to our main page here and open the dev tools.
If you didn't do that so far,
and if you want to follow along,
please also do that.
And now we'll dive into three core aspects
behind the look of this card.
Specifically, we'll have a look at sizing and spacing.
So what size are we using for this card?
How is the space arranged on this card
to give it the look it has?
We'll then dive into fonts.
So which fonts are we using,
Which font sizes are we using, et cetera.
And finally, we'll dive into colors.
As you can see,
we don't have too many colors on this page here,
but we have some colors and there is a reason
why we have these colors.
This is what the next lectures are all about.
Therefore,
let's get started now with the sizing and spacing part.