Add your index.html

For our app, we are going to build a memory game. You can find the code for the web application here on Codepen.

On Codepen, you can see there are three main sections of code; html, css, and js. These will map out to be our src/index.html, src/style.css, and src/renderer.js.

Note: This Codepen works for our demo, but feel free to use any Codepen that you like if you want to try an extension exercise on your own! You’ll need to be careful of any that use dependencies, though. In fact, we re-wrote this exercise to use vanilla JS instead of using jQuery for stability and less steps.

gif of following the directions below

Copy the code from the html tab on Codepen into the src/index.html file locally. Paste the code so it replaces the existing text (“Well hey there!!!”) between <body> and </body>.
Save and commit your changes.
Start the app again by typing npm start. At this point, you should only see text without graphics or functionality.
Quit the app by pressing Ctrl + C in your Command Line Interface.

See this commit as an example of what to take away and what to add in this step.

If you don’t understand everything in the .html file, that’s okay. Remember the resources listed at the beginning of the course, and know you can always go back and learn more!