Troubleshooting

IT'S NOT WORKING!!!!

Not sure if you can relate to the headline above...but what should you do if nothing you try seems to work? I have a list of suggestions for you:

1. Make sure that you don't have any red lines in your editor. If you do have any it means you have errors in your html somewhere. Look for malformed tags, quotes that aren't closed, mis-nested elements, etc.
2. Validate your HTML! Because HTML is a standard, programs can be written to check for errors or poorly written code. Whenever things aren't working the way the activity says they should, and especially if you have red lines in your editor that you can't find the reason for...you should validate.

   Validating is easy. Go to https://validator.w3.org/, then enter in the same url that you would submit in iLearn for your site. It will check for any HTML errors and tell you where they are. Don't panic if it comes back with some really high number. One error can often cascade and create many others. I recommend fixing the first, then re-validating until all are gone.

3. Validate your CSS! There is also a CSS standard, so you can validate that as well to check for errors. The process is similar, you just need to go to a different site. The CSS validator can be found at: https://jigsaw.w3.org/css-validator/. Follow the same steps...fix the first error then re-validate until clean.
4. Communicate with classmates and the instructor. If you are spending multiple hours on any activity you are most likely stuck! Get in touch with someone that can help and have them look at your code.
5. I can't stress this enough. Don't wait too long to get help! Everything we do builds on what we have done before. Don't let yourself get behind because one or two early concepts aren't making sense and you didn't ask for help!

Practice: HTML Validation

1. Check your project in Glitch. You should see a file called troubleshooting.html. Open it. If you don't have that file then follow the instructions below:

   Click on this link, then right-click and select "Show Page source" or "View Source". This should show you the code that makes the page. (If you are in IE and you don't see the View Source option try typing ctrl-u...or switch to Chrome :) ). Click inside the window that shows the code and select it all (cmd-a on Mac, ctrl-a on Windows) and copy the contents (cmd/ctrl-c). Go to your project and create a new file. Call it troubleshooting.html and paste the code into it (cmd/ctrl-v).

2. Next make sure this new file is open in your editor (click on the filename in the list on the left)
3. Select all the code again and copy it. Visit https://validator.w3.org/ and and select the "Validate by Direct Input" tab. Paste your HTML code into the box. Hit "Check"
4. You should see a list of several errors that are in the HTML of that file. Find and correct all of the errors. Help each other out! Each time you fix errors in your editor you will need to copy the code in the editor and paste them into the box in the validator.

Tips

• Start with the top of the list and work down. Often fixing one issue will resolve multiple errors.
• As you fix an error copy/paste the corrected code into the validator and re-check.
• Remember that an Element is: an opening tag, closing tag, and everything in between. Look at this example:

  <nav>
      <ul>
          <li>Home</li>
          <li>Contact Us</li>
      </ul>
  </nav>

  The entire block of code is a "nav element" since everything is inside of the opening and closing nav tags. <li>Home</li> is also an element and would be called an "li element".

• Elements are often nested (placed inside of each other).
• An element inside of another element would be considered a child of the parent element. Referring to our example above, The li elements are the children of the <ul> element, and the <ul> element is the child of the <nav>
• Note that the validator will tell you the line and column where it found the error. Use this as a starting point when searching out the issues.