If you have code on the Web Design Playground, at some point you’ll probably want to get that code onto your computer. There are two ways to go about this: by copying the code and by downloading the code.
Copying Playground Code
The Playground offers three ways to copy code:
- In a lesson: When a lesson page offers an HTML or CSS code snippet, you see a Copy to Clipboard button just below the code. Click that button to copy the code to your computer’s clipboard (the memory area used to store the most recently copied or cut data).
- In the HTML Editor: Click the HTML Editor’s Menu icon (☰), and then click Copy to Clipboard. This copies the editor’s HTML code to your computer’s clipboard.
- In the CSS Editor: Click the CSS Editor’s Menu icon (☰), and then click Copy to Clipboard. This copies the editor’s CSS code to your computer’s clipboard.
Once you’ve run the Copy to Clipboard command, open your HTML or CSS file in a text editor, position the insertion point cursor where you want the copied code to appear, and then run the text editor’s command for pasting clipboard data. In the vast majority of editors, you do this by clicking the Edit menu’s Paste command, or by pressing either Ctrl+V (Windows) or Cmd+V (Mac).
Downloading Playground Code
Rather than copying and pasting bits of HTML or CSS code, you might prefer to get the entire contents of both the HTML and CSS Editors. This is the way to go if you want all the code from a particular lesson, or if you’ve created a sandbox and have been populating it with custom HTML and CSS code.
Here are the steps to follow:
- In the Web Design Playground, open the lesson that has the code you want or create a sandbox with your custom code.
- Click Menu (☰) and then click Download Code. The Playground gathers the HTML and CSS code into their own files and tells your web browser to download them.
- Locate the downloaded files, which should be in your computer’s Downloads folder. You should have two files:
- index.html: This file contains a basic HTML page structure with the contents of the HTML Editor inserted between the
<body> and </body> tags. It also includes a <link> tag in the <head> section that references the styles.css file.
- styles.css: This file contains the contents of the CSS Editor.
- Copy or move these files to the folder where you store the rest of your web page files.