Now, for this course section,
I prepared two example websites here.
Two example websites,
which on first sight look very similar,
but which turned out to be quite different.
Now, I also wanna note that of course,
we built this big online shop.
And I'm just not using that here for deployment.
Because these examples which I prepared
cover basically all the key concepts
that we also had in the shop,
but they are a bit easier to digest.
What you learn here will also help you with deploying
any kind of website though.
Though I'll also will say that you should always
also check out the documentation of the hosting provider
you chose because, of course, concrete deployment steps
will always differ between hosting providers.
And depending on which kind of services they offer,
certain things might be easier or more difficult,
depending on which provider you chose.
But we'll get back to that later.
Here are the two example apps.
And the difference here is that one of the two apps
or websites is a static website.
Whereas the other one is a dynamic website.
And the difference really
just is this liking feature here, which I added.
Where on one website,
you have this button, which you can press.
And then we'll have a like counter go up here
as soon as we do that, which we will do soon.
On the other website, you don't have that.
And therefore, this first website is fully static.
There's nothing special on it.
It's just a bunch of frontend code
that's presented in the browser.
Whereas on the other website,
we actually have a database that stores the likes.
And we will dynamically update the like number here soon.
Now, you'll find the code attached.
To be precise, you'll find a ZIP file
with the two subfolders here,
a static site and the dynamic site.
And you can browse through the code on your own
because there's really nothing fancy in there.
Just an image, a bunch of CSS code with features
you'll learn about, throughout this course.
And then a little bit of HTML markup,
which also doesn't contain any fancy new features.
Just a little bit of Google Fonts being added here,
our own styles imported, a header, a main section;
some paragraphs, an unordered list, things like that.
By the way, here, we also got a link, which leads nowhere.
If you want to, you can of course plug in
the link to the course you took,
to this web development course on your own here.
If you are an affiliate, you can even use an affiliate link
because we will later deploy these websites.
And you could then, of course, share that with others,
but that's just something you can do,
nothing you have to do.
Now, this is the static site here.
It's really just HTML, CSS, an image.
And in this case, not even some JavaScript code.
Though, we could have some frontend JavaScript code.
And that wouldn't make any differences.
Now, for that dynamic site here, it's a bit differently.
Here, we have the MVC pattern with controllers,
models, and views.
I have routes.
I have the data folder with the database connection code.
I have app JS where I use Express, set up some middlewares.
For example, for serving static files that we have here
as well in the public folder, images, styles.
These files are served statically.
Then I register my routes.
I have to error handler, and so on.
Really nothing fancy, nothing we haven't done before.
And of course,
using the MVC pattern here also is a bit overkill.
Because in the end,
I have rather straightforward controllers
and models with no fancy logic in there.
Again, really just things we solved before.
But I deliberately chose a simple example here
because I wanna focus on deployment here
and not get confused by too much code that's flying around.
So these are the two examples sites that we got here:
a static and dynamic site.
And hence, we'll need two different hosting providers.
But before we get to that
and before we also start hosting the database somewhere,
we wanna go through these preparation steps,
which I mentioned here.