You can make an image 100% of the browser width by removing the width and height attributes from the <img> tag, and giving the image a class that sets the width property to 100%.
In the HTML:
<div><img src="images/morro1.jpg" alt="Morro Rock" class="wideimg"/></div>
In the style sheet:
The image will fill the full width of its parent element (in this case, a div). If the parent element is the full width of the browser window, the image will be too. The problem with this is that the image could become badly blurred on a large screen.
Another way of making a image fill the width of the browser window is to use a background image, and set the background-size CSS property to cover.
As for the screenshot, I don't know how it was created. When I was commissioned to create the video tutorial, I created the text, images, and design for the Bayside Beat case study. Adobe decided it wanted some changes, so another designer sent me a composite of the revised design, which is what I created in the tutorial. I suspect that the screenshot of the sky extending behind the title and navigation bar was probably one of the ideas the other designer was experimenting with, and it somehow ended up in the tutorial web page. I quite like the effect of the sky going behind the title and navigation bar. The problem is that it won't work on other pages.
From the technical viewpoint, if the image is in the HTML, you would position the navigation menu over it using the same technique as in the bonus video.