A Premium, Immersive Roadmap for Aspiring Data Analysts
This is a stunning, single-file HTML application designed to guide students through a 6-month journey from beginner to professional Data Analyst. Built with a premium "Interstellar/Space" aesthetic, featuring glassmorphism effects, 3D animations, and a star-field background.
- 🎯 6-Month Structured Learning Path - From Excel to Interview Prep
- 💾 Persistent Progress Tracking - Your progress is saved locally
- 🎨 Premium Dark Theme - Stone-900/800 with Amber/Gold gradients
- 🌌 Immersive Space Aesthetic - Star-field background with glassmorphism
- 📊 Visual Progress Indicators - Circular & linear progress bars
- 📱 Fully Responsive - Works perfectly on all devices
-
🌌 Dark Mode Theme
- Stone-900 (#1c1917) and Stone-800 (#292524) base colors
- Amber/Gold to Orange gradient accents
- Premium, immersive space vibe
-
✨ Glassmorphism Effects
- Translucent backgrounds with blur
- Subtle border highlights
- Beautiful depth and layering
-
🌟 Animated Star Field
- 100 twinkling stars
- Smooth animations
- Non-intrusive background
-
📦 3D Tilt Cards
- Subtle mouse-move parallax effect
- Smooth transitions
- Premium feel without being overwhelming
-
🎊 Accordion Interactions
- Smooth slide-down animations
- Click to expand/collapse
- Checkbox and link click safety (no accidental collapse)
-
💫 Floating Elements
- Hero section animations
- Smooth hovering effects
- Glowing pulses
-
🎯 Circular Progress
- Total completion percentage
- Animated gradient ring
- Located in hero section
-
📈 Linear Progress
- Per-month progress bars
- Amber to Orange gradients
- Green glow when 100% complete
-
💾 Persistent Storage
localStorageintegration- Try-catch error handling
- Survives page refreshes
-
✅ Checklist Management
- Click to mark topics as complete
- Strikethrough effect for completed items
- Instant progress updates
-
🔗 Resource Links
- All resources open in new tabs
- External link indicators
- Hover animations
-
📂 Accordion Cards
- 6 months of content
- Each with 4-6 topics
- 2-3 curated resources per month
- Excel: VLOOKUP & Pivot Tables
- Excel: Data Cleaning & Power Query
- Stats: Mean, Median, Mode & Std Dev
- Stats: Distributions & p-values
Resources:
- WSCube Tech (Excel) [Urdu/Hindi]
- Codanics (Stats) [Urdu/Hindi]
- Excel Easy [English]
- SQL: SELECT, FROM, WHERE
- SQL: Joins (Inner, Left, Right)
- SQL: GROUP BY & Aggregations
- SQL: CTEs & Subqueries
Resources:
- CodeWithHarry (SQL) [Hindi]
- Technical Suneja [Hindi]
- SQLZoo Practice [English]
- Connecting Data Sources
- Creating Interactive Dashboards
- DAX / Calculated Fields
- Color Theory & UI Design
Resources:
- Skillsiya (Power BI) [Hindi]
- Codanics (Tableau) [Urdu]
- Storytelling with Data [English]
- Python: Loops & Functions
- Pandas: DataFrames
- Data Cleaning with NumPy
- Matplotlib & Seaborn
Resources:
- Codebasics (Python) [Hindi]
- CodeWithHarry (Python) [Hindi]
- Kaggle Python Course [English]
- Find a Dataset on Kaggle
- End-to-End Data Cleaning
- Build Final Dashboard
- Upload Code to GitHub
Resources:
- Codebasics Projects [Hindi]
- Kaggle Datasets [English]
- Advanced SQL (Window Functions)
- KPIs & Business Metrics
- Optimizing LinkedIn Profile
- Behavioral Mock Interviews
Resources:
- WSCube Tech (Careers) [Hindi]
- Data Analyst Resume Guide [English]
| Technology | Purpose |
|---|---|
| ⚛️ React 18 | UI Framework |
| 📝 Babel Standalone | JSX Transpilation |
| 🎨 Tailwind CSS 4 | Styling |
| 🖼️ Lucide Icons | Iconography |
| 💾 localStorage API | Data Persistence |
// Progress Persistence
const [checkedItems, setCheckedItems] = useState({});
useEffect(() => {
try {
localStorage.setItem('roadmapProgress', JSON.stringify(checkedItems));
} catch (error) {
console.error('Failed to save progress:', error);
}
}, [checkedItems]);- Modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools or dependencies required!
-
Download the file
# Clone or download index.html -
Open in browser
# Simply open index.html in your favorite browser # Or use a local server: npx serve . # or python -m http.server 8000
-
Start your journey! 🎉
- Click on any month card to expand it
- Check the boxes next to topics you've completed
- Progress updates automatically - both per-month and total
- Your progress is saved - it will be there when you come back!
- Click any resource link in the expanded card
- Links open in a new tab automatically
- Resources are curated from:
- YouTube channels (Hindi/Urdu/English)
- Interactive platforms (SQLZoo, Kaggle)
- Documentation sites (Excel Easy)
- Hero Section: Shows total completion across all 6 months
- Each Card: Shows completion for that specific month
- Green Glow: Appears when a month is 100% complete
- Master Excel basics
- Learn fundamental statistics
- Start your SQL journey
- Build visualization skills with Power BI/Tableau
- Learn Python for data analysis
- Practice with real datasets
- Build impressive portfolio projects
- Prepare for interviews
- Optimize your professional profile
/* Primary Backgrounds */
--stone-900: #1c1917; /* Deep space dark */
--stone-800: #292524; /* Card backgrounds */
/* Accent Gradients */
--amber-400: #fbbf24; /* Gold primary */
--orange-600: #ea580c; /* Orange secondary */
/* Success State */
--emerald-500: #10b981; /* Completion glow */- Glass Cards:
rgba(41, 37, 36, 0.8)with 20px blur - Progress Bars: Amber to Orange gradients
- Completed Cards: Emerald glow with 30px shadow
- Custom Scrollbars: Gradient orange styling
Edit the ROADMAP_DATA constant in index.html:
const ROADMAP_DATA = [
{
month: 1,
title: "Your Custom Title",
subtitle: "Your Subtitle",
description: "Your description",
topics: [
{ id: '1-1', label: "Your topic" },
],
resources: [
{ title: "Resource Name", url: "https://example.com" }
]
},
// Add more months...
];Modify the Tailwind config in the <script> tag:
tailwind.config = {
theme: {
extend: {
colors: {
stone: {
900: '#1c1917',
800: '#292524',
},
amber: {
400: '#fbbf24',
},
orange: {
600: '#ea580c',
}
}
}
}
}- Multi-language resources - Hindi, Urdu, and English
- Free content only - No paid courses
- Beginner-friendly - Step-by-step approach
- Logical flow - From basics to advanced
- Real-world skills - What employers actually want
- Portfolio-focused - Build as you learn
- YouTube channels - Visual learning
- Interactive platforms - Hands-on practice
- Documentation - Reference materials
Contributions are welcome! Here's how you can help:
- 🐛 Report Bugs - Open an issue for any problems
- 💡 Suggest Features - Share your ideas for improvements
- 📝 Improve Content - Suggest better resources or topics
- 🎨 Enhance Design - Propose UI/UX improvements
- WSCube Tech - Excel & Career guidance (Hindi/Urdu)
- Codanics - Statistics & Tableau (Urdu/Hindi)
- CodeWithHarry - SQL & Python (Hindi)
- Technical Suneja - SQL Interview Prep (Hindi)
- Skillsiya - Power BI tutorials (Hindi)
- Codebasics - Python & Projects (Hindi)
- SQLZoo - Interactive SQL practice
- Kaggle - Python courses & datasets
- Excel Easy - Excel documentation
- Storytelling with Data - Visualization design
- React Team - For the amazing framework
- Tailwind CSS - For the utility-first CSS framework
- Lucide - For the beautiful icon set
Have questions or feedback?
- 📧 Open an issue on GitHub
- 💬 Join the community discussions
- 📖 Check the documentation
"The best time to start was yesterday. The second best time is now."
Open index.html and begin your Data Analyst mastery path! 🚀
Made with ❤️ for aspiring Data Analysts
#