Skip to content

Commit 47055cd

Browse files
authored
Update course format for accessibility (skills#58)
* Update course format for accessibility * outline step files * Manual a11y changes * manual fixes * manual fixes * manual fixes
1 parent 0b429c0 commit 47055cd

15 files changed

Lines changed: 344 additions & 371 deletions

.github/steps/0-welcome.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- readme -->

.github/steps/1-add-headers.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!--
2+
<<< Author notes: Step 1 >>>
3+
Choose 3-5 steps for your course.
4+
The first step is always the hardest, so pick something easy!
5+
Link to docs.github.com for further explanations.
6+
Encourage users to open new tabs for steps!
7+
-->
8+
9+
## Step 1: Add headers
10+
11+
_Welcome to "Communicate using Markdown"! :wave:_
12+
13+
**What is _Markdown_?** Markdown is a [lightweight syntax](https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) for communicating on GitHub. You can format text to add a heading, lists, **bold**, _italics_, tables, and many other stylings. You can use Markdown in most places around GitHub:
14+
15+
- Comments on [issues](https://docs.github.com/issues/tracking-your-work-with-issues/about-issues), [pull requests](https://docs.github.com/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests), and [discussions](https://docs.github.com/discussions/collaborating-with-your-community-using-discussions/about-discussions)
16+
- Files with the `.md` or `.markdown` extension
17+
- Sharing snippets of text in [Gists](https://docs.github.com/github/writing-on-github/editing-and-sharing-content-with-gists/creating-gists)
18+
19+
**What is a _header_?** A header is a larger bit of text at the beginning of a section. There are six sizes.
20+
21+
### Example
22+
23+
```md
24+
# This is an `<h1>` header, which is the largest
25+
26+
## This is an `<h2>` header
27+
28+
###### This is an `<h6>` header, which is the smallest
29+
```
30+
31+
#### How it looks
32+
33+
# This is an `<h1>` header, which is the largest
34+
35+
## This is an `<h2>` header
36+
37+
###### This is an `<h6>` header, which is the smallest
38+
39+
### :keyboard: Activity: Edit your file with headers
40+
41+
1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
42+
1. Open the **pull requests** tab.
43+
1. Click **New pull request**, for the branches to compare, select `base: main` and `compare: start-markdown`.
44+
1. Click **Create pull request**.
45+
1. In this pull request, go to the **Files changed** tab. We made an empty file `index.md` for you.
46+
1. Select **Edit file** from the three dotted **...** menu in the upper right corner of the file view on `index.md`.
47+
1. On the **Edit file** tab, add a `#`, followed by a **space**, before any content you like to make it an H1 Header. You can add more headers, using one to six `#` characters followed by a **space**.
48+
1. Above your new content, click **Preview**.
49+
1. At the bottom of the page, type a short, meaningful commit message that describes the change you made to the file.
50+
1. Click **Commit changes**.
51+
1. 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.

.github/steps/2-add-an-image.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
<<< Author notes: Step 2 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
7+
## Step 2: Add an image
8+
9+
_Great job adding headers to the file :sparkles:_
10+
11+
Let's add an image. Include descriptive text in the square brackets. This text is read aloud for people using screen readers. It's also shown at times when your image doesn't display, such as when there's a poor connection. You can see the syntax for images below:
12+
13+
### Example
14+
15+
```md
16+
![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
17+
```
18+
19+
#### How it looks
20+
21+
<img alt="Image of Yaktocat" src=https://octodex.github.com/images/yaktocat.png width=400>
22+
23+
### :keyboard: Activity: Adding an image
24+
25+
1. As you did before, edit the `index.md` file in this pull request.
26+
1. In the file, add the correct Markdown for your image of choice. Don't forget to include alt-text!
27+
1. Use the **Preview** tab to check your Markdown formatting.
28+
1. Commit your changes.
29+
1. 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.
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!--
2+
<<< Author notes: Step 3 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
7+
## Step 3: Add a code example
8+
9+
_Great job adding an image to the file :tada:_
10+
11+
In addition to code blocks, some code blocks should be rendered differently depending on the language, such as JavaScript or command-line text.
12+
13+
### Example
14+
15+
<pre>
16+
```
17+
$ git init
18+
Initialized empty Git repository in /Users/skills/Projects/recipe-repository/.git/
19+
```
20+
</pre>
21+
22+
#### How it looks
23+
24+
```
25+
$ git init
26+
Initialized empty Git repository in /Users/skills/Projects/recipe-repository/.git/
27+
```
28+
29+
### :keyboard: Activity: Adding a code example
30+
31+
1. As you did before, edit the file in this pull request.
32+
1. In the file, add the correct Markdown for a code example of your choice.
33+
1. Use the **Preview** tab to check your Markdown formatting.
34+
1. Commit your changes.
35+
1. 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.
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!--
2+
<<< Author notes: Step 4 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
7+
## Step 4: Make a task list
8+
9+
_Great job adding a code example to the file :partying_face:_
10+
11+
**What is a _task list_?** A task list creates checkboxes to check off. They're very useful for tracking issues and pull requests. If you include a task list in the body of an issue or pull request, you'll see a progress indicator in your issue list. The syntax for task lists is very specific. Be sure to include the spaces where required, or else they won't render.
12+
13+
### Example
14+
15+
```
16+
- [x] List syntax is required
17+
- [x] This item is complete
18+
- [ ] This item is not complete
19+
```
20+
21+
#### How it looks
22+
23+
- [x] List syntax is required
24+
- [x] This item is complete
25+
- [ ] This item is not complete
26+
27+
### :keyboard: Activity: Add a task list
28+
29+
GitHub Actions went ahead and made a branch for you. So you'll need to add to the file we've created in the branch, and we will check your work as you work through this course!
30+
31+
1. Return to your pull request.
32+
1. Use Markdown to create a task list. Here is an example:
33+
34+
```md
35+
- [ ] Turn on GitHub Pages
36+
- [ ] Outline my portfolio
37+
- [ ] Introduce myself to the world
38+
```
39+
40+
Remember, a task list starts with the syntax `- [ ]` and then the task list item. The formatting is specific!
41+
42+
1. Use the **Preview** tab to check your Markdown formatting.
43+
1. Commit the changes to the file.
44+
1. 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.
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!--
2+
<<< Author notes: Step 5 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
7+
## Step 5: Merge your pull request
8+
9+
_Great job adding a task list to the file :heart:_
10+
11+
You can now [merge](https://docs.github.com/get-started/quickstart/github-glossary#merge) your pull request!
12+
13+
### :keyboard: Activity: Merge your pull request
14+
15+
1. Click **Merge pull request**.
16+
1. 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.

.github/steps/X-finish.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!--
2+
<<< Author notes: Finish >>>
3+
Review what we learned, ask for feedback, provide next steps.
4+
-->
5+
6+
## Finish
7+
8+
_Congratulations friend, you've completed this course!_
9+
10+
<img src=https://octodex.github.com/images/welcometocat.png alt=celebrate width=300 align=right>
11+
12+
Here's a recap of all the tasks you've accomplished in your repository:
13+
14+
1. You learned about Markdown, headings, images, code examples, and task lists.
15+
1. You created and merged a Markdown file.
16+
1. You learned an essential GitHub skill. 🎉
17+
18+
### What's next?
19+
20+
- You can enable GitHub Pages and see your Markdown file as a website!
21+
1. Under your repository name at the upper right, click :gear: **Settings**.
22+
1. Then on the lower left, click **Pages** in the **Code and automation** section.
23+
1. In the **GitHub Pages** section, ensure "Deploy from a branch" is selected from the **Source** drop-down menu, and then select `main` from the **Branch** drop-down menu as your GitHub Pages publishing source.
24+
1. Click the **Save** button.
25+
1. Wait about 30 seconds then refresh the page. When you see "Your site is published at ..." you can click on the link to see your published site.
26+
- Learn more about [Markdown](https://docs.github.com/github/writing-on-github).
27+
- We'd love to hear what you thought of this course [in our discussion board](https://github.com/skills/.github/discussions)
28+
- [Take another GitHub Skills course](https://github.com/skills).
29+
- [Read the GitHub Getting Started docs](https://docs.github.com/get-started).
30+
- To find projects to contribute to, check out [GitHub Explore](https://github.com/explore).
Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
name: Step 0, Start
1+
name: Step 0, Welcome
22

3-
# This step triggers after the learner creates a new repository from the template
4-
# This step sets STEP to 1
5-
# This step closes <details id=0> and opens <details id=1>
3+
# This step triggers after the learner creates a new repository from the template.
4+
# This workflow updates from step 0 to step 1.
65

7-
# This will run every time we create push a commit to `main`
8-
# Reference https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
6+
# This will run every time we create push a commit to `main`.
7+
# Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
98
on:
109
workflow_dispatch:
1110
push:
1211
branches:
1312
- main
1413

15-
# Reference https://docs.github.com/en/actions/security-guides/automatic-token-authentication
14+
# Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication
1615
permissions:
17-
# Need `contents: read` to checkout the repository
18-
# Need `contents: write` to update the step metadata
19-
# Need `pull-requests: write` to create a pull request
16+
# Need `contents: read` to checkout the repository.
17+
# Need `contents: write` to update the step metadata.
18+
# Need `pull-requests: write` to create a pull request.
2019
contents: write
2120
pull-requests: write
2221

2322
jobs:
24-
# Get the current step from .github/script/STEP so we can
25-
# limit running the main job when the learner is on the same step.
23+
# Get the current step to only run the main job when the learner is on the same step.
2624
get_current_step:
2725
name: Check current step number
2826
runs-on: ubuntu-latest
@@ -31,7 +29,7 @@ jobs:
3129
uses: actions/checkout@v3
3230
- id: get_step
3331
run: |
34-
echo "current_step=$(cat ./.github/script/STEP)" >> $GITHUB_OUTPUT
32+
echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT
3533
outputs:
3634
current_step: ${{ steps.get_step.outputs.current_step }}
3735

@@ -40,29 +38,29 @@ jobs:
4038
needs: get_current_step
4139

4240
# We will only run this action when:
43-
# 1. This repository isn't the template repository
44-
# 2. The STEP is currently 0
45-
# Reference https://docs.github.com/en/actions/learn-github-actions/contexts
46-
# Reference https://docs.github.com/en/actions/learn-github-actions/expressions
41+
# 1. This repository isn't the template repository.
42+
# 2. The step is currently 0.
43+
# Reference: https://docs.github.com/en/actions/learn-github-actions/contexts
44+
# Reference: https://docs.github.com/en/actions/learn-github-actions/expressions
4745
if: >-
4846
${{ !github.event.repository.is_template
4947
&& needs.get_current_step.outputs.current_step == 0 }}
5048
51-
# We'll run Ubuntu for performance instead of Mac or Windows
49+
# We'll run Ubuntu for performance instead of Mac or Windows.
5250
runs-on: ubuntu-latest
5351

5452
steps:
55-
# We'll need to check out the repository so that we can edit the README
53+
# We'll need to check out the repository so that we can edit the README.
5654
- name: Checkout
5755
uses: actions/checkout@v3
5856
with:
59-
fetch-depth: 0 # Let's get all the branches
57+
fetch-depth: 0 # Let's get all the branches.
6058

61-
# Make a branch, file, commit, and pull request for the learner
59+
# Make a branch, file, commit, and pull request for the learner.
6260
- name: Prepare a pull request, branch, and file
6361
run: |
6462
echo "Make sure we are on step 0"
65-
if [ "$(cat .github/script/STEP)" != 0 ]
63+
if [ "$(cat .github/steps/-step.txt)" != 0 ]
6664
then
6765
echo "Current step is not 0"
6866
exit 0
@@ -89,10 +87,9 @@ jobs:
8987
env:
9088
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
9189

92-
# Update README to close <details id=0> and open <details id=1>
93-
# and set STEP to '1'
90+
# In README.md, switch step 0 for step 1.
9491
- name: Update to step 1
95-
uses: skills/action-update-step@v1
92+
uses: skills/action-update-step@v2
9693
with:
9794
token: ${{ secrets.GITHUB_TOKEN }}
9895
from_step: 0

0 commit comments

Comments
 (0)