Combining JavaScript and CSS into HTML File

How to merge CSS and JS into HTML

Well a quick Google search gives me:

html-inline
web-combiner

Combining Javascript and CSS into HTML file

This combines them all into an html form and is working in fiddle try it:

Working example

<script src="http://smoothiecharts.org/smoothie.js"></script>
<canvas id="chart" width="500" height="250"></canvas>
<style>
div.smoothie-chart-tooltip {
  background: #999;
  padding: 1em;
  margin-top: 20px;
  font-family: consolas;
  color: white;
  font-size: 17px;
  pointer-events: none;
}</style>

How to Merge seperated JS file, CSS file and HTML file together?

This is an Option :

Signup in the codepen.io
Goto your link
Click on the Export button at the right bottom corner
Select Export.zip
After download the zip file, unzip it
Open index.html and you'll see the result.
Check the code of index.html for the missing codes

Bundle HTML, JS, and CSS into one index.html file

Instead of referencing your CSS and JS files, do the following:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">

<style>
/*Your CSS code here*/
</style>

<body>

    <script>
    //Your JS code here
    </script>

</body>

</html>

When Should I Combine my JS and CSS Files?

To be honest, it depends.
People are often, wrongly, obsessed with merge-min... That's not always the case. The need for merge-min depends on a few things:
Sometimes it's faster and BETTER practice to load 2 css files than one big one? Why? Because they'll load in parallel. That simple.

So don't go with the merge-min obsession. If your users are returning, daily users, do merge and rely on browser cache. If not, optimise parallel loads by not merging.

And ignore the simplistic: 'yes you must merge because that's what was best 10 years ago and I've never questioned it' :)