JS Flashcards

Learn JS With Flashcards

I built a site using Vue and Tailwind to create flashcards for learning JS. I have been working on the site the last few weeks and it is ready to check out. You can find it here. It is currently a work in progress, but the first two sections are complete. I plan to work on it on a weekly basis and add more sections and content.

Why I built the site

I built the site for 2 reasons.

1. The first reason was to create a Vue project that was my own idea. This has allowed me to practice both my Vue and general front end skills.

2. The second reason was was to create flashcards to help other people learn JS while also solidifying my own learning. The process of trying to figure out what and how much content to put on the cards has been a great exercise, strengthening my own understanding. It's definitely true that one of the best ways to make sure that you understand something is to try and teach it to someone else.

Article Series

Over the next few weeks I will be posting an article series explaining how I put together some of the elements and detailing how I overcame the challenges that I came across. Here is a list of some of topics that I will be covering:

1. Design and Color scheme - how I went about choosing the design and colors for the project
2. Nav bar - using flexbox to have one element on the opposite side of the others
3. Mobile Nav - hamburger menu and hiding on larger screens
4. Flipping cards - adding content and animating
5. Modals - show and hide on click
6. Buttons - click buttons on flipping card without the card flipping
7. Style with Tailwind CSS - extend theme in tailwind.config.js

Make your own flashcards

I used Vue as the framework and JS as the topic, but you could use any framework or subject and make your own flashcards. You can either stay tuned for the articles or check out the project now on Github.

Comments and suggestions are welcome.

Thanks for checking out the project!

Comments

[Daniel Zadok]

I teach js and last week we had covered all of js basics, this is so great and your timing is astounding!
Ofcourse I already shared this article and the website over our slack channel.
Thank you! And keep up the great work!! :)

[Jamie McCarville 🇨🇦]

That's great to hear! Thanks for sharing the project and I hope that it proves to be helpful.

[L.L.]

Awesome initiative! Thanks for sharing. ;)

[Jamie McCarville 🇨🇦]

Thanks Lucas, glad you liked it!

[leob]

I love the look & feel (the UI) ... Vue is great, also saw that you used Tailwind ... keep up the good work. One obvious feature to add (especially when the number of cards expands): a search button!

[Jamie McCarville 🇨🇦]

Glad you liked it! The search button is a great idea and I’ll add it to the list of features I’m looking to add moving forward.

[HarishAkurati]

Great initiative!
Looking forward to see more content in your website(jsflashcards.netlify.com/).

[Jamie McCarville 🇨🇦]

Glad you liked it! Starting work on the next section tomorrow.

[Darshit Patel]

Is there something like this for Java?

[Fabrício Devinar]

Clean and concise, looking forward to updates! :) Beautiful presentation on mobile (I'm yet to check on desktop).

[Jamie McCarville 🇨🇦]

I really like working with Tailwind to style the site at different break points. I also used Sizzy, an app that lets you see the design on a bunch of different sized screens all at once. I’ve used it for a couple projects now and it’s been super helpful making sure the design looks good on all screen sizes.