Debugging Tips - CSS Documenting and Debugging - Project: Fotomatic

Anyone have tips on how to properly debug. This project is harder than I expected, and I am pretty sure it is because I have never really debugged an actual project before.

Thank you

Set up the project in VS Code, connect it to Github and commit a lot so you can go back in case you mess up. But be careful in making too many changes. Most of the code is correct but there are some major areas that are broken. Check the basics first - for example that the css is linked correctly. Then ideally open up project next to the working web-site example (or the spec-sheet) and see how they compare. I worked from the top and did one section at a time. Use dev-tools a lot (right click and inspect) to see what is going on. If you get stuck then one option is to also inspect the working website and look at the styles there. It would help to be a little familar with flex and responsive design since that is used in the site but most issues are more basic.

1 Like

Thank you for the advice

1 Like