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.
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
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!