Flashcard Site – Getting started

Back to the blog

My first project that I'm working on is an interactive flash card web app. The idea came from my own efforts in learning French and how lousy I am at memorizing words. Since I want this to be an opportunity for me and others to learn from the iterative process, I'm building the project on CodePen to allow others to see the source and also so I can continually save new versions as I hit various road map points. As I go, I'll try to add helpful information and lessons that I've learned to the descriptions for my pens and also I plan to create a post that will be more specifically documenting the process that I'm going through and what I'm learning.

Click Here to visit the Project Collection Page and view the pens as I create them.

Goals:

• User can type in front/back contents and cards are updated live
• Card contents populated without reloading page
• Click on card to view back
• Animated transition between front and back of card
• Card layout responsive
• Ability to store the contents of the cards without a database, one idea is to use the URL to store the information similar to Google Translate

The page will use the following technologies:

- Flexbox for responsive resizing of the cards
- Javascript for the interactivity with the card
- SASS (SCSS) for the stylesheet
- HAML for the HTML processing

See the Pen Flashcards v0.1 by Rob Lahoda (@rlahoda) on CodePen.

Back to the blog