How to Use HTML to Create a Website Step-by-Step

How to Use HTML to Create a Website Step-by-Step

Hey, I’m Hunter from Skillthrive, and
welcome to the second lesson in this three-part course, where you’ll design
and code a simple About Me landing page. In this lesson you’ll write the HTML
for the design from Lesson 1. Once you’re done, you’ll move on to writing the CSS
in Lesson 3. You’ll find all the lessons linked for this course in the
description. Feel free to follow along and write the code as we go, but you can
also download the final code and design on for a small price.
This helps me, as a creator, to continue making design and development courses
for you to watch at no cost. With that covered, let’s get started! Before we
get started, I want to talk about the code editor that I’m going to be using
in this course, which is Visual Studio Code. Now, you can download this for Mac
and Windows, and the reason you might want to download this is because I want
to be using some extensions that come with Visual Studio Code. Now, if you use a
code editor that you prefer and you’re really comfortable with this, feel
free to not use this, but you can just head to in order
to download that. Once you download that, let’s go ahead and create the
folder where our project is going to live, and I’m just going to put this, in my
case, on the Desktop. I’m going to come in here and just create a new folder and
then call this just ‘About Me’. Then I can select this folder and just drag
this onto Visual Studio Code down here, and that is going to open a new project
in Visual Studio Code. Let’s go ahead and maximize this screen. I’ll
just go ahead and exit out this ‘Welcome’, come into the About Me section
and then click here to add a new file. Here we’re going to add ‘index.html’,
which is our home page. Then add a new file and call this ‘style.css’.
Let’s go ahead and talk about the extensions that I’m going to be using. So,
if we come into this icon here and if I expand this window just a little bit, I’m
going to come in and search for ‘Live Server’. And right here you can see that it has
4.5 million downloads, five stars, so it’s something that a lot of people use. And
the reason a lot of people use it is that it allows you to write the code in,
you know, Visual Studio Code and actually see it rendered live on the browser,
without having to go in and refresh that. It’s a way faster way of developing
and seeing those changes in real time. Once you install that, the next one I’m
going to be using is HTML Boilerplate. You can see here that this is also a
highly used and rated boilerplate thing. Now, it’s actually really easy
to use. It doesn’t really do that much, but it’s really nice to just, kind
of, have this boilerplate ready to go, out of the box, when you start writing your
code. Now, let’s go and just, you know, exit out those, once you have those
installed. We can go ahead and just click here to get rid of that. And to get
started with the boilerplate, I’m just going to type in ‘HTML’. You can
see here this HTML5 Boilerplate. Once we click that, we have this boilerplate
that’s ready to go. Let’s go ahead and just start with the title,
let’s call this ‘Jessica Lyons’. And we can do, like, ‘Content Marketer’. Under
‘description’, we can add just a really brief description, like… A little bit more descriptive, so ‘Content
Marketer from Atlanta Georgia’. Then we can bring in our style sheet, which is
just going to be ‘style.css’. And then we can get rid of this script tag and
start writing our HTML. The first thing I’m going to do is just create a
new div, and this div is going to have a class called ‘wrapper’. This is
going to go around all of our content. The next thing we’re going to do is
create a section, and this section is going to have a class called ‘top’. Then we
can create a new div. And this can have a ‘class=top_content’. Within
this, we want a P tag with a class of ‘subtitle’. Let’s go ahead and just
give this the name of ‘Content Marketer’. Now that we have a couple of things
added here, let’s go ahead and, you know, boot up Live Server, so we can actually
start seeing this. To do that, I’m going to come in and expand this, come
into my ‘index.html’, right-click and say Open With Live Server. So, that’s going to
launch this into my project. Let’s go ahead and just set this to the right
side of our screen. And then set this to the left side and start just, kind of, you
know, continuing to write that code. The next thing we want to do is, we want
to bring in an h1 tag, which is going to be the title of her name. So, we’ll do
‘h1’, class is ‘title’. And here we can write ‘Hi, I am’, and then we can use the break
tag in order to break this into the next line. That’s annoying. Let’s go and
just change this manually. Ok. ‘Hi, I am Jessica Lyons’. Now, in order to
get that underline just under Jessica, what we want to do is create
a span tag and then give this a class equal to
‘underline’. Then we can take ‘Jessica’ and then just put her in between
the span. And the reason we’re using span over, you know, another element name, like
a section or div, is that span is a generic inline container. So, the reason…
You can see here that it’s in between the h1 tag, then we can use that span,
give it a class and then use that to style specifically just the
name part, the first name part, which is Jessica, in our case. That’s just a
quick idea of why we’re using span instead of something else. If we save
that, we can see now that we have ‘Hi, I am Jessica Lyons’, and we can have that break
that breaks that off into the next line. Now, we don’t see the underline because
we haven’t written any of the CSS yet. That’s why you’re not seeing that. Now,
the next thing we want to do is, I’m going to add a div here for the Social. So,
let’s do ‘div class=social’. And I’m going to create another div, and this div is
going to have a ‘class=social item’. I’m just going to copy this
again, because we’re going to have two ‘social items’. On this one we want the
Instagram icon. Now, what we’re going to be using is Font Awesome. So, we need to
come into Font Awesome, and we can click here to start using for free. Then go
ahead and copy this link here, or this tag, and then we need to come into
our head, right underneath our stylesheet, and then paste that in. That’s going
to allow us to use the Font Awesome directly into our HTML. Now, what we
need to do is search here for the icon that we want, which is going to be
Instagram. We can select the Instagram that we want
to use. Then up here you have this little icon HTML that you can click to
copy and then just drop it into your code, like that. That’s everything we
need to do for that. And next, we can do the actual information. We’re going to
actually have this as a clickable thing, which is going to have a class of ‘social_copy’.
And the href is just going to be a dummy href, or a link that’s not really
going to go anywhere. But go ahead and, you know, if you’re actually using this
for Instagram, send this to your Instagram account. And we can go ahead
now and just type in her Instagram handle, which is ‘Jessica_Lyons’.
Let’s just go and copy this I and A tag, paste that in. And what we want to change
here, let’s go ahead and change the email, ’cause that’s going to be quick. We
can do ‘[email protected]’. On this href, we want to do ‘mail to’ and
then ‘[email protected]’. Let’s go and save that and make sure
how this is looking. The reason we use ‘mail to’ and then the colon and the name
is that, once we click on this, it’s going to launch, you know, our email provider
and then actually have, you know, an email ready to go, with the ‘to’ of her
addresses already in there. This is, kind of, a quick way to make
this link actually usable for an email. All right, so, let’s not save that.
Now that we did that, we want to change the I or the icon here. To
do that, we need to come back into Font Awesome, and I’m going to search for ‘mail’.
So, once ‘mail’ comes up, there’s a ton of them here. We want the envelope. Then
I can click here to copy that, select this I tag and then paste that in. There we go. So, if come back and then
save this, we can see that that icon is now changed. Now, there’s just, you
know, one more thing we want to do and that is to create a section here, right
after this one, for the top profile. Now, I’m actually going to create a div
right before this section ending. That’s going to be just ‘div class=top_profile’.
This one’s not going to have anything in it, ’cause we’re just
going to use a background image in CSS. So, that’s going to hold the image of
Jessica Lyons. Now that we have that, that’s basically everything we need to
do, as far as writing the HTML. You can see that it was really simple to just
build that structure and the content, that we want to actually start styling
in the next video. So, with that said, let’s go ahead and jump into the next
video, where we’ll write the CSS for this course.

Author: Kevin Mason

3 thoughts on “How to Use HTML to Create a Website Step-by-Step

  1. Just a heads up Font Awesome has changed the way it's used. You now need an account and have a few extra steps to deal with.

  2. Hi, I'm trying to learn some HTML / CSS coding, and I've been using your website and Youtube for a lot. But after watching this I have an question, how can I make the actual social icon clickable, and not only the text after it. Thanks in advance! 🙂

Leave a Reply

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