Setup

Now that you have a basic understanding of HTML and CSS, we’re going to put some of your skills to the test by having you build your own personal website. Along the way, we’re going to learn about new concepts and features on HTML and CSS that will make your websites look incredible. Don’t worry, we’re going to guide you and help you along the way 🙌 !

By the end of this course, you will have your own personal website that will look something like this (of course, you can adjust the layout and coloring however you want):

(embed iframe of what the final website should look like)

In your coding environment, you should see 2 files, one is an index.html file, where you will include all of you HTML code for your website. The other file is a styles.css file, which will include all the styling code for your personal website. We’ve already provided with the starter code for you, which should look like this:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css">
</head>

<body>
	<h1>Hello</h1>
</body>

</html>

h1 {
	color:red;
}

Although you can include the CSS code inside the HTML document (inside of style tags), developers like to separate HTML and CSS logic so the code is easier to read and manage. We know that all of the styling login is going to be inside of styles.css and the the layout of the webpage is going to be inside of index.html.

Throughout this guide, I’ll be creating a website for my friend whose name is Mike James. However, you should be following along and making a site that is about you and your hobbies.

As you first task, include an h2 tag under the h1 element that display My name is [Your name] in the website. Also, adjust the styling of the h2 tag to that it has a font-size property of 20px, and remove the current styling of the h1 tag.

View Answer

In your index.html file, you should now have the following code:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css">
</head>

<body>
	<h1>Hello</h1>
	<h2>My name is Mike James </h2>
</body>

</html>

And this is what should be in your styles.css file:

h2 {
	font-size: 20px;
}

Great, your website is coming along piece by piece. Don’t worry, we still have a lot of styling and layout changes to make.