I built a site using Vue to create flashcards for learning JS. You can find it here. I have been working on the site the last few weeks and it is ready to check out. 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.
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.
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.
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:
Design and Color scheme - how I went about choosing the design and colors for the project
Nav bar - using flexbox to have one element on the opposite side of the others
Mobile Nav - hamburger menu and hiding on larger screens
Flipping cards - adding content and animating
Modals - show and hide on click
Buttons - click buttons on flipping card without the card flipping
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 here.