Lab Instructions: Creating an HTML Document

In this exercise you will you will practice creating a simple HTML document.

Tips: Before you Begin

To view your code and instructions side-by-side, select the following in your VSCode toolbar:

View -> Editor Layout -> Two Columns

To view this file in Preview mode, right click on this README.md file and Open Preview

Select your code file in the code tree, which will open it up in a new VSCode tab.

Drag your assessment code files over to the second column.

Great work! You can now see instructions and code at the same time.

Task 1: Create a valid HTML document that displays a piece of text.

Objectives

Add the DOCTYPE.
Add the HTML, head and body elements.
Add the title element.
Add the text to the body element.

Follow the Step by Step instructions below:

Open the index.html file.
Type <!DOCTYPE html> on the first line.
Create your html element on the next line. This will be the root element of the document.
Add the head element inside the html element. The head element contains data about the HTML document that does not display in the web browser.
Add the title element inside the head element.
Add the text My First HTML Document inside the title element. The content of the title element is the text that will be displayed in the web browser tab.
Close the head tag and add the body element. The ``body element contains all displayable content of the webpage.
Add the text I successfully created my first document inside the body element. This displays on the webpage.

Final Step: Let's submit your code!

Nice work! To complete this assessment:

Save your file through File -> Save
Select "Submit Assignment" in your Lab toolbar.

Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.

Tips

Ensure that the DOCTYPE is declared at the beginning of the file.
Remember that HTML documents have a specific structure.
Review the lessons What is HTML? and HTML Documents.

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Document</title>
</head>
<body>
    <p>I successfully created my first document</p>
</body>
</html>

Programming Assignment: Creating an HTML Document

Comments

Frontend Developer

Knowledge check: Setting up the project

More from this blog

Daily Tech Brief — 06/08/2026

Enrich Metadata and Discovery of Lakehouse Data: Challenge Lab - ARC123

The Arcade Base Camp August 2026

Daily Tech Brief — 05/08/2026

Daily Tech Brief — 04/08/2026

Lab Instructions: Creating an HTML Document

Tips: Before you Begin

Task 1: Create a valid HTML document that displays a piece of text.

Final Step: Let's submit your code!

Tips

Command Palette

Comments

Frontend Developer

Knowledge check: Setting up the project

More from this blog

Lab Instructions: Creating an HTML Document

Tips: Before you Begin

To view your code and instructions side-by-side, select the following in your VSCode toolbar:

Task 1: Create a valid HTML document that displays a piece of text.

Final Step: Let's submit your code!

Tips