Skip to main content
Version: WIP

✏️ 1.1.1.7 Practice: Indentation and Spacing

Goal: Continue developing good indentation and spacing habits while simultaneously exploring the anatomy of a basic website, and practicing cloning Git repositories. These skills will be used nonstop during your time at Fidgetech.

Warm Up​

Ask yourself the following questions before moving on:

  • Why is indentation and spacing important? What benefit is there to ensuring it's consistent?
  • When do we indent?
  • How many spaces should make up one indent?

AI Support: Stuck on git clone or confused by messy HTML indentation? After trying the steps below, you can ask AI to explain an error or concept in plain language. Do not ask AI to fix the HTML file or complete this exercise for you.

Example prompts:

  • Weak: "Fix my HTML indentation."
  • Strong: "I cloned a repo and the HTML tags look scattered. Can you explain what 'proper nesting' means and what I should look for first—without rewriting the file 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: "Why do we fix tag placement, spacing, and indentation in separate commits? Can you explain the benefit of tackling one type of cleanup at a time—without doing the work for me?"

After reading AI's response, explain the concept back in your own words before moving on.

Code​

Now it’s time to practice using Git clone and fixing indentation and spacing. There is a link to a cookie repository right here on GitHub that contains an HTML file with terrible indentation, spacing and HTML tag placement. It really needs your help.

  1. Use git clone to clone the repository onto your desktop. (Be sure you have changed into the desktop directory (cd ~/Desktop) before cloning the repository, so that you do not accidentally clone the cookie repository inside of an existing project folder.)
  2. Set up a new remote repository on your own GitHub for this project and link it to your local project folder.
  3. Go through the HTML file and fix every tag placement error and commit.
  4. Next, fix all spacing errors in the HTML and commit.
  5. Then fix every indentation error in the HTML file and commit.
  6. Finally, push changes to the remote you created in your own GitHub account. Today (and always!), focus on making sure that all of your code is properly indented and spaced and your HTML tags are properly placed around the content they contain.

Checkpoint​

Before moving on, you should be able to:

  • Clone a repository with git clone without nesting it inside another project
  • Fix HTML tag placement, spacing, and indentation in separate commits
  • Link a cloned project to your own remote repository on GitHub
  • Explain why consistent indentation makes code easier to read and debug

If you're unsure, re-read the sections above or ask AI: "I cloned a repo and the HTML tags look scattered. Can you explain what 'proper nesting' means and what I should look for first—without rewriting the file for me?"