HTML Tutorial: From Web Design Prototype to HTML

Articles

HTML Tutorial: From Web Design Prototype to HTML


Hey, I’m Hunter from Skillthrive, and
welcome to the second lesson in this four-part course, where you’ll design and
code a video channel landing page. In this lesson, you will 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 also 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 skillthrive.com 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 out of the way, let’s get started. All right,
now that we have the design done in Figma, let’s go ahead and jump in and
actually start writing the HTML for the actual video channel. Now,
the thing I do want to mention before we get started is the code editor that I’m
using, and that code editor is Visual Studio Code. Now, the reason I’m
suggesting that is, there’s going to be some extensions that I want to be
installing, and if you’re using something that’s different, you might not have
the same access to those extensions. Now, if you’re familiar with something else
and you want to use it, feel free to use it. It’s just definitely something here,
in case you want to follow along with me exactly. So, after you download that here
from code.visualstudio.com, let’s go ahead and open up Visual Studio
Code. Once it loads up, come down here to this icon, and this is where you can
actually install extensions. The first one I want to install is Live
Server. So, it’s going to be the first one here, I’m going to click on this. You can
see that 4.4 million people have downloaded it, and it’s 5 stars, so you
can tell it’s really popular. The reason it’s really popular is that it
allows you to make changes in your code, whether that’s HTML or CSS, and then see
those reflected live in the browser. Essentially, what it does is,
it just creates like a hosted website for you, on your computer. And
then, by doing that, once you save those files, it’s going to refresh
automatically, and you can see that. Now, in the past I’ve gone through and
actually just went and refreshed the site by hand. And the one reason that’s
annoying is not just the fact that you have to do it every time you want to see
the changes, but for those who are watching this and are learning and just
trying to understand what I’m writing and what it’s actually doing, it’s going to
help you connect those dots a little better. So, cool, now that you have that
extension installed, the next one I have, I want to be using is HTML5, excuse me,
HTML Boilerplate. And I don’t see it here, so let’s see, HTML… I spelled it wrong, so
Boilerplate. Here we go. And this is just going to allow you to type in, like,
‘HTML’, you can come down, select the Boilerplate, and it’s going to spit out
some boilerplate code for you. Now, if you don’t know what Boilerplate code is,
essentially it’s just code that you would rewrite on, like, over and over
again. So, instead of rewriting it over and over again, you can just start with
some starter code, change a couple things, like a title and the description, and then
start actually writing the code. So, go ahead and install that, because I’m going
to be using this as well. Then we can come in and actually create a new
project here. So, I’m going to come into my Finder. I’m going to come into the
Desktop and create a New Folder, just call that folder ‘Video Channel’. Then I
can grab this folder and then drag it into Visual Studio Code, here on the icon,
and it’s going to open up that project for us. I’m just going to go ahead
and move this to the left of the screen and then move our
browser to the right. So, here, under this folder, I can go ahead and create a new
file. So, I’m going to do ‘index.html’, which is going to be for our home page. Then
I’m going to create the ‘style.css’, which is going to hold our styling. Then
I’m going to come back into the HTML and I’m going to type in ‘HTML’. Whoops!
HTML, you can see here we have this HTML5 Boilerplate. I can click that and then it
spits out that boilerplate code. Then I can come through and change some
things. So, let’s change the title to ‘Video Channel’, and for the description, I can
change this to ‘This is my awesome video channel’. Then we can go ahead and pull in
the style, so ‘style.css’. Ok. Then go ahead and get rid of this comment. And
now that we have this, let’s go ahead and come into this HTML file, right-click and
say Open With Live Server, and you’ll see this new tab opens up. You don’t see
anything right now, but if we come in and just, you know, add like an h1 here that
says ‘Hello World’ and then save that, you’ll see that reflected in the browser
automatically. Cool, so, we don’t need ‘Hello World’ and we also don’t want this
script tag. And the first thing I’m going to do is to go ahead and just pull in a wrapper,
create a wrapper, so let’s do ‘div class=”wrapper”‘. Let’s go ahead and do double
quotes. And then I’m going to create a comment here, and this comment is going
to just say that this is where the header starts, so ‘Header’. Then we can
create a new section, and this section we can call ‘top_section’. Then we can
create a ‘header’ here. And on this header I want an h1, and you can put any title
you want, we’re going to do ‘Your Channel Title’. Then we can do a P tag with some of the
Lorem Ipsum. And I’m just going to come into Figma and copy this Lorem Ipsum,
come back into our code editor here and then paste that in. Then, under the
P tag, I’m going to do a button, and on this button we’re going to have ‘Watch Now’. Let’s
go ahead and save that. Cool, so, now we can see those here in our browser.
Then, on this section, this is it for the header. So, let’s go ahead and just
comment that, so we know that this is in Header section. The next thing I want
to do is create another comment here, and this is going to show us that this
is where the content is going to actually start.
The first thing I want to do here is create another section and give this a
‘class=”content_section”‘. And on this, I want to go and create the first playlist. And on that playlist,
I want a h4 tag, and this h4 tag is going to be our playlist title, so we’ll give
that a ‘class=”playlist_title”‘. And on the h4, we can just say “Section Title”.
Ok, so, we can see that there in the browser. The next thing we want to do
is go ahead and create a div for all the videos. So, this will be ‘div class=”videos”‘. And before we actually move on to
the actual video, like the individual videos, let’s actually go ahead and bring
in the images that I exported from Figma. So, I’m going to come into the Finder here,
and here is my actual, where my images are. And here is the board where my project is.
So, I’m just going to copy this folder here, with all my images, come into the
Desktop where my project is, and then paste that in. You’ll see that right
here the images are pulled into the Video Channel. Ok, so, now what we can do
is, we can create a new div here. So, I’m going to do ‘div class=”video”‘.
Then I’m going to do some inline styling, to pull in the background image
or at least set the background image, so “background-image”. And we’re going to set
that to a URL. So, the URL is just going to be where the images are. So, it’s
going to be ‘images/image-1’ and then JPG. So, this is just the file
name. Then we can just go ahead and close that up. The next thing I want to
do is actually use a Font Awesome icon. Now, in order to do that, we need to make
sure that we’re pulling in the Font Awesome library. And
to do that, we need to head to Font Awesome website. And once you’re on the
actual homepage here, you’ll see this call to action to start using for
free. Then you want to make sure you have the Free selected, and then just go ahead
and just copy all of this, come back here. And up here, under your style, where you
called the actual style sheet, just paste that in. And now we can start using Font
Awesome within our HTML. Now, in order to find, like, the actual, what you need
to call in order to use it, so you can search for an icon. So, we’re going to do
the Play circle. You can see up here you have the iHTML, the icon HTML that
you can use to actually use this in our project. So, I’m just going to click here
to copy it and then paste that right here. Cool, and once we did that, I’m just
going to copy this video seven more times. So, this div right here for the
video, I’m going to copy this and then paste it seven times. And this represents
the individual videos or the eight individual videos for the first
playlist. Then I’m going to come in and just change the numbers here. All right, and once we say that, we can
actually start seeing some of the images sort of pull in, they look awful, but
we’ll fix that in the styling. And now what we want to do is go ahead and
create the Playlist 2 section. So, let’s come up to this Playlist 1
div. You can see here it highlights the end of that, and we can just go ahead and
copy this and then paste it underneath this one. We’ll change this one to
‘Playlist 2’. And we also need to change the title, if you want, and we also need
to change this to start at 9 and then go up to 16. All right, so, that’s basically everything
we need to do. I do want to just go ahead and, it’s just for good measure, I’m going to
note here. So, create a note that says ‘This is the end of the content section’.
And go ahead and just note here that this is end of the wrapper. So, once we
say that, you can see you have your two sections, we have our Header, and that’s
basically everything that is going to be in this, as far as the HTML. And we’re
going to make this look really nice and pretty in the next video, where we’re going to
actually be writing the CSS. So, with that said, let’s go ahead and jump in and
start writing the CSS.

Leave a Reply

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