This blog is part of my @devsync c learning journey — documenting what I learn step by step to help others along the way.
👋 Introduction
Ever wondered if it's possible to build a quiz without JavaScript?
Yes, it is — at least the UI part!
In this post, I’ll walk you through creating a simple Multiple Choice Questions (MCQ) test using only HTML and CSS. No logic, no scripts — just structure and styling.
Perfect for HTML/CSS beginners!
🏗️ Project Structure
Here’s how I structured the project:
css
Copy
Edit
📁 task5/
├── index.html ← Welcome page
├── quiz.html ← MCQ form page
└── style.css ← Styling sheet
👉 Live Demo / Code: https://github.com/chaitanyachopde/task5
✨ What We Built
📄 A clean quiz UI
✅ Selectable radio-button answers
⏳ A mock timer using CSS animations
🎨 Stylish layout without using a single line of JavaScript
📌 index.html (Landing Page)
🧠 quiz.html (Questions Page)
🎨 style.css (CSS Styling)
Our CSS handles:
- Responsive layout
- Button styling
- Hover effects
- Container design
⛔ What You Can’t Do Without JS
💡 Why This is a Great Beginner Project
- Reinforces semantic HTML
- Sharpens form element skills
- Improves CSS layout understanding
- Encourages good folder and file structure
💥 Powered by Devsync
Big thanks to @devsyncin — where I’m learning by doing through real-world mini projects.
If you're looking for structured, skill-based learning with hands-on practice, @devsync is a great place to start.
📌 Explore the Code
🔗 GitHub Repo → https://github.com/chaitanyachopde/task5
Feel free to clone, modify, and build on top of it. This is just the beginning!
🧠 What’s Next?
- Add JavaScript for answer checking
- Display the score dynamically
- Introduce a timer and auto-submit feature
- Make it mobile-friendly
🙌 Final Thoughts
Creating a quiz with just HTML & CSS might not get you all the way, but it will teach you fundamentals like nothing else. The simplicity makes it a perfect first project.
If you're a beginner, try it yourself!
Fork the repo, customize it, and push your changes. Every commit counts.