DEV Community

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

Quick Tips & Resources To Improve Your Github ReadMe

Michael Gee on August 26, 2020

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