Make Your Readme Better with Images and GIFs ✨

How many of us struggle with writing Readme.md files? I definitely do! 😩 Today I’d like to discuss the quick and easy way to add an image (screenshot) or a GIF of your project to the readme to make it more interesting, visually appealing and most importantly, easier for anyone to understand your project right away since Readme.md is the first thing other developers will see if they come to check out your project 👩‍💻 👨‍💻

Step 1.

Pick an image, or record a quick GIF of your project (I prefer GIFs because they’re more interactive). For images, I usually just take a screenshot and for GIFs, I use GIPHY Capture. GIPHY Capture is the best way to create GIFs on your Mac. Simple, powerful, free, and easy enough for pretty much everyone and even a few small mammals. 😃

Step 2.

To be able to use the screenshots and GIFs for your readme later on you have to:

• git add .
• git commit -m "adding a gif/screenshot for the readme"
• git push

These commands will save the GIF/screenshot to your master branch. When you go to your project’s repo on Github you should be able to see it among all the other files and folders of the project.

Step 3.

Now that you have the GIF/screenshot saved in the project folder you can click on it, which will open it in a new window where you can copy the URL address. The URL address will be necessary for the next and last step where will finally add it to our readme file.

Step 4.

We’re ready for the final step! 🥳   After saving the URL of your GIF/screenshot you will go to the edit page of your readme. Click on the pencil icon in the right top corner of the readme section. It will bring up the raw markdown where you can edit and commit changes to your readme.

Once you’re in the editing screen just add this bit of code that will make the image/GIF appear on your readme (substitute the link with yours):

![vino map gif](https://github.com/AlenaNiku/vino-map/blob/master/vino-giphy.gif)

In square brackets, you have to put alternate text describing the image for accessibility purposes, and in the parenthesis next to it you’ll add the URL of the image you saved to your clipboard in step 4. Make sure not to forget the exclamation point in the beginning! This is how adding an image works in markdown, which is the language all Readme.md files are written in, hence the extension .md 👉 markdown.

And there you have it! A quick and simple way to make your Readme.md instantly better! 🤩

Resources

Giphy Capture

Github formatting syntax