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:
- Create a folder called 'my_site' on your desktop
- Open Sublime Text
- Drag you 'my_site' folder into Sublime Text
Let's setup our workspace:
In your Sublime Text project:
- Create a 'index.html' file
- Create Html template
- Change the page title
- Create Html element
- 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:
- Create 'styles.css' file
- Save to my_site directory
- 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:
- Create my_site folder
- Add 'index.html' file
- 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:
-
Create my site folder
- Drag to Sublime Text
-
Create 'index.html' file
- Change '<title>Site Title</title>'
- Add '<h1>Testing123</h1>'
- Open in browser
-
Add 'styles.css' to folder
- Connect it to 'index.html' file
- Change 'background-color'
- Refresh browser
Basic Setup Complete!
Have some fun!
Help (docs):
- w3schools.com
- stackoverflow.com
- mdn.io
Resources:
-
codecademy.com
- "Make a website"
- "Javascript"
- "Make and interactive site"
Boilerplate App:
Video:
Quick Sandbox Site
By shinobi881
Quick Sandbox Site
- 722