Building your first website
Chris Sevilleja
scotch.io
@chrisoncode
a warning
3 languages
Every website uses these!
HTML
Structure
CSS
Style
Javascript
Functionality
Examples!
What can i build?
Anything and everything!
Websites
Apps
desktop Apps
Games
Web Servers
Robots
Presentations
Tools
build!!
Browser
Text editor
Building Sites
-
Write the HTML
-
Style it
-
Add interactions
HTML basics
html Tags
<html>
</html>-
Elements = building blocks
-
Represented by tags
-
Not displayed to users
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<div>
content goes inside div
</div>
<h1>This is a title</h1>
<h2>This is a smaller title</h2>Tags + Attributes
<a href="http://google.com">My Sweet Link</a>
<img src="http://awesome.com/dinosaur.jpg">CSS basics
-
pick html element
-
Create a css rule
h1 {
color: #C0FF33;
background: #C00C00;
}Content
Padding
Margin
<div id="card">
my content goes here
</div>#card {
background: #EEE;
border: 1px solid #BBB;
padding: 20px;
}<div class="card">
my content goes here
</div>.card {
background: #EEE;
border: 1px solid #BBB;
padding: 20px;
}