Structure

Objective

Simple page structure using HTML tags.
Semantic tags to define and structure content.
Tabular data.
Comments.

1 Basics

Complete the 1 Version Control guide to setup your development environment.

Stage → Commit → Push your changes throughout this exercise.

Create an index.html file with the following boilerplate code:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>Paragraph</p>
  </body>
</html>

Open index.html using your browser and refresh the page anytime you modify and save the file. You can use the Live Preview (opens in a new tab) or Live Server (opens in a new tab) extensions to automate the process for you.
Experiment using different HTML elements using the W3Schools HTML Tutorial (opens in a new tab): headings, paragraphs, hyperlinks (anchors), lists with different types, quotations, citations, tables, figures, images, and semantic elements.

Search for and install Visual Studio Code extensions from the marketplace (opens in a new tab) to enhance your experience.

2 College Journey

Stage → Commit → Push your changes throughout this exercise.

Create a web page that documents your college journey. Your page should include:

Sections for your biography, campus involvement, internship experience, study abroad, and future plans.
Navigation menu, header, main content area, aside section for resources, and a footer.
Various elements such as headings, paragraphs, lists, images, figures, and tables to organize and present the content.
Hyperlinks to allow the user to navigate between the different sections.

Use Noora’s College Journey, shown in Figure 2, for guidance. You can use the photos posted in the repository or your own selection of free stock photos from Pexels (opens in a new tab), Unsplash (opens in a new tab), or Pixabay (opens in a new tab).

Figure 2: College Journey web page

Resources

Labs 2 Content