NOTE:

This is a work in progress, but will eventually be my guide to building better READMEs for all my projects. A project for other projects 😊

Table Of Contents

• Template
• Headers
• Lists
• Tables
• Links
• Relative Links
• Images
• Code
• Styling
• Horizontal Rule
• Drop Downs
• Blockquotes
• Colour Models
• Badges
• Generating Badges
• Template
• Lisence

TEMPLATE

Put Your Title Here

Breif description of what the app does.

Example:

A relatively simple fullstack project that allows users to track workouts. Live demo here (coming soon).

Table of Contents

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Project Status
• Room for Improvement
• Acknowledgements
• Contact

General Information

This is where you would mention what the app does in slightly more detail, what problem it solves and why you built it (if they are not the same thing)

Example:
This is a simple MERN stack application to track user exercises. It's a helpful app for tracking (exercises or otherwise) and was intended to help me learn Authentiation and continue to work on my fullstack building using the MERN stack.

Tech Stack

Mention all the languages you used to build the app.

Example:

Features

This is where you describe some of the key features of the app and show screenshots of them.

Exercise list:

• List of exercises

  Description of screenshot here

Exercise log form:

• Form to enter workout details:

  Description of screenshot here

Exercise Delete Button:

• Delete a workout from the database:

  Description of screenshot here

Setup

Describe how to run the app.

Example:

Run Locally

1. Clone repo locally
2. Change into API folder
3. Run npm install in your bash/command line
4. Change into UI folder
5. Run npm install in your bash/command line
6. In the API folder, run npm run dev in your bash/command line
7. Open http://localhost:4000/hello-world to view it in the browser.
8. In the UI folder, run npm start in your bash/command line
9. Open http://localhost:3000 to view it n the browser.

Available Commands

This project was bootstrapped with Create React App.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.

npm run dev

Runs the server. Open http://localhost:4040 to view it in your browser. I am also using nodemon.

Usage

How does one go about using it? Provide various use cases and code examples here.

write-your-code-here

Project Status

Is the project done yet? Could be, In progress, complete or finishing touches.

Example:

Status: In Progress - Almost done!

Room for Improvement

Include areas you believe need improvement / could be improved. Also add TODOs for future development.

Improvement Thoughts:

• Second part of this app is to add authentication for users to have accounts.
• Styling needs to be updated.

To do:

• Add Auth
• re-design

Acknowledgements

Is there anyone you worked on the app with? Did you get it from a tutorial? Mention them here.

Example:

Many thanks to Net Ninja, this project was based on this tutorial from the Net Ninja YouTube page!

Contact

Created by @azulverdosa - feel free to contact me!

• LinkedIn

🤝 Support

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!

Licence

MIT Licence Copyright (c) [2023] [AvaElise]

---

Markdown Tips and Tricks

HEADERS

A First Level Header

A Second Level Header

Third Level Header

Fourth Level Header (also normal paragraph size)

Fifth LEvel Header

Sixth Level Header

LISTS

Bulleted List

• Candy

• Gum

• Chocolate

  • Sublists

    • Sublist - list

    • A list item.

      With multiple paragraphs.

  • Another item in the sublist.

    With blockquote

Numbered List

1. Red
2. Green
3. Blue
   • Sublist for the numbered list
     • And something else

Check List

• Finish my changes
• Push my commits to GitHub
• Open a pull request
  • Open a pull request (again)
    • Open another pull request

Code Block Lists

1. Open the file.

2. Find the following code block on line 21:

   <html>
     <head>
       <title>Test</title>
     </head>
   

3. Update the title to match the name of your website.

Images In A List

1. Open the file containing the photo of me.

2. Marvel at its beauty.

   

3. Close the file.

TABLES

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff

LINKS

This site was built using GitHub Pages.

This site was built using [GitHub Pages](https://pages.github.com/).

This is an example link without a title.

This is an [example link](http://example.com/) without a title.

This is an example link with a title.

This is an [example link](http://example.com/ 'With a Title') with a title.

You can search for your new best friend at your local SPCA or find a resuce near you with Pet Finder or Adopt A Pet.

You can search for your new best friend at your local [SPCA][1] or find a resuce near you with [Pet Finder][2] or [Adopt A Pet][3].

[1]: https://ontariospca.ca/ 'SPCA'
[2]: https://www.petfinder.com/ 'Pet Finder'
[3]: https://www.adoptapet.com/ 'Adopt A Pet'

Use the same link in many places:

Find me on LinkedIn.

If you need support, Message me.

Find me on [LinkedIn][my linkedin].

If you need support, [Message me][my linkedin].

[my linkedin]: https://www.linkedin.com/in/avatorre/

URLs and Emails

https://www.markdownguide.org

[email protected]

<https://www.markdownguide.org>
<[email protected]>

Link Styling

I love supporting the EFF. This is the Markdown Guide.

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

RELATIVE LINKS

You can define relative links and image paths in your rendered files to help readers navigate to other files in your repository.

Contribution guidelines for this project

See the section on code.

IMAGES

When you want to display an image which is in your repository, you should use relative link (Hover to see titles):

![peace](/images/Screenshot%202023-02-13%20at%2012.10.49%20PM.png 'Sometimes I have straight hair')

![wink][id]

[id]: /images/Screenshot%202023-02-13%20at%2012.11.01%20PM.png 'Sometimes I have wavey hair'

![kiss](/images/Screenshot%202023-02-13%20at%2012.28.55%20PM.png 'Sometimes I have fancy hair')

When you want to use an image from the internet you should use the absolute link:

![me as Octocat](https://octodex.github.com/images/femalecodertocat.png)

CODE

I wish SmartyPants used named entities like — instead of decimal-encoded entites like —.

Use double backticks for backticked-ed code : Use `code` in your Markdown file.

const = something;

if(yes){
  console.log(yes);
}

var s = 'JavaScript syntax highlighting';
alert(s);

s = "Python syntax highlighting"
print s

STYLING

This is bold text

This text is italicized

This was mistaken text

This text is extremely important

All this text is important

Text^{This is a superscript text}

Text _{This is a subscript text}

HORIZONTAL RULE

Use ___ and try to put a blank line before...

...and after a horizontal rule.

DROPDOWNS

Dropdown Menu

This could be anything?

Yes, Anything

<details>
<summary>Dropdown Menu</summary>
Add the following line to your `Profile` by using syntax highlighting:

    This could be anything?

Yes, Anything

</details>

Something Else

Another dropdown!

BLOCKQUOTES

"Text that is a quote"

Blockquotes with Multiple Paragraphs

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Nested Blockquotes

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with other elements

The quarterly results look great!

• Revenue was off the chart.

• Profits were higher than ever.

  Everything is going according to plan.

COLOUR MODELS

Markdown doesn't support color but you can inline HTML inside Markdown:

some yellow text:

<span style="color:yellow">some _yellow_ text</span>

some teal text:

<span style="color:teal">some _teal_ text</span>

some purple text:

<span style="color:purple">some _purple_ text</span>

Some Markdown text with some blue text:

Some Markdown text with <span style="color:blue">some _blue_ text</span>

some This is Green Bold text:

<span style="color:green">some **This is Green Bold** text</span>

some emphasized markdown text:

span style="color:red"> _some emphasized markdown text_</span>

BADGES

Fantastic Premade Dev Badges at https://home.aveek.io/GitHub-Profile-Badges/ :

GENERATING BADGES

Fast badge generating service from https://badgen.net/

Badge Format:

[![title]https://badgen.net/badge/:label/:message/:color?icon=github](<link>)

"badgen.net/badge" - default (static) badge generator
"label" - Left side text
"message" - Right side text
"color" - RGB / COLOR_NAME ( optional )
"icon=github" - Options (label, list, icon, color)
"<link>")

Examples:

Great examples from Naereen on GitHub https://naereen.github.io/badges/:

Badge Format:

[![Generic badge](https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>.svg)](<LINK>)

img.shields.io/badge/ - Badge generator
<LABEL> - Left side text
<MESSAGE> - Right side text
<COLOR> - Colour code
(<LINK>) - Link

Examples:

Shields format from https://shields.io/category/build

Badge Format:

[<img src="https://img.shields.io/badge/LABEL-MESSAGE-COLOR.svg?logo=LOGO">](<LINK>)


img.shields.io/badge/ - Badge generator
LABEL - Felt side tesxt
MESSAGE - Right side text
COLOR.svg - Colour code (optional)
logo=LOGO - Logo
<LINK> - link