DEV Community

loading...
Cover image for Quick Tips & Resources To Improve Your Github ReadMe

Quick Tips & Resources To Improve Your Github ReadMe

michaelgee profile image Michael Gee ・Updated on ・2 min read

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

Discussion (15)

pic
Editor guide
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 Author

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 Author

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 Author

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 Author

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 Author

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 :)