diff --git a/html/1/tutorial.md b/html/1/tutorial.md
new file mode 100644
index 00000000..b97f67ea
--- /dev/null
+++ b/html/1/tutorial.md
@@ -0,0 +1,321 @@
+# HTML - Lesson 1
+
+### What is HTML?
+
+HTML is the code that allows us to build websites
+
+
+### What it stands for
+
+HTML - **H**yper **T**ext **M**arkup **L**anguage
+
+
+### What makes a website
+
+HTML : structure of a website
+CSS: presentation
+
+_The styling of a website, is not part of the HTML_
+
+
+## Today we’ll be focusing on fundamental HTML concepts
+
+_We will be building this [example page](http://codebar.github.io/tutorial/html/1/tutorial/example.html "I love owls")_
+
+## But before we start...
+
+### HTML element anatomy
+
+An **element** is an HTML component _eg. paragraph, heading, table, list etc_
+
+**Tags**, mark the opening and closing of an element. They contain elements that indicate their purpose
+
+ some content
+
+Example
+```html
+ I am a paragraph
+ I am a heading
+```
+
+Some elements are standalone, as they cannot contain anything else
+
+```html
+
+ ![]()
+```
+
+### DOCTYPE and HTML tags
+
+The doctype is the first thing that must be defined in an HTML page.
+It tells the browser which version of HTML the the page is using.
+
+```html
+
+```
+
+We will only be using html for now, but you can find more about doctypes [here](http://www.w3.org/wiki/Doctypes_and_markup_styles).
+
+The doctype is always followed by the `` tag, which itself contains the contents of the page.
+
+```html
+
+
+
+
+```
+
+### HEAD and BODY tags
+
+An HTML page is split into two parts. The **head** and the **body**.
+
+The **head** is where information like the page title, stylesheets, scripts and meta information is contained.
+
+The **body** contains what is visible to the user.
+
+
+# Let's get started!
+
+Let’s start by defining the basic structure of our website.
+
+``
+
+
+
+ I love owls
+
+
+
+
+
+``
+
+## Element: Heading
+
+Headings come in a number of sizes
+
+# `Heading
`
+## `Heading
`
+### `Heading
`
+#### `Heading
`
+##### `Heading
`
+###### `Heading
`
+
+Add a heading to your page
+
+```html
+ Owls!
+```
+
+> Did you remember to add the heading to the body?
+
+> Don't forget to save your changes before refreshing the browser!
+
+## Nesting elements
+
+Elements can be nested inside each other. For example, by putting the `` inside the body tags you are nesting a heading inside the `` of a page.
+
+> You must always close any element that you open. The first element you open, you close last!
+
+## Element: Paragraph
+
+Putting content into a `
` will make it look like a paragraph structure. This helps make the content of a page easier to read.
+
+Add the following to your page, after the title
+
+```html
+
+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting.
+
+```
+
+## Line break
+As you've noticed, despite the new lines there are no line breaks in our paragraph.
+To achieve that we must use the `
` tag.
+
+```html
+
+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting.
+
+```
+
+## Formatting text
+
+We can also **emphasise** or make text *important*
+For emphasis we use `` and for importance ``
+
+Let's emphasise some of the content of our paragraph
+
+```html
+
+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting.
+
+```
+
+## Element: Link ``
+
+The most important attribute of a link is **href**, which indicates the path or url that is accessed through it.
+
+Let's add a link to the bottom of our paragraph
+
+```html
+
+ More information about owls...
+```
+
+## Element: Div ``
+
+Div stands for _division_. It creates sections in an HTML document.
+We can use a div to contain out paragraph.
+
+Wrap your paragraph in a div and add a heading to it
+
+```html
+
+
Owls
+
+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting.
+
+ More information about owls...
+
+
+```
+
+## Element: List `
`
+
+There are two types of lists, **ordered** and **unordered**.
+An unordered list `` is defined with bullets whilst an ordered list `` uses a sequence.
+
+Let's list the reasons we like owls so much under the main heading of the page (the `` element we added earlier on)
+
+```html
+ Why do I like owls so much?
+
+
+ - they are adorable
+ - and lovely>
+ - and cuddly
+
+```
+
+## Element: Image `![]()
`
+
+So far we've learned a lot about how to add text to our page. But how about some media?
+
+Let's add some images!
+
+Image are primarily made up of three attributes
+- the `![]()
` tag
+- the `src` attribute, which lets the page know what image we want to view
+- the `alt` attribute, where we describe our image
+
+Before the main heading of the page, add the following
+
+```html
+
+
+
Why do I like owls so much?
`
+
+```html
+
+```
+
+So a list can not only contain text, but other elements as well.
+
+## Adding a link on multiple elements
+
+Links can contain not just text, but images or even a number of elements within.
+
+Let's link some pictures and text to a video. It can be handy when we want the user to get to where we want them without needing to click on text.
+
+Add that underneath the ordered list we defined previously.
+
+```html
+
+```
+
+> Click any of the images. Can you get to the link's page?
+
+## ASCII and more formatting
+
+**ASCII** code is a way to represent text in ways that all computers can understand.
+[Here](http://htmlandcssbook.com/extras/html-escape-codes/) is a list with codes, their representation and HTML number.
+
+Add a small rhyme to your page, wrapped with quotes using ASCII code.
+
+```html
+
+
+ "A wise old owl sat on an oak; The more he saw the less he spoke;
+ The less he spoke the more he heard; Why aren't we like that wise old bird?"
+
+
+
+ - nursery rhyme
+
+```
+
+**small* is another html formatting element you can use.
+
+> Have you noticed how the character `"A` renders on the page?
+
+## mailto links ``
+
+Links can also be used to open up a user's email client and share content.
+The difference between links and mailto links, is the content defined in the **href** attribute.
+
+```html
+
+```
+
+> What happens when you click the first link?
+
+> What happens when you click the second link?
+
+> What happens when you add `&body=Owls are amazing` to the second link?
+
+
+## Bonus
+
+Add a share on twitter link along with your other sharing links.
+
+```html
+ Share your love of owls on twitter
+```
+ 
+ 
+ 
+ 
+