Chris Sevilleja
scotch.io
@chrisoncode
Sarah Jorgenson
Auth0 R&D Content Engineer
@sarahkapehe
Every website uses these!
Structure
Style
Functionality
Anything and everything!
Personal Portfolio
<html> </html>
<html></html> <div></div> <p></p> <h1></h1> <a></a> <button></button> <img/>
<!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>
<a>My Sweet Link</a>
<a href="https://internet.com"> My Sweet Link </a>
<img />
<img src="myimage.jpg" alt="An Image" />
<ol> <li> </li> </ol> <ul> <li> </li> </ul>
Guess the HTML tag!
Section 1 & 2 - HTML
h1 { color: #C0FF33; background: #C00C00; }
color background font-size border
devhints.io/css
<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; }
Content
Padding
Margin
Section 3 - HTML/CSS
Section 4 - HTML/CSS
JavaScript!
scotch.io/courses/getting-started-with-javascript
By Chris Sevilleja
Making scotch.io. Google Dev Expert. Champion pizza maker.