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..
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
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.
"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.
Spreadsheet template with image columnUnder 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)