contributing tutorials

Author: todortodorovic

.CONTRIBUTING/.CONTRIBUTING.md

@@ -21,6 +21,8 @@ This guide covers how to contribute to the documentation, including serving a lo
   - [Adding Images](#adding-images)
     - [Image Annotations](#image-annotations)
   - [Search Engine Optimization (SEO)](#search-engine-optimization-seo)
+  - [Contributing Tutorials](#contributing-tutorials)
+
 
 ## Viewing Site Locally
 
@@ -233,3 +235,30 @@ Here are some resources to help you create good titles and descriptions for SEO:
 - [Google's recommendation on good descriptions](https://developers.google.com/search/docs/advanced/appearance/snippet?hl=en)
 
 In general, titles should be between 50 and 60 characters and descriptions should be between 120 and 160 characters.
+
+## Contributing Tutorials
+
+For step-by-step tutorials, we have a specialized workflow and dedicated guides. Start with the [**tutorials overview**](tutorials/README.md) to see all available options, or jump directly to:
+
+### Quick Tutorial Contributing
+- **[Quick Guide](tutorials/QUICK_GUIDE.md)** - Essential requirements for experienced contributors
+- Focus on working code and clear instructions
+- Everything else is optional and can be refined during review
+
+### Detailed Tutorial Guidelines
+- **[Style Guide](tutorials/STYLE_GUIDE.md)** - Comprehensive guide with detailed formatting rules
+- **[Templates](tutorials/templates/)** - Ready-to-use templates for different tutorial categories:
+  - Polkadot SDK tutorials
+  - Smart contracts tutorials
+  - XCM/Interoperability tutorials
+  - dApps tutorials
+  - Governance tutorials
+
+### Tutorial Categories
+- **polkadot-sdk/**: Parachains, pallets, runtime development
+- **smart-contracts/**: EVM contracts, ink! contracts, demo applications
+- **interoperability/**: XCM operations, cross-chain workflows
+- **dapps/**: Frontend development, API integrations
+- **onchain-governance/**: Proposals, voting, delegation
+
+Tutorials follow a different structure than general documentation and have specific requirements for metadata, file organization, and navigation updates.

.CONTRIBUTING/tutorials/QUICK_GUIDE.md

@@ -0,0 +1,93 @@
+# Contributing Tutorials - Quick Guide
+
+Fast-track guide for experienced contributors. For detailed explanations, see [STYLE_GUIDE.md](STYLE_GUIDE.md).
+
+## Essential Requirements
+
+### 1. Metadata (Required)
+```yaml
+---
+title: Tutorial Title (max 45 chars)
+description: Description 120-160 chars
+tutorial_badge: Beginner | Intermediate | Advanced
+categories: Category1, Category2
+---
+```
+
+### 2. File Structure (Required)
+```
+tutorials/[category]/[subcategory]/[tutorial-name].md
+images/tutorials/[category]/[subcategory]/[tutorial-name]/
+.snippets/code/tutorials/[category]/[subcategory]/[tutorial-name]/
+```
+
+### 3. Navigation Update (Critical)
+**Must update `.nav.yml` files** or your tutorial won't appear:
+```yaml
+# In appropriate .nav.yml file
+- 'Display Title': tutorial-filename.md
+```
+
+### 4. Working Code & Tests (Required)
+- All code examples must be tested and functional
+- **Always specify dependency versions** (e.g., `npm install [email protected]`)
+- Include verification steps
+- Test on clean environment before submitting
+
+## Tutorial Categories
+
+- **polkadot-sdk/**: Parachains, pallets, runtime development
+- **smart-contracts/**: EVM, ink!, demo applications  
+- **interoperability/**: XCM operations, channel management
+- **dapps/**: Frontend integration, API usage
+- **onchain-governance/**: Proposals, OpenGov operations
+
+## Basic Template
+
+```markdown
+# Tutorial Title
+
+## Introduction
+[Brief explanation of what users will learn/build]
+
+## Prerequisites
+- [Required knowledge/tools]
+
+## Step 1: [Action]
+[Instructions with commands]
+
+## Verification
+[How to confirm it worked]
+
+## Where to Go Next
+[Related tutorials]
+```
+
+## Image Requirements
+
+- **Format**: `.webp` only  
+- **Location**: `images/tutorials/[path]/`
+- **Naming**: `tutorial-name-01.webp`, `tutorial-name-02.webp`, etc.
+- **Dimensions**: 
+  - Desktop screenshots: 1512px width, variable height
+  - Browser extensions: 400x600px  
+- **Alt text**: Always required
+
+## Submission Checklist
+
+- [ ] Metadata complete
+- [ ] Working code tested
+- [ ] Images in `.webp` format
+- [ ] Navigation updated (`.nav.yml`)
+- [ ] Files follow naming conventions
+- [ ] Verification steps included
+
+## Quick Links
+
+- **Templates**: [templates/](templates/) folder
+- **Style Guide**: [STYLE_GUIDE.md](STYLE_GUIDE.md)  
+- **Examples**: Browse existing tutorials for reference
+
+---
+
+Need help? Check the [detailed style guide](STYLE_GUIDE.md) or existing tutorials for examples.