HTML, CSS, & JavaScript – Getting Started

HTML, CSS, & JavaScript – Getting Started

Creating your project

Having created our CSS and JavaScript inline with our HTML, you can see that our document is looking complicated. Breaking up our project thoughtfully into specific pieces will make your code more human readable and easier to troubleshoot and enhance down the road.

index.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Hello World!</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
  </head> 
  <body> 
    <div id="intro">Hello World!</div> 
    <div id="context1"></div> 
    <div id="context2"></div> 
    <div id="context3"></div> 
    
    <script type="text/javascript" src="script.js"></script> 
  </body> 
</html>

style.css

body{ 
  font-family: Helvetica, Arial, sans-serif; 
  color: blue; 
} 
#intro{ 
  /* for the intro element on the page */ 
  font-style: italic; 
  font-weight: bold; 
  color: #00FF00; 
}

script.js

var intro = document.getElementById("intro"); 
intro.innerHTML = "JavaScript Hello World!!!"; 

function populateDiv(theDiv, populateWith){ 
  var divID = document.getElementById(theDiv); 
  divID.innerHTML = populateWith; 
}
 
// this populates all the other divs on the page 
populateDiv("context1", "This is the Context 1 div"); 
populateDiv("context2", "This is the Context 2 div"); 
populateDiv("context3", "This is the Context 3 div");

Final rendered page

Completed files from this project:

HelloWorld_Complete.zip