Skip to main content
Version: WIP

✏️ 1.1.1.10 Practice: Block Elements

Goal: Practice creating basic HTML webpages, with special attention toward spacing and indentation. As we begin to explore more and more complex code, proper indentation and spacing will become downright vital to maintaining clean, easy-to-manage projects. Begin developing these good habits now!

Warm Up​

Ask yourself the following questions before moving on:

  • What does the abbreviation HTML stand for?
  • Why does indentation and spacing matter?
  • How do you know if a tag is an opening or closing tag?

AI Support: Building your own webpage and unsure which block elements to use? After trying the steps below, you can ask AI to explain HTML tag choices in plain language. You can ask AI to clarify block element structure and indentation rules. Do not ask AI to write your webpage or complete this exercise for you.

Example prompts:

  • Weak: "Make my pet website for me."
  • Strong: "I'm building a page about my pet. Which block elements should I use for a title, a paragraph, and a list of favorites—and why? Explain without writing the HTML for me."

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "Before I start my pet website, can you list the block HTML elements I learned about in the last two lessons and what each one is for—without writing a page for me?"

After reading AI's response, sketch your page structure on paper before you open your editor.

Code​

Indentation & Spacing Practice​

Before continuing, go back and carefully check the indentation and spacing in your my-first-webpage.html and favorite-things.html files. After fixing them up, do another commit and push your code to GitHub.

Pet Website​

Now it's your turn!

Make a homepage for your cat or a blog for your dog. You can get creative here! Maybe include information about their favorite toys and their favorite activities.

Of course, you're more than welcome to make webpages about anything you want — these are just suggestions.

Don't forget to make a new project folder, commit regularly and push to a remote repository on GitHub. Continue to pay close attention to indentation and closing all tags you open.

Checkpoint​

Before moving on, you should be able to:

  • Build a multi-section webpage using block elements with proper indentation
  • Commit regularly with clear messages and push to GitHub
  • Review and fix spacing in your existing my-first-webpage files

If you're unsure, re-read the block element lessons or ask AI: "I'm building a page about my pet. Which block elements should I use for a title, a paragraph, and a list of favorites—and why? Explain without writing the HTML for me."