Quick Sandbox Site

Slides: http://slides.com/shinobi881/quick-sandbox-site

Sublime Text: https://www.sublimetext.com/

What you'll need:

  • Google Chrome Browser
  • Sublime Text (or other editor)
  • Some Googling skills

Let's setup our workspace:

  1. Create a folder called 'my_site' on your desktop
  2. Open Sublime Text
  3. Drag you 'my_site' folder into Sublime Text

Let's setup our workspace:

In your Sublime Text project:

  1. Create a 'index.html' file
  2. Create Html template
  3. Change the page title
  4. Create Html element
  5. Run file in browser
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>
<title>My awesome page!</title>
<h1>Let's put some stuff here</h1>

So Far:

  • Create my_site folder
  • Create index.html file in my_site
  • Get simple template from mdn
  • Change the title
  • Add 'h1' 'tag' or 'element' 
<!DOCTYPE html>
<html>
  <head>
    <title>Everybody Everybody</title>
  </head>
  <body>
    <h1>Rock the Bells!</h1>
  </body>
</html>

Stylesheet:

  1. Create 'styles.css' file
  2. Save to my_site directory
  3. Connect it to our html file

Create and connect our 'stylesheet'

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="styles.css"></link>
  </head>
  <body>
    <h1>Starlight, starbright!</h1>
  </body>
</html>

So far:

  1. Create my_site folder
  2. Add 'index.html' file
  3. Add 'styles.css' file

Change the site color:

Make styles.css look EXACTLY as below then refresh browser.

body {
 background-color: green;
}

h1 {
  font-size: 200px;
  font-color: yellow;
}

We're all setup:

  1. Create my site folder
    • ​Drag to Sublime Text
  2. Create 'index.html' file
    1. ​​Change '<title>Site Title</title>' 
    2. Add '<h1>Testing123</h1>'
    3. Open in browser
  3. Add 'styles.css' to folder
    1. Connect it to 'index.html' file
    2. Change 'background-color' 
    3. Refresh browser

Basic Setup Complete!

Have some fun!

Help (docs):

  • Google
  • w3schools.com
  • stackoverflow.com
  • mdn.io

Resources:

  • codecademy.com
    1. "Make a website"
    2. "Javascript"
    3. "Make and interactive site"

Boilerplate App:

Video:

Made with Slides.com