This document is a template you can use as a starting point for your own newline-style programming tutorials. Copy and paste this page into a new article. Replace this summary with your own. Write a compelling title, too!

👋  This template is a companion to our 

guidelines on writing remarkable blog posts

. Make sure you've read that document first. Also, be sure to check out our 

Introduction - Explain the Pain (and Context)

The introduction sets the context for your post. 

A good introduction will set the stage for a reader. 

A good approach to writing your introduction is to 

The code you're trying to explain was written in response to a problem. So describe what life was like 

 this solution was created. "We used to do X, but it has problems A/B/C, so now we do Y." Then say, "in this post, we're going to show you how to do Y."

This short section should directly tell the reader what they will learn by reading this post. Keep it factual and use bullets if you need them. Limit the length to 1 paragraph (or 

❌ "In this post, you will learn about a GraphQL server."

✅ "By the end of this post, you will know how to create a basic GraphQL server in Node.js from scratch."

Everyone comes from a different background, and when a reader first encounters a post, it can be hard for them to know if they understand the prereqs necessary to get value from it.

Use the prerequisites section to link to 2-4 URLs that come just before your article in the user's "journey". Think of knowledge like a graph and each blog post as a node on that graph. What are some edges that will connect your blog post naturally to a few prerequisite topics?

❌ "Unless you've been living under a rock, you probably know what Redux is by now."

 which is an intermediate data architecture pattern for React and other web frameworks. If you're just getting started in web development, you should check out these articles first:

These sections are where you will walk through the tutorial and explain 

 step to the reader. It's the meat of the article.

Then iteratively add conceptual chunks of code and teach each concept as you build the final example.

At the end of your post summarize what you've talked about. Remind the reader why it's valuable and what it means for the future. This is also your chance to give a call-to-action, if you have one.

Close your article by listing resources where someone can go next to learn more. If you used any other sources in your research, give credit and link to them.

After you've written your post, take a look at 

. If your post checks every box there, then you're good to go. Share your article with the world!

If you have any questions - or want feedback on your post - come join 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">newline Tutorial Template</h1><div data-node-type="summary" class="summary-block">This document is a template you can use as a starting point for your own newline-style programming tutorials. Copy and paste this page into a new article. Replace this summary with your own. Write a compelling title, too!</div><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>👋  This template is a companion to our <a href="https://www.newline.co/@eigenjoy/newlines-guide-to-writing-remarkable-technical-blog-posts---d6d89b6a" rel="noopener noreferrer nofollow">guidelines on writing remarkable blog posts</a>. Make sure you've read that document first. Also, be sure to check out our <a href="https://www.newline.co/@eigenjoy/newline-formatting-guidelines--286f3a03" rel="noopener noreferrer nofollow">formatting guidelines</a>, and <a href="https://www.newline.co/@eigenjoy/newline-blog-post-checklist--da8d0e21" rel="noopener noreferrer nofollow">the newline Blog Post Checklist</a>.</p></div></div><h1><a name="introduction-explain-the-pain-and-context">Introduction - Explain the Pain (and Context)</a></h1><p>The introduction sets the context for your post. </p><p>A good introduction will set the stage for a reader. <em>What</em> are we talking about? <em>When</em> does this apply? <em>Why</em> do we even have a problem?</p><p>A good approach to writing your introduction is to <strong>describe the problem.</strong> </p><p>The code you're trying to explain was written in response to a problem. So describe what life was like <em>before</em> this solution was created. "We used to do X, but it has problems A/B/C, so now we do Y." Then say, "in this post, we're going to show you how to do Y."</p><p>Guidelines:</p><ul><li><p>Explain the pain</p></li><li><p>Explain what "old-timers" did before this existed</p></li><li><p>Close with 1 paragraph explaining what we're doing here</p></li><li><p>2-8 paragraphs long</p></li></ul><p></p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><h2><a name="what-you-will-learn">What You Will Learn</a></h2><p>This short section should directly tell the reader what they will learn by reading this post. Keep it factual and use bullets if you need them. Limit the length to 1 paragraph (or <em>maybe</em> 2).</p><p>❌ "In this post, you will learn about a GraphQL server."</p><p>✅ "By the end of this post, you will know how to create a basic GraphQL server in Node.js from scratch."</p></div></div><p></p><h2><a name="prerequisites-what-you-need-to-know">Prerequisites - What You Need To Know</a></h2><p>Everyone comes from a different background, and when a reader first encounters a post, it can be hard for them to know if they understand the prereqs necessary to get value from it.</p><p>Use the prerequisites section to link to 2-4 URLs that come just before your article in the user's "journey". Think of knowledge like a graph and each blog post as a node on that graph. What are some edges that will connect your blog post naturally to a few prerequisite topics?</p><p>❌ "Unless you've been living under a rock, you probably know what Redux is by now."</p><p>✅ "This article explains <em>Redux</em> which is an intermediate data architecture pattern for React and other web frameworks. If you're just getting started in web development, you should check out these articles first:</p><ul><li><p>Link #1</p></li><li><p>Link #2</p></li><li><p>Link #3</p></li></ul><h2><a name="step-1-do-the-first-thing">Step 1: Do the first thing</a></h2><p>These sections are where you will walk through the tutorial and explain <em>every</em> step to the reader. It's the meat of the article.</p><p>Then iteratively add conceptual chunks of code and teach each concept as you build the final example.</p><h2><a name="step-2-do-the-second-thing">Step 2: Do the second thing</a></h2><p></p><h2><a name="step-n-do-the-last-thing">Step N: Do the last thing</a></h2><p></p><h2><a name="conclusion">Conclusion</a></h2><p>At the end of your post summarize what you've talked about. Remind the reader why it's valuable and what it means for the future. This is also your chance to give a call-to-action, if you have one.</p><h2><a name="more-resources">More Resources</a></h2><p>Close your article by listing resources where someone can go next to learn more. If you used any other sources in your research, give credit and link to them.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Be sure to check out our <a href="https://www.newline.co/@eigenjoy/newline-formatting-guidelines--286f3a03" rel="noopener noreferrer nofollow">formatting guidelines</a> to see how to format <strong>bold</strong>,<em> italic</em>, code blocks and more.</p></div></div><h2><a name="blog-post-checklist">Blog Post Checklist</a></h2><p>After you've written your post, take a look at <a href="https://www.newline.co/@eigenjoy/newline-blog-post-checklist--da8d0e21" rel="noopener noreferrer nofollow">the newline Blog Post Checklist</a>. If your post checks every box there, then you're good to go. Share your article with the world!</p><h2><a name="getting-help-and-feedback">Getting Help (and Feedback)</a></h2><p>If you have any questions - or want feedback on your post - come join <a href="https://newline.co/discord" rel="noopener noreferrer nofollow">our community Discord</a>. See you there!</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

newline Tutorial Template

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript