I am learning web development from scratch and I have learned HTML, CSS, JavaScript, Node.js so far and I have become familiar with databases and template engines.
There are good resources for each of them out there, but I couldn't find a comprehensive resource about putting all of them together.
All the project examples I've found are complex web apps which include front-end frameworks like React and Restful API and ... but still I don't want to create a complex web app and use frameworks.
Now I want to start a website project to practice what I've learned but I'm not sure if I know how to employ template engines and web components (without using frameworks like React) in a real world project and how to manage routes in a database and use it in Nodejs in a professional and scalable way.
I would appreciate it if you could give me some real world examples and resources.
That's a tough question for the sheer number of choices you have. But assuming you have full understanding of HTML, CSS so that you can build any type of layout you are ready to build a fully-functional website with server. You can use following steps to get started.
First, complete Step 0 (Prerequisite) Plain HTML, CSS and JavaScript - Just find any website out there and try to develop it with plain HTML, CSS and JavaScript. You can literally pick anything like the once from here. In order to do this, you do not need anything server-side. You can simply fire up editor like VSCode and open the HTML pages in the browser using
file:///scheme instead ofhttp://.Next step is to decide if you need static website or dynamic! In static website, you content won't change without changing the code. In dynamic website, you probably want to generate website content dynamically using some data from database or some other sources and is also probably unique for each user.
You can keep vast majority of the website static. But even for static website, you may need some sort of server to extract common pieces (For example, if you have, say 20 pages, you want to extract the header, footer and other layout related things a common file/code) so that you don't have to repeat it everywhere. With plain HTML pages, you certainly cannot do that. In order to facilitate this, you can use static site generators. Here, you have two options:
In plain static-site generators, you will be dealing with mostly HTML, CSS and common extracted layout. It is a natural extension of building website manually.
In case of framework based generators - Gatsby, Nuxt, etc. use front-end libraries like React, Vue (and countless others). Although these libraries were originally invented to make complex single-page applications, their architecture (based on Virtual DOM allows them to compile to plain HTML pages). The machinery is quite complex from the perspective of a beginner to achieve this (Internally, it makes clever use of Node.js, module bundlers like Webpack, Vite, etc) to achieve this. The most important take away for you here will be that these framework based generators will provide you with a notion of Component that you can drop-in on any page and gives your extreme re-usability (e.g. showing same button with custom styles at 50 different places).
Finally, there are many static website hosting solutions you can use. They range from free to paid depending on usage and requirements. Some of the notable once are GitHub Pages, Netlify, Surge, etc. Alternately, you can get get your own VM or get a shared server space to host your static pages. But these mentioned options simplify many things when it comes to CDN, domain management, etc.
Let's now move on to the dynamic site. Dynamic means two things here. Do you need to build an interactive website e.g. a single page website having a rich experience like game or showing some charts? If yes, then, you don't need to have a typical server but you still want to make highly interactive pages, then you need to explore the Front-end frameworks like React, Vue or Angular, Lit Element. As soon as you start using these frameworks, you will have to use a module bundler like Vite, Webpack or Parcel. Without module bundlers, it is not easy to develop using these frameworks.
Or the other meaning of dynamic website could be that you are building a full-fledged web app where each user will have unique content and you shall probably have authentication system in place to have user sessions and serve them the content. Again, you have two choices here: Keep everything server-side or split application between API & UI. For API, you can use literally any Node.js framework (Fastify, Hono, H3, Express, etc). For UI, you can fall back to React, Vue, etc. If you want to keep everything on server, then simply use these Node.js frameworks. Most of them have notion of server views which are exactly what you understand to be template engines. I highly recommend starting with Hono or Fastify as they have this built-in. Which approach you wish to take depends on your requirements as each has its pro and cons (outside the scope of this answer). However, if you are just starting out, I recommend sticking with a full server-side approach as it is easier to get started with and has much less ceremony required.