Store My Library Blog

Day 1: Your First Webpage

Time commitment: 10–15 minutes (+ video)

Welcome to Day 1! Today you'll create your first webpage using HTML. Follow along with the video (you can add it here later), then complete the practice exercises below.

What is HTML?

HTML (HyperText Markup Language) is the structure of every website. Think of it as:

  • HTML = structure (walls, floors, rooms)
  • CSS = styling (paint, decorations)
  • JavaScript = interactivity (making things happen)

HTML uses tags like this: <tagname>content</tagname>

Setup

  1. Download and install VS Code
  2. Create a folder called my-first-website
  3. Open the folder in VS Code

Your First HTML File

Create a file called index.html and add this code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>My name is [Your Name].</p>
    <p>I'm learning to code!</p>
</body>
</html>

What each part does:

  • <!DOCTYPE html> β€” Tells browser this is HTML5
  • <html> β€” Root element (everything goes inside)
  • <head> β€” Info about the page (not visible)
  • <title> β€” Shows in browser tab
  • <body> β€” Everything visible on the page
  • <h1> β€” Main heading
  • <p> β€” Paragraph
View it: Open index.html in your browser (double-click the file or right-click β†’ Open with browser).

Essential HTML Tags

Add these to your <body>:

<h2>Things I'm Learning</h2>
<ul>
    <li>HTML - Page structure</li>
    <li>CSS - Styling</li>
    <li>JavaScript - Interactivity</li>
</ul>

<h2>My Goals</h2>
<ol>
    <li>Build my first website</li>
    <li>Learn to work with APIs</li>
    <li>Share my projects</li>
</ol>

Tags you just learned:

  • <h2> β€” Smaller heading
  • <ul> β€” Unordered list (bullets)
  • <ol> β€” Ordered list (numbers)
  • <li> β€” List item

Adding Images

Images make your webpage more interesting! The <img> tag is special β€” it doesn't have a closing tag.

<h2>My Photo</h2>
<img src="profile.jpg" alt="My profile picture"/>

Important attributes:

  • src β€” The image file path or URL
  • alt β€” Description of the image (shows if image can't load, used by screen readers)

Where to get images:

  • Save an image in the same folder as your index.html
  • Use a URL from the web: <img src="https://example.com/image.jpg" alt="Description">
  • Free stock photos: Unsplash or Pexels

Example with a web image:

<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" alt="Laptop with code" width="400"/>

The width attribute controls the image size (optional).

Practice Exercises

  1. Add an <h2> heading with your own topic
  2. Create a list (ul or ol) with at least 3 items about yourself
  3. Add 2–3 paragraphs about why you're learning to code
  4. Challenge: Add anchor tags (<a>) to create links:
    • Link to your favorite website: <a href="https://example.com">Link text</a>
    • Try adding target="_blank" to open in a new tab

DevTools Tip

Right-click your page β†’ β€œInspect” (or press F12) to see the HTML structure in DevTools. You'll use this constantly!

Pro guide: See the Browser DevTools Guide.

Common Mistakes

  • Forgetting closing tags β€” Every <tag> needs </tag>
  • Typos in tag names β€” Must be spelled exactly right
  • Nesting incorrectly β€” Tags must close in reverse order they opened

Key Takeaways

βœ“ HTML tags describe content structure
βœ“ Tags open and close: <tag>content</tag>
βœ“ Your webpage lives in the <body> section

Tomorrow: Add CSS to make it look professional!

Β 

Before Day 2: Make sure index.html is saved and opens in your browser.

Additional Resources