Browser Capture and Edit for Skyllful Lessons (WIndows)

Overview

This article outlines the process for capturing and editing browser screens for Skyllful Lessons using the SingleFile Chrome extension and a text editor such as Notepad.

Tech Tools Needed

• Chrome Browser

• SingleFile Chrome Extension

• Text Editor, such as Notepad

High-Level Overview of the Process

1. Download screen HTML

2. Open file in:

   1. Text Editor

   2. In Chrome

3. In Chrome Dev Tools, find code to be edited

4. In Text Editor, edit text

5. Save updated browser file

Download Screen’s HTML

1. Access the screen you want to download on a Chrome browser.

2. Select the SingleFile Chrome Extension to save the webpage HTML file.

3. The file will save to your download folder.

Open Browser File in Screen Editor

1. Right-click the downloaded HTML file.

2. Select [Open with] and choose [Notepad].

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].

2. Access the three dot Chrome Browser Overflow Menu>More Tools>Developer Tools or (CTRL + SHIFT + I).

3. This will open the Developer Pane.

4. Turn on the Element Inspector in the Development Tools.

5. Hover over the element of the webpage of which you want to edit. This will highlight the code in the Development Pane.

6. Right-click the Element in the Development Pane and select Copy Element.

Edit HTML In Text Editor

1. In Notepad, type [CTRL + F] Enter. This will find the element in the HTML Code.

2. In the highlighted code, make the necessary edits.

3. To save changes, type [CTRL + S].

4. Open the saved file in Chrome browser to review changes.

5. Save the updated HTML file to Skyllful Screen Library.