3 Projects I Built to Learn Web Development (with Next.js)
Hi Devs! I'm currently diving into web development, and over the past few weeks, I’ve built a few projects using Next.js and Tailwind CSS to improve my frontend skills.
Here are three small but meaningful projects I created, each with a unique theme and purpose. Feel free to explore them, give feedback, or even get inspired for your own builds!
🎮 1. Crazy Cattle 3D – Embedding a Unity Game in a Web Page
This was my experiment in embedding external 3D games made with Unity into a responsive and SEO-optimized website using an iframe.
🔧 Tech Stack
- Next.js (App Router)
- Tailwind CSS
- Netlify deployment
- OGP & SEO metadata configuration
It was a great way to learn about responsive containers, iframe handling, and structured metadata for better sharing.
📖 2. Bible for U – A Spiritual Daily Verse & Answer Generator
This project focuses on spiritual content. Users receive a new Bible verse every day and can even ask a question to receive a random "answer" from scripture.
✨ Features
- Random daily Bible verse (EN + CN)
- “Book of Answers” feature: ask a question and receive a verse
- Daily mini stories from the Bible
- Holy-themed, calm design
- Fully mobile responsive
This was a fun way to learn random data generation, basic logic handling, and i18n with next-intl.
🧠 3. Brain Games Quest – Mini Reaction & Memory Games
A personal favorite — this site hosts 5 simple browser games that test reflexes, memory, and attention. It's all in the name of learning React state logic and game loops.
🎮 Games Included:
- Color Reaction Test
- F1 Launch Reaction
- Hold & Release Click Test
- Whac-A-Mole with custom emoji/mode
- Schulte Grid visual search test
🛠️ Tech Stack
- Next.js (App Router)
- Tailwind CSS
- Language toggle (EN/JP)
- Deployed to Netlify
- Custom score handling, speed levels, and themes
🧵 Why I’m Sharing These
I hope this post inspires others learning web dev to just start building. These don’t need to be perfect — they’re proof that shipping projects beats waiting for mastery.
If you found any of these interesting, feel free to:
- Leave a comment 💬
- Share your thoughts 🙌
- Fork the ideas and build your own version!
Thanks for reading 🙏
Follow me for more beginner-friendly web dev ideas, and let’s grow together 🚀
Top comments (0)