Writing project documentation in the form of a README is typically the last thing any GA SEI student wants to do, especially after a long and exhausting project week.
Thus, today we'll provide you with the copy and paste-able code to quickly set up a README that will impress your classmates, instructors, and potential employers.
Header & Description
<divalign="center"><h1>:school_satchel: :school: MEET YOUR CLASSMATES :school: :school_satchel: </h1><h3>https://meetyourclassmates.herokuapp.com/</h3><h5>Teammate Name | Your Name | Teammate Name </h5>`
<ahref="https://yourportfoliolink.com" target="_blank"><imgsrc="https://img.shields.io/badge/-Portfolio:_user.github.io-darkgreen?style=flat&logo=medium"/>
</a><ahref="https://www.linkedin.com/in/user/" target="_blank"><imgsrc="https://img.shields.io/badge/-linkedin.com/in/user-blue?style=flat&``logo=Linkedin&logoColor=white"></a><ahref="mailto:user@gmail.com" target="_blank"><imgsrc="https://img.shields.io/badge/-user@gmail.com-c14438?style=flat&logo=Gmail&``logoColor=white"></a><ahref="https://medium.com/@user"><imgsrc="https://img.shields.io/badge/-medium.com/@user-black?style=flat&logo=medium"></a></div><h1>:pencil: Description</h1><p>Meet Your Classmates is an Instagram-clone and hub where students can get to know and relate to their peers via completion of short 3-question mini-surveys. By learning about others' backgrounds, previous experiences, and interests, an atmosphere of community is created that is conducive to higher levels of learning and success.</p>
Instructions
Note:
Each # stands for a header of that number in HTML.
Ex. # is equivalent to <h1>
Ex. ###### is equivalent to <h6>
Note:
Integrate styling with <h1 align="center"> to center text.
Note:
Add your deployed link directly to the top here - many users won't scroll all the way down to find it.
Note:
Use emojis by typing in :emojiname: Ex. :school: ---> 🏫
While emojis automatically show on GitHub, to see them on VS Code one needs to install an extension like Markdown Emoji.
Whatever is placed in between <details></details> will be hidden beneath a closed drop-down menu, until its arrow is clicked on. The title for this should be placed in between <summary></summary>.
Note:
To have a drop-down menu display by default without the user having to click it, add the word 'open' to the details tag.
Ex. <details> --> <details open>
Note:
Image dimensions can also be resized by specifying width and height.
<h2> :atom_symbol: Getting Started </h2><h3> :calling: Instructions </h3><detailsopen><summary>How to Create a Post</summary><ol><li>Type in your answers to each of the 3 randomly-generated mini-survey questions.</li><li>Click on "Add Survey" to post your responses so others may see them.</li><li>Click on the "X" in the bottom-right corner to delete a post.</li></ol></details><details><summary>How to Interact With Others' Posts</summary><ol><li>Posts may be "liked" or "disliked" by clicking on the thumbs up or down button on their card.</li><li>To reveal the author of a post, hover over the "Who could it possibly be?" button.</li><li>To see more posts by the same user, click on the revealed username and profile picture.</li></ol></details><details><h3> :link: Links </h3><summary>Trello Board</summary><ahref="https://trello.com/b/x4ViComX/meet-your-classmates-project-4">https://trello.com/b/x4ViComX/meet-your-classmates-project-4</a></details><detailsopen><summary>Deployed Link (Heroku)</summary><ahref="https://meetyourclassmates.herokuapp.com/">https://meetyourclassmates.herokuapp.com/</a></details>
Instructions
Note:
Use numbered lists as opposed to lengthy paragraphs to make sure this section is easily readable.
Note:
Put your links in more drop-down menus using <details open> and <summary>.
Note:
Try to choose something simple and memorable when choosing your Heroku URL / link name.
Next Steps
## :fast_forward: Next Steps### Upcoming Features-[X] Add gifs to animated sliding buttons
-[ ] Add comment functionality on posts to encourage discussion
-[ ] Add edit and update functionality for a user's profile
-[ ]~~Add Tinder API Integration~~
Instructions
Note:
Try to avoid using the word "icebox", as most non-technical users probably won't know what this means.
Note:
Use bullet points rather than paragraphs to make it immediately clear what each new feature would be.
Free photo editing tools like Photopea can streamline the editing process with their ability to import images from URLs and export images directly into imgur.
Emoji Commits
git commit -m ":pencil2: fix typo on cart page"
Instructions
Note:
GitHub-friendly commit emojis can be found on gitmoji.
