WDI Fundamentals

Welcome to WDI Fundamentals

JS Bin Exercises

This eBook is interactive! In each unit, we've included practice exercises using a code editor called JS Bin that allow you to try out new skills without leaving the page.

Here's an example: You can type your code directly into the text editor and click through its various tabs (HTML, CSS, JavaScript) to type in additional code. The Output tab will render your code in real time.

Click on the tabs to get used to the navigation.

JS Bin on jsbin.com

You're not required to submit these exercises, but you should save your work in case you have questions and want to review them with your instructors or the WDI community on Slack.

Saving Your Code

Creating a free account on JS Bin will allow you to save your exercises as "bins." Make sure you do so! Follow the instructions below to create your account and learn how to save your code.

1) If you want to save your code, you'll need to hit the "Save" button in the top left corner of the JS Bin editor. This will open a new browser.

2) Log in using a GitHub account. If you don’t have one already, you can find instructions for creating an account here. JS bin only accepts GitHub accounts for registration.

3) Once you're logged in, if you try to make changes in any tab, you’ll receive the following message:

You’ll want to click “Clone Your Own Copy," which will generate a new link.

4) Now that you're logged in, you can save your code using one of these methods:

  • File > Export as a gist. This will save your file as a GitHub repository on your GitHub! Read more about gists here.
  • File > Download. This will download and save your file locally.
  • Save your JS Bin URL. Simply copy and save JS Bin URL for future reference. You can also go to File > My Bins to locate the bin. Additionally, you can also select File > Save Snapshot at any point, and JS Bin will automatically save the latest version of your working copy.

Pro Tip: Remember, the code you write in the JS Bin editor will not automatically save. Therefore, you need to make sure you hit the Save button and copy your code over.

Note: If your JS Bin editor doesn't load or shows JS Bin on jsbin.com, simply refresh the page.


Your instructional team will track your progress using our unit quizzes. After completing each unit, take the unit quiz to check your understanding of its concepts. When completing these quizzes, please use the same email address you provided for your invoice.

If you want to retake a quiz, just refresh the page! Practice makes perfect.

Final Project

Each unit assignment will build toward your final project, a web browser-based memory game. You'll use HTML, CSS and JavaScript to build the game unit by unit!

For Units 1-5, you'll need to save the HTML and CSS portions of your assignments locally. Starting in Unit 7, you'll learn how Git and GitHub work, and, in Unit 8 you'll begin pushing your source code to GitHub instead. In the meantime, make sure to save your progress.

Final Submission: At the end of the project in Unit 11, you'll submit a link to your GitHub repository via this form.


Your instructor will review your completed assignment on the first day of class.

While most quizzes and assignments won't be formally graded, your WDI instructors will be checking your submissions to make sure you've completed Fundamentals and made the necessary progress before your first week of WDI.

If you have any concerns, feel free to reach out to your producer or instructor.

If you have any concerns about your progress, feel free to reach out to your producer.

Getting Help


You can tune into the WDI community on Slack to ask for help or see what other classmates are talking about.

Additional Resources

Ok, we're going to let you in on a little secret. Ready?

The exercise answers are at the back of this eBook. That's right. If you're stuck, we've supplied exercise solutions to help you work backward and understand what needs to be done.

Ready, Set, Continue!