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

devhints.io/css

Styling Section 2

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

<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

Copy of Building Your First Website

  • 230
Loading comments...

More from Chris Sevilleja