DEV Community

Cover image for Learn Markdown, With Scrimba & Dylan Israel! πŸ’»
Michael J. Larocca
Michael J. Larocca

Posted on • Edited on

Learn Markdown, With Scrimba & Dylan Israel! πŸ’»

As aspiring web developers, we are constantly told to document and share our work. But how do we document and share our work?


In this Scrimba course, YouTube celebrity Dylan Israel teaches us how!


What is markdown, and when do you use it

According to Wikipedia, Markdown is a lightweight markup language for creating formatted text using a plain-text editor.

Dylan describes it as "short-hand HTML," and I can see why:

HTML: Hello World!

<h1>Hello</1>
<h2>World</2>
Enter fullscreen mode Exit fullscreen mode

Markdown: Hello World!

# Hello
## World!
Enter fullscreen mode Exit fullscreen mode

Okay, got it. Now, when do you use it?

Well, I'm actually using it right now to write this post!

Okay, but you're not currently writing an article, your working on a project to "push" up to GitHub.

So now you can use markdown to create the readme file for your GitHub project!


During the course, Dylan asks us to create an "About Me" section.

So, without further ado:

About Me

Hello, I'm Michael. Like many people, I am an aspiring self-taught web developer.

I'm also the author of the "Self-Taught the X Generation" blog.

My goal for this blog is to document and share the progress of my self-taught coding journey.

Self-Taught the X Generation


Now for the syntax

**bold**
*italic*
~~strikethrough~~
Enter fullscreen mode Exit fullscreen mode

bold
italic
strikethrough

# h1
## h2
### h3
#### h4
##### h5
###### h6
Enter fullscreen mode Exit fullscreen mode

h1

h2

h3

h4

h5
h6
> Quote

Underline

---

Enter fullscreen mode Exit fullscreen mode

Quote

Underline


1. Lists
2. Lists
   1. Sub
   2. List
3. Lists

* Lists
* Lists
* Lists
Enter fullscreen mode Exit fullscreen mode
  1. Lists
  2. Lists
    1. Sub
    2. List
  3. Lists
  • Lists
  • Lists
  • Lists
[links](https://scrimba.com/)
Enter fullscreen mode Exit fullscreen mode

links

\
| Table | First Name | Last Name |
| :--- | :---: | ---: |
| Left | Center | Right |
| 1 | Michael | Larocca |
| Note: | Back slashes |are escape characters|
\

Table First Name Last Name
Left Center Right
1 Michael Larocca
Note: Back slashes are escape characters

![images](https://avatars.githubusercontent.com/u/21305454?s=200&v=4)
Enter fullscreen mode Exit fullscreen mode

images


To create code blocks, 
surround with three backticks. 
Depending on the version of the markdown, 
you can add the language as follows:

'''html
HTML
<p>
Scrimba Rocks!
</p>
'''

'''css
CSS
p {
  color: red;
}
'''

'''javascript
JavaScript
console.log(`Markdown`)
'''

Note: for demonstration purposes, 
I used single quotes. 
You must use backticks.
Enter fullscreen mode Exit fullscreen mode
HTML
<p>
Scrimba Rocks!
</p>
Enter fullscreen mode Exit fullscreen mode
CSS
p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
JavaScript
console.log(`Markdown`)
Enter fullscreen mode Exit fullscreen mode

<help@scrimba.com>
Enter fullscreen mode Exit fullscreen mode

help@scrimba.com


The escape character is a backtick.

You can use backticks to diplay HTML tags, such as `<span>` and `</span>`.
Enter fullscreen mode Exit fullscreen mode

You can use backticks to diplay HTML tags, such as <span> and </span>.


The final challenge

As instructed, I'm posting this article here on dev.to!

Next, I will be creating a pull request to Dylan's GitHub repo. This article will then be collected alongside my fellow Scrimba classmates' articles!


Conclusion

Scrimba's Learn Markdown course was fun and informative.

As aspiring developers, "Markdown" is a language that we will all have to learn at some point.

With Scrimba, you can learn the language, publicly post your work, and then get some GitHub practice by creating a pull request!

So, make sure to "Markdown" this course to compete, and "Git" going with completing it!

Top comments (0)