How to Write Your First Post on DEV

Publish Date: Sep 5 '19

So you've been reading dev.to and you're ready to post. Great! Here's how to do that, and what to expect next:

0. Sign Up

If you don't already have an account on DEV, you'll need one to post. Sign Up Here

1. Click "Write a Post"

Once you sign in, there will be a big green button in the upper right corner that says "Write a Post" - click it!

2. Pick a Good, Descriptive Title

Most of the time, people will only see your title - and they will have to decide to click or not based just on that. So make your title stand out! Tell the readers exactly what they will get from the post, and then deliver on that promise.

Here's an example of what your post will look like:

ES6 Mini Crash Course: How to Write Modern JavaScript

Chris Achard ・ Sep 4 '19

#javascript #webdev #node

3. Add Some Tags

Tags are super important! Readers on DEV can follow certain tags, so appropriately tagging your posts will get your posts in the feeds of the most people (who actually want to read that content!)

For tag ideas, check the left sidebar of DEV once you're logged in. You'll be able to see tags you follow, as well as other popular tags on the site (example below)

You can also see the all time most popular tags

4. (Optional) Choose a Cover Image

Click on the "add images" button in the post editor to open the image adding dialog, then choose a file to upload as your cover images. Cover images give visual interest to your post, plus they show up on Twitter if someone tweets out a link to your post!

5. Write Your Post!

Here's the fun part :) You can write your post directly in the DEV editor, or copy and paste from somewhere else - but here's where you get to tell people what you want to tell them!

6. Add Some Formatting

DEV uses markdown to format text in the posts, and they have a handy Editor Guide

It has a lot of great stuff in that guide, so check it out! Including how to format code by using three backticks:



console.log("Woo!")

And how to embed things like links to codesandbox or other DEV posts.

7. Add Images in the Body of a Post

One thing that took me a minute to figure out the first time was how to actually add images to the body of a post.

Use the same image upload button as in step 4, but then use the "Body Images" upload box. Then: wait a second for it to upload.

Once it's done, there will be a markdown snippet with a link to your uploaded image. Copy that, and paste it right into the DEV editor! Change the alt tag (inside the square brackets) to something descriptive, and you're good to go.

8. Review Your Post in Preview Mode

Once you're done with a post, it's easy to get excited and just publish - but I recommend reading through the post at least once in "Preview" mode.

Click "Preview" at the bottom of your screen to see the formatted post.

9. Publish!

You're done - time to publish!

Click the link at the bottom, and your post will be LIVE!

DEV doesn't review your post before it goes out or anything - so when you click publish, make sure you're ready for people to read it.

CONGRATULATIONS! 🎉

You're officially a poster on DEV :)

If you run into any problems or have questions about the posting process - feel free to ask them below. I'll respond!

If you liked this post, you can find more by:

Following me on twitter: @chrisachard
Joining the newsletter: chrisachard.com

Thanks for reading!

Comments 36 total

Lee WarrickSep 6, 2019

Most importantly... Just post it
- Chris AchardSep 6, 2019
  
  Definitely! DEV's a great place to post, even if you're nervous - so just post it :)
MaximeSep 6, 2019
You can also enjoy the power of GIT to have versions on your posts, Prettier to format your Markdown post, Github so that people can fix your posts by making a PR and many more by using my-dev-to template 😊 dev.to/maxime1992/manage-your-dev-...
АнонимSep 6, 2019
[deleted]
- Chris AchardSep 6, 2019
  
  Thanks Dandy :) I've had a few beginners actually ask me about it, which is why I made the post! - So yes, it's pretty straightforward, but still can be daunting if you haven't written a post before 😀
PatrickServ..Sep 6, 2019

Can't see the 'Write a Post' section ???
- Chris AchardSep 6, 2019
  
  Do you mean you can't see the "write a post" button in the navbar? There's also a "write a post" link if you hover over your profile picture in the upper right... does that work?
  - PatrickServ..Sep 6, 2019
    
    Ah! Seen it. Thanks.
KSep 6, 2019
Also:

Write about anything you like, it doesn't have to be mega complicated or technical.

There are more beginners out there than you think. Many people are a few steps behind you and happy to read what helped you to understand things.
- Chris AchardSep 6, 2019
  YES! Absolutely
- faizelGaroebJan 10, 2022
  Awesome comment dude!
- Emmanuel EnecheFeb 19, 2024
  Absolutely got this ❤️
dillan teagleOct 20, 2019
How can you add a drscription for your post?
- Chris AchardOct 20, 2019
  
  What type of description are you looking to add? I only know about the title and tags; plus you can add a cover image that will show up on twitter, etc.
  
  Some of the "descriptions" you see might just be the first few lines of the post?
  - dillan teagleOct 20, 2019
    
    Hmm well i am talking about this key "description"
    
    : canonical_url: "https://dev.to/teaglebuilt/is-ruby-dead-17em" collection_id: null comments_count: 14 cover_image: null description: "" flare_tag: {name: "discuss", bg_color_hex: "#000000", text_color_hex: "#FFFFFF"} id: 174966 path: "/teaglebuilt/is-ruby-dead-17em" positive_reactions_count: 9 published_at: "2019-09-22T14:19:40.527Z" published_timestamp: "2019-09-22T14:19:40Z" slug: "is-ruby-dead-17em" tag_list: (3) ["ruby", "rails", "discuss"] title: "Is ruby dead?" type_of: "article" url: "https://dev.to/teaglebuilt/is-ruby-dead-17em"
    
    curious as of how it can be filled?
    - Chris AchardOct 20, 2019
      
      Huh! Not sure actually :) @ben might know maybe? (don't know if @ mentions work here)
      - MeStrakAug 21, 2020
        I know this post is quite old but I just had the same question.
        
        If you don't do anything then it just takes the first few lines of your article by default. If you want to set a custom description then there are two options that I could find. Option 1 seems much better to me.
        
        Remove the ' before the --- below, I just added it before the --- to stop markdown reformatting it.
        
        Add a frontmatter section containing a description field to the top of the article (it will only be visible in edit mode):
        '---
        description: A great article about how to set the description of an article on dev.to
        '---
        
        Change the editor to basic markdown on this page: dev.to/settings/ux. When you do that new posts will have this at the top when in edit mode. However then you have other things that you need to set manually that you :
        '---
        title:
        published: false
        description:
        tags:
        //cover_image: direct_url_to_image.jpg
        '---
        
        After setting that description field I see the custom description in the API.
Nayden GochevNov 6, 2019
Nice post,
however to me it is not clear how to add highlight for the code template ?

By default in Markdown you can write with 3 ` the begining of a code block and the end with 3 ` however also at the beginning you can write the language for highlight which doesnt seems to work.

Example of markdown with highlight not in dev.to but in general :

```javascript
console.log("this should be highlighted with javascript but this is not the case);
```

So can you explain how to paste a code block WITH a highlight intext in the post.
- Chris AchardNov 6, 2019
  ... oh weird! I just wrote this comment about how it should work, but then it didn't for me... I'm looking into it; not sure what's going on
  - Chris AchardNov 6, 2019
    
    Ah! Got it - if I have a backtick (just a single one) in the post like you do BEFORE the three backticks, then the parser gets confused... try just doing threebackticks with the "javascript" and it should show up like this:
    
    console.log("this should be highlighted with javascript but this is not the case);
    
    Does that work for you?
    - Nayden GochevNov 6, 2019
      
      We should add this to the markdown ? btw when writing post :))
      
      Sometimes it looks it doesnt work .. its weird but now it works.. :) weird !
      
```javascript
console.log("no color");
```
      
      now in the post I have `*3 times but here bellow when trying I am typing just 3 times without SPACES and I got it !
      
      console.log("test JavaScript");
      
      weird why it wasn't working above.
      
      System.out.println("test again Java ");
      
      Console.WriteLine("whoo c# has to be lowercase c");
Michael TharringtonMar 16, 2020
Chris, I can't tell you how many people I've pointed here to use this tutorial. Thank you for writing such handy documentation! 😀

By the way, would it be cool with you if we add the tag #meta to this?
- Chris AchardMar 16, 2020
  
  Awesome! And sure :)
Rose Day Mar 28, 2020

Thank you so much for this post! I have been on Dev for a long while but not until this post did I realize there was an image button at the bottom as an option to add in an image.
AYUSH GUPTAApr 14, 2020

Thanks for the tutorial Chris.

Note; I published my first post here but I noticed that my article contains noindex/nofollow tags. Not sure why so?

Anyways I think my article is visible to dev community members. :)
- Chris AchardApr 14, 2020
  
  Glad it helped!
  
  Hm; not sure about the noindex/nofollow - (would be a question for the DEV team perhaps).
Habib Apr 24, 2020
I followed like you but image not rendering in preview mode
- Chris AchardApr 24, 2020
  Hm, perhaps try to upload it again, and copy the image tag again? Sometimes I find it does weird things with image uploads.
OffirmoNov 7, 2020
Thanks for the tips! Applied them here: dev.to/offirmo/learn-javascript-in...
Marwa EltayebDec 13, 2020
How to leave a space when I write article in dev.to??
- Chris AchardDec 15, 2020
  dev's markdown processor accepts HTML, so you can write: <br /> to get a blank line
Jace RoldanJan 11, 2023
Good guide! Happy to be on DEV 👋🏼
MavbenJun 26, 2023
This helps me a lot! Thank you :)
techtechJul 5, 2023
@chrisachard Maybe the article should be updated?
joachim kliemannJul 26, 2023
Thanks for this great tutorial. 🙂

Add comment

Chris Achard @chrisachard