Building Our First Website
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840908/Screen_Shot_2015-10-16_at_9.40.47_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840926/Screen_Shot_2015-10-16_at_9.46.59_AM.png)
Creating a Tuts+ Town Site with Joni (Bologna)
Agenda
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840933/Screen_Shot_2015-10-16_at_9.41.40_AM.png)
- Web design?
- How the web works
- CodePen!
- HTML & CSS?
- HTML: syntax & content
- CSS: syntax, colors, sizing
- Now what?
What We Are Building
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841537/Screen_Shot_2015-10-16_at_12.38.20_PM.png)
tutsplustown.com
What Tools We Need
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/3222855/Black-Large.png)
- Internet
- Browser
- CodePen
- tutsplustown.com/reference
What Is A Web Designer Exactly?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845180/Screen_Shot_2015-10-18_at_9.04.03_AM.png)
How The Web Works
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841520/Screen_Shot_2015-10-16_at_12.32.39_PM.png)
What is HTML & CSS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841547/Screen_Shot_2015-10-16_at_12.41.31_PM.png)
Connected Files
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841550/Screen_Shot_2015-10-16_at_12.42.24_PM.png)
Note: CodePen does this for us.
HTML: Structure Basics
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845214/Screen_Shot_2015-10-18_at_9.18.22_AM.png)
Elements
HTML: Adding Content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845241/Screen_Shot_2015-10-18_at_9.30.23_AM.png)
HTML: Adding Content
headings
<h1>I am the most important heading of all!</h1>
<h2>I'm less important.</h2>
<h3>I'm even less important.</h3>
<h4>I'm even less important.</h4>
<h5>I'm even less important.</h5>
<h6>I'm the least important.</h6>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1849096/Screen_Shot_2015-10-19_at_12.02.56_PM.png)
HTML: Adding Content
images & attributes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845255/Screen_Shot_2015-10-18_at_9.35.32_AM.png)
<h1>Welcome To Tuts+ Town</h1>
<img src="http://tutsplustown.com/images/townheader.svg" alt="An illustration of Tuts Town tower." />
Practice Time!
-
Log in to CodePen
- Fork demo
- Add a heading and image to HTML
HTML: Adding Content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845264/Screen_Shot_2015-10-18_at_9.37.43_AM.png)
HTML: Adding Content
lists & links
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/3323832/Screen_Shot_2016-12-09_at_2.13.56_PM.png)
HTML: Nesting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/3323865/Screen_Shot_2016-12-09_at_2.23.51_PM.png)
HTML: Adding Content
lists & links
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
</ul>
HTML: Adding Content
list with items and links
<h2>Sleep</h2>
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
<li>
<a href="#">Zzz Hotel</a>
</li>
</ul>
Practice Time!
- Let's add lists and links to our site!
- Don't forget to next list items inside of the main list element!
<h1>Welcome To Tuts+ Town</h1>
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
<h2>Sleep</h2>
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
<li>
<a href="#">Zzz Hotel</a>
</li>
</ul>
HTML: Adding Content
browser preview
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845303/Screen_Shot_2015-10-18_at_10.04.49_AM.png)
CSS: Properties & Values
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845340/Screen_Shot_2015-10-18_at_10.21.32_AM.png)
Practice Time!
- Let's quickly change the body background color to green in our CSS to see what happens!
body {
background-color: green;
}
CSS: Color
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845361/Screen_Shot_2015-10-18_at_10.32.50_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845363/Screen_Shot_2015-10-18_at_10.33.56_AM.png)
Practice Time!
- Let's quickly change the body background color to #FAF8DA, our lovely light yellow.
body {
background-color: #FAF8DA;
}
CSS: Color & Size
- Can change text color & size
- Can change image size
- Pixel = a tiny dot
- Let’s take a look at our <header> again ...
CSS: Color & Size
header
<h1 class="main-heading">Welcome To Tuts+ Town</h1>
<img class="town-preview" src="http://tutsplustown.com/images/townheader.svg" alt="..." />
- The HTML: add classes
- The CSS: target and style those classes
.main-heading {
font-size: 70px;
color: #205D76;
}
.town-preview {
width: 650px;
}
Practice Time!
- Add classes to the heading and image elements within <header>
- Declare sizing for both and color for the heading.
.main-heading {
font-size: 70px;
color: #205D76;
}
.town-preview {
width: 650px;
}
CSS Hint:
<h1 class="main-heading"></h1>
<img class="town-preview" />
HTML Hint:
Full header Preview!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1854654/Screen_Shot_2015-10-20_at_1.25.23_PM.png)
Where To Go From Here
-
Complete the Tuts+ Town Course:
- bit.ly/kidswebdesign
- tutsplustown.com/reference
- Make something fun each day.
Bye &
thanks!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841259/Screen_Shot_2015-10-16_at_11.23.13_AM.png)
Building Our First Website
By Joni Trythall
Building Our First Website
A CodePen workshop based on a Tuts+ web design for kids series.
- 1,541