Welcome to this module. This module is
a bit different compared to the previous modules
in this course because, in the other modules
you learned a lot about new things, like HTML and CSS.
And whilst you will also learn
some new CSS topics in this module,
here, we will focus on to applying concepts
you already learned about and applying these
in a structured way. Because in this module,
we want to help you to design beautiful websites.
And whilst this might sound quite easy,
it can become quite difficult,
especially when getting started with web development,
because you have lots of tools now at hand,
which you can use, but you have to use these tools,
so these HTML and CSS concepts,
correctly to don't lose the focus
when it comes to creating, well,
a beautiful website in the end.
Because no matter if you're working on
a personal or a professional project,
you probably have a goal, or an idea in mind about what
the final website should look like.
And on this journey from zero, so from having nothing
basically, to the finished website, well,
things can go wrong. And to make sure
not too many things go wrong, in this module,
we'll have a look at two things specifically.
First, we'll have a look at a Project Example.
No worries, we won't create this project from scratch.
We'll just show you the finished project and dive
into the code of this project,
because in there you can find lots of helpful
tips and tricks to create beautiful websites.
So lots of concepts in this code use such concepts to make
this website, or this part of the website
to be more specific, to look as good as possible.
The second core topic of this module are some new topics,
as I mentioned, and these topics are related to
CSS Custom Property or CSS Variables, which will
be very helpful to keep a lot of trouble away from
your mind when working on the design of your website.
We'll dive into transitions, which make your page,
well, even more interactive. And we'll dive
into the Basics of SVG's. So, what SVG's are
and how we can use these on our website.
Now, before we dive into the module,
I quickly want to show you this project example
I was just referring to, because this is the page we created
for this module. And now you might say, "Well,
this page is not really spectacular".
And I would agree to be honest, but this page here,
or this part of a page, this specific single feature
of a webpage, is something you find
on a lot of websites these days.
If I zoom in a bit here to make it better readable for you,
you can see that this is a typical Cart.
So this Card look of such an individual element so to say,
which in this case would be a Cart offering information
about a monthly subscription for a course page here.
So for only $20 per month, you get access to 40 courses,
including downloadable resources,
a certificate of completion and so on.
Including a Join Now button which, of course,
leads into nowhere here. It's just about the design.
But generally this is, well as we think, a good looking Cart
and this single item of a complete website will help us
to understand a lot of basic design concepts.
And you can then apply these concepts on your own,
bigger websites and, this will help you to focus
onto the actual content of the site without getting lost
into all these different design features, design tools
you might know, from the CSS part in this course so far.
And of course, also from upcoming modules and concepts
you will learn about in this course.
Now this is what this module is all about.
And, the project we will have a look at in this course,
therefore, let's get started now.