Adobe Creative Cloud


October 13, 2016 /

Learn to Code Series: Create an About Page with HTML

In this activity, you’ll out to use the fundamentals of HTML that you learned in our first Learn to Code Facebook Live Session to create an “About Me” page for our blog. Missed the live session?  Watch it now below or download the completed activity files here.

Once you’re all caught up, use the requirements below to create your own about page.

Your web page should include:

  • A title for your page in the <head> section
  • Your name and Job Title
  • A summary of yourself
  • An image
  • Links to your social media or favorite websites
  • List of your skills, education, and hobbies
  • A comment in your code

To see the final product, you can download the completed example files here.

Step 0: Download Dreamweaver Beta and Open

  • If you haven’t already downloaded Dreamweaver Beta, you should do that before you begin this tutorial.
  • Open Dreamweaver Beta and make sure your workspace is Essentials with “Split” and “Live” views selected


Step 1: Create a new .html file

  • In the files panel, right click on the root directory (site folder) and select “New File”
  • Call the file “about.html”


Step 2: Adding Indentation

  • Open this new file by double clicking
  • Dreamweaver should have included the basic structure of an HTML page in this file automatically
  • Fix the indentation by using the tab key so you can see which elements are parents and which are children


Step 3: Adding a Title

  • Within the <title> tag, change “Untitled Document” to “About Me”
  • Save the file by using cmd + s or File > Save


Step 4: Add your name and job title

  • Using two header tags, add your name and job title in the body section
  • Use <h1></h1> for your name and <h2></h2> for your job title since your name is more important


Step 5: Add a summary about yourself

  • Using a paragraph tag (<p></p>), tell your visitors who you are!


Step 6: Add an Image

  • Add an image to the “images” folder in your root directory
  • If you don’t have an images folder, in the files panel, right click on the site folder and select, “New Folder”
  • Name it “images”code7
  • Using an image tag, add the image to your page
  • Don’t forget to include the “src” data attribute to let the browser know where the image is located
  • Add the “alt” attribute to include a description of your image

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.


Step 7: Add Links

  • Using an anchor tag, add one or more links to your social media or your favorite websites
  • Don’t forget to add the “href” data-attribute to tell the browser where the link should take you.
  • The text between the open and closing tags is what will show on the page
  • If you want the link to open in a new tab, add the data-attribute target=”_blank”


Step 8: Add a list of Skills

  • Add an h3 tag to give you list a title
  • Then use the unordered list tag to wrap all list items in your list


Step 9: Add a Code Comment

  • Using the proper commenting syntax, add a comment to your code



Step 10: View in Real-time Browser Preview

  • Save your file (cmd/ctrl + s)
  • Click on the Real-time Browser Preview button on your right toolbar
  • Select the browser in which you would like to view your site


Great Job! Your website should look something like this:


For more resources, check out our Learn to Code Series post on HTML Basics Resources and Activities.

To see the final product, you can download the completed example files here.

Complete Learn to Code Series:

Join the Public Dreamweaver Beta!

We’re working on a completely modernized version of Dreamweaver CC. Help us shape the future!