Welcome to
the Web.
Your first step into HTML, web design, and creative coding. No previous coding experience is required. We’ll start small, work with examples, and build something of your own.
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.
Content
What are you communicating? Text, images, and other information give a page its purpose.
Structure
How is the information organized? HTML identifies headings, paragraphs, links, and other content.
Appearance
How does the page look? CSS controls color, typography, spacing, and layout.
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.
Your browser
Chrome, Firefox, Safari, and Edge are applications that display web pages.
The web server
A server stores or provides website files when a browser requests them.
The web page
The browser interprets the page’s code and displays its content and design.
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.
- Visit CodePen.io and sign in.
- Create a new Pen.
- Find the HTML editor and the preview area.
- Paste the next example into the HTML panel.
- Change the text and watch the preview update.
- 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.
Step 1 — Add a heading
<h1>About Me</h1>Step 2 — Add a paragraph
<h1>About Me</h1>
<p>I am a student who enjoys exploring new ideas.</p>Step 3 — Introduce another topic
<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>Step 4 — Customize it
Change the title and paragraphs to reflect your own interests. You can replace the text without changing the tags.
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.
Assignment / My Digital Introduction
Create a small page introducing yourself or a subject you care about. Your page can focus on art, music, film, fashion, gaming, sports, a hobby, or another personal interest.
Your page must include
- One main heading using
<h1>. - At least two section headings using
<h2>. - At least three paragraphs using
<p>. - A list of at least three related items.
- One link to a relevant external website.
Copyable list starter
<ul>
<li>First interest</li>
<li>Second interest</li>
<li>Third interest</li>
</ul>Copyable link starter
<a href="https://example.com">Visit this website</a>Replace the example URL with a real website address and change the link text to describe the destination.
10 / Submission and reflection
What to submit
- Save your CodePen.
- Copy the shareable URL for your Pen.
- Submit the URL in D2L.
- 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
HTML practice
Headings, paragraphs, lists, and the link are structured appropriately.
Organization
The content is understandable and divided into sections.
Personalization
The page reflects your chosen subject and ideas.
Completion
The submitted link works and the reflection is included.
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
My heading isn’t appearing correctly.
Check that you have both an opening and a closing tag, such as <h1> and </h1>.
My text appears, but the formatting looks strange.
Compare your code with the example. Look for a missing angle bracket, slash, or closing tag.
I pasted the entire document into CodePen.
For these exercises, remove the document wrapper and use only the content that belongs inside the body. CodePen provides the surrounding document structure.
I accidentally deleted something.
Use Undo, or paste the starter example back into the HTML panel. Experimenting is part of learning.
I don’t understand every line.
That’s okay. For now, focus on recognizing the heading and paragraph tags. The rest will become familiar as we reuse the same structure.
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>