Overview
This article outlines the process for capturing browser screens for Skyllful Lessons using the SingleFile Chrome extension and a text editor such as Notepad.
Tech Tools Needed
High-Level Overview of the Process
1. | Install SingleFile from the Chrome Web Store (search SingleFile → click Add to Chrome). Pin the extension to your toolbar so it’s easy to find (click the puzzle icon → pin SingleFile). |
2. | Open the web page you want to capture and make sure any dynamic content you want included is visible (log in, expand menus, load images, etc.). 
|
3. | Click the SingleFile icon in the toolbar to capture the html. 
|
4. | In the popup, click Save (or Save page). SingleFile will process the page and then automatically download a single .html file that contains the whole page (images, styles, etc.). |
Open Browser File in Screen Editor
1. Right-click the downloaded HTML file.
2. Select [Open with] and choose [Notepad]..png)
Identify HTML Code to Be Edited
1. Open a second version of the downloaded HTML file in a Chrome Browser by right clicking the file and selecting [Open with], then [Google Chrome]..png)
2. Access the three dot Chrome Browser Overflow Menu>More Tools>Developer Tools or (CTRL + SHIFT + I)..png)
3. This will open the Developer Pane..png)
4. Turn on the Element Inspector in the Development Tools..png)
5. Hover over the element of the webpage of which you want to edit. This will highlight the code in the Development Pane. .png)
6. Right-click the Element in the Development Pane and select Copy Element..png)
Edit HTML In Text Editor
1. In Notepad, type [CTRL + F] Enter. This will find the element in the HTML Code..png)
2. In the highlighted code, make the necessary edits..png)
3. To save changes, type [CTRL + S].
4. Open the saved file in Chrome browser to review changes..png)
5. Save the updated HTML file to Skyllful Screen Library.
Focused on a single learning objective. Contains one or more Modes of learning
