Programmer's Picnic
Angular Dashboard Roadmap
Level 0 to Angular Dashboard

8 Week Angular Roadmap

A beginner-friendly 4-days-a-week roadmap to build a Programmer's Picnic Angular admin dashboard like the reference screen.

Champak Roy Admin Teacher Course Creator

Recommended Duration

8 weeks

4 days per week

32 total sessions

Best pace: 1 to 1.5 hours per session

Embedded Angular Slideshow

Open Full Page

Roadmap Checklist

Tick each task as you complete it. Progress is saved in this browser.

0% Complete

Week 1: HTML and Page Structure

Goal: Build the basic dashboard skeleton without CSS perfection.

Day 1

HTML Level 0
  • Learn html, head, body, div, section, header, main
  • Create a basic page title
  • Add Programmer's Picnic and Welcome Champak Roy
Output: Simple welcome page

Day 2

Dashboard Skeleton
  • Create top bar
  • Create welcome area
  • Create module area
Output: Page divided into sections

Day 3

Module Cards in HTML
  • Add Students card
  • Add Courses, Classes, Assignments cards
  • Add Payments and Reports cards
Output: Static card list

Day 4

Review HTML
  • Clean indentation
  • Use meaningful class names
  • Check page in browser
Output: Clean HTML dashboard structure

Week 2: CSS and Dashboard Design

Goal: Make the static dashboard beautiful and responsive.

Day 5

CSS Basics
  • Learn color, background, padding, margin
  • Style body and main container
  • Add saffron theme colors
Output: Styled welcome section

Day 6

Card Styling
  • Add card background and border
  • Add border radius and shadow
  • Add hover effect
Output: Professional module cards

Day 7

CSS Grid
  • Learn display grid
  • Create 3-column layout
  • Add gap between cards
Output: Dashboard card grid

Day 8

Responsive Design
  • Learn media queries
  • Make tablet layout 2 columns
  • Make mobile layout 1 column
Output: Responsive static dashboard

Week 3: JavaScript Basics and Angular Setup

Goal: Understand data and create the Angular project.

Day 9

JavaScript Level 0
  • Learn variables and functions
  • Learn arrays and objects
  • Learn click events
Output: Basic JavaScript practice

Day 10

Dashboard Data
  • Create modules array
  • Create user object
  • Understand data driven UI idea
Output: Dashboard data ready

Day 11

Install Angular
  • Install Node.js
  • Check node -v and npm -v
  • Install Angular CLI
Output: Angular CLI installed

Day 12

Create Angular Project
  • Run ng new programmers-picnic-dashboard
  • Run ng serve
  • Open localhost:4200
Output: Angular app running

Week 4: Angular Basics

Goal: Show dynamic user, roles, and modules.

Day 13

Interpolation
  • Create user object
  • Show {{ user.name }}
  • Show Programmer's Picnic brand
Output: Dynamic welcome text

Day 14

Arrays and Loop
  • Create modules array in TypeScript
  • Use ngFor
  • Display all module cards
Output: Dynamic cards from array

Day 15

Click Events
  • Learn click event syntax
  • Create toggle function
  • Test button click
Output: Click interaction working

Day 16

Conditional Display
  • Learn ngIf
  • Show and hide menu
  • Apply to Students card
Output: Expandable Students card

Week 5: Angular Components

Goal: Split dashboard into clean reusable parts.

Day 17

Dashboard Page
  • Generate dashboard component
  • Move dashboard HTML
  • Move dashboard CSS
Output: Dashboard page component

Day 18

Top Bar Component
  • Generate top-bar component
  • Add Programmer's Picnic logo text
  • Add Champak Roy user label
Output: Reusable top bar

Day 19

Dashboard Header Component
  • Generate dashboard-header component
  • Add welcome message
  • Add role badges
Output: Header component

Day 20

Module Card Component
  • Generate module-card component
  • Use @Input for module data
  • Test one card
Output: Reusable module card

Week 6: Module Grid and Expandable Menu

Goal: Build the screenshot-like module dashboard.

Day 21

Module Grid Component
  • Generate module-grid component
  • Move grid logic into component
  • Display all cards
Output: Module grid component

Day 22

Module Data Model
  • Create module interface
  • Add id, title, description, children
  • Use clean module data
Output: Strong module structure

Day 23

Expandable Students Card
  • Add children menu items
  • Open and close card
  • Style expanded menu
Output: Expandable menu like screenshot

Day 24

All Modules
  • Add Students, Courses, Classes
  • Add Assignments, Payments, Reports
  • Add Content Library, Users, Settings
Output: Complete dashboard modules

Week 7: Routing and Pages

Goal: Turn the dashboard into a multi-page Angular app.

Day 25

Create Pages
  • Create students page
  • Create courses and classes pages
  • Create payments and reports pages
Output: Basic pages created

Day 26

Configure Routes
  • Add /dashboard route
  • Add /students and /courses routes
  • Test routes in browser
Output: Angular routing working

Day 27

Card Navigation
  • Add route link to each card
  • Click Students card to open page
  • Click Reports card to open page
Output: Cards navigate to pages

Day 28

Page Layout
  • Add Back to Dashboard button
  • Add simple table placeholder
  • Add simple form placeholder
Output: Useful module pages

Week 8: Polish and Final Build

Goal: Make the project clean, responsive, and screenshot-ready.

Day 29

Visual Polish
  • Improve spacing
  • Improve card alignment
  • Add clean hover effects
Output: Better looking dashboard

Day 30

Mobile Testing
  • Test laptop layout
  • Test tablet layout
  • Test mobile layout
Output: Responsive app

Day 31

Final Review
  • Check Programmer's Picnic branding
  • Check Champak Roy welcome text
  • Remove unused code
Output: Clean final project

Day 32

Final Build
  • Run ng build
  • Check build output
  • Take final screenshot
Output: Final Angular dashboard

Final Target

At the end of this roadmap, the learner should have a working Angular dashboard with Programmer's Picnic branding.

Brand Programmer's Picnic
User Welcome Champak Roy
Roles Admin, Teacher, Course Creator
Dashboard Module cards with clean layout
Angular Components, routing, ngFor, ngIf
Design Responsive saffron-red theme