Project with HTML, CSS and JavaScript in separate files

OK, we’re ready to go.  Start your VM and open Aptana Studio (don’t know how? see previously)

In File->New->Web Project->Basic Web Template add the name ‘Lithophane

min web setup VM step1

On the Lithophane project, create a CSS and a JS folder (right click->New->Folder) under CSS create main.css and under JS, main.js (right click->New->File). Double click on Index.html and you’re ready to start programming.

min web setup VM step 2

The files main.css and main.js will contain our style sheet and JavaScript respectively, index.html is the main web page.  First, we need to include these files into our HTML page so that we can reference the definitions within them.

Now to check it all works. Replace the default HTML (in Index.html) which probably looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html xmlns="">
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   <title>New Web Project</title>
    <h1>New Web Project Page</h1>

With this:

<!doctype html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lithophane Generator</title>
    <link rel="stylesheet" href="css/main.css"> <!--our style sheet-->
  <script src="js/main.js"></script> <!--our Java Script-->
  <body onload="initPage();"> <!--call function when page loaded-->
    <h1 id="pageheading">Lithophane Generator</h1>

Add the following to the main.css file

body {
    color : #008; // change colour of body section

And the following to the main.js file

function initPage() { // called on page load
    // find heading in document and change the displayed text
    var headingText=document.getElementById('pageheading');
    headingText.innerHTML="2D->3D Lithophane Generator™";

Save all the files, select the tab containing index.html and click the green run icon min web setup VM run icon to see that you have everything setup correctly.

The browser should start and the web page should look like this:

min web setup VM step3

The title text has been changed by the JavaScript and the colour has been set to blue by the CSS. So everything is working 🙂

Time to start some real programming!

Published by


see about

5 thoughts on “Project with HTML, CSS and JavaScript in separate files”

        1. Hi Nicola,

          I have temporarily added a button so that you can take a picture on a mobile device, the site is not optimised for mobile use, but you can at least get a photo converted to an STL.

          Hope that helps for now.

  1. This resource is freakin’ awesome, and I use it a lot… How can I help make sure this site stays up and available (for free) when there are no ad’s to click (THANK YOU) etc., yet I know I consume bandwidth and server resources!?

    On a similar note, I know this is open source, have you ever considered packing it up and writing a blog on how to ‘run’ this on a home server? Maybe wrapped up with an apache server (similar to how I can simply take SVN Server and install and run an svn server off of my local machine?)

Leave a Reply

Your email address will not be published. Required fields are marked *