Level 0
Level 1

Dev Tools

Very important tools to know are the developer tools in browsers. They are used for many things like bug testing and experimenting. You can also use it to see the perfomance of the site. You can view your HTML, CSS and script combined, and you can actively interact with it. Google has very nice implementations, which is one of the reasons why we use chrome as a standard browser.

Open Chrome Dev Tools

Get a feel for what the developer tools can do. Navigate all of its tools a bit and try out some of its features.

Instructions
Resources

Change CSS in Dev Tools

Dev Tools are a great way to test out some CSS and see it rendered right away. Often styling will not show because you have made a little syntax error. The console allows you to quickly change some of the styling and get direct feedback.

Instructions

Use the Javascript console

The console is a useful tool to test out little bits of code in conjuntion with your site. You can test very simple commands or do complex debugging. Your website can output to the console. If you add a console.log("hello") and then press enter, it will show up in the console.

Instructions