/Frontend/Basics/

Markdown 📝

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext documents. It was created by John Gruber in 2004 as a way to create formatted text that is easy to read and write.

Markdown is used for a variety of purposes, including:

• Writing blog posts and articles
• Creating documentation
• Taking notes
• Writing emails
• Creating README files

Markdown files have the extension .md and are used all over Github as you'll see.

• Fun Fact: Each of these guide pages are actually made using mostly Markdown
• Also, Markdown has support for some HTML elements such as p tags and img tags.

• I won't get into it here, but for big projects you can also use markdown with README's to make a documentation page/wiki built into your github repository

Basic Markdown syntax ✏️

I don't think a video is necessary for mardown as it's pretty simple but I did add one at the end for markdown.

Markdown uses a simple syntax that is easy to learn. Here are some of the most common Markdown elements:

• Headings: Headings are created using the hash symbol (#). The number of hash symbols determines the level of the heading. For example, a single hash symbol (#) creates a level 1 heading, while two hash symbols (##) create a level 2 heading and so on (The more #'s there are, the smaller the heading).
• Bold: Bold text is created by surrounding the text with two asterisks (**). For example, this text is bold -> **this text is bold**. (If you've ever used discord and done this, that's also markdown)
• Italic: Italic text is created by surrounding the text with one asterisk (*). For example, this text is italicized -> *this text is italicized*.
• Lists: Lists are created using hyphens (-), asterisks (*), or plus signs (+). For example:

- This is a bulleted list
- This is another bulleted list
* This is a bulleted list
* This is another bulleted list
+ This is a bulleted list
+ This is another bulleted list

• Links: Links are created by surrounding the link text with square brackets [like so] and the link URL with parentheses (https://like.so). For example, this is a link -> [this is a link](https://www.example.com).
• Code blocks: Code blocks are created by indenting the code by four spaces or by surrounding the code with three backticks (`). For example:

This is a code block.

You can also specify if the codeblock contains a specific language like Javascript and the code inside will be highlighted accordingly. Here's an example (you might not see the highlighted colors depending on your platform):

console.log("Hi Mom!");

would be typed out as:

```javascript

console.log("Hi Mom!");

```

Also, if you just want a single line of text too look like so, you use a single backtick (`) -> `like so`

• Tables: I don't use tables in markdown much but their syntax is a little complicated so if you want, you can read more here along with other extended syntax info.

README files

README files are used to provide information about a GitHub repository. They are typically located in the root directory of the repository and sometimes in folders within a repository for more complex projects. README files can contain any type of information, but they often include the following:

• A description of the repository
• Instructions on how to use the repository
• A list of contributors
• A list of dependencies
• A license
• Any special sections aligning with your project

You can see an example of one of my README's here. This example is pretty extreme and has many sections but it's good to see what you can do with markdown.

• I like to also add a TODO section for WIP projects and emojis here and there for fun

Double Challenge ❗❗

1. Create a Repo README file

Make a README.md for your websites GitHub repository.

• Make sure to include all of the relevant information
• Although since it's just a portfolio, instead of adding a license and usage/contributors, etc., Add just a description that is basically your website and all of it's contents but in markdown form like your skills, experience, etc. and organized
• You can also add any other section before the markdown based portfolio relating to your code.

2. Upgrade your GitHub Profile

Many github profiles out there have a nice custom page beside their profile picture and info. This is done by adding a README.md file to a special repository which is your challenge.

Usually, extensive GitHub profile README's include the following information:

• A brief introduction of yourself
• Your skills and experience
• Your interests
• Links to your other online profiles

Tips for writing a good README

• Keep it concise. Your README should be easy to read and scan. Avoid using too much jargon or technical language.
• Use clear and concise language. Use simple, easy-to-understand language. Avoid using ambiguous or vague language.
• Be specific. Don't just list your skills and experience. Provide specific examples of your work.
• Use visuals. Visuals can help to make your README more engaging and easier to read. Consider using images, graphs, or charts to illustrate your points.
• Proofread your README. Make sure your README is free of errors. Ask a friend or me (lol) to review your README before you publish it.

How to add a README to your GitHub profile

1. Go to your GitHub profile page.
2. Click on the Edit profile button.
3. Scroll down to the About section.
4. Click on the Add a README button.
5. Enter your README content in the text box.
6. Click on the Save changes button.

The README.md you just made for your github profile is stored in a repository on your account which is named as your username.

Now, if you REALLY want to go the extra mile and make your github profile extra fancy with badges, visuals, and realtime stats, here's a good video showing some interesting implementations you can add to your github profiles README

Next Level GitHub Profile README - codeSTACKr

Conclusion

Markdown is a powerful tool that can be used to create formatted text documents. It is easy to learn and use, and it is supported by a variety of applications. If you need to create formatted text documents, Markdown is a great option and you'll love it's simplicity when writing README's for your future projects!

Sadly there isn't a "... in 100 Seconds" video for markdown by Fireship, BUT I did find a silly version that's a clone of Fireship's 100 second videos made by some kid it sounds. It's a little funny considering the microphone quality but is surprisingly informative so if you didn't understand or didn't want to read the above syntax explaination, here's a Fireship clone.

Markdown in 100 Seconds - FAKE Fireship ❌🔥