Chris Sevilleja PRO
Making scotch.io. Google Dev Expert. Champion pizza maker.
Building your first website
Chris Sevilleja
scotch.io
@chrisoncode
Sarah Jorgenson
Auth0 R&D Content Engineer
@sarahkapehe
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
Browser
Text editor
Coding playground
Building Sites
-
Write the HTML
-
Style it
-
Add interactions
what we will build!
Personal Portfolio
HTML basics
html Tags
<html>
</html>COMMON TAGS
<html></html>
<div></div>
<p></p>
<h1></h1>
<a></a>
<button></button>
<img/>-
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>My Sweet Link</a><a href="https://internet.com">
My Sweet Link
</a><img />
<img src="myimage.jpg" alt="An Image" />More tags!
<ol>
<li>
</li>
</ol>
<ul>
<li>
</li>
</ul>
pop Quiz!
Guess the HTML tag!
THAT's HTML!
Portfolio
Section 1 & 2 - HTML
Questions
&
Answers
CSS basics
-
pick html element
-
Create a css rule
h1 {
color: #C0FF33;
background: #C00C00;
}COMMON PROPERTIES
color
background
font-size
border
Styling Section 1
Styling Section 2
<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;
}<IMG />
vs.
background-image
BOX MODEL
Content
Padding
Margin
Let's build!
Section 3 - HTML/CSS
Let's build!
Section 4 - HTML/CSS
Questions & answers
What to expect next week!
JavaScript!
Copy of Building Your First Website
By Chris Sevilleja