Now, first of all,
let's clarify what
exactly third party packages are.
I did briefly mention
what I mean by that
and why they might be helpful.
But let's take a closer look.
And I want to take
a closer look by first of all,
emphasizing that you can write all
the CSS and JavaScript code
that your project might need
on your own.
You don't need third party packages at all.
You can write everything on your own.
But often as I mentioned,
you will have certain features
or styles or tasks that you
basically write over and over again,
across multiple projects.
And it's not just you,
as I mentioned,
that's the case for all developers.
There are certain features,
a certain elements,
which we find on almost any website out there,
maybe just with tiny adjustments.
And if every developer has
to write that feature from the
ground up, over and over again,
that's a lot of wasted time
and also error prone.
That could be certain default styling
or arrangements of elements
on your page that
is repeated over and over again.
That could be a feature
like an Image Carousel,
where you can click through multiple images
and have a slideshow of images.
And that could also be something
like a parallax effect,
which is a certain kind
of visual effect,
which you can get when you
scroll on that page.
And we are going to have
a look at these examples and other
examples from this course section.
So, we have things like
that which might be repeating across pages.
And therefore,
we often don't want
to write that code on our own,
but instead we might want
to utilize third party packages
written by others
or maybe even written by us,
but then stored in a package
and maybe distributed to the
web, so that others could use it.
And we then can use such packages no matter
if we wrote them, or others wrote them
to include them into our project,
into our website,
and then build up
on those packages
and use those pre-built features
without writing all the code
for that on our own.
Now we have popular packages,
third-party packages
for both CSS and JavaScript.
And let's maybe start with
some CSS examples.
Though, I will say that these
are really just examples.
There is an endless amount
of packages out there solving
different problems.
And as always in life,
Google will be your friend.
Once you've got a bit
more experience
to find the specific
packages that you might need
for your projects.
Now popular CSS packages,
which you see being used
in a lot of projects would
for example, be Bootstrap,
Material UI,
or Tailwind CSS.
And these are all so-called CSS
frameworks and framework
is just a fancy term,
which we can basically use
as an equivalent to package for now.
That ship with a lot
of built in features in this case,
since they are CSS packages
with a lot of built in styles,
a lot of built in CSS classes
to be precise,
which we can sprinkle
on our HTML elements
to get certain looks and stylings
and layout structures without having
to write our own CSS code.
And that can of course be
a strong reason for using such
a third-party CSS package.
Since we can save all that time,
which we would otherwise spend
on writing our own CSS code.
Now, again, I'll come back
to these packages in a second,
and we're going
to see some CSS package code
in action soon.
But first of all,
let's also have a look at JavaScript.
Now for JavaScript,
though,
it is worth highlighting that,
unlike with CSS,
we don't always include
big JavaScript packages,
which then gave us tons
of functionalities all in one package.
Even though such packages also exist.
But instead we also often
just use smaller packages,
which each only solve one specific problem.
Since unlike with CSS where you
typically want to have
the same style for everything on your page
and therefore for you need
a lot of built in styles.
With JavaScript you often just want
to solve small tiny specific problems.
And for example,
you might want to add
an Image Carousel,
where you can move
through a gallery of images
and well, since something
is changing on
the loaded page here,
we know that JavaScript
has to be involved
and that could be
some JavaScript code
which we don't want to write
on our own,
since it can become more complex,
if your carousel is more complex
and hence we might want
to bring a third party package for that.
That gives us such an
image gallery feature built in.
Or we might want
to use a JavaScript package
that gives us a Scrollspy.
Which basically is a feature
where we scroll through some content
and we might have
some outline maybe
on the right or left of that content
and then different sections,
different links in that outline
are highlighted as we
we reach those sections
in the scrollable content.
Or maybe we want that parallax effect,
which I mentioned and showed before,
where we have that scrolling effect
that animated scrolling effect,
which turns out
is also driven by JavaScript.
And you could implement
all these features
with your own JavaScript code.
But since the code
for that can become complex,
and since these are features,
which you will often see
on different websites,
you might just want
to use an existing solution
and not waste time writing
your own code for that.