01 / The big idea

Every website begins with an idea. Maybe it’s a portfolio, a digital magazine, an exhibition, a music page, or a place to share something you’re passionate about. Before we explore color, typography, and layout, we need to understand how a web page is put together.

02 / What is web design?

Web design combines communication, visual organization, and technology. A successful page does more than look attractive. It helps people understand information and figure out what to do next.

Think about the design decisions you already make in art and design courses. You choose what to emphasize, where to place things, which colors work together, and how someone will experience your work. Those decisions are part of web design, too.

Where you might see web design

• An artist’s online portfolio.
• A website promoting an exhibition or concert.
• A page introducing a clothing brand or creative business.
• An online publication about film, music, fashion, or culture.
• A personal site about a hobby, collection, or interest.

Throughout this course, you will use HTML and CSS to make pages that reflect your own interests. There is room for experimentation. The important thing is learning how to make intentional design choices.

03 / How does a website work?

When you open a website, your browser requests files from a web server. The browser reads the information it receives and displays the page on your screen.

04 / Meet HTML

HTML stands for HyperText Markup Language. It uses elements to identify different kinds of content on a page.

Let’s begin with a heading. You do not need to understand the whole document yet. Just look at the opening tag, the text, and the closing tag.

<h1>Hello, Web!</h1>

Here’s what you’re seeing:

• <h1> begins a main heading.
• Hello, Web! is the text visitors will see.
• </h1> closes the heading. Notice the slash.

The tags tell the browser what kind of content it is displaying. The browser usually makes an h1 heading larger than ordinary paragraph text.

Your first edit

Copy this example into CodePen’s HTML panel. Change the words between the tags, but leave the tags themselves in place.

<h1>My First Website</h1>

Try a different title: “My Favorite Films,” “Design Experiments,” “Music I Love,” or anything else that interests you.

05 / Add a paragraph

Headings introduce ideas. Paragraphs provide more information. A paragraph uses the <p> element.

<h1>My First Website</h1>

<p>I am learning how to make websites.</p>

Now the page contains two elements: a heading and a paragraph.

Add another paragraph

Each paragraph gets its own opening and closing tags. Try copying this example and changing the sentences.

<h1>My First Website</h1>

<p>I am learning how to make websites.</p>

<p>I want to use web design to share my ideas.</p>

06 / Your first complete HTML document

HTML documents usually contain some setup information in addition to the visible content. You will see this structure throughout the course.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, Web!</h1>
  <p>This is my first web page.</p>
</body>
</html>

What do the extra lines do?

• <!DOCTYPE html> tells the browser to use modern HTML document rules.
• <html lang="en"> identifies the document and its primary language.
• <head> contains setup information about the page.
• <meta charset="UTF-8"> sets the character encoding.
• The viewport setting helps the page fit the width of mobile screens.
• <title> sets the title shown in the browser tab.
• <body> contains the page’s main visible content.

07 / Meet CodePen

CodePen is our online coding workspace. You can write HTML, see a live preview, and experiment without installing a development environment.

1. Visit CodePen.io and sign in.
2. Create a new Pen.
3. Find the HTML editor and the preview area.
4. Paste the next example into the HTML panel.
5. Change the text and watch the preview update.
6. Save your Pen and find its shareable URL.

Start here

<h1>Hello, Web!</h1>

<p>I made this page in CodePen.</p>

For this exercise, do not paste the complete document from Example 05 into the HTML panel. CodePen supplies the document wrapper, so you only need to enter the content that belongs inside the body.

08 / Guided class activity

We’ll work through this together during our synchronous class. Follow each step, check the preview, and make the content your own.

<h1>About Me</h1>

<h1>About Me</h1>

<p>I am a student who enjoys exploring new ideas.</p>

<h1>About Me</h1>

<p>I am a student who enjoys exploring new ideas.</p>

<h2>My Interests</h2>

<p>I enjoy music, art, games, and discovering new things.</p>

09 / Independent project

Now you’ll make a simple page independently. You may reuse the examples from this lesson. The goal is to practice the basic structure, not to write code from memory.

<ul>
  <li>First interest</li>
  <li>Second interest</li>
  <li>Third interest</li>
</ul>

<a href="https://example.com">Visit this website</a>

10 / Submission and reflection

What to submit

1. Save your CodePen.
2. Copy the shareable URL for your Pen.
3. Submit the URL in D2L.
4. Include a short reflection with your submission.

Reflection questions

• What topic did you choose for your page, and why?
• What did you learn about HTML?
• What was confusing or challenging?
• What would you like to change about the page’s appearance?

How your work will be evaluated

You are not expected to create a polished professional website in the first week. This is a starting point for the skills you’ll build throughout the semester.

11 / Troubleshooting

12 / Your first HTML cheat sheet

Keep these examples nearby. You can copy and reuse them while you practice.

<!-- Main heading -->
<h1>Page Title</h1>

<!-- Section heading -->
<h2>Section Title</h2>

<!-- Paragraph -->
<p>Your text goes here.</p>

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Link -->
<a href="https://example.com">Visit this website</a>

Demo goal

Demonstrate how headings, paragraphs, section headings, lists, and links create a simple, organized page. Students should see that HTML describes the meaning and structure of content.

Step 1 — Start with one heading

Open a new CodePen and enter only the heading. Ask students to predict what the browser will display before you show the preview.

<h1>My Creative World</h1>

Explain: The opening tag identifies the beginning of the heading, the text is the content, and the closing tag marks its end. Change the words inside the tags to show that content can change without changing the element.

Step 2 — Add a paragraph

Add one sentence below the heading. Pause and compare the code with the preview.

<h1>My Creative World</h1>

<p>This page is about the things that inspire me.</p>

Explain: The <p> element marks a paragraph. Pressing Return in the editor is not what creates the paragraph; the tags define the content structure.

Step 3 — Add a section heading and more content

Introduce a second topic. Explain the difference between the main heading and the section heading.

<h1>My Creative World</h1>

<p>This page is about the things that inspire me.</p>

<h2>Things I Enjoy</h2>

<p>I enjoy art, music, film, and learning new skills.</p>

Explain: Use one main <h1> to introduce the page and <h2> for a section within it. Heading levels communicate the organization of the content.

Step 4 — Add a list

Show how related items can be grouped into an unordered list.

<h2>Favorite Things</h2>
<ul>
  <li>Photography</li>
  <li>Music</li>
  <li>Film</li>
</ul>

Explain: The <ul> element contains the list, and each <li> element represents one item. The list items belong inside the list element.

Step 5 — Add a link

Demonstrate the href attribute and explain that it tells the browser where the link should go.

<p>
  One website I enjoy is
  <a href="https://www.moma.org/">MoMA</a>.
</p>

Explain: The URL goes inside the quotation marks after href=. The words between the opening and closing anchor tags become the clickable link text.

Step 6 — Intentionally make and fix a mistake

Temporarily remove a closing tag or its angle bracket. Ask students to identify what looks wrong, then restore the code. Keep this low-pressure: the goal is to practice reading code and troubleshooting.

Questions to ask during the demonstration

• What changed in the preview when I changed the text?
• How can you recognize an opening tag and a closing tag?
• Why do we use a heading instead of making ordinary text look large?
• What information does the href attribute provide?
• What would you check first if the result does not look right?