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)
Thanks for making this workshop possible!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840866/Screen_Shot_2015-10-16_at_9.26.32_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840871/Screen_Shot_2015-10-16_at_9.27.52_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840874/Screen_Shot_2015-10-16_at_9.29.16_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1840888/Screen_Shot_2015-10-16_at_9.32.47_AM.png)
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
- Folders!
- HTML & CSS?
- HTML: structure & 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/1845197/Screen_Shot_2015-10-18_at_9.12.40_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845199/Screen_Shot_2015-10-18_at_9.13.38_AM.png)
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)
Our Site = Not On Web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1848664/Screen_Shot_2015-10-19_at_10.25.11_AM.png)
Files, Files, Files
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841552/Screen_Shot_2015-10-16_at_12.44.44_PM.png)
Folders: Our Structure
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841555/Screen_Shot_2015-10-16_at_12.46.03_PM.png)
Let's open up our Tuts+ Town folder!
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)
Linking Documents
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1841550/Screen_Shot_2015-10-16_at_12.42.24_PM.png)
HTML: Structure Basics
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845206/Screen_Shot_2015-10-18_at_9.17.05_AM.png)
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: Planning a Structure
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845218/Screen_Shot_2015-10-18_at_9.19.25_AM.png)
HTML: Nesting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845236/Screen_Shot_2015-10-18_at_9.24.59_AM.png)
HTML: Nesting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845226/Screen_Shot_2015-10-18_at_9.22.41_AM.png)
Practice Time!
-
Let's nest our higher level structure within <body>
- <header>
- <main>
- <footer>
- Don't forget to close these!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845327/Screen_Shot_2015-10-18_at_10.15.33_AM.png)
HTML: Adding Content
Containers, Containers, Containers
![](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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845245/Screen_Shot_2015-10-18_at_9.32.26_AM.png)
The header
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)
HTML: Adding Content
header preview
<body>
<header>
<h1>Welcome To Tuts+ Town</h1>
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
</header>
<main>
<!-- This is where most of our content will live! -->
</main>
</body>
HTML: Adding Content
header preview
![](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
main & sections
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845277/Screen_Shot_2015-10-18_at_9.44.25_AM.png)
HTML: Adding Content
main
<main>
<section> </section>
<section> </section>
<section> </section>
</main>
HTML: Adding Content
section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845281/Screen_Shot_2015-10-18_at_9.48.12_AM.png)
HTML: Adding Content
section
<section>
<img />
<div>
</div>
</section>
HTML: Adding Content
section
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845287/Screen_Shot_2015-10-18_at_9.51.11_AM.png)
HTML: Adding Content
section & lists
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
</ul>
HTML: Adding Content
section
<section>
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." />
<div>
<h2>Sleep</h2>
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
<li>
<a href="#">Zzz Hotel</a>
</li>
</ul>
</div>
</section>
HTML: Adding Content
footer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845301/Screen_Shot_2015-10-18_at_10.02.05_AM.png)
HTML: Adding Content
footer
<footer>
<p>Created with enthusiasm by caring residents.</p>
</footer>
HTML: Adding Content
Full Preview
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845303/Screen_Shot_2015-10-18_at_10.04.49_AM.png)
Practice Time!
- Let's finish up the content for our site!
- Don't forget to ask questions & reference tutsplustown.com for content!
<body>
<header>
<h1>Welcome To Tuts+ Town</h1>
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
</header>
<main>
<section>
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." />
<div>
<h2>Sleep</h2>
<ul>
<li>
<a href="#">The Snooze Inn</a>
</li>
<li>
<a href="#">Zzz Hotel</a>
</li>
</ul>
</div>
</section>
<section>
<img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." />
<div>
<h2>Food</h2>
<ul>
<li>
<a href="#">Just Cookies</a>
</li>
<li>
<a href="#">Cake Too</a>
</li>
</ul>
</div>
</section>
<section>
<img src="images/townshop.svg" alt="Illustration of a Tuts Town store." />
<div>
<h2>Shop</h2>
<ul>
<li>
<a href="#">Puppy Parade</a>
</li>
<li>
<a href="#">Cool Kittens</a>
</li>
</ul>
</div>
</section>
</main>
<footer>
<p>
Created with enthusiasm by caring residents.
</p>
</footer>
</body>
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!
- Save file & refresh browser
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.
- Save file & refresh browser
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/310289/images/1845396/Screen_Shot_2015-10-18_at_10.42.54_AM.png)
header
CSS: Color & Size
header
<header>
<h1 class="main-heading">Welcome To Tuts+ Town</h1>
<img class="town-preview" src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
</header>
- 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 & color for the heading!
.main-heading {
font-size: 70px;
color: #205D76;
}
.town-preview {
width: 650px;
}
CSS 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 site:
- webdesign.tutsplus.com/series/web-design-for-kids
- Will include positioning, layout, typography, design theory, hosting on the web.
- Ask lots of questions!
- Make something 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 workshop based on a Tuts+ web design for kids series: Tuts+ Town. Sponsored by NowSecure!
- 1,533