Exercise: Communicate using Markdown

[github-actions]

Communicate using Markdown

👋 Hey there @cmodom! Welcome to your Skills exercise!

Organize ideas and collaborate using Markdown, a lightweight language for text formatting.

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

[github-actions]

Step 1: Add headings

What is Markdown? Markdown is a lightweight 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 such as:

• Comments on issues, pull requests, and discussions
• Files with the .md or .markdown extension
• Snippets of text in Gists

What is a heading? A heading is a larger bit of text at the beginning of a section. There are six sizes.

Example

# This is an `<h1>` heading, which is the largest

## This is an `<h2>` heading

###### This is an `<h6>`heading, which is the smallest

This is an <h1> heading, which is the largest

This is an <h2> heading

This is an <h6> heading, which is the smallest

⌨️ Activity: Create a markdown file

1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.

2. In the top navigation, select the Code tab.

3. Create a new branch with the following name:

   start-blog

4. Above the files list, click the Add file button and select Create new file.

5. Use the following file name.

   day-1.md

6. In the editor, on the first line use a level one heading to give the page a title.

   # Daily Learning

7. Add a couple level 2 headings for the names of each of the blog posts.

   ## Morning Planning
   
   ## Review

8. Above the editor, click the Preview toggle to view the rendered version.

9. In the top right, click the Commit changes button and commit directly to the start-blog branch.

10. With our headings created and committed, Mona should be busy reviewing your work and preparing the next steps.

Having trouble? 🤷

• Confirm you are editing the correct file and branch.
• Double check your syntax. The must be a space between the # and first word.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 1 - Passed ✅

Status	Description
✅ - Pass	day-1.md file exists
✅ - Pass	One level 1 heading (#) added to day-1.md
✅ - Pass	Two level 2 heading (##) added to day-1.md

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Make a list

Markdown supports 3 types of common lists. They include:

• Unordered - Bulleted list
• Ordered - Number list
• Task - Checkbox list

Unordered list

An unordered list is simple to show. Each item is placed on its own line using a -, *, or + character.

- Item 1
- Item 2
- Item 3

• Item 1
• Item 2
• Item 3

Ordered List

A list is changed to ordered by using any number instead of the list character. Notice how markdown automatically handles the counting. Nice!

1. Step 1
1. Step 2
1. Step 3

1. Step 1
2. Step 2
3. Step 3

Task List

A task list is extends the unordered list to use check boxes.
Add empty brackets [ ] for incomplete tasks and filled brackets [x] for complete tasks. Note: The empty required space for empty brackets.

- [x] This task is complete
- [ ] This task is not complete

• This task is complete
• This task is not complete

Tip

Issues and pull requests can use task syntax for conveying progress.

⌨️ Activity: Add ideas and goals to our morning plan

1. On the start-blog branch, open the day-1.md file for editing.

2. Add the following task list below morning planning level two heading to track goals you want to achieve.

   - [ ] Check out the [github blog](https://github.blog/) for topic ideas.
   - [ ] Learn about [GitHub Pages](https://skills.github.com/#first-day-on-github).
   - [ ] Convert my first blog post into an actual webpage.

3. Use the Preview tab to check your Markdown formatting.

4. In the top right, click the Commit changes button and commit directly to the start-blog branch.

5. With our code block committed, Mona should be busy reviewing your work and preparing the next steps.

Having trouble? 🤷

• Confirm you are editing the correct file and branch.
• Double check your syntax. The must be a space inside the [ ] for task lists.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 2 - Passed ✅

Status	Description
✅ - Pass	Task list added to day-1.md file

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Add a code sample

Let's learn about code blocks and syntax highlighting based on the language.

Tip

Many programming languages are supported. Try testing out some other file extension types!

Example: Terminal Command

```bash
git clone https://github.com/skills/communicate-using-markdown
```

git clone https://github.com/skills/communicate-using-markdown

Example: Javascript Code

```js
var myVar = "Hello, world!";
```

var myVar = "Hello, world!";

⌨️ Activity: Adding a code example

1. On the start-blog branch, open the day-1.md file for editing.

2. Below Review level two heading add the following entry recording an awesome code snippet you just learned from the GitHub Blog.

   Convert an image or video from dark mode to light mode using [ffmpeg](https://www.ffmpeg.org)
   
   ```bash
   ffmpeg -i input.mp4 -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" output.mp4
   ```

3. Use the Preview tab to check your Markdown formatting.

4. In the top right, click the Commit changes button and commit directly to the start-blog branch.

5. With our code block committed, Mona should be busy reviewing your work and preparing the next steps.

Having trouble? 🤷

• Confirm you are editing the correct file and branch.
• Double check your syntax. A code block is three backticks ``` not three apostrophes '''

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 3 - Passed ✅

Status	Description
✅ - Pass	Code block syntax in day-1.md

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 4! One moment... 🤓

[github-actions]

Step 4: Add an image

Let's learn how to include images in markdown, using relative urls, absolute urls, sizing, and basic positioning.

Regular Markdown

Images can be displayed by providing a relative URL to a file in the repository or an absolute URL (to anywhere on the internet).

The descriptive text in the square brackets is displayed if the image is unable to load, and it is also read aloud for people using screen readers.

Note: Markdown syntax doesn't provide an option to change the image size.

Example

Relative URL to an image in the repository:

![Mona the Octocat](myrepo/original.png)

Absolute URL to an image on the internet:

![Mona the Octocat](https://octodex.github.com/images/original.png)

Simple HTML

You will often find the need to reduce the size of an image or simply place it next to some text. Regular HTML syntax provides some additional flexibility.

• The alt field specifies the alternative text.
• The src field specifies the source url of the image.
• A width and/or height field can be used to specify the size in pixels.
• The align field allows setting a position (left, right)

<img alt="Mona the Octocat" src="https://octodex.github.com/images/original.png"
width="200" align="right">

⌨️ Activity: Add some decoration

Our blog post is quite simple right now. Let's add some decoration.

1. On the start-blog branch, open the day-1.md file for editing.

2. Insert an image below the Morning Planning level 1 heading.

   ![Cloudy morning](https://octodex.github.com/images/cloud.jpg)

3. Use the Preview tab to check your Markdown formatting.

   • Notice the image is too large for our purpose.

4. Replace the simple markdown version with an HTML version that includes size and position info. Much better!

   <img alt="Cloudy morning" src="https://octodex.github.com/images/cloud.jpg" width="100" align="right">

5. In the top right, click the Commit changes button and commit directly to the start-blog branch.

6. With our image added and committed, Mona should be busy reviewing your work and preparing the next steps.

Having trouble? 🤷

• Confirm you are editing the correct file and branch.
• Double check your syntax. An HTML image tag must start with img and include the src property.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

Step 4 - Passed ✅

Status	Description
✅ - Pass	HTML image added to day-1.md