**Part of the Series: **[How To Build a Website With HTML]
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the site.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Having a knowledge of how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

In this tutorial, we’ll walk through the steps of adding and styling the top profile image as displayed in the demonstration site.

Before we get started, you may want to pick a personal profile photo for including on your site. If you don’t have a profile photo, you can use any image for demonstration purposes or create an avatar through a site like Getavataaars.com. Otherwise, you can use the image from our demonstration site by downloading the image here. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series.)

Once you’ve selected an image, save it as small-profile.jpg in your image folder.

Paste the following <img> element in between the opening and closing <div> tags you created in the last tutorial like so:

...
<div style="background-image: url('ImageLocation');
  background-size: cover; height:540px;">
<img src="ImageFilePath" style="height:150px;">
</div>
...

Make sure to switch out the highlighted src address with the file path of your profile image. Note that we are also using the style attribute to specify the height of the image to 150 pixels. The <img> element does not require a closing tag.

Save and reload the page in the browser to check your results. You should receive the following:

Next, let’s add properties to our style attribute that will give our image a circular shape, a yellow border, and a top margin that push our image 80 pixels down from the top of the page.

Add the highlighted properties to your <img> element:

<img src=“ImageFilePath” style=“height:150px; border-radius: 50%; border: 10px solid #FEDE00; margin-top:80px;”>

Make sure you still have the correct file path of your image listed as the src address. Save the file and reload it in the browser. You should receive something like this:

#html