Tips and tricks to add to your github readme.md

I was assigned to write the README.md file of a project we were working on in a team. I was hyped and took the mission. Here are some things I found that you might like

Contents
Uploading an image
Adding Badges
Dropdown lists
Using font awesome
Remark

1. Uploading an image

Uploading a picture is very simple. Just copy and paste. This works with png, jpg, and jpeg files.

2. Adding Badges

I'd seen badges on several repos but never actually thought of how to do it. Well, it's pretty easy. You can easily generate a badge on the shields.io website. Just navigate to the site and type badge on the search bar.

Fill in the label, message and color then click the Make Badge button.

A new tab will open with the svg generated

There are 2 ways to add the svg to your markdown

1. Now copy the link to the svg to add this to your markdown you could use an image tag

    <img src='link-to-the-svg' />

This however, using this will redirect anyone who clicks on the badge to the svg webpage.

1. To customize the routing use

    [![label](linkToTheSvg.svg)](cutomized-route-link)

Note: Don't forget the .svg

The are badges of different colors and also those with multiple fields and the guide can be found on the shields.io page.

3. Dropdown lists

This is actually quite simple. It's the HTML tag details

and when closed

The code

<details open>
    <summary>Git gist highlights</summary>
    <ul>
        <li>Using badges</li>
        <li>Nested lists</li>
    </ul>
</details>

The open attribute creates the list open

4. Using font awesome

Git markdown does not have support for inline CSS so the font-awesome icons themselves can't be used. However there is a way to work around that:

• First download or get a pic of the icon. It should be in a png, jpg, or jpeg format.
• Upload the picture to the markdown. The link should be placed in a pair of square brackets []
• Add the link to your site in round brackets

[![alt text](uploaded-file-link)](link-to-site)

For example

[![dev.to link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5qf1pu23vjd37j7zhbd.png)](https://dev.to/babib)

[![twitter link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uphwbpdmb6fqtbu1gfrp.png)](https://twitter.com/BTweets47)

I have written a README.md file containing all these tips listed here. Contributions are always welcome.

↑ Back to top

                                                       Babi 💞