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