Course Site Design Notes

Reference Sites

Grant McDermott - Data Science for Economists (https://grantmcdermott.com/ds4e/)

Date noted: 2025-01-13

Design features to consider:

1. Table of Contents Sidebar
   • Collapsible sections (e.g., “Welcome”, “Data wrangling”, “Programming”, “Analysis”, “Cloud”)
   • Clean, organized navigation structure
   • Easy to see the full course structure at a glance
2. Book-style Layout
   • Clean, readable typography
   • Well-organized chapter structure
   • Professional academic appearance
3. Navigation Features
   • “Show table of contents” toggle
   • “View book source” link (for transparency/open source)
   • “Edit this page” functionality (if applicable)
4. Content Organization
   • Clear section headers
   • Numbered chapters/sections
   • Subsections clearly nested
5. Overall Aesthetic
   • Minimal, clean design
   • Good use of whitespace
   • Professional and academic feel
   • Easy to read and navigate

Potential applications for CPSY 1950:

• Consider adding a collapsible/expandable table of contents
• Could organize lessons into clearer thematic sections
• Might benefit from a “book source” or “edit” link for transparency
• The clean, minimal aesthetic aligns well with academic course sites

No action needed at this time - just documenting for future reference.

UC Berkeley CS 61A (https://cs61a.org/articles/contact-61a/)

Date noted: 2025-01-13

Design features to consider:

1. Extensive Menu Structure with Direct Links
   • Multiple top-level categories with nested items
   • Direct access to important resources from the main menu
   • Well-organized hierarchical navigation
2. Menu Categories Observed:
   • Lectures - Direct access to lecture materials
   • Syllabus - Course overview and policies
   • Ed - Discussion platform link
   • Office Hours - Scheduling and queue information
   • Contact - Staff contact information
   • Links (expanded section):
     • Request an Extension
     • Request a Regrade
     • Office Hours Queue
     • Pensieve (likely a tool)
     • Add/Change Sections
     • Lecture Recordings
     • Python Tutor
     • Code Editors
   • Resources (expanded section):
     • Past Exams & Websites
     • Textbook
     • Campus Resources
     • Advice from Students
     • Scheme Specifications
     • Scheme Built-In Procedures
   • Guides (expanded section):
     • Debugging Guide
     • Studying Guide
     • Type Hints
     • Composition Guide
     • MT1 Study Guide
     • MT2 Study Guide
     • Final Study Guide
   • Staff (expanded section):
     • Instructors
     • TAs & Tutors
     • Academic Interns
3. Key Design Principles:
   • Everything is accessible from the main menu - no deep nesting
   • Clear categorization of resources
   • Direct links to tools and platforms
   • Study guides organized by exam/assessment
   • Staff information easily accessible

Potential applications for CPSY 1950:

• Consider expanding the Resources section with more direct links
• Could add a “Guides” section for study materials, debugging tips, etc.
• Might benefit from a “Staff” section listing instructors, TAs, etc.
• Could organize links by category (Tools, Study Materials, Administrative, etc.)
• Direct access to important tools/platforms from main menu

Action needed: Review menu options and structure at some point to determine what additional links/categories would be useful for CPSY 1950.

No action needed at this time - just documenting for future reference.

Fast.ai - Lesson Page Structure (https://course.fast.ai/Lessons/lesson1.html)

Date noted: 2025-01-13

Design features to consider:

1. Lesson Page Layout
   • Clear lesson number and title at top
   • Breadcrumb navigation showing Part and Lesson number
   • “On this page” sidebar navigation for quick access to sections
2. Video Section
   • Prominent video player
   • Clear instructions on how to use video (fullscreen, subtitles, etc.)
   • Direct link to relevant book chapter
3. “How to complete lesson” Section
   • Step-by-step instructions for students
   • Links to required platforms/tools (Kaggle, Jupyter, etc.)
   • Clear progression: setup → tools → notebooks → reading
   • Helpful tutorials linked (e.g., “Jupyter Notebook 101”)
4. Resources Section
   • Well-organized with clear categories:
     • Kaggle notebooks for the lesson
     • Book chapters (published, free notebook version)
     • Repositories
     • Solutions
   • All resources specific to that lesson
5. Links Section
   • Additional reading and resources
   • Teaching philosophy articles
   • Related tools and libraries
   • Educational resources
6. “If you need help” Section
   • Direct links to forum help topics
   • Organized by topic/type of question
   • Beginner-friendly categorization
7. Overall Structure:
   • Video
   • How to complete lesson
   • Resources
   • Links
   • If you need help
   • Report an issue

Potential applications for CPSY 1950:

• Add a “How to complete this lecture” section with step-by-step instructions
• Create a Resources section on each lesson page with lesson-specific materials
• Add a “Links” section for additional reading and related resources
• Include a “If you need help” section with links to Ed, Canvas, office hours, etc.
• Consider adding an “On this page” navigation sidebar for longer lesson pages
• Video section with clear instructions on how to use it
• Link to relevant readings/chapters from the lesson page

Action needed: Review lesson page structure and consider incorporating these elements when building out individual lecture pages.

No action needed at this time - just documenting for future reference.