Awesome
<section id="header"> <div align="center" id="header">How to Write a README
Written by Amar Panjwani <br> Instructional Associate
</div> <div align="center" id="socialbuttons">
This tutorial describes how to write a coding bootcamp project README in Markdown and HTML in under 30 minutes.
</div> <div id="before-you-begin">Before You Begin
Complete the following steps prior to getting started:
1. Star this repo in order to save it to your bookmarks.
2. Visit the README gold standards:
3. Complete the following Introduction to Markdown tutorial (10 mins):
4. Read (skim) through the official GitHub Flavored Markdown documentation:
</div> <div id="header-1">Header
<u>Requirements:</u>
- A banner representing your app
| Description | Screenshot |
|---|---|
| <h3> Example Header </h3> | <img src="./images/OPTIONAL-PROJECT-BANNER.png"> |
Copy and paste the following:
</div><div id="header" align="center">
<img src="https://i.imgur.com/y2SPx4E.jpg" width="800" height="400">
</div>
Tips - Header
- Royalty-free stock photos can be found on Pexels, Pixabay, or Unsplash.
- Use a free photo editing tool like Photopea to streamline the editing process by importing images from URLs and exporting your finished banner directly into imgur.
Description
<u>Requirements:</u>
- App name
- What problem the app solves and how
- How to win (if app is a game)
| Description | Screenshot |
|---|---|
| <h3> Example Description </h3> | <img src="./images/GOOD-DESCRIPTION-SOLO.png" width="800"> |
Copy and paste the following:
</div> <div id="description" align="center">
# Meet Your Classmates
### [CLICK TO DEMO](https://meetyourclassmates.herokuapp.com/)
##### Amar Pan
[](https://www.linkedin.com/in/amarpan/)
## :pencil: Description
Meet Your Classmates is a 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.
</div>
Tips - Description
-
Add your deployed link directly to the top - most users won't scroll all the way down to find it.
-
Use emojis by typing in
:emojiname:a. Visit the following resource for a full list of available GitHub emojis:
-
In version 1.0 of this tutorial, I suggested to add emojis around your
h1tag. However, this is bad practice for Search Engine Optimization (SEO).
<u>Note</u>:
Install the following extension to see GitHub emojis in VS Code:
</div> <div id="screenshots">Screenshots
<u>Requirements</u>:
- Screenshots of your app's home page and any other pages of interest
| Description | Screenshot |
|---|---|
| <h3> Example Screenshots </h3> | <img src="./images/GOOD-SCREENSHOTS-SOLO.png"> |
Copy and paste the following:
</div> ## :camera_flash: Screenshots
| Description | Screenshot |
|:-------------:| -----------|
| <h3>Feed Page</h3> | <img
src="https://github.com/amarpan/meet-your-classmates/blob/main/public/Screenshots/FeedPage.png?raw=true"
width="700"
/> |
| <h3 align="center">Profile Page</h3> | <img
src="https://github.com/amarpan/meet-your-classmates/raw/main/public/Screenshots/ProfilePage.png"
width="700"
/> |
Tips - Screenshots
- Whatever is placed in between
<details></details>will be hidden beneath a closed drop-down menu until its arrow is clicked on. The caption for this should be placed in between<summary></summary>. - To have a drop-down menu display as open by default, (without the user having to click it) add the word 'open' to the details tag.
Technologies Used
<u>Requirements</u>:
- List of the technologies used
| Description | Screenshot |
|---|---|
| <h3> Example Technologies Used </h3> | <img src="./images/GOOD-TECHNOLOGIES-USED-SINGLE.png"> |
Copy and paste the following:
</div> ## :computer: Technologies Used
A screenshot of your app's landing page and any other screenshots of interest.
Tips - Technologies Used
- Additional badges of this style can be found at the following resource:
- Alternative badges of a more colorful style can be found at the following resource:
Getting Started
<u>Requirements</u>:
- A link to the deployed app
- A link to the Trello board used for the project's planning that includes:
- a. user stories
- b. wireframes
- c. entity relationship diagram (ERD)
| Description | Screenshot |
|---|---|
| <h3> Example Getting Started </h3> | <img src="./images/GOOD-GETTING-STARTED-SINGLE.png"> |
Copy and paste the following:
</div>## :fire: Getting Started
<details open>
<summary> How to Create a Post </summary>
1. Type in your answers to each of the 3 randomly-generated mini-survey questions.
2. Click on "Add Survey" to post your responses so others may see them.
3. Click on the "X" in the bottom-right corner to delete a post.
</details>
<details>
<summary> How to Interact With Others' Posts </summary>
1. Posts may be "liked" or "disliked" by clicking on the thumbs up or down button on their card.
2. To reveal the author of a post, hover over the `Who could it possibly be?` button.
3. To see more posts by the same user, click on the revealed username and profile picture.
</details>
<details open>
<summary> Trello Board </summary>
<a href="https://trello.com/b/x4ViComX/meet-your-classmates-project-4"
> https://trello.com/b/x4ViComX/meet-your-classmates-project-4 </a
>
</details>
<details open>
<summary> Deployed Link (Heroku) </summary>
<a href="https://meetyourclassmates.herokuapp.com/"
> https://meetyourclassmates.herokuapp.com/ </a
>
</details>
Tips - Getting Started
- Use numbered lists as opposed to lengthy paragraphs to make sure this section is easily readable.
- Put your links in more drop-down menus using
<details open>and<summary>. - Try to choose something simple yet memorable when choosing your URL / link name.
Upcoming Features
<u>Requirements:</u>
- Planned future enhancements (icebox items)
| Description | Screenshot |
|---|---|
| <h3> Example Upcoming Features </h3> | <img src="./images/GOOD-NEXT-STEPS-SINGLE.png"> |
Copy and paste the following:
</div>## :satellite: Upcoming Features
- [:star:] Animations on sliding buttons
- [:x:] Comment functionality on posts to encourage discussion
- [:x:] ~~Tinder API Integration~~
Tips - Upcoming Features
- Avoid using the word
icebox, as most non-technical users probably won't know what this means. - Use bullet points rather than paragraphs to make it immediately clear what each new feature would be.
- Just for fun, add an easter egg joke using double tildes (~~) for a crossout
The Final Product
| Description | Screenshot |
|---|---|
| <h3> Example Final Product </h3> | <img src="./images/GOOD-FULL-README.png"> |
README <br> HALL OF FAME <br> :trophy::star2::trophy:
| Designer | Project | School | Location | Date |
|---|---|---|---|---|
| Nisha Yadav <br> | Minesweeper | General Assembly | Denver, Colorado, USA | Apr '22 |
| Ronald Portalatin Jr. | Blackjack | General Assembly | Lakeland, Florida, USA | Apr '22 |
| Jordan-Christopher Garcia | Shoe Collector | General Assembly | Seattle, Washington, USA | May '22 |
| Stevie Militello | Tavern Brawl | General Assembly | Boston, Massachusetts, USA | May '22 |
| Dani Diaz <br> | Dino Amigo | General Assembly | San Francisco, California, USA | Jun '22 |
| Illerdon Ballinger | Turbo Disco | General Assembly | San Francisco, California, USA | Jun '22 |
| Joseph Caputo | Vinyl Stash | General Assembly | San Diego, California, USA | Jun '22 |
| Maroof Khan <br> | Crypto Sniffer | General Assembly | Minneapolis, Minnesota, USA | Jun '22 |
| Matthew Suzuki | Community Market | General Assembly | Los Angeles, California, USA | Jun '22 |
| Parker Samuels | Checkers | General Assembly | Detroit, Michigan, USA | Jun '22 |
| Roger Davila | Solitaire | General Assembly | San Francisco, California, USA | Jun '22 |
| Sophia Best | ThreadUp | General Assembly | Louiseville, Kentucky, USA | Jun '22 |
| Joba Aladeselu | Oja | General Assembly | Los Angeles, California, USA | Sep '22 |
| Alex Houston | Sailor Moon Concentration | General Assembly | Houston, Texas, USA | Oct '22 |
Contributions
| Name | Title | Contribution |
|---|---|---|
| <a href="https://www.linkedin.com/in/jimclarkfullstack/"> Jim Clarke <br> </a> | Distinguished Global Lead Instructor @ General Assembly | Teaching <br> :man_teacher: |
| <a href="https://www.linkedin.com/in/amarpan"> Amar Pan, M.Ed. <br></a> | Instructional Associate @ General Assembly <br><br> Technical Writer @ <a href="https://www.linode.com/docs/guides/"> Linode </a> <br><br> House Pan Founder | Writing <br> :pencil: |
| <a href="https://www.linkedin.com/in/skimalee/"> Stephanie Lee, M.Ed. <br> </a> | Instructional Associate @ General Assembly <br><br> House Lee Founder | Support <br> :woman_teacher: |
| <a href="https://www.linkedin.com/in/mariorrecinos/"> Mario Recinos <br> </a> | Instructional Associate @ General Assembly <br><br> Coach @ <a href="https://www.careerkarma.com"> Career Karma </a> <br><br> House Rec Founder | Outreach <br> :teacher: |
| <a href="https://www.linkedin.com/in/neilitalia/"> Neil Italia <br> </a> | User Interface Developer @ Lennox International | UI <br> :paintbrush: |
| <a href="https://www.linkedin.com/in/olivia-emery/"> Olivia Emery <br> </a> | Technical Writer @ Google | Editing <br> :pen: |
| <a href="https://www.linkedin.com/in/isaac-ferraro/"> Isaac Ferraro <br> </a> | Front-End Developer @ Helium | QA <br> :ballot_box_with_check: |
If you found this tutorial helpful, please consider giving it a :star:
Copyright :copyright: 2021-2022
More Tutorials from Amar Panjwani
How to Create a GitHub Profile
</div> </section>