Introduction to My First Web Page

4:32 with Joy Kesten

In My First Web Page you are going to expand your learning about HTML structure and begin to explore how to style your page to make it look the way you want. To begin we are going to connect a CSS stylesheet to our HTML document. Then learn about new tags to make text colorful, choose fonts, upload pictures, and more.

Teacher's Notes
Video Transcript
Downloads

Code for copy/paste:

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>All About Joy's Page</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
 </head>   
 <body> 
     <img src="joy.jpg" alt="joy">

     <h1>Joy Kesten</h1>

     <h2>Teacher</h2>

     <h3>San Francisco</h3>

     <h4>What I do:</h4>
     <p>I'm a teacher at Treehouse, but you should write in what you do here!</p>

   <h4>What I enjoy doing:</h4>  
   <p>When I'm not writing code, I like to surf and play music. Your turn, write in something that makes you happy, or things you like to do in your free time.</p>

 </body>
</html>

0:01
Hi.
0:04
And welcome to the Treehouse Club.
0:07
I'm Joy, and in this course, My First Webpage,
0:10
you're going to expand your learning about HTML structure and begin to
0:14
explore how your style sheet can help you make your page look the way you want.
0:20
To begin, we're gonna connect the style sheet to your HTML document.
0:24
And then learn about a few new tags to make your text colorful, choose fonts,
0:28
upload pictures, and more.
0:30
Let's check it out!
0:32
You can begin by clicking on the Launch Workspace button next to the video.
0:37
If these files don't come up right away, here I'll show you.
0:42
If it looks like this or if you have a welcome page you can
0:47
just click on the index.html and style.css and they'll reappear.
0:52
Here's a preview of the code and here's the preview when I view it in the browser.
0:57
I chose to do a purple theme because I was inspired by the polka dots in
1:01
the background in my image.
1:02
You can choose whatever color or picture that suites your taste.
1:06
As always, you have full artistic license here, so do whatever you want.
1:10
Dabbing into the code,
1:12
the first thing you're gonna wanna change is my picture to your picture.
1:16
Here, in the body, is our image tag.
1:18
And to change the picture, I'm gonna have to have a new picture.
1:22
So, I've put one here on my desktop, and I'm gonna upload it to my workspace.
1:27
You know you've hit the right area at the bottom of the file tree
1:30
when that green plus sign appears.
1:32
Once it's uploaded, like mine,
1:35
you might need to change the name of your picture right away.
1:38
Now I'm gonna press Ctrl and click on it.
1:42
And in the menu, you can see down here it says Rename.
1:46
I definitely want the .jpg still there.
1:49
All of these numbers are gonna go.
1:51
[SOUND] And I'll make it joy1.
1:55
Then in my index.html file, under the image,
1:59
the path to the image with src, I'm gonna change to joy1.
2:05
And my name's still Joy, but you should change the Alt to your name.
2:10
Then I'll save it, and refresh the page.
2:13
And my new picture's there.
2:15
Great.
2:16
Back in the HTML document, most things inside the body should look familiar.
2:22
Like our level one and level two headlines, and our paragraph tag.
2:26
Level three and four headlines are new.
2:29
And you should play around with those and see what they do.
2:32
Inside the head element, there are some new tags.
2:34
And I promise, we will go over those in more detail later on.
2:38
However, for now, let's get into our style sheet.
2:42
I've broken it up with comments, as you can see here.
2:45
This is the top bar color and here's the body styling.
2:49
I tried to make them really clear, so
2:51
that while you're styling this page, you can see where everything is.
2:55
Back up at the top of our style sheet it says, Top Bar color.
2:58
And here on our webpage, there's a color at the top of our webpage.
3:03
When we scroll over this hexadecimal color, and I'll tell you more about those
3:07
later, you can see that there's a nice picture of what that color's gonna be.
3:13
Down here is a three digit hexadecimal color.
3:16
Again, we'll talk more about those in the future.
3:19
But you should try changing these number and
3:21
letter combinations around and see what they do.
3:24
There's also a few more down here in our headlines.
3:29
And the last one is the h4 headline.
3:32
Something else you're gonna wanna do is change the border radius on our image.
3:36
I made it 100% which almost makes it look like a circle.
3:40
But if I changed it to 10%, saved it and refresh the browser.
3:46
You can see it's much more squared off and
3:49
it's just the little corners that are rounded out.
3:53
The last thing I'll point out before letting you get to
3:56
editing is the font size.
3:57
Try and change these around in the body and
4:01
the headlines to see what different sizes they make.
4:05
These are called ems, and again, we'll talk more about those in the future.
4:09
But for now, play around with them, see what they do.
4:13
All right, it's your turn.
4:15
Change everything in the workspace to make it your own.
4:18
And when you're ready, I'll explain each element in detail.
4:21
Just a reminder, if you ever want to revert back to the original code, you
4:26
can copy and paste the line you need, or the whole code, from the teacher's notes.
4:31
Have fun

You need to sign up for Treehouse in order to download course files.

Treehouse Club: CSS

Introduction to My First Web Page

Code for copy/paste:

Sign in