Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active May 5, 2022 15:35
Show Gist options
  • Save acidtone/cb96cdbc3edb982d77b158c1b0f94d46 to your computer and use it in GitHub Desktop.
Save acidtone/cb96cdbc3edb982d77b158c1b0f94d46 to your computer and use it in GitHub Desktop.
Download ZIP
Activity: Build an index.html file from a Codepen
Raw
README.md

Activity: Build an index.html file from a Codepen

Pre-requisites

Instructions

  1. Download or clone this Gist to your workspace.
  2. Rename the project folder to something not cb96cdb....
  3. Open the project folder in VS Code.
  4. Pick a Codepen of your choice that uses vanilla HTML, CSS (not SCSS) and JS.
  5. For each of the three Codepen panels (HTML, CSS, JS), copy and paste the contents into the proper locations in the HTML page.
    • HTML: Paste between the <body> and </body> tags, but before the <script> tag.
    • CSS: Paste between the <style> and </style> tags.
    • JS: Paste between the <script> and </script> tags.
  6. Save your work and open index.html using Live Server or open it manually in your browser.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title Here!</title>
<style>
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML goes here, above the <script> -->
<script>
// Javascript goes here
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment