DEV Community

Cover image for Quick Tips & Resources To Improve Your Github ReadMe
Michael Gee
Michael Gee

Posted on • Edited on

Quick Tips & Resources To Improve Your Github ReadMe

Unless you have been living under a rock for the past few months, you are probably aware that Github has a cool new feature where you can create a custom markdown README intro for your Github profile page.

I finally got around to creating my initial implementation and wanted to share some quick tips and resources I came across while doing it.

Getting Started? ๐Ÿšง

For getting started or finding new ideas and inspiration, you can't go wrong with an awesome-* repository!

Repository: awesome-github-profile-readme

I highly recommend going through various examples and gathering inspiration from multiple sources.

To see the markdown implementation of a profile click into the README.md file and click the "Raw" version shown in the image below:

Alt Text
Once you have an idea of the direction you want to go you can get started!

Emojis ๐Ÿค”

You will quickly notice that emojis are all over the place in almost all the examples you will find.

Most emojis are supported in markdown and you can find a full reference list:

Markdown Emojies Cheat Sheet

P.S. You can also use these same emojis in your Dev.to posts since it is also using markdown.๐Ÿ˜‰

Displaying Your Dev.to Blog Posts ๐Ÿ“•

Luckily there is already a great blog post that goes over this:

Show your latest dev.to posts automatically on your GitHub profile readme

Video Resources ๐Ÿ“ฝ๏ธ

Next Level GitHub Profile README

UPDATE: Next Level GitHub Profile README

These videos go over various features that can be added to your README including displaying blog posts, YouTube videos, Github stats, icons, badges, currently playing Spotify songs, and more!

Bonus โž•

You might notice that a lot of examples will have no space in between the emoji and the text:

Alt Text

To manually inject spaces in between the two you can add   spaces:

- :computer:    I'm a full-stack software developer.
- :briefcase:    Currently working on...
Enter fullscreen mode Exit fullscreen mode

Top comments (15)

Collapse
 
pablohs1986 profile image
Pablo Herrero • Edited

Nice tips!!! Here's mine, that I've improved with tips as great as yours from DEV:

github.com/pablohs1986

Collapse
 
michaelgee profile image
Michael Gee

Awesome! Very in-depth and visual like Wali's (the other person who commented on this post). I definitely have some catching up to do improving mine as I go.

Quick Note: I see you tried to use the nbsp; spacing in your README but doesn't show spaces. I believe this is because in mine I combine both nbsp; and actual spaces to give the spacing result.

" nbsp; "

Give that a try and let me know how it works!

Collapse
 
pablohs1986 profile image
Pablo Herrero • Edited

Heyyy, thanks for the advice, but I donโ€™t understand... with one nbsp I show one space, that is what I want like you can see in this screenshot:
phNbsp

Where is the error???

Thread Thread
 
michaelgee profile image
Michael Gee

hmm I see. Maybe we are seeing slightly different results from different screens.

I am viewing from Chrome on a laptop.

Thread Thread
 
pablohs1986 profile image
Pablo Herrero • Edited

I don't know what's happening, man ๐Ÿค” I've checked it on a mobile phone, a tablet and a laptop with Chrome, Safari and Firefox (24" and 15") and I always see the spaces...

Here's an example to see the difference between putting an nbsp and not putting it:

spaces

Collapse
 
saberglow profile image
Wali Ullah

Awesome guide... i built mine a couple weeks ago.. check it out:
github.com/SABERGLOW

Collapse
 
deveshlashkari profile image
Devesh Lashkari

Looks clean! Any website to create that banner gif?

Collapse
 
saberglow profile image
Wali Ullah • Edited

hmm i don't think so, but here's what you can do:
1) Check my Pen on CodePen (and edit the name as you see fit)
2) Screen-record it, and make a gif.

Link to the pen: codepen.io/saberglow/details/xxVwodW

works best in "full page view"

Collapse
 
michaelgee profile image
Michael Gee

Looks great! Especially the animated images, did you create those yourself?

Collapse
 
saberglow profile image
Wali Ullah

only the title banner... the second one was taken from giphy and resized a bit

Collapse
 
thinkverse profile image
Kim Hallberg

Ooh, that spaces trick, thank you. ๐Ÿ‘

Collapse
 
michaelgee profile image
Michael Gee

Was definitely a small pet peeve seeing that over and over again and was the initial reason why I created this post in the first place.

Hopefully, people scroll down to the end and see it ๐Ÿ˜„

Collapse
 
deveshlashkari profile image
Devesh Lashkari

Loved it. Have a look at mine :

github.com/deveshlashkari

Collapse
 
michaelgee profile image
Michael Gee

Looks great! 2020 goals are very relatable I'm right there with you.

If you'd want some feedback, you can save a lot of vertical space on your Profile by just having 2 sections for your tech stack (some of the sections only have 1 icon in them)

Tech Stack:
Icon, Icon, Icon... etc

Currently Learning:
Icon, Icon, Icons... etc

Just my opinion but let me know what you think!

Collapse
 
deveshlashkari profile image
Devesh Lashkari

Thanks for the feedback. I will surely work on them :)