September 25, 2023

Quick Links

• MDN, Debugging HTML
• MDN, Debugging CSS
• MDN on Youtube, Wait, DevTools Does What?
• W3C, Markup Validator
  works with URL, file upload or copy-paste
• W3C, CSS Validator
• W3C, Link Validator

Sharing Code

When we try to solve a problem with our websites we need to look at each others code in order to figure out what is not working.

1. If your work is online on GitHub, send me the URL when you have a problem
2. Create a zip file of the entire project folder (the folder, index.html and assets folder should all be included).
3. Glitch is a tool for previewing code in real time. If you Please create an account. You can share your work by creating a new file and saving the html in the index.html and your CSS in the “style.css” (you’ll need to adjust the path in the index.html)

Problem Solving

Try breaking your problem into smaller steps and see if you can search for a more narrow problem. Example: instead of “Site doesn’t look right” try “CSS isn’t showing up” or “CSS isn’t loading”.

Asking and searching for help Online

Sooner or later you will search for code help online. Chances are that someone else out there already had your exact problem or a similar one. Once you search online, you might find [Stack Overflow](Stack Overflow) a popular online platform where people can ask and answer coding and programming-related questions to help each other solve technical problems.

• How to use Stack Overflow
• How to ask a good question
• How to Ask Effective Questions

Inspecting elements

For a comprehensive look, see the Inspector lecture.

In class you probably saw me right-click on an element on a webpage and then selected inspect from the dropdown menu. This is useful for debugging your code and it's called inspecting an element.

In Chrome and Firefox this functionality is activated by default. But if you are using Safari, chances are that you first need to activate the developer tools in order to do so. Once DevTools are activated you can also press:

• Cmd + Opt + I to open the Developer Tools.
• Cmd + Shift + C to open the Developer Tools in Inspect Element mode, or toggle Inspect Element mode if the Developer Tools are already open.

AI Tools

A non-comprehensive list of tools (use with caution):

• Phind is a AI search an engine and pair programmer
• Codeium an AI extension for many of IDE's
• Cursor.so is an AI powered text-editor

I'd recommend not using it to complete your project, generate ideas, or give you full on code snippets verbatim, you will rob yourself of the opportunity of learning how to code. As a general rule of thumb:

1. Ask it to clarify why code you wrote isn’t working, copy/paste your code
2. Ask it to help you debug a certain part of your code with inline comments and explanations
3. Credit the tool when using it in the source code (with a comment)