So here we are now in the last,
well, lecture of this module finally.
And in this lecture,
I first want to zoom in a bit to the card.
We will dive into the concept behind these icons here,
because ahead of the courses,
the downloadable resources and the certificate texts here,
we have three icons, which by the way, are a bit too small.
So let's maybe first go back to the code
and let's go to our icon class selector here
and let's increase the width to maybe 15 pixels.
Let's see what this looks like.
Yeah. I think now these are better.
Well readable.
So how did we add these icons to this project?
Are these images or what's the concept behind?
If we go to our code once again and into the index HTML file
and scroll down a bit into our sub details class div,
then we have the div of the class icon.
And there, we see that we have such an SVG element
with lots of different attributes.
And then inside this SVG, we have this path element.
And again, lots of information.
And somehow this code in here leads to, well,
this check icon right there.
Now, how does this work?
Well, as we saw this, isn't an image or something like that.
These icons are so-called SVGs
So Scalable Vector Graphics.
What does this mean?
Well, SVG is basically
an XML based markup language to describe
two-dimensional vector graphics.
Now, for some of you, this might be helpful.
Others might probably say now, well,
I have no idea what this is all about.
Therefore, another nice definition of such SVGs is this one,
SVGs are a text based description of scalable images
that can be rendered by the browser.
I think this makes it kind of clear.
So we have a text in our case,
this SVG element with the path in it and lots of different
attributes.
So this text-based
description basically represents an image,
a scalable image that can be rendered that can be
interpreted by our browser.
So this is what SVGs are all about basically.
It's all about a mathematical description of well,
simple two dimensional images,
which describe what this image should look like.
And then this image can be easily used in any modern
browser.
Are SVGs working for pictures
for normal pictures or complex images?
No, they aren't because, well,
it would become quite difficult to describe each single well
item of such a complex image,
but for easier images,
which turns out our icons SVGs are easy to use
and easy to implement to our website.
So this still sounds a bit theoretical,
and I don't want to dive too deep here.
You just can keep in mind
that you have the option to add simple images,
like icons here, via so-called SVGs by a plain text.
And the great thing is that we have pages like heroicons.dev
or also here, heroicons.com.
Feel free to use whatever you prefer.
And on these pages, we have predefined SVG icons,
which we can use for free in our project.
So for example, on our page here,
we have this hat here so to say,
in front of the front point here,
and it turns out that this hat
can also be found right here, this academic cap,
and you can switch over here
between solid and outline icons.
I'll go for the outline ones that you can either copy these
as JSX, which is not the format you want to have,
or SSVG, which is what you want to have.
And here you can switch between
a dark mode and the light mode.
Well, I prefer the dark one.
So if you want to use this academic cap,
then you can simply click onto it and you get the
confirmation that this was copied.
Now you can go back to the code and here,
I'll now add for demonstration purposes another div
here with the class icon once again
and there we can now paste this entire code.
And by now saving this and going back to our page
right here, you see that
we now have added this hat as a second icon
next to our first one, of course not what we want,
but this is how you can use such SVGs in your project.
So you'll typically create a container like we had it here
with our div and then you paste this link from the page
where you add this SVG icon from.
So let's delete this now because we don't need this hat here
next to our first icon.
With this, I want to conclude this module now.
This is it with our design basics,
that should help you to easier develop your own websites,
this project, although it was a smaller, a little one,
and not a complete webpage contained lots of features,
which should help you to work on your current and future
websites.
And with this, as I said,
I want to conclude this module now.
So let's continue with the next topic in this course.