Tech/Tutorial Blog

Create a technical/tutorial blog:

1. HOMEPAGE
- "Learn [Technology/Skill]" headline
- Featured tutorial (large)
- Learning paths or series
- Latest tutorials grid
- Difficulty tags (Beginner, Intermediate, Advanced)

2. TUTORIAL PAGE LAYOUT
Header:
- Title
- Difficulty badge
- Prerequisites listed
- Time to complete
- Last updated date
- Author

Article structure:
- Introduction/what you'll learn
- Prerequisites section
- Step-by-step content
- Code blocks (syntax highlighted)
- Explanations between code
- Screenshots/diagrams
- Tips and warnings
- Summary/recap
- Next steps

3. CODE BLOCKS
Features:
- Syntax highlighting
- Line numbers
- Language label
- Copy button
- Filename header (when relevant)
- Expandable for long code
- Diff view for changes

Example styling:
```javascript
// utils.js
function formatDate(date) {
  return new Date(date).toLocaleDateString();
}
```

4. TABLE OF CONTENTS
- Sticky sidebar
- Nested headings
- Progress indicator
- Current section highlight

5. INTERACTIVE ELEMENTS
- Embedded CodePen/CodeSandbox
- Interactive quizzes
- "Try it yourself" sections
- Downloadable starter files

6. TUTORIAL SERIES
For multi-part tutorials:
- Series overview page
- Part navigation (1/5, 2/5...)
- Progress tracking
- "Mark as complete" checkbox

7. CATEGORIES/TOPICS
- JavaScript
- React
- CSS
- Node.js
- DevOps
- Tools

8. SEARCH
- Full-text search
- Filter by difficulty
- Filter by technology
- Filter by type (tutorial, guide, reference)

9. SIDEBAR ELEMENTS
- Related tutorials
- Popular posts
- Newsletter signup
- Sponsor/ad slot

10. DOCUMENTATION FEATURES
- Version selector
- Edit on GitHub link
- Report issue link
- Community Discord link

Design: Clean, readable. Code must be prominent and copyable. Mobile: Code blocks scroll horizontally.