Part 3: Adding First Section

We’re going to move ahead and create our “Favorite Games” section. Create a new div tag in the index.html file.

By the end of the lessons, we should have a new component in out website that looks like this:

To build the above component, we’re going to follow the following steps:

  1. Create an outer div tag the will house the whole component, and give it a class attribute with the value games
  1. Create another div tag inside the outer div tag, and create an h2 tag with the text “Favorite Games”.
  1. Inside the same div tag, create an h3 tag containing a few sentences about your favorite games.
  1. After that, outside the inner div tag, create a ul tag with a class attribute of games-list, and list your favorite games inside of li tags.
  1. Outside the div tags, create a new div tag with a class attribute value of img-container, and place an img tag inside it with a width attribute of 400px, and a src attribute of your image URL.
  1. Apply styles to make the component look like the image above.

If those steps seem difficult, don’t worry, we’re going to help you throughout building it all. But I encourage you to at least try following the steps yourself and see what you can get done.

(Solution):

Following step #1, we’re going to create an outer div tag with a class attribute value of games:

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

<body>
	<div>
		<h1>Hello</h1>
		<h2>My name is Mike James </h2>
		<p>I love playing video games and reading cartoons. When I grow up, I want to be a
 basketball player that plays in the NBA. My current favorite basketball player is Steph Curry.</p>
	</div>

	<div class="games">
	</div>
</body>

</html>

Step number two should be straightforward: we create another div tag inside the previous one we created, and put an h2 tag with the text: “Favorite Games”:

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

<body>
	<div>
		<h1>Hello</h1>
		<h2>My name is Mike James </h2>
		<p>I love playing video games and reading cartoons. When I grow up, I want to be a
 basketball player that plays in the NBA. My current favorite basketball player is Steph Curry.</p>
	</div>

	<div class="games">
		<div>
			<h2>Favorite Games</h2>
		</div>
	</div>
</body>

</html>

For step #3, we’re going to create an h3 tag with a few sentences to talk about the games we’re going to display in out website. For me, I did the following:

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

<body>
	<div>
		<h1>Hello</h1>
		<h2>My name is Mike James </h2>
		<p>I love playing video games and reading cartoons. When I grow up, I want to be a
 basketball player that plays in the NBA. My current favorite basketball player is Steph Curry.</p>
	</div>

	<div class="games">
      <div>
          <h2>Favorite Games</h2>
          <h3>I play these games regularly and I think that they are the best video
        games to exist on earth. I think you all should try these games too:</h3>
      </div>
	</div>
</body>

</html>

Step #4 involves us creating a list with a ul, and giving it a class attribute value of games-list (we’re going to use the class names when we are styling these tags). Think about the games you love playing, and display those on your list:

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

<body>
	<div>
		<h1>Hello</h1>
		<h2>My name is Mike James </h2>
		<p>I love playing video games and reading cartoons. When I grow up, I want to be a
 basketball player that plays in the NBA. My current favorite basketball player is Steph Curry.</p>
	</div>

	<div class="games">
      <div>
          <h2>Favorite Games</h2>
          <h3>I play these games regularly and I think that they are the best video
        games to exist on earth. I think you all should try these games too:</h3>
      </div>

      <ul class="games-list">
        <li>Fortnite</li>
        <li>Roblox</li>
        <li>Minecraft</li>
        <li>Among Us</li>
        <li>Skate 2</li>
      </ul>
	</div>
</body>

</html>

For step #5, we’re going to add an image. I chose this image (if you and image you want on the internet, feel free to include it instead):

We’re going to create a separate div class and place the img tag inside of it. We’re also going to add width and src attributes to the img tag:

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

<body>
	<div>
		<h1>Hello</h1>
		<h2>My name is Mike James </h2>
		<p>I love playing video games and reading cartoons. When I grow up, I want to be a
 basketball player that plays in the NBA. My current favorite basketball player is Steph Curry.</p>
	</div>

	<div class="games">
      <div>
          <h2>Favorite Games</h2>
          <h3>I play these games regularly and I think that they are the best video
        games to exist on earth. I think you all should try these games too:</h3>
      </div>

      <ul class="games-list">
        <li>Fortnite</li>
        <li>Roblox</li>
        <li>Minecraft</li>
        <li>Among Us</li>
        <li>Skate 2</li>
      </ul>
	</div>

  <div class="img-container">
    <img
      width="400px"
      src="https://www.pngmart.com/files/13/Roblox-Transparent-Background.png"
    />
  </div>
</body>

</html>

Out website doesn’t look really good right now, don’t worry. Your website should look something like this: