About the Project

Your Readme.md file is often the first impression someone will make about your repo. Make it a good one by adding visuals to catch their eye and get them excited to dive into your content. Adding a header can set the tone for your project or add emphasis on what you want the audience to read first. You can also use your visuals to portray information in a more digestible manner, such as the layout to your repo files.

Keep in Mind

If you are worried about not being creative enough for this stop right there. As Sylvia Plath said,“The worst enemy to creativity is self-doubt.” Don't put an expectation on results. Instead, take a deep breath and have fun with this! If the only thing holding you back is being scared of taking that first step, leap head first. The good news: just like learning to code, the more you practice unleashing your creativity, the easier it gets.

Table of Contents

1. Creating the Design via Canva
2. Uploading the Final Product
3. Adding and Formatting in the Readme.md File
4. Inspiration

Steps to Creating Awesome Visuals for Your Readme

An Example of My Process

Creating Churn Visual

Trust me when I say, it never starts pretty. To create a visual for churn in customers, I started with a rough sketch of the idea.

Eventually, it started to take form.

I don't have the full process, but basically it was a lot of trial and error to get to the final product. I knew it needed more structure and guidance for the reader. I ended up with this.

Create the Design

Getting Started

1. Create a free account on Canva.com. You can also sign up for a 1-month free trial of the paid subsrciption.
2. Click Create a design in the upper right corner. Choose based on the templates you may want (i.e. resume or business card) or the size you want.
   • if using the free version, you can not resize a design. That's when I recommend choosing based on size.
3. Check out the templates available. I like to add a page for each template that catches my eye. Then, I choose whichever one I like best or take peices from each.
4. Add your content, play around with elements or colors, and go with the flow of your ✨imagination✨.
5. When you're satisfied with the design, click ... in the top right corner, then download. You can choose which pages and what file type. Another option is to screenshot the design with command + shift + 4

Helpful Tips For Canva

Elements

Can't find the element you want?

• Try adding the image to your design first. Some elements, you can change the color(s) to fit your design better
• Search what you want with png at the end. If you find something you like, you can copy and paste.
  • For example: Github Logo png or computer cursor gif
  • You can usually tell if the image has no background if it has a white and grey checkboard background in the search engine
  • You can also use the image effects to remove the background if you have the canva subscription
• If you need to flip an image, keep in mind you can only crop the image in the original orientation. Crop first, then flip. (It doesn't make sense to me either)

Templates

Templates are very helpful to get you started, whether you have an idea of what you want or need more inspiration.

• Search for templates by idea/theme or by color.
• When you see one you like, apply to the page. If you see any others you like, add a new page and apply it as well. You don't have to pick just one.
• Now you can scroll through your options and see the femplates you chose full size. You can settle on one you really like and delete the rest. If you can't decide, add a new blank page and take the pieces you like from different ones to combine how you like.

Templates are only available on the subscription version. However to me, they make the subscription more than worth it. I suggest signing up for the free trial just to try them out. You can create a header and additional visuals for your github profile reademe and cancel if you feel it isn't for you.

Lock in Place

If you have an element you want to lock in place, you can do so to keep from accidently moving it around. Simply select the element or multiple elements, and click the lock button in the upper right hand corner. Do the opposite to unlock.

For more tips on using Canva, click here.

Helpful Tips for Design

There are plenty of resources explaining what to do or what not to do when it comes to graphic design. In my opinion, the most important factor is to keep the audience in mind.

Are the fonts easy to read?
Are the images too cluttered?
Where is the reader's attention drawn to first?

Besides that, try not to get too caught up in all the rules if it's holding you back from starting the design process.

These articles are great for getting started!

For 25 Graphic Design Tips from Canva, click here.

For another article on Graphic Design for non-designers, click here.

Upload the Final Product

Via Pinterest

1. Create a free account on Pinterest
2. Add an image by clicking + on the bottom right corner of the home page or your profile page
3. Choose which image or gif to upload, and add at least a title. Keep your visuals organized by keeping boards (collection of pins) that are helpful for you
   • ex: one board titled "Git Profile" and other boards based off your repo names
4. Go to the pin you created and click on the image. You should be redirected to a new tab that displays only the visual.
   • The url should end in the file type, such as https://.pin.img/arjhfbajrhbf.png
5. Copy and paste this url to reference in the readme file using markdown or html.
6. Admire the finished product!

Click here for more help using Pinterest.

Other Options

While Pinterest is the method I prefer, there are certainly other options you can choose based on your own preference. Further reading may be necessary to learn the specifics, as I am not familiar with these.

• Upload images to a repo ! [Optional Text] (../master/myFolder/image.png)
• Open an issue with the image, more here
• Use other third-party websites, more here

Adding to Your Readme

Classic Markdown

Using markdown to reference your visual is very straightforawrd. Now that you have the url to reference, you can plug it into the format of

• ![Image-Description](url)

The main downside to this method is not having an option to resize.

HTML Syntax

There are several different methods when using html syntax.

<img src="image_url.png"
   alt="Short Image Description"
   style="float: left; margin-right: 10px;" 
   /> 

or

<a href="url">
   <img src="http://url.to/image.png" align="left" height="48" width="48" >
   </a>

or

<p>align="center"
<img src="image_url.png">
</p>

Click here for the detailed documentation on markdown with images.

Other Flare with Text

Feel free to fork this repo, and check out the contents of the Readme using the code below.

• For code blocks use three back ticks at the beginning and end of the text.
• For another code block, use <kbd> text here </kbd>
• For the click to expand text boxes, use

<details>
<summary> Title of Heading to Click </summary> 
(enter a blank line for your markdown between the details to work)
your text here
</details>

• To add a table of contents, use the basic link format of [text](url)
  • Each header you create has a unique url with the following path
  • https://github.com/<your_username>/<your_repo_name>#<heading_name>

Some Inspiration

• For a plethora of github profile ReadMe's to gain inspiration from, click here.
  • Another profile ReadMe with a corresponding Medium post.
  • A profile ReadMe with a cohesive theme throughout.
• For a list of awesome repo ReadMe's, click here.
• Feel free to take ideas from any of my repos! I had a lotta fun making the readme on my Office Space themed project here.
  • The Examples folder in this repo contains a few visuals I've made with Canva as well.

Miscellaneous

• Video Tutorial on Converting a Canva Presentation to Google Slides
• Readme Best Practices - an outline for creating a detailed Readme file for any project

Author

Bethany Thompson
Always welcome to questions, comments, and suggestions.🤓