caseywatts/Cloud 9 Static Content README.md

## bubbles.jpeg

      
    Raw
  

              bubbles.jpeg
            
          
## Cloud 9 Static Content README.md

      
    Raw
  

              Cloud 9 Static Content README.md
            
          
    Cloud 9 - Static Content

Setting Up Cloud9


Go to c9.io and log in
Create a new workspace

Workspace name = practice-static-site
Clone from Git or Mercurial URL = https://gist.github.com/f4f1dc512ffdce293aa1.git
(everything else at defaults)


Look around


check out the contents of the files
While index.html is open, click Preview -> Live preview file (index.html)
a pane should open with your HTML page

Things To Try


Change the values on existing CSS properties on existing CSS classes
Add a new CSS class .rounded-corners and use the css property border-radius. Apply this class to the <img> tag.
Upload your own image "File -> Upload from Local drive" and make that show up

Move CSS to its own file


Create a file named my-fancy-style-file.css.
Cut/paste the insides of your <style>...</style> block to this new css file.
In your HTML file remove the remaining (now empty) <style>...</style>.
Where the <style>...</style> used to be, put the line <link rel="stylesheet" type="text/css" href="my-fancy-style-file.css">
Save the files, refresh the browser. Did it work? :)

If you change the name of the file (either the file itself or the line in 'index.html') do the style stop appearing?


Add jQuery & Click button


after the line <link rel="stylesheet"... put <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>

this will get jQuery from online and put it on your HTML page for you to use
if you go to your page you could use selectors like $('div') and they will work now


Alert Popup Button (using jQuery)


In your index.html in the <body>...</body> put

<button id='alert-1'>Important Message</button>

In the <head>...</head> put

<script> 
$('#alert-1').click(function(){
  alert('Excuse me! I am an alert! I am Super Important Ok?')
});
</script>

Save/refresh. Click the button, and you should get a popup

Extract javascript to its own file


Create a file named my-awesome-javascript-file.js.
Cut/paste the insides of your <script>...</script> block to this new js file.
In your HTML file remove the remaining (now empty) <script>...</script>.
Where the <script>...</script> used to be, put the line <script type="text/javascript" src="/my-awesome-javascript-file.js"></script>
Save the files, refresh the browser. Did it work? :)

Put CSS and JS in their own folders


Make a folder css and another folder js
Move the file my-awesome-javascript-file.js to js/my-awesome-javascript-file.js
Move the file my-fancy-style-file.css to css/my-fancy-style-file.css
Change the references in your <head>...</head> to point to these files.
Save the files, refresh the browser. Did it work? :)

JS and CSS and HTML together


Add the tag <p> I can be highlighted too! </p> to your <body>...</body>
Create a new file js/active.js with the contents

$("p").click(function(){
  $(this).addClass('active')
});

Create a new file css/active.css with the contents

.active {
  background-color: purple;
}

Link to the new js file by putting <script type="text/javascript" src="/js/active.js"></script> in the <head>...</head>
Save/refresh. Try to click on paragraph tags. Does it make the background purple?


## index.html
  <!DOCTYPE html>
  <html>
  <head>
    <title> TAB NAME </title>
    <style>
      .container {
        width: 80%;
        margin: 50px;
        background-color: gray;
      }
      p{
        background-color: pink;
      }
      #p2{
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class ='container'>
      <p> Hello World! </p>
      <p id='p2'> I am also a paragraph but
        my background color is orange :D
      </p>
      <img src="bubbles.jpeg">
    </div>
  </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title> TAB NAME </title>
	<style>
	.container {
	width: 80%;
	margin: 50px;
	background-color: gray;
	}
	p{
	background-color: pink;
	}
	#p2{
	background-color: orange;
	}
	</style>
	</head>
	<body>
	<div class ='container'>
	<p> Hello World! </p>
	<p id='p2'> I am also a paragraph but
	my background color is orange :D
	</p>
	<img src="bubbles.jpeg">
	</div>
	</body>
	</html>