Upgrade Your GitHub README.md
Tags: github, tutorial, design
Published: 2022-03-18 19:57:56

## Table of Contents
1. [Creating Your README.md](#get-started)
2. [Brainstorming](#time-to-get-ideas)
3. [Skill Badges](#adding-your-skills)
4. [Social Media & Languages/Frameworks](#adding-icons)
5. [README.md Generator](#readme-generator)
6. [DevCard](#dailydev-devcard)
7. [Helpful Links](#helpful-links)

Your profile README.md acts like the resume recruiters see after your resume. We want it to be as captivating and presentable as it can be while still holding a bit of our personality within it.

What does your README.md look like? Does it include your GitHub stats? Any blog posts from Medium, Dev.to, etc. (if you post)? Do you have languages and frameworks neatly displayed as icons or categorized as most used? No? Me either...Let's figure out how to do just that.

### Get Started
We can't exactly customize a README.md that doesn't exist. [GitHub](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme) [Docs](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme) perfectly explains how to create yours, if it doesn't already exist.

### Time to Get Ideas
There are plenty of others who already have beautifully designed (and some, complex) files we can get ideas from. Your readme.md is yours. While displaying the appropriate content, it should reflect a bit of you.

Here's are some links that may be helpful:
- [Awesome GitHub Profile ReadMe](https://github.com/abhisheknaiidu/awesome-github-profile-readme)
- [Awesome GitHub Profile README Templates](https://github.com/durgeshsamariya/awesome-github-profile-readme-templates)
- [Creative Profile README](https://github.com/coderjojo/creative-profile-readme)

### Adding Your Skills
![GitHub Badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g922azk2oyq5ax1b6gzb.png)
 
You can use [shields.io](https://shields.io/) to create cunstomized badges. It would look like this:
```
![](https://img.shields.io/badge/<WORD_ON_LEFT>-<WORD_ON_RIGHT>-informational?style=flat&logo=<LOGO_NAME>&logoColor=white&color=2bbc8a)
```

Similarly, you can also use this approach:
```
<div id="badges">
  <a href="your-linkedin-URL">
    <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/>
  </a>
  <a href="your-youtube-URL">
    <img src="https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white " alt="Youtube Badge"/>
  </a>
  <a href="your-twitter-URL">
    <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white " alt="Twitter Badge"/>
  </a>
</div>
```

### Adding Icons
When you want to add a section that says something like `You can find me at [twitter icon] or on [linkedin icon]` then you can use a version of the following code:
```
<!-- Actual text -->

You can find me on \[!\[Twitter\][1.2]\][1], or on \[!\[LinkedIn\][3.2]\][3].

<!-- Icons -->

[1.2] : http://i.imgur.com/wWzX9uB.png (twitter icon without padding)
[2.2] : https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/linkedin-3-16.png (LinkedIn icon without padding)

<!-- Links to your social media accounts -->

[1] : https://twitter.com/Martin_Heinz_
[2] : https://www.linkedin.com/in/heinz-martin/
```

When it comes to including your languages and frameworks, [DevIcons GitHub Repository](https://github.com/devicons/devicon/) has free logos you can use. This would look something like:
```
<div>
  <img src="https://github.com/devicons/devicon/blob/master/icons/java/java-original-wordmark.svg" title="Java" alt="Java" width="40" height="40"/>&nbsp;
  <img src="https://github.com/devicons/devicon/blob/master/icons/react/react-original-wordmark.svg" title="React" alt="React" width="40" height="40"/>&nbsp;
  <img src="https://github.com/devicons/devicon/blob/master/icons/spring/spring-original-wordmark.svg" title="Spring" alt="Spring" width="40" height="40"/>&nbsp;
  .
  .
  .
  <img src="https://github.com/devicons/devicon/blob/master/icons/nodejs/nodejs-original-wordmark.svg" title="NodeJS" alt="NodeJS" width="40" height="40"/>&nbsp;
  <img src="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-plain-wordmark.svg" title="AWS" alt="AWS" width="40" height="40"/>&nbsp;
  <img src="https://github.com/devicons/devicon/blob/master/icons/git/git-original-wordmark.svg" title="Git" **alt="Git" width="40" height="40"/>
</div>
```

### README Generator
Wait...I don't have to write the code myself? No.

Check out [github-profile-readme-generator](https://github.com/rahuldkjain/github-profile-readme-generator) by Rahul Jain. The simply to use site generates the markdown you need. All you have to do is enter in your desired statements. [Try for yourself here](https://rahuldkjain.github.io/gh-profile-readme-generator/)!

### [daily.dev DevCard](https://devcard.link/)
> A while ago, we launched dev cards! A fantastic concept where you can show off how many articles you read, your favorite publications, and show off your rank!
> [Chris Bongers](https://app.daily.dev/DailyDevTips)

![Chris's #DevCard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvh4ip34q98wm6yfnoh0.png)
 
Creating a DevCard is quite simple with a GitHub profile. And using GitHub actions, it will automatically get updated, showing your reading interests and ranking. A wonderfully detailed step-by-step guideline on how to set up yours [by Chris is right here](https://daily.dev/blog/adding-the-daily-devcard-to-your-github-profile?utm_source=webapp&utm_medium=devcard&utm_campaign=devcardguide&utm_id=inapp):

### Helpful Links
Ideas and code provided by the following links:
- [How to Create an Impressive GitHub Profile README](https://www.sitepoint.com/github-profile-readme/)
- [Build a Stunning README For Your GitHUb Profile](https://martinheinz.dev/blog/29)
- [Stand Out by Personalizing Your GitHub Profile](https://medium.com/nerd-for-tech/stand-out-by-personalizing-your-github-profile-f0a5d73f2b4d)