The Art of Writing Markdown: A Beginner's Guide

When it comes to writing online content, one of the most popular and versatile markup languages is Markdown. Developed by John Gruber and Aaron Swartz in 2004, Markdown is a lightweight markup language that allows users to create formatted text using plain text syntax. In this article, we will explore the basics of Markdown, including its uses, syntax, and how to apply it to your writing.

**Headers**

One of the most common ways to use Markdown is to define headers. Headers are defined by surrounding the text with one or more `#` symbols at the beginning of a line. The number of `#` symbols determines the level of the header, with one `#` symbol defining an H1 header, two `#` symbols defining an H2 header, and so on. For example, to make a line into a heading one, you would surround it with a single `#` symbol like this: `## This will be a Heading One`. To define a bold or italicized text, you can use the `*` symbol before or after the text, respectively.

**Links**

Another common way to use Markdown is to create links. Links are defined by surrounding the link text with square brackets `[]` and the URL in parentheses `( )`. For example, to make a line into a link, you would surround it with `[text](url)` like this: `[Click here](https://www.example.com)`. Notice how there is no space between the closing bracket and the opening parenthesis.

**Images**

To add an image to your Markdown text, you can use the `!` symbol followed by an exclamation mark and then a square bracket `[]` containing the alt text. For example, to make a line into an image, you would surround it with `` like this: ``. The URL should be the full path to the image file.

**Bullet Points**

To create bullet points in Markdown, you can use asterisks `*` at the beginning of a line. For example, to make a list item into a bullet point, you would surround it with an asterisk like this: `* Item one`. You can have multiple lines of bullet points by using multiple asterisks or by using HTML unordered lists.

**Code Blocks**

To create code blocks in Markdown, you can use triple backticks ```` followed by the language syntax and then the code. For example, to make a line into a code block, you would surround it with three backticks like this: ```

```python

print("Hello World")

```

This will render as a code block that is syntax highlighted.

**Attribution**

When creating online content, it's always important to give proper credits and attribution to the original creators of the material. In Markdown, you can use the `@` symbol followed by the author name to add attribution to your text. For example, `This image was taken by @unsplash`. This will render as a citation with a link to the original source.

**Project Examples**

Here are some examples of how you can use Markdown in different contexts:

Project One:

```

# Project One

## Introduction

Welcome to project one! In this project, we'll be using Markdown to create a formatted text.

* Item one

* Item two


```

Project Two:

```

# Project Two

## Introduction

In this project, we'll be using Markdown to create a bold text. To do so, you can use double asterisks `**` like this:

**This will be a bold text**

To make the text italicized, you can use single asterisks `*` like this:

*Item one*


```

Project Three:

```

# Project Three

## Introduction

In this project, we'll be using Markdown to create an image link. To do so, you can use square brackets `[ ]` and parentheses `( )` like this:

[Click here](https://www.example.com)


```

**Conclusion**

Markdown is a powerful markup language that allows users to create formatted text using plain text syntax. With its simple syntax, Markdown makes it easy to add headers, links, images, bullet points, and code blocks to your writing. Whether you're creating a blog post, an article, or a portfolio website, Markdown is a versatile tool that can help you communicate complex ideas in a clear and concise manner.

**Markdown Cheat Sheet**

For those who want to learn more about Markdown, we've included a cheat sheet at the end of this article. The cheat sheet provides a comprehensive guide to Markdown syntax and features, including headers, links, images, bullet points, code blocks, and more.

**Using Markdown in GitHub Pages**

One of the most popular uses of Markdown is on GitHub Pages, a platform that allows users to create static websites using Git. To use Markdown on GitHub Pages, you'll need to install the GitHub Pages plugin for your repository. Once installed, you can write Markdown files in your repository's `markdown` folder and they will be rendered as HTML pages.

**Conclusion**

Markdown is a powerful tool that can help you take your writing to the next level. With its simple syntax and versatile features, Markdown makes it easy to add structure and style to your text. Whether you're a beginner or an experienced writer, we hope this article has provided you with a solid introduction to the world of Markdown. Happy writing!

"WEBVTTKind: captionsLanguage: enhave you ever wanted to build a portfolio website for your data science projects but perhaps it's a bit difficult or it might require you to do some html coding in this video i'm going to show you how you could build a simple portfolio website for free and i'm going to show you in a step-by-step manner from scratch in less than 10 minutes using the github pages and so without further ado we're starting right now so a couple of days ago i've written a blog post in towards data science on how to build a simple portfolio website for free and in this blog post i've shown you in a step-by-step manner on how you could do the portfolio website and so in this video i'm going to show you exactly how and i'll provide you the link to this particular blog post in the video description just in case you want to read about it or follow along while listening or watching the video and so let's get started now so you want to head over to the github of data professor and click on the repositories and so notice here that the portfolio repository here is the one that we're going to be rebuilding again and so let me right click this and then i'll open another window and then we're going to create a new repository so let's call it portfolio 2 because the original one was already created and so let's have a look here so you're going to see the contents of the website and so here we have the readme which is this particular file and the readme will essentially contain the contents of the websites and so what you see here will be the contents of the website and you see here that there are two images and they're going to be here and images will taken it from the unsplash website and i'll show you in just a moment how you could search for images and use it on the portfolio website and so here let's create a new portfolio click on the green button here on the top right hand corner and then in the repository name box here you're going to type in the name of your repo and so for this particular example i'm going to type in portfolio all right and i'll call it portfolio too but for your case you could call it portfolio okay and so you want to make sure that you want to take the add a readme file here in order to create the readme along with the repository and then you want to click on create repository all right and then next step is to head over to the settings at the top right hand corner here click on it and then on the left hand panel here you want to click on the pages and notice here that you could feel free to rename the repository at any time by renaming it here okay so we're going to click on the pages and now in the main panel here you wanna click on the drop down menu and then you wanna select main and then you wanna click on save and notice here that there is a message saying that your website is now ready at data professor which is the username of my repository dot github dot io slash portfolio two so let's try head over to that website all right and so there's nothing here and it looks exactly like the readme okay so let me show you let's go back to 42 and so it looks exactly like this one so there's no content here so let's say that i changed this a bit i'll add like dot dot dot let's see what happens and then we'll save it and you notice here that there's dot dot here and the name has been changed to portfolio okay let me refresh okay nothing as of yet maybe it might take some time so let's head over back to the github pages settings here and then we're gonna choose the theme for the website because the one here is a bit blank and so let's click on choose a theme and in the blog post i've shown you how to use the cayman themes and you could feel free to select a theme that you like and when you click on it you're gonna see the preview here minimal okay so you select the theme that you like but let me just stick to the key mean themes here and you want to click on select theme okay let's refresh the webpage again okay maybe it takes some time the prior update that i've made has just appeared here all right and now it's implemented and you can see that this is the cayman themes okay and the content is pretty blank here and so let's go back to the readme file and let's click on the portfolio too again but in your case it might be portfolio right or any name that you give it and notice that after we have applied the theme there is a new file that appears here underscore config.yml let's click on that and the theme here is theme jericho theme came in okay so we clicked on the cayman theme and then it adds that to the dot yml file so we have yet to add the images for the portfolio website so let's click on the readme.md file and then we're going to populate this okay we're going to populate it with the information from the example website okay so why don't you go ahead and click on the edit this file icon at the top right hand corner here and then the page will reload and then you want to type in the contents here but i'm gonna just copy and paste from the prior example so you could follow along and head over to the portfolio repository here and then you want to click on readme.md and then you want to click on raw and then you want to select everything and then copy and then we're going to paste it into the readme.md file and note that we're going to delete the portfolio here and let's save it by scrolling down and then click on commit changes and you could also add some description while making the change populate with example content commit changes and you get this but then we have to download the images for the websites and so you can head over to unsplash.com and notice here that in the example portfolio let me refresh so in the example portfolio here we have the crypto project on the sentiment analysis and also the crypto trading bot and so we're going to find two images to put in here and notice that i've already created this caption of the image and so we could also click on the particular link here to go to the exact page but then for demonstration purposes we're just gonna type in either here or here okay we're gonna type in cryptocurrency and then notice that this is the exact image that i've used by andre so you want to click on the middle part of the image or you could click on the download link here but it will download a default resolution but then if you want to download a smaller version you could position the mouse icon to the middle part of the image click on it and then it will expand and then at the top right hand corner instead of clicking on download free which will download the default version or resolution you want to make sure that the mouse is over at the drop down menu part at the far right of the button click on it and then you'll be able to select a resolution of your choice but if you click on the download free it might be the original size which might be big and when it's big it will occupy a lot of space on the website and that will consequently make the website load a bit slow so i like to use the small version here and you could click on it and it will download this particular attribution pop-up appears and so you could click on the copy to clipboard icon and then it will provide you with the html code that you could just copy and paste into wherever you want to use it for example if we're making the portfolio website let me show you so the copy and paste will look exactly like the one here let me put it at the bottom so you can see that it looks exactly alike here okay and so this will give us the message here with a link to the author and a link to unsplash and an image will appear here but then we first have to upload the image so let me show you let me show you how to upload the first image let's go back to the portfolio website of the repository and then you could click on add file at the top panel here and then click on upload files and then it brings you to a new page and you could choose your files click on it and a pop-up window will appear and then you could select your image another would be to just drag and drop and place it inside this particular box so let me drag and drop oh but then i've downloaded multiple times and so the image creates a number four for me here okay let me move it to the desktop rename it drag and drop and i'll delete the fourth version here commit changes wait a bit all right images here and you see the preview here is working and if we go back to the website refresh it it might take some time give it some time so here we're gonna download another image and then i think that i probably search for technical analysis or cryptocurrency trading and then to save us time let's just click on the link here yeah it was cryptocurrency trading let's click on the link here but let me right click and open up a new tab okay and then i'll have to find another image or for demonstration purposes let us use how about the one with the yeah right here how about that one like trading right so let's click on the middle part of the image and then the pop-up appears go to the right hand corner click on it and download the small version and then we're gonna go back to portfolio 2 the repository and now we're going to upload it but actually you could just drag and drop directly into this particular repository window without even clicking on add file right so typically you would click on add file upload file and it brings us to the next page and then you could drag and drop or click on choose your file but there's a shortcut let me show you the shortcut so in this main repository page you could just find the image that you want and then drag and drop it right and then it'll upload and then you could just commit the change and there you go the new image is here and let's click on it and then i want to copy the name of it so that we could update the one in the readme.md okay so i'll click on the readme.nd and then go ahead and click on the edit this file icon again and then we're going to replace it with the second image so i'll put it in here and so this line number 19 and line number nine is the line to insert the image okay so all of this are written in markdown language and i'll provide you the link to a cheat sheet for you to learn about markdown and so actually markdown could be another video on its own and so let me provide you a quick rundown of the markdown that we're using in this particular website but before doing that let me update the code here first and so go back to the image that we've downloaded the image from it was this one and then i want to copy the attribution here right here right so i'll click on the copy to clipboard click on it and now it's copied and head over back to portfolio two readme.md and then i'll replace it here okay i'll make sure to copy and paste it here and then i'll save it and let's see is if the image is here all right it works okay and so let me go back to the code provide you a line by line explanation but before doing that let's have a look at the preview all right so it works perfectly all right so this particular portion here but before doing that let me open up the screen all right so let's do the line by line explanation all right so line number one you're going to see the hashtag so the hashtag means that we're going to make it a header so when we have one hashtag it's going to be a big header so in html it will be h1 if you have two hashtags it will become h2 and so it will be a bit smaller and since we're using the asterisk here an opening asterisk and a closing asterisk and so the text inside will be in italy and so notice here that we have another hashtag which is the heading one and so education will be made a heading one and then here because we have only a single asterisk it means that it's going to be a bullet point for the masters of science line and also for the bachelors of science line and notice here that youtube university here will be in italy because we have an opening and closing asterisk and aside just from having a heading the heading could also be a link as well and so we created using the hashtag again and then to create a link in markdown you're going to need to use an opening and closing bracket the text of the link will be inside the bracket and then the actual link will be inside the parenthesis and make sure that the parenthesis opening and closing here will be next to the bracket to the right of the bracket without a space in between okay so that will become a link okay and to place an image here we're going to have to use the exclamation mark and then followed by the opening and closing bracket and then we could place the alt text in here and actually you could type in crypto sentiment analysis let's try this one crypto trading plot save it let's refresh it probably it might be in the developer version let me see developer view source of the image i mean of the web page let's have a look image source out okay so here it goes it's in the out tag here crypto sentiment analysis okay so it works and it's right here and so it gives the image caption okay so it'll be good for having it inside the html tag which might come handy when you're performing some web scraping but nevertheless you could also add that here right let's continue and notice here that line number 11 here is the attribution text that we've copied from unsplash and it goes under the image okay because we always like to use attribution under the image in order to give proper credits and then lines 13 is going to continue to explain the project this project integrates various new source for performing sentiment analysis pertaining to cryptocurrency and then you're going to notice that we're using the asterisk again for the bullet points and in order to make the text bold we're gonna use double asterisk an opening and a closing and so the text in between will be bold as you see here and then we're gonna repeat again for project two the same syntax that we've done for project one and then you could reiterate that over and over again for project three project four and project five or you could also go ahead and check out the markdown cheat sheets which i will provide in the video description and it's actually this one from adam p let's click on it yeah right here so as i mentioned already when you use a single hashtag it becomes heading one right so all of the markdown that we're using here let's have a look under the hood it will be converted into html code okay so what we have in here to the left will be converted to html right here to the right and so markdown is a lot faster to write in and it requires you to know minimal coding and so you could perform some basic formatting of the text and it will be converted automatically into the html by the github pages okay so let's go back to the portfolio too and so we here have the four files of the website the readme.md which contains the content of the website the config.yml which contains the name of the theme upon applying the theme to the github page and then here we have the two images that we used in the portfolio websites and let's have a look at the portfolio website again so if you forget it will be dataprofessor dot github.io slash and then the name of the repository so instead of data professor here you want to replace that with your username okay so whatever your username is dot github.io slash and then the name of your repository so in this example we have it portfolio too and so username that you have for your repo and then enter and there you go this is your portfolio website and so if you're finding value in this video please give it a thumbs up subscribe if you haven't already and make sure to hit on the notification bell so that you will be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journeyhave you ever wanted to build a portfolio website for your data science projects but perhaps it's a bit difficult or it might require you to do some html coding in this video i'm going to show you how you could build a simple portfolio website for free and i'm going to show you in a step-by-step manner from scratch in less than 10 minutes using the github pages and so without further ado we're starting right now so a couple of days ago i've written a blog post in towards data science on how to build a simple portfolio website for free and in this blog post i've shown you in a step-by-step manner on how you could do the portfolio website and so in this video i'm going to show you exactly how and i'll provide you the link to this particular blog post in the video description just in case you want to read about it or follow along while listening or watching the video and so let's get started now so you want to head over to the github of data professor and click on the repositories and so notice here that the portfolio repository here is the one that we're going to be rebuilding again and so let me right click this and then i'll open another window and then we're going to create a new repository so let's call it portfolio 2 because the original one was already created and so let's have a look here so you're going to see the contents of the website and so here we have the readme which is this particular file and the readme will essentially contain the contents of the websites and so what you see here will be the contents of the website and you see here that there are two images and they're going to be here and images will taken it from the unsplash website and i'll show you in just a moment how you could search for images and use it on the portfolio website and so here let's create a new portfolio click on the green button here on the top right hand corner and then in the repository name box here you're going to type in the name of your repo and so for this particular example i'm going to type in portfolio all right and i'll call it portfolio too but for your case you could call it portfolio okay and so you want to make sure that you want to take the add a readme file here in order to create the readme along with the repository and then you want to click on create repository all right and then next step is to head over to the settings at the top right hand corner here click on it and then on the left hand panel here you want to click on the pages and notice here that you could feel free to rename the repository at any time by renaming it here okay so we're going to click on the pages and now in the main panel here you wanna click on the drop down menu and then you wanna select main and then you wanna click on save and notice here that there is a message saying that your website is now ready at data professor which is the username of my repository dot github dot io slash portfolio two so let's try head over to that website all right and so there's nothing here and it looks exactly like the readme okay so let me show you let's go back to 42 and so it looks exactly like this one so there's no content here so let's say that i changed this a bit i'll add like dot dot dot let's see what happens and then we'll save it and you notice here that there's dot dot here and the name has been changed to portfolio okay let me refresh okay nothing as of yet maybe it might take some time so let's head over back to the github pages settings here and then we're gonna choose the theme for the website because the one here is a bit blank and so let's click on choose a theme and in the blog post i've shown you how to use the cayman themes and you could feel free to select a theme that you like and when you click on it you're gonna see the preview here minimal okay so you select the theme that you like but let me just stick to the key mean themes here and you want to click on select theme okay let's refresh the webpage again okay maybe it takes some time the prior update that i've made has just appeared here all right and now it's implemented and you can see that this is the cayman themes okay and the content is pretty blank here and so let's go back to the readme file and let's click on the portfolio too again but in your case it might be portfolio right or any name that you give it and notice that after we have applied the theme there is a new file that appears here underscore config.yml let's click on that and the theme here is theme jericho theme came in okay so we clicked on the cayman theme and then it adds that to the dot yml file so we have yet to add the images for the portfolio website so let's click on the readme.md file and then we're going to populate this okay we're going to populate it with the information from the example website okay so why don't you go ahead and click on the edit this file icon at the top right hand corner here and then the page will reload and then you want to type in the contents here but i'm gonna just copy and paste from the prior example so you could follow along and head over to the portfolio repository here and then you want to click on readme.md and then you want to click on raw and then you want to select everything and then copy and then we're going to paste it into the readme.md file and note that we're going to delete the portfolio here and let's save it by scrolling down and then click on commit changes and you could also add some description while making the change populate with example content commit changes and you get this but then we have to download the images for the websites and so you can head over to unsplash.com and notice here that in the example portfolio let me refresh so in the example portfolio here we have the crypto project on the sentiment analysis and also the crypto trading bot and so we're going to find two images to put in here and notice that i've already created this caption of the image and so we could also click on the particular link here to go to the exact page but then for demonstration purposes we're just gonna type in either here or here okay we're gonna type in cryptocurrency and then notice that this is the exact image that i've used by andre so you want to click on the middle part of the image or you could click on the download link here but it will download a default resolution but then if you want to download a smaller version you could position the mouse icon to the middle part of the image click on it and then it will expand and then at the top right hand corner instead of clicking on download free which will download the default version or resolution you want to make sure that the mouse is over at the drop down menu part at the far right of the button click on it and then you'll be able to select a resolution of your choice but if you click on the download free it might be the original size which might be big and when it's big it will occupy a lot of space on the website and that will consequently make the website load a bit slow so i like to use the small version here and you could click on it and it will download this particular attribution pop-up appears and so you could click on the copy to clipboard icon and then it will provide you with the html code that you could just copy and paste into wherever you want to use it for example if we're making the portfolio website let me show you so the copy and paste will look exactly like the one here let me put it at the bottom so you can see that it looks exactly alike here okay and so this will give us the message here with a link to the author and a link to unsplash and an image will appear here but then we first have to upload the image so let me show you let me show you how to upload the first image let's go back to the portfolio website of the repository and then you could click on add file at the top panel here and then click on upload files and then it brings you to a new page and you could choose your files click on it and a pop-up window will appear and then you could select your image another would be to just drag and drop and place it inside this particular box so let me drag and drop oh but then i've downloaded multiple times and so the image creates a number four for me here okay let me move it to the desktop rename it drag and drop and i'll delete the fourth version here commit changes wait a bit all right images here and you see the preview here is working and if we go back to the website refresh it it might take some time give it some time so here we're gonna download another image and then i think that i probably search for technical analysis or cryptocurrency trading and then to save us time let's just click on the link here yeah it was cryptocurrency trading let's click on the link here but let me right click and open up a new tab okay and then i'll have to find another image or for demonstration purposes let us use how about the one with the yeah right here how about that one like trading right so let's click on the middle part of the image and then the pop-up appears go to the right hand corner click on it and download the small version and then we're gonna go back to portfolio 2 the repository and now we're going to upload it but actually you could just drag and drop directly into this particular repository window without even clicking on add file right so typically you would click on add file upload file and it brings us to the next page and then you could drag and drop or click on choose your file but there's a shortcut let me show you the shortcut so in this main repository page you could just find the image that you want and then drag and drop it right and then it'll upload and then you could just commit the change and there you go the new image is here and let's click on it and then i want to copy the name of it so that we could update the one in the readme.md okay so i'll click on the readme.nd and then go ahead and click on the edit this file icon again and then we're going to replace it with the second image so i'll put it in here and so this line number 19 and line number nine is the line to insert the image okay so all of this are written in markdown language and i'll provide you the link to a cheat sheet for you to learn about markdown and so actually markdown could be another video on its own and so let me provide you a quick rundown of the markdown that we're using in this particular website but before doing that let me update the code here first and so go back to the image that we've downloaded the image from it was this one and then i want to copy the attribution here right here right so i'll click on the copy to clipboard click on it and now it's copied and head over back to portfolio two readme.md and then i'll replace it here okay i'll make sure to copy and paste it here and then i'll save it and let's see is if the image is here all right it works okay and so let me go back to the code provide you a line by line explanation but before doing that let's have a look at the preview all right so it works perfectly all right so this particular portion here but before doing that let me open up the screen all right so let's do the line by line explanation all right so line number one you're going to see the hashtag so the hashtag means that we're going to make it a header so when we have one hashtag it's going to be a big header so in html it will be h1 if you have two hashtags it will become h2 and so it will be a bit smaller and since we're using the asterisk here an opening asterisk and a closing asterisk and so the text inside will be in italy and so notice here that we have another hashtag which is the heading one and so education will be made a heading one and then here because we have only a single asterisk it means that it's going to be a bullet point for the masters of science line and also for the bachelors of science line and notice here that youtube university here will be in italy because we have an opening and closing asterisk and aside just from having a heading the heading could also be a link as well and so we created using the hashtag again and then to create a link in markdown you're going to need to use an opening and closing bracket the text of the link will be inside the bracket and then the actual link will be inside the parenthesis and make sure that the parenthesis opening and closing here will be next to the bracket to the right of the bracket without a space in between okay so that will become a link okay and to place an image here we're going to have to use the exclamation mark and then followed by the opening and closing bracket and then we could place the alt text in here and actually you could type in crypto sentiment analysis let's try this one crypto trading plot save it let's refresh it probably it might be in the developer version let me see developer view source of the image i mean of the web page let's have a look image source out okay so here it goes it's in the out tag here crypto sentiment analysis okay so it works and it's right here and so it gives the image caption okay so it'll be good for having it inside the html tag which might come handy when you're performing some web scraping but nevertheless you could also add that here right let's continue and notice here that line number 11 here is the attribution text that we've copied from unsplash and it goes under the image okay because we always like to use attribution under the image in order to give proper credits and then lines 13 is going to continue to explain the project this project integrates various new source for performing sentiment analysis pertaining to cryptocurrency and then you're going to notice that we're using the asterisk again for the bullet points and in order to make the text bold we're gonna use double asterisk an opening and a closing and so the text in between will be bold as you see here and then we're gonna repeat again for project two the same syntax that we've done for project one and then you could reiterate that over and over again for project three project four and project five or you could also go ahead and check out the markdown cheat sheets which i will provide in the video description and it's actually this one from adam p let's click on it yeah right here so as i mentioned already when you use a single hashtag it becomes heading one right so all of the markdown that we're using here let's have a look under the hood it will be converted into html code okay so what we have in here to the left will be converted to html right here to the right and so markdown is a lot faster to write in and it requires you to know minimal coding and so you could perform some basic formatting of the text and it will be converted automatically into the html by the github pages okay so let's go back to the portfolio too and so we here have the four files of the website the readme.md which contains the content of the website the config.yml which contains the name of the theme upon applying the theme to the github page and then here we have the two images that we used in the portfolio websites and let's have a look at the portfolio website again so if you forget it will be dataprofessor dot github.io slash and then the name of the repository so instead of data professor here you want to replace that with your username okay so whatever your username is dot github.io slash and then the name of your repository so in this example we have it portfolio too and so username that you have for your repo and then enter and there you go this is your portfolio website and so if you're finding value in this video please give it a thumbs up subscribe if you haven't already and make sure to hit on the notification bell so that you will be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journey\n"