feat: Dev tools page (#763)

#### Description

A short note covering dev tools at the end of the web guide.

Author: aroyasr

astro.sidebar.ts

@@ -164,6 +164,10 @@ export const sidebar = [
 								label: 'Grid',
 								link: 'guides/web/html-css-intro/9-grid/',
 							},
+							{
+								label: 'Dev Tools',
+								link: 'guides/web/html-css-intro/10-devtools/',
+							},
 
 						],
 						collapsed: true,

src/assets/web/chromedevtools.png

@@ -0,0 +1,36 @@
+---
+title: Dev Tools
+description: Learning about the basics of HTML & CSS
+---
+
+In your browser, you can open dev tools by pressing either <kbd>F12</kbd> or <kbd>right click</kbd> < <kbd>inspect</kbd>.
+ 
+Dev tools allows you to edit pages on the fly to preview changes, view how your stylesheet attributes affect the page, view debug logs, and view pages from different device aspect ratios.
+
+And *much* more. 
+
+| Firefox Dev Tools Menu | Chrome Dev Tools Menu |
+|------------------------------------------------------|------------------------------------------------------|
+|![Firefox Dev Tools](src/assets/web/firefoxdevtools.png)|![Chrome Dev Tools](src/assets/web/chromedevtools.png)|
+
+
+While the menu may look overwhelming at first, you will become familiar with it quickly. It's a powerful tool for debugging problems, and the best way to learn it is to use it.
+
+For web development, the most important tools are the inspector, styles, and layout menus.
+
+Using dev tools as you make your website will also teach you a lot about how the browser renders content from HTML and CSS files, much more than you can learn by reading. 
+
+Have fun!
+
+:::tip[More info]
+For more information on your dev tools menu, view their documentation.
+
+Mozilla Firefox: [Dev tools documentation](https://firefox-source-docs.mozilla.org/devtools-user/)
+
+Google Chrome: [Dev tools documentation](https://developer.chrome.com/docs/devtools/overview)
+:::
+
+:::note[Congratulations!]
+You've made it through the intro guide for HTML & CSS! If you're going to keep making websites, [Click here](../..) to visit our HTML reference sheet. It contains almost 
+all the information we learned in this guide without the lengthy explanations. Happy making!
+:::