Tutorial improvements (#19500)

* Added F12 key hint for devtools

* Add import headers for full-copy-paste

This brings the code examples in line with the other examples, which can be fully copy-pasted into the file without error.

docs/tutorial/part-two/index.md

@@ -248,7 +248,7 @@ import Container from "../components/container"
 console.log(styles)
 ```
 
-The `console.log(styles)` code will log the resulting import so you can see the result of your processed `./about-css-modules.module.css` file. If you open the developer console (using e.g. Firefox or Chrome's developer tools) in your browser, you'll see:
+The `console.log(styles)` code will log the resulting import so you can see the result of your processed `./about-css-modules.module.css` file. If you open the developer console (using e.g. Firefox or Chrome's developer tools, often by the F12 key) in your browser, you'll see:
 
 ![Import result of CSS module in console](css-modules-console.png)
 

docs/tutorial/using-a-theme.md

@@ -94,6 +94,8 @@ In the `src` directory of the site, there's a `gatsby-theme-blog` directory. Any
 Open up the `bio-content.js` file and make some content edits:
 
 ```jsx:title=bio-content.js
+import React, { Fragment } from "react"
+
 export default () => (
   {/* highlight-start */}
   <Fragment>
@@ -144,6 +146,9 @@ The blog theme ships with a default Gatsby purple theme, but you can override an
 Open up `/src/gatsby-theme-blog/gatsby-plugin-theme-ui/colors.js`, and uncomment the code in that file.
 
 ```javascript:title=colors.js
+import merge from "deepmerge"
+import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
+
 {/* highlight-start */}
 const darkBlue = `#007acc`
 const lightBlue = `#66E0FF`