Build a Flash Card App Study Guide for Any Course

Introduction and Background

For this project you will prepare content for a flash card application and style the application, creating an engaging experience for other students to review study material — much like a product designer would do to create a fun experience with a product.

The video below provides a great introduction to cascading stylesheets (CSS) that will be needed to customize the style of the flash card application..

Student objectives:

• Prepare a spreadsheet table organizing study content for a course

• Connect the content to a flash card web application (template) to share publicly

• Style the application for a fun and engaging experience using Cascading Style Sheets

Subject Areas: Computer Science and Any Subject

Instructions

1. Prepare a spreadsheet table organizing study content for a course

• Determine the topic(s) of study to include in your flash card application.

• Make a copy of this template spreadsheet. You can begin to replace the terms and definitions to reflect your topic of study, but you can always come back to this for editing since it will be a live database for the flash card application.

2. Connect the content to a flash card web application (template) to share publicly

• Create a free Replit account. We will use Replit, a browser-based coding platform, to create our flash card application.

• Go to this Replit code for the flash card template and fork it (i.e. make a copy). You can rename the code workspace how you like. Try it out by clicking "run" to make sure the template works as expected.

• "Publish to Web" your Google Spreadsheet and copy the link using the CSV option.
• Then replace the link in the Replit script.js file with your link. You are changing the link in the spreadsheetLinkvariable. See the image below for reference.

• "Run" your Replit application once you have made this change and make sure the flash card application works as expected. If so, you are all set up with your flash card application!

3. Style the application for a fun and engaging experience using Cascading Style Sheets

As you update your spreadsheet with terms and definitions, you can begin to style your flash card application in the style.css file on Replit. Make some simple changes to color, for example, to start. Then you can dive into more advanced changes. Ultimately, you want to provide a fun and engaging experience that is appropriate for the content.

This is a good reference for the top CSS properties used 👉 https://lucidar.me/en/web-dev-class/lesson-2-09-most-used-css-properties/

W3Schools provides a great reference to the full breadth of CSS properties 👉 https://www.w3schools.com/cssref/default.asp

Advanced Option: Flash Cards with Images

Follow the same directions as above but use the following code and spreadsheet templates linked below.

• Replit.com code template with images folder and updated code In the images folder upload the images you will use on the flashcards. Be sure they are of a common image type, like .png or .jpg.

• Spreadsheet template with image column Under the image column add the filename of the image that belongs with that term and definition. Be sure to just use the filename along with the extension (for example myPic.jpg or myPic.png)