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;
}

Building Your First Website

By Chris Sevilleja

Building Your First Website

  • 253
Loading comments...

More from Chris Sevilleja