Introduction to HTML and the Portfolio Project


[MUSIC] Hi, I’m Nick. If you’re totally new to web design
development or if you need a refresh, this is a good place
to start. In this course we’re going to learn how to
write HTML and CSS which are the basic building
blocks of any website. Don’t worry if you’ve never written a
single line of code before. We’ll learn step by step so that you can
follow along. By the end, we’ll have created our very
own personalized website that’s live on the web, available for anyone to view.
Let’s take a quick tour. This website has three pages. There’s the Portfolio page, which you can
see here. This allows you to show your design work,
photography or anything you’d like. In fact, you could easily customize this area to display your favorite family
pictures. Next, we have an About page.
Here, you can post a profile picture along with a brief description of yourself.
Finally, we have the Contact page. Here, you can list out contact details
like your phone number, email address and
Twitter handle. This is useful if you’re a web designer
available for hire or if you’re running a business and you want people to be able
to reach you. We’ll explain everything in detail but
let’s warm up by writing a single line of HTML. We’re going to write our name and then wrap it in what’s called a headline
element. This element is just like a headline in a newspaper, it labels an important section
of the page. I’m going to type out some code, and then
in the code challenge after this video, you can type in your own name. The screen we’re looking at is called
Workspaces. We’ll learn more about Workspaces in the
next video. But, don’t worry about following along
just yet. For now, just try to listen and absorb the
information so that you’re ready for the code
challenge after this video. First, we’ll need to type an opening angle
bracket. On most keyboards, you can do this by
holding down Shift and pressing the comma key. Next we’ll type the letters H followed by
the number 1. This will let us create a level one headline which we’ll talk more about in
upcoming videos. Now we’ll close this with a closing angle
bracket. Just hold down Shift and hit the period or
full stop key. You’ll notice that WorkSpaces has completed this line
for me. It’s typed the closing tag for this h1
element. I am going to go ahead and delete this
closing tag though, so that we can learn to type it on
your own. We’ve created the opening tag but we also
need to make a closing tag to pair with it. To do that, we’ll type the exact same
thing, only this time, we’ll include a forward
slash just before the h. So, we’ll type an opening angle bracket, a
forward slash. And once again, it’s completed it for me. But after the forward slash, we’ll type an
h, a one, and then a closing angle bracket.
And that will complete the h1 element. Now, between these two tags, we’ll type
our name. So, I’m going to click between the two
tags here and I’m going to type my name, Nick
Pettit. But, you can go ahead and type your own
name. And that’s it. In the code challenge, you’ll create an
opening h1 tag with angle brackets. Type in your name and then create a closing tag with angle
brackets and a forward slash just after the first angle
bracket. Are you ready to code some HTML?
Let’s try it out.

Add a Comment

Your email address will not be published. Required fields are marked *