-
Notifications
You must be signed in to change notification settings - Fork 5.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update GitHub Skills format for accessibility #408
Changes from 5 commits
11b8389
7918034
1420e0e
49ec579
cbb7162
bacbb2c
86fbea2
1d5988a
ae7da63
029cecc
acd833b
07e9f33
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<!-- readme --> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<!-- | ||
<<< Author notes: Step 1 >>> | ||
Choose 3-5 steps for your course. | ||
The first step is always the hardest, so pick something easy! | ||
Link to docs.github.com for further explanations. | ||
Encourage users to open new tabs for steps! | ||
--> | ||
|
||
## Step 1: Create a branch | ||
|
||
_Welcome to "Introduction to GitHub"! :wave:_ | ||
|
||
**What is GitHub?**: GitHub is a collaboration platform that uses _[Git](https://docs.github.com/get-started/quickstart/github-glossary#git)_ for versioning. GitHub is a popular place to share and contribute to [open-source](https://docs.github.com/get-started/quickstart/github-glossary#open-source) software. | ||
<br>:tv: [Video: What is GitHub?](https://www.youtube.com/watch?v=pBy1zgt0XPc) | ||
|
||
**What is a repository?**: A _[repository](https://docs.github.com/get-started/quickstart/github-glossary#repository)_ is a project containing files and folders. A repository tracks versions of files and folders. For more information, see "[About repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/about-repositories)" from GitHub Docs. | ||
|
||
**What is a branch?**: A _[branch](https://docs.github.com/en/get-started/quickstart/github-glossary#branch)_ is a parallel version of your repository. By default, your repository has one branch named `main` and it is considered to be the definitive branch. Creating additional branches allows you to copy the `main` branch of your repository and safely make any changes without disrupting the main project. Many people use branches to work on specific features without affecting any other parts of the project. | ||
|
||
Branches allow you to separate your work from the `main` branch. In other words, everyone's work is safe while you contribute. For more information, see "[About branches](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches)". | ||
|
||
**What is a profile README?**: A _[profile README](https://docs.github.com/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme)_ is essentially an "About me" section on your GitHub profile where you can share information about yourself with the community on GitHub.com. GitHub shows your profile README at the top of your profile page. For more information, see "[Managing your profile README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme)". | ||
|
||
![profile-readme-example](/images/profile-readme-example.png) | ||
|
||
### :keyboard: Activity: Your first branch | ||
|
||
1. Open a new browser tab and navigate to your newly made repository. Then, work on the steps in your second tab while you read the instructions in this tab. | ||
2. Navigate to the **< > Code** tab in the header menu of your repository. | ||
|
||
![code-tab](/images/code-tab.png) | ||
|
||
3. Click on the **main** branch drop-down. | ||
|
||
![main-branch-dropdown](/images/main-branch-dropdown.png) | ||
|
||
4. In the field, enter a name for your branch: `my-first-branch`. | ||
5. Click **Create branch: my-first-branch** to create your branch. | ||
|
||
![create-branch-button](/images/create-branch-button.png) | ||
|
||
The branch will automatically switch to the one you have just created. | ||
The **main** branch drop-down bar will reflect your new branch and display the new branch name. | ||
|
||
6. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!-- | ||
<<< Author notes: Step 2 >>> | ||
Start this step by acknowledging the previous step. | ||
Define terms and link to docs.github.com. | ||
--> | ||
|
||
## Step 2: Commit a file | ||
|
||
_You created a branch! :tada:_ | ||
|
||
Creating a branch allows you to edit your project without changing the `main` branch. Now that you have a branch, it’s time to create a file and make your first commit! | ||
|
||
**What is a commit?**: A _[commit](https://docs.github.com/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/about-commits)_ is a set of changes to the files and folders in your project. A commit exists in a branch. For more information, see "[About commits](https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/about-commits)". | ||
|
||
### :keyboard: Activity: Your first commit | ||
|
||
The following steps will guide you through the process of committing a change on GitHub. A commit records changes in renaming, changing content within, creating a new file, and any other changes made to your project. For this exercise, committing a change requires first adding a new file to your new branch. | ||
|
||
1. On the **< > Code** tab in the header menu of your repository, make sure you're on your new branch `my-first-branch`. | ||
|
||
2. Select the **Add file** drop-down and click **Create new file**. | ||
|
||
![create new file option](/images/create-new-file.png) | ||
|
||
3. In the **Name your file...** field, enter `PROFILE.md`. | ||
|
||
**Note:** `.md` is a file extension that creates a Markdown file. You can learn more about Markdown by visiting "[Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)" in our docs or by taking the "[Communicating using Markdown](https://github.com/skills/communicate-using-markdown)" Skills course. | ||
|
||
4. In the **Edit new file** area, copy the following content to your file: | ||
heiskr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
``` | ||
Welcome to my GitHub profile! | ||
``` | ||
|
||
<img alt="profile.md file screenshot" src="/images/my-profile-file.png"/> | ||
|
||
5. For commits, you can enter a short commit message that describes what changes you made. This message helps others know what's included in your commit. GitHub offers a simple default message, but let's change it slightly for practice. First, enter `Add PROFILE.md` in the first text-entry field below **Commit new file** at the bottom of the page. Then, if you want to confirm what your screen should look like, expand the dropdown below. | ||
heiskr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<img alt="screenshot of adding a new file with a commit message" src="/images/commit-full-screen.png" /> | ||
|
||
6. In this lesson, we'll ignore the other fields and click **Commit new file**. | ||
heiskr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
7. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<!-- | ||
<<< Author notes: Step 3 >>> | ||
Just a historic note: the previous version of this step forced the learner | ||
to write a pull request description, | ||
checked that `main` was the receiving branch, | ||
and that the file was named correctly. | ||
--> | ||
|
||
## Step 3: Open a pull request | ||
|
||
_Nice work making that commit! :sparkles:_ | ||
|
||
Now that you have made a change to the project and created a commit, it’s time to share your proposed change through a pull request! | ||
|
||
**What is a pull request?**: Collaboration happens on a _[pull request](https://docs.github.com/en/get-started/quickstart/github-glossary#pull-request)_. The pull request shows the changes in your branch to other people and allows people to accept, reject, or suggest additional changes to your branch. In a side by side comparison, this pull request is going to keep the changes you just made on your branch and propose applying them to the `main` project branch. For more information about pull requests, see "[About pull requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests)". | ||
|
||
### :keyboard: Activity: Create a pull request | ||
|
||
You may have noticed after your commit that a message displayed indicating your recent push to your branch and providing a button that says **Compare & pull request**. | ||
|
||
![screenshot of message and button](/images/compare-and-pull-request.png) | ||
|
||
To create a pull request automatically, click **Compare & pull request**, and then skip to step 6 below. If you don't click the button, the instructions below walk you through manually setting up the pull request. | ||
|
||
1. Click on the **Pull requests** tab in the header menu of your repository. | ||
2. Click **New pull request**. | ||
3. In the **base:** dropdown, make sure **main** is selected. | ||
4. Select the **compare:** dropdown, and click `my-first-branch`. | ||
|
||
<img alt="screenshot showing both branch selections" src="/images/pull-request-branches.png" /> | ||
|
||
5. Click **Create pull request**. | ||
6. Enter a title for your pull request. By default, the title will automatically be the name of your branch. For this exercise, let's edit the field to say `Add my first file`. | ||
7. The next field helps you provide a description of the changes you made. Here, you can add a description of what you’ve accomplished so far. As a reminder, you have: created a new branch, created a file, and made a commit. | ||
|
||
<img alt="screenshot showing pull request" src="/images/Pull-request-description.png" /> | ||
|
||
8. Click **Create pull request**. You will automatically be navigated to your new pull request. | ||
9. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. | ||
|
||
**Note**: As a perk, you may see evidence of GitHub Actions running on the tab with the pull request opened! The image below shows a line you might see on your pull request after the Action finishes running. | ||
heiskr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<img alt="screenshot of an example of an actions line" src="/images/Actions-to-step-4.png"/> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<!-- | ||
<<< Author notes: Step 4 >>> | ||
Just a historic note: The previous version of this step required responding | ||
to a pull request review before merging. The previous version also handled | ||
if users accidentally closed without merging. | ||
--> | ||
|
||
## Step 4: Merge your pull request | ||
|
||
_Nicely done! :sunglasses:_ | ||
|
||
You successfully created a pull request. You can now merge your pull request. | ||
|
||
**What is a merge?**: A _[merge](https://docs.github.com/en/get-started/quickstart/github-glossary#merge)_ adds the changes in your pull request and branch into the `main` branch. For more information about merges, see "[Merging a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/incorporating-changes-from-a-pull-request/merging-a-pull-request)." | ||
|
||
As noted in the previous step, you may have seen evidence of GitHub Actions running which automatically progresses your instructions to the next step. You'll have to wait for it to finish before you can merge your pull request. It will be ready when the merge pull request button is green. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Since we're making these updates with accessibility in mind, is there a non-visual signal that a PR is ready to merge? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is a throwback to how we used to say it during in-person classes (which is the origins of Learning Lab and now Skills). I'm a proponent of changing it for better accessibility! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll open an internal issue for an accessibility content review of the courses, and link to this as an example. |
||
|
||
![screenshot of green merge pull request button](/images/Green-merge-pull-request.png) | ||
|
||
### :keyboard: Activity: Merge the pull request | ||
|
||
1. Click **Merge pull request**. | ||
2. Click **Confirm merge**. | ||
3. Once your branch has been merged, you don't need it anymore. To delete this branch, click **Delete branch**. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this might happen automatically by default, but I'm not 100% sure if that's just how my settings are configured. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's configured per-repo. Although the template does have auto-delete of the branches turned on, the repo created for me (as the user) did not. I'm not sure if that can be configured for them. |
||
|
||
<img alt="screenshot showing delete branch button" src="/images/delete-branch.png"/> | ||
|
||
4. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. | ||
|
||
**Note**: Check out the **Finish** step to see what you can learn next! |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,34 @@ | ||||||
<!-- | ||||||
<<< Author notes: Finish >>> | ||||||
Review what we learned, ask for feedback, provide next steps. | ||||||
--> | ||||||
|
||||||
## Finish | ||||||
|
||||||
_Congratulations, you've completed this course and joined the world of developers!_ | ||||||
|
||||||
<img src=https://octodex.github.com/images/collabocats.jpg alt=celebrate width=300 align=right> | ||||||
|
||||||
Here's a recap of your accomplishments: | ||||||
|
||||||
- You learned about GitHub, repositories, branches, commits, and pull requests. | ||||||
- You created a branch, a commit, and a pull request. | ||||||
- You merged a pull request. | ||||||
- You made your first contribution! :tada: | ||||||
|
||||||
### What's next? | ||||||
|
||||||
If you'd like to make a profile README, use the quickstart instructions below or follow the instructions in the [Managing your profile README](https://docs.github.com/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme) article. | ||||||
|
||||||
1. Make a new public repository with a name that matches your GitHub username. | ||||||
2. Create a file named `README.md` in its root. The "root" means not inside any folder in your repository. | ||||||
3. Edit the contents of the `README.md` file. | ||||||
4. If you created a new branch for your file, open and merge a pull request on your branch. | ||||||
5. Lastly, we'd love to hear what you thought of this course [in our discussion board](https://github.com/skills/.github/discussions). | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Maybe we would link specifically to this discussion There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is good, I think it just adds to content maintenance overhead as we may eventually not want to use that discussion anymore. But I'm still a proponent of linking to the proper place - currently the discussions are unorganized and self-serve it seems? If we do this I suggest creating an official discussion, or better yet a Category, and probably a conversation about who looks after these discussions (or maybe that already exists and I'm just not aware). Edit: clarify what I meant about discussions. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll open a separate internal issue about discussion organization. |
||||||
|
||||||
Check out these resources to learn more or get involved: | ||||||
|
||||||
- Are you a student? Check out the [Student Developer Pack](https://education.github.com/pack). | ||||||
- [Take another GitHub Skills course](https://github.com/skills). | ||||||
- [Read the GitHub Getting Started docs](https://docs.github.com/en/get-started). | ||||||
- To find projects to contribute to, check out [GitHub Explore](https://github.com/explore). |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
name: Step 0, Welcome | ||
|
||
# This step triggers after the learner creates a new repository from the template. | ||
# This workflow updates from step 0 to step 1. | ||
|
||
# This will run every time we create push a commit to `main`. | ||
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows | ||
on: | ||
workflow_dispatch: | ||
push: | ||
branches: | ||
- main | ||
|
||
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication | ||
permissions: | ||
# Need `contents: read` to checkout the repository. | ||
# Need `contents: write` to update the step metadata. | ||
contents: write | ||
|
||
jobs: | ||
# Get the current step to only run the main job when the learner is on the same step. | ||
get_current_step: | ||
name: Check current step number | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
- id: get_step | ||
run: | | ||
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT | ||
outputs: | ||
current_step: ${{ steps.get_step.outputs.current_step }} | ||
|
||
on_welcome: | ||
name: On welcome | ||
needs: get_current_step | ||
|
||
# We will only run this action when: | ||
# 1. This repository isn't the template repository. | ||
# 2. The step is currently 0. | ||
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts | ||
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions | ||
if: >- | ||
${{ !github.event.repository.is_template | ||
&& needs.get_current_step.outputs.current_step == 0 }} | ||
|
||
# We'll run Ubuntu for performance instead of Mac or Windows. | ||
runs-on: ubuntu-latest | ||
|
||
steps: | ||
# We'll need to check out the repository so that we can edit README.md. | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
with: | ||
fetch-depth: 0 # Let's get all the branches. | ||
|
||
# In README.md, switch step 0 for step 1. | ||
- name: Update to step 1 | ||
uses: skills-dev/action-update-step@main | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Update these to |
||
with: | ||
token: ${{ secrets.GITHUB_TOKEN }} | ||
from_step: 0 | ||
to_step: 1 | ||
branch_name: my-first-branch |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you think it would be helpful to send people to https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions instead of the Actions landing page? It's a pretty dense article, but maybe fits the need for why someone would click the link.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hehe the first sentence "GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform" which isn't what Skills is using it for. More broadly its event hooks + compute 🤷🏼 https://docs.github.com/en/actions/using-workflows/about-workflows A little weird but the content is similar and lines up with Skills case more 🤷🏼
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That article looks like a better fit, but I think it would also be fine to leave it as the landing page and let people explore.
No matter which article you go to, if you're brand new to GitHub and end up in the Actions docs you're probably going to 🤯