Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PowerPath — Power BI Developer Roadmap</title> | |
| <link rel="stylesheet" href="./styles.css" /> | |
| </head> | |
| <body> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| TOP NAVIGATION BAR | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <nav id="topnav" class="topnav"> | |
| <div class="nav-brand"> | |
| <span class="nav-logo">⬡</span> | |
| <span class="nav-title">PowerPath</span> | |
| </div> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#" class="nav-link active" data-target="overview">Overview</a></li> | |
| <li><a href="#" class="nav-link" data-target="coretools">Core Tools</a></li> | |
| <li><a href="#" class="nav-link" data-target="datasources">Data Sources</a></li> | |
| <li><a href="#" class="nav-link" data-target="transformation">Modeling</a></li> | |
| <li><a href="#" class="nav-link" data-target="dax">DAX</a></li> | |
| <li><a href="#" class="nav-link" data-target="visualization">Visuals</a></li> | |
| <li><a href="#" class="nav-link" data-target="performance">Performance</a></li> | |
| <li><a href="#" class="nav-link" data-target="deployment">Governance</a></li> | |
| <li><a href="#" class="nav-link" data-target="automation">Automation</a></li> | |
| <li><a href="#" class="nav-link" data-target="cloud">Cloud</a></li> | |
| <li><a href="#" class="nav-link" data-target="versioncontrol">Version Control</a></li> | |
| <li><a href="#" class="nav-link" data-target="hiring">Hiring</a></li> | |
| </ul> | |
| <div class="nav-progress-bar"><div class="nav-progress-fill" id="progressFill"></div></div> | |
| </nav> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 1 — OVERVIEW / HERO | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="overview" class="page active"> | |
| <div class="hero-bg"></div> | |
| <div class="hero-content"> | |
| <div class="hero-badge">Enterprise Learning Platform</div> | |
| <h1 class="hero-title">Power BI<span class="hero-accent">Developer</span><br/>Roadmap</h1> | |
| <p class="hero-sub">A comprehensive, job-ready learning path covering every tool, technique, and best practice a Power BI Developer needs — from first query to enterprise governance.</p> | |
| <div class="hero-stats"> | |
| <div class="stat-card"><span class="stat-num">40+</span><span class="stat-label">Tools Covered</span></div> | |
| <div class="stat-card"><span class="stat-num">12</span><span class="stat-label">Learning Modules</span></div> | |
| <div class="stat-card"><span class="stat-num">3</span><span class="stat-label">Skill Levels</span></div> | |
| <div class="stat-card"><span class="stat-num">100%</span><span class="stat-label">Job-Ready</span></div> | |
| </div> | |
| <div class="hero-path"> | |
| <div class="path-step active-step"><span class="path-icon">◆</span><span>Core Tools</span></div> | |
| <div class="path-arrow">→</div> | |
| <div class="path-step"><span class="path-icon">◆</span><span>Data & Modeling</span></div> | |
| <div class="path-arrow">→</div> | |
| <div class="path-step"><span class="path-icon">◆</span><span>DAX & Analytics</span></div> | |
| <div class="path-arrow">→</div> | |
| <div class="path-step"><span class="path-icon">◆</span><span>Enterprise</span></div> | |
| </div> | |
| <button class="hero-cta" data-target="coretools">Begin Your Roadmap →</button> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| HELPER: TOOL CARD TEMPLATE (used via JS) | |
| Each section injects cards dynamically for clean architecture | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 2 — CORE POWER BI TOOLS | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="coretools" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 01</span> | |
| <h2 class="page-title">Core Power BI Tools</h2> | |
| <p class="page-desc">The foundational applications every Power BI Developer must master before building anything enterprise-scale.</p> | |
| </div> | |
| <div class="cards-grid" id="coretoolsGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 3 — DATA SOURCES & DATABASES | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="datasources" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 02</span> | |
| <h2 class="page-title">Data Sources & Databases</h2> | |
| <p class="page-desc">Connect, ingest, and understand the diverse data ecosystems Power BI pulls from in real enterprise environments.</p> | |
| </div> | |
| <div class="cards-grid" id="datasourcesGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 4 — DATA TRANSFORMATION & MODELING | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="transformation" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 03</span> | |
| <h2 class="page-title">Transformation & Modeling</h2> | |
| <p class="page-desc">Shape raw data into clean, performant models. This is where Power BI separates analysts from developers.</p> | |
| </div> | |
| <div class="cards-grid" id="transformationGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 5 — DAX & ANALYTICS | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="dax" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 04</span> | |
| <h2 class="page-title">DAX & Analytics</h2> | |
| <p class="page-desc">Master the Data Analysis Expressions language — the analytical backbone of Power BI. Where logic meets data.</p> | |
| </div> | |
| <div class="cards-grid" id="daxGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 6 — VISUALIZATION & UI | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="visualization" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 05</span> | |
| <h2 class="page-title">Visualization & UI</h2> | |
| <p class="page-desc">Turn numbers into stories. Build visuals that communicate insight clearly and beautifully to stakeholders.</p> | |
| </div> | |
| <div class="cards-grid" id="visualizationGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 7 — PERFORMANCE OPTIMIZATION | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="performance" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 06</span> | |
| <h2 class="page-title">Performance Optimization</h2> | |
| <p class="page-desc">Enterprise reports must load in seconds, not minutes. Master every lever available to tune Power BI for scale.</p> | |
| </div> | |
| <div class="cards-grid" id="performanceGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 8 — DEPLOYMENT & GOVERNANCE | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="deployment" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 07</span> | |
| <h2 class="page-title">Deployment & Governance</h2> | |
| <p class="page-desc">Move beyond personal dashboards. Learn how enterprises deploy, secure, and govern Power BI at scale.</p> | |
| </div> | |
| <div class="cards-grid" id="deploymentGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 9 — AUTOMATION & DEVOPS | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="automation" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 08</span> | |
| <h2 class="page-title">Automation & DevOps</h2> | |
| <p class="page-desc">Automate workflows, integrate APIs, and bring CI/CD practices into your Power BI development lifecycle.</p> | |
| </div> | |
| <div class="cards-grid" id="automationGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 10 — CLOUD & MICROSOFT ECOSYSTEM | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="cloud" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 09</span> | |
| <h2 class="page-title">Cloud & Microsoft Ecosystem</h2> | |
| <p class="page-desc">Power BI doesn't live alone. Understand the Azure and Microsoft 365 services that power enterprise BI platforms.</p> | |
| </div> | |
| <div class="cards-grid" id="cloudGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 11 — VERSION CONTROL & COLLABORATION | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="versioncontrol" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Module 10</span> | |
| <h2 class="page-title">Version Control & Collaboration</h2> | |
| <p class="page-desc">Modern Power BI development is a team sport. Learn how to version, branch, review, and collaborate like a pro developer.</p> | |
| </div> | |
| <div class="cards-grid" id="versioncontrolGrid"></div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| SECTION 12 — MUST-LEARN TOOLS TO GET HIRED | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="hiring" class="page"> | |
| <div class="page-header"> | |
| <span class="page-badge">Final Module</span> | |
| <h2 class="page-title">Must-Learn Tools to Get Hired</h2> | |
| <p class="page-desc">Hiring insights from real enterprise companies. Know exactly what interviewers look for — ranked by importance and frequency.</p> | |
| </div> | |
| <div class="hiring-layout"> | |
| <div class="hiring-tier tier-must" id="tierMust"> | |
| <div class="tier-header"><span class="tier-icon">★</span><span>Must Know</span></div> | |
| <div class="tier-items" id="tierMustItems"></div> | |
| </div> | |
| <div class="hiring-tier tier-nice" id="tierNice"> | |
| <div class="tier-header"><span class="tier-icon">◆</span><span>Nice to Have</span></div> | |
| <div class="tier-items" id="tierNiceItems"></div> | |
| </div> | |
| <div class="hiring-tier tier-edge" id="tierEdge"> | |
| <div class="tier-header"><span class="tier-icon">◇</span><span>Competitive Edge</span></div> | |
| <div class="tier-items" id="tierEdgeItems"></div> | |
| </div> | |
| </div> | |
| <div class="hiring-insights"> | |
| <h3 class="insights-title">Real Company Hiring Signals</h3> | |
| <div class="insights-grid" id="insightsGrid"></div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════ | |
| MODAL — Tool Detail Expansion | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <div class="modal-overlay" id="modalOverlay"> | |
| <div class="modal-box" id="modalBox"> | |
| <button class="modal-close" id="modalClose">✕</button> | |
| <div class="modal-content" id="modalContent"></div> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |