diff --git a/html/lesson1/tutorial.pt.md b/html/lesson1/tutorial.pt.md
index d88ebab9..0991dcfd 100644
--- a/html/lesson1/tutorial.pt.md
+++ b/html/lesson1/tutorial.pt.md
@@ -7,7 +7,7 @@ title: HTML Aula 1
 
 **HTML** é a linguagem usada para construir sites da internet.
 
-Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo da página, como texto, imagens, vídeos.
+Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo da página: texto, imagens, vídeos.
 
 
 ### O que significa HTML:
@@ -15,7 +15,7 @@ Ele define a estrutura do site, ou seja, qualquer coisa relacionada ao conteúdo
 **H**yper **T**ext **M**arkup **L**anguage (Linguagem de marcação de hipertexto)
 
 
-### O que forma um site de internet
+### O que forma um site
 
 HTML: estrutura do site
 
@@ -35,7 +35,7 @@ Vamos construir esta [página de exemplo](/html/lesson1/example.pt.html "Eu amo
 
 Um **elemento** é como um tijolo no HTML. Existem parágrafos, cabeçalhos, tabelas, links, listas e muitos outros.
 
-**Tags** indicam a abertura e fechamento de um elemento. Elas frequentemente contém outros elementos e texto.
+**Tags** indicam a abertura e fechamento de um elemento. Elas frequentemente contém outros elementos e textos.
 
 `<nomedatag>conteúdo</nomedatag>`
 
@@ -62,7 +62,7 @@ Podemos usar um tipo especial de tag para adicionar anotações em nossas págin
 ### DOCTYPE e tags HTML
 
 O doctype é a primeira coisa que precisa ser definida numa página HTML.
-Ele diz ao navegador qual a versão de HTML a página está usando.
+Ele diz ao navegador qual a versão de HTML que a página está usando.
 
 ```html
 <!DOCTYPE html>
@@ -70,7 +70,7 @@ Ele diz ao navegador qual a versão de HTML a página está usando.
 
 Por enquanto nós vamos usar somente HTML, mas você pode descobrir mais sobre doctypes [aqui](http://www.w3.org/wiki/Doctypes_and_markup_styles).
 
-O doctype vem sempre seguido pela tag `<html>`, a qual já tem o conteúdo da página.
+O doctype vem sempre seguido pela tag `<html>`, a qual já contém o conteúdo da página.
 
 ```html
 <!DOCTYPE html>
@@ -80,7 +80,7 @@ O doctype vem sempre seguido pela tag `<html>`, a qual já tem o conteúdo da p
 
 ### Tags de HEAD e BODY
 
-Uma página HTML é dividida em duas partes. O **head** (Cabeçalho do documento) e **body** (Corpo do documento).
+Uma página HTML é dividida em duas partes. O **head** (cabeçalho do documento) e **body** (corpo do documento).
 
 O **head** contém informações como título da página, folhas de estilo, escrita e meta-informação.
 
@@ -89,7 +89,7 @@ O **body** contém o que é visível para o usuário. O conteúdo propriamente d
 
 ## Vamos começar!
 
-Começaremos definindo a estrutura básica do nosso site. Crie uma pasta para seu trabalho chamada "HTML Aula 1". Depois, dentro desta pasta, crie um novo arquivo chamado "index.html". Isso é o que você deve escrever no arquivo:
+Vamos definir a estrutura básica do nosso site. Crie uma pasta para seu trabalho chamada "HTML tutorial 1". Depois, dentro desta pasta, crie um novo arquivo chamado "index.html". Isso é o que você deve escrever no arquivo:
 
 ```html
 <!DOCTYPE html>
@@ -108,9 +108,9 @@ Começaremos definindo a estrutura básica do nosso site. Crie uma pasta para se
 > E na barra de título do navegador ou barra de abas?
 
 
-### Elemento: Cabeçalho
+### Elemento: Heading (título)
 
-Cabeçalhos existem em diversos tamanhos
+Títulos podem existir em diversos tamanhos
 
 # `<h1>Cabeçalho</h1>`
 ## `<h2>Cabeçalho</h2>`
@@ -119,19 +119,19 @@ Cabeçalhos existem em diversos tamanhos
 ##### `<h5>Cabeçalho</h5>`
 ###### `<h6>Cabeçalho</h6>`
 
-Acrescente um cabeçalho à sua página. Coloque-o dentro da tag "body" da página. Lembre-se, é lá que vai o conteúdo que o usuário vê.
+Acrescente um título à sua página. Coloque-o dentro da tag "body" da página. Lembre-se, é lá que está o conteúdo que o usuário vê.
 
 ```html
 <h1>Corujas!</h1>
 ```
 
-> Você lembrou de adicionar o cabeçalho à estrutura?
+> Você lembrou de adicionar o título à estrutura?
 
 > Não esqueça de salvar as alterações antes de atualizar o navegador!
 
 ### Aninhando elementos
 
-Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar o `<h1>` dentro das tags de corpo de página você está posicionando um cabeçalho dentro do `<body>` de uma página.
+Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar o `<h1>` dentro das body tags da página, você está posicionando um título dentro do `<body>` de uma página.
 
 > Você deve sempre fechar qualquer elemento que você abrir. Abriu um elemento, feche no final!
 
@@ -139,7 +139,7 @@ Elementos podem ser aninhados um dentro do outro. Por exemplo, se você colocar
 
 Adicionar conteúdo ao `<p>` faz com que o texto tenha uma estrutura de parágrafo. Isso ajuda para que o conteúdo da página fique mais fácil para leitura.
 
-Acrescente o seguinte no corpo da página, depois do cabeçalho `<h1>`:
+Acrescente o seguinte no body da página, depois do heading `<h1>`:
 
 ```html
 <p>
@@ -195,7 +195,7 @@ Div significa _divisão_. Ele cria seções num documento HTML. O div não afeta
 
 Podemos usar um div para limitar o nosso parágrafo.
 
-Cerque o parágrafo já existente por um div e adicione um novo cabeçalho a ele:
+Cerque o parágrafo já existente por um div e adicione um novo heading a ele:
 
 ```html
 <div>
@@ -217,7 +217,7 @@ Cerque o parágrafo já existente por um div e adicione um novo cabeçalho a ele
 Existem dois tipos de listas, **ordenada** e **desordenada**.
 Uma lista desordenada `<ul>` é definida por pontos enquanto a lista ordenada `<ol>` usa uma sequência.
 
-Vamos listar as razões que nós fazem gostar tanto de corujas abaixo do cabeçalho principal da página (o elemento `<h1>` que adicionamos mais cedo)
+Vamos listar as razões que nós fazem gostar tanto de corujas abaixo do heading principal da página (o elemento `<h1>` que adicionamos mais cedo)
 
 ```html
 <h2>Porque nós gostamos tanto de corujas?</h2>
@@ -252,7 +252,7 @@ Imagens são principalmente formadas por três atributos
 * o atributo `src`, o qual deixa a página saber qual imagem queremos que seja vista
 * o atributo `alt`, onde nós descrevemos nossa imagem para as pessoas que não conseguem ver a mesma
 
-Antes do principal cabeçalho da página, adicione o seguinte
+Antes do heading principal da página, adicione o seguinte
 
 ```html
 <div>
@@ -260,14 +260,14 @@ Antes do principal cabeçalho da página, adicione o seguinte
 </div>
 ```
 
-> Lembre-se: a seção `<head>` não é o mesmo que cabeçalho! Certifique-se de que sua nova `<div>` está no corpo da página.
+> Lembre-se: a seção `<head>` (cabeçalho) não é o mesmo que heading (título)! Certifique-se de que sua nova `<div>` está no body página.
 
 > Você consegue ver o logo do codebar? O que acontece quando você muda de logo para logo1?
 
 > Se você não consegue ver sua imagem, certifique-se de ter colocado as imagens na pasta `images`.
 
 Vamos adicionar mais imagens. Dessa vez nós vamos colocá-las em uma lista.
-Faça isso abaixo do cabeçalho `<h2>Porque nós gostamos tanto de corujas?</h2>`.
+Faça isso abaixo do heading `<h2>Porque nós gostamos tanto de corujas?</h2>`.
 
 ```html
 <ul>
@@ -283,7 +283,7 @@ Portanto, a lista pode conter não somente texto, mas outros elementos também.
 
 Links podem conter vários elementos - não somente texto.
 
-Vamos usar algumas imagens e texto para conectar a um video. Isso pode ajudar quando queremos que o usuário chegue onde desejamos sem que ele tenha que clicar num texto.
+Vamos usar algumas imagens e texto para conectar a um vídeo. Isso pode ajudar quando queremos que o usuário chegue onde desejamos sem que ele tenha que clicar num texto.
 
 Adicione este texto abaixo da lista ordenada sobre porque gostamos de corujas.
 
@@ -327,7 +327,7 @@ E um pequeno poema para a sua página, cercada por citações usando unidades HT
 
 **small** é um outro elemento de formatação que você pode usar.
 
-> Você notou como o caracter `&mdash;` renderiza na sua página?
+> Você notou como o caracter `&mdash;` aparece na sua página?
 
 ### Link de envio de email (mailto link) `<a>`
 
@@ -352,12 +352,12 @@ A diferença entre os links e link de envio de email (mailto link) é o conteúd
 > O que acontece quando você adiciona &body=Corujas são demais ao segundo link?
 
 
-## Bonus
+## Bônus
 
 Coloque um link para compartilhar no twitter junto com outros links de compartilhamento.
 
 ```html
-<a href="http://twitter.com/home?status=Eu amo corujas! via @by_codeba">Compartilhe seu amor por corujas no twitte</a>
+<a href="http://twitter.com/home?status=Eu amo corujas! via @by_codebar">Compartilhe seu amor por corujas no twitter</a>
 ```
 
 ---
diff --git a/html/lesson2/example.pt.html b/html/lesson2/example.pt.html
new file mode 100644
index 00000000..7c7d2e30
--- /dev/null
+++ b/html/lesson2/example.pt.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Eu amo corujas</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div id="top-line"></div>
+    <div id="main">
+      <div id="logo"><img src="images/logo.png"></div>
+      <h1>Corujas...</h1>
+      <h2>Porque eu gosto tanto de corujas?</h2>
+      <ul class="pictures">
+        <li><img src="images/img1.jpg"></li>
+        <li><img src="images/img2.jpg"></li>
+        <li><img src="images/img3.jpg"></li>
+      </ul>
+      <ol>
+        <li>elas são adoráveis</li>
+        <li>e amáveis</li>
+        <li>e apertáveis</li>
+      </ol>
+      <div class="bigimg"><img src="images/img4.jpg"></div>
+      <div class="bigimg"><img src="images/img5.jpg"></div>
+      <a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Assista o vídeo</a>
+      <div id="the-quote">
+        <h4>
+          <i>&#34;Uma coruja sábia e anciã pousou em um carvalho; Quanto mais observava, menos falava; <br>
+             Quanto menos falava, mais ouvia; Por que não somos como a coruja sábia e anciã?&#34;
+          </i>
+        </h4>
+        <p><small>- poema infantil</small></p>
+      </div>
+      <div class="right-box">
+        <div id="text-block">
+          <h3>Corujas:</h3>
+          <p>
+            A maioria das aves de rapina possui os olhos na parte lateral da cabeça<br>
+            mas a natureza estereoscópica dos <br>
+            <strong>olhos voltados para frente na coruja permite<br>
+           um melhor senso de percepção profunda</strong> necessária para a caça com pouca luz.<br>
+            <br>
+            <a href="http://en.wikipedia.org/wiki/Owl">Mais informações sobre corujas...</a>
+          </p>
+        </div>
+        <ul id="links">
+        <li>
+           <a href="mailto:social@codebar.io?subject=I love owls :: Codebar">Mande um email</a>
+        </li>
+        <li>
+           <a href="mailto:?subject=I love owls :: Codebar">Mande um email para seu amigo</a>
+        </li>
+        <li>
+          <a href="http://twitter.com/home?status=I love owls! via @codebar">Compartilhe o seu amor por corujas no twitter</a>
+        </li>
+      </ul>
+      </div>
+      <div class="left-box">
+        <img src="images/img6.jpg">
+      </div>
+    </div>
+    <div id="bottom-line"></div>
+  </body>
+</html>
diff --git a/html/lesson2/tutorial.pt.md b/html/lesson2/tutorial.pt.md
new file mode 100644
index 00000000..8277203b
--- /dev/null
+++ b/html/lesson2/tutorial.pt.md
@@ -0,0 +1,458 @@
+---
+layout: page
+title: HTML Aula 2
+footer: true
+---
+
+## O que é CSS?
+
+**CSS** é a linguagem usada para criar o estilo dos sites.
+
+Ela define a representação visual do conteúdo. Por exemplo: cor, margens, bordas, fundo e posição na página.
+
+### O que isso significa?
+
+ Folha de estilo em cascata (**C**ascading **S**tyle **S**heets).
+
+### Do que consiste um site
+
+HTML: estrutura do site
+
+CSS: apresentação
+
+_O **CSS** funciona em conjunto com o **HTML**_
+
+### Hoje vamos concentrar nos conceitos fundamentais do CSS
+
+Nós vamos criar a aparência [desta página](https://github.com/codebar/tutorials/blob/master/html/lesson2/example.html) para que fique igual [a este exemplo](example.pt.html).
+
+## Mas antes de começar...
+
+> O primeiro tutorial não te prepara para este exercício. Antes de continuar, baixe os seguintes arquivos.
+
+
+### Arquivos necessários
+
+Faça o download dos arquivos necessários para dar andamento ao tutorial por [aqui](https://gist.github.com/hundred/7332441/download) (mac/linux) ou [aqui](https://www.dropbox.com/s/zgb6l56sy87knzf/lesson2.zip) (windows)
+
+### O que posso fazer com o CSS?
+
+Você pode mudar a cor, posição, dimensões e apresentações de diversos elementos.
+
+### Anatomia de um elemento CSS
+
+```css
+body {
+  color: hotpink;
+}
+```
+
+**body** seletor
+
+**color** propriedade
+
+**hotpink** valor
+
+```css
+seletor {
+  propriedade: valor;
+}
+```
+
+Um grupo de propriedades para determinado seletor é definido entre chaves `{ }`
+
+```css
+body {
+  color: hotpink;
+  font-size: 12px;
+}
+```
+
+## Começando
+
+No head tag da página html, defina uma style tag (tag de estilo).
+
+```html
+<head>
+  <title>Eu amo corujas</title>
+  <style type="text/css">
+
+  </style>
+</head>
+```
+
+Inclua o estilo descrito abaixo, junto com a tag de estilo que definimos.
+
+## Introdução aos seletores
+
+### Seletores
+
+#### Seletor: elemento
+
+Vamos escolher a fonte que queremos usar na nossa página
+
+```css
+body {
+   font-family: Helvetica, Arial, sans-serif;
+}
+```
+
+Já que selecionamos o elemento **body**, essa alteração será aplicada para tudo o que está aninhado a esta estrutura, ou seja, todos os conteúdos da nossa página.
+
+Vamos retirar também os tópicos das listas que já definimos.
+
+```css
+ul {
+   list-style: none;
+}
+```
+
+e mudar a aparência dos links na nossa página
+
+```css
+a {
+   color: #a369d5;
+   text-decoration: none;
+   border-bottom: 1px dotted #a369d5;
+}
+```
+**color**  (cor) define as cores do texto. `#a369d5` é a representação da cor em formato hexadecimal. Uma fonte útil para descobrir os códigos das cores é [http://0to255.com](http://0to255.com).
+
+**text-decoration** (decoração do texto) especifica a decoração aplicada ao texto. Algumas outras opções que você pode experimentar são _underline_ (sublinhado), _overline_ (sobrelinhado) e _line-through_ (linha que corta o escrito). Como os links tem o sublinhado aplicado a eles como padrão, se estipularmos none (nenhum) ao link, cancelamos esta propriedade.
+
+**border-bottom** (base da borda) faz o texto aparecer sublinhado. Propriedades de bordas podem ser fundidas em uma linha
+
+`border-bottom: thickness border-style color` (base da borda: espessura estilo da borda cor)
+
+**1px** define a espessura da borda
+
+**dotted** (pontilhado) o estilo da linha
+
+**#a369d5** a cor da borda
+
+#### Seletor: classe
+
+Um seletor de classes seleciona todos os elementos usados pela classe especificada.
+
+```css
+.pictures {
+   margin: 10px auto;
+   width: 900px;
+}
+```
+
+**margin** (margem) é a área que rodeia um elemento. A definição acima é uma versão _abreviada_ de
+
+```css
+margin-top: 10px;
+margin-bottom: 10px;
+margin-right: auto;
+margin-left: auto;
+```
+
+O que definimos acima é
+_margin: (top bottom) (right left)_ margem: (superior inferior) (direita esquerda)
+
+> Você consegue ver a margem de um elemento conferindo a guia de inspeção
+
+#### Seletor: id
+
+Seleciona o elemento com a identidade ou logotipo.
+
+```css
+#logo {
+   margin: 0 auto 30px;
+   width: 200px;
+}
+```
+
+> Só pode existir um único elemento com determinada identidade. Se você definir múltiplos elementos, somente um poderá ser selecionado.
+
+#### Seletor: elementos aninhados
+
+Seleciona todos os elementos de lista que estão aninhados dentro de uma **classe** de imagem (pictures).
+
+```css
+.pictures li {
+   display: inline;
+   margin: 3px;
+}
+```
+
+**display** (exibição) especifica como os elementos são expostos. **li** é um elemento de bloco. Mudando esta propriedade de exibição, nos certificamos que a exibição será como um elemento inline.
+
+> Modifique inline para bloco-inline e para bloco. Você consegue notar a diferença?
+
+## Formas de unir o CSS ao HTML
+
+### CSS incorporado
+
+No começo do tutorial nós descrevemos como juntar o CSS à nossa página.
+
+```html
+<head>
+  <title>Eu amo corujas</title>
+  <style type="text/css">
+
+  </style>
+</head>
+```
+
+Este método de usar o CSS, definindo-o dentro de nossa página HTML, é chamado **incorporar**. O problema deste mecanismo é que ele não pode ser reutilizado nas outras páginas, o que torna o trabalho um pouco mais difícil.
+
+
+### CSS externa
+
+Uma boa forma para definir o CSS é incluí-lo dentro de uma folha de estilo separada. Assim é mais fácil mantê-lo e reutilizá-lo por várias páginas.
+
+Para completar esta tarefa vamos mover nosso CSS para fora do head da página e criar um novo arquivo, que será conectado a página pelo head.
+
+```html
+<head>
+  <title>Eu amo corujas</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+```
+
+## Efeito cascata
+
+Vamos usar o efeito _cascata_ para todos os elementos da folha de estilo, até obter alterações.
+
+Primeiro vamos redefinir a margin e border de todas as imagens.
+
+```css
+img {
+  margin: 0;
+  border: 0;
+}
+```
+
+Nós podemos mudar o estilo de algumas destas imagens estabelecendo um seletor mais específico. Isto vai substituir o seletor `img` que nós acabamos de definir.
+
+```css
+.bigimg img {
+  margin: 15px 2px;
+  width: 439px;
+  border: 2px solid #b9b1bf;
+}
+```
+
+## Propriedades CSS
+
+Até agora explicamos alguns seletores. Sabemos que conhecer cada seletor não é uma tarefa fácil, mas não deixe que isso te desanime. A internet é sua amiga. [Veja aqui uma lista com todas as propriedades CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference)
+
+
+## Avançando na forma de estilo da nossa página
+
+### line-height (altura da linha)
+
+Vamos aumentar o seletor de body para que a nossa página tenha um aspecto menos aglomerado.
+
+```css
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.3;
+}
+```
+
+### Centralizando o conteúdo da nossa página
+
+Numa página HTML você notará um elemento div com a identificação **main** (principal). Vamos usar este seletor para centralizar aquele recipiente.
+
+```css
+#main {
+  width: 900px;
+  margin: 0 auto 40px;
+  padding: 0;
+}
+```
+Para obter a centralização de um recipiente, temos que definir a sua largura. Se você remover a propriedade de largura vai perceber que o recipiente não estará centralizado na página.
+
+Nós também temos que usar outro tipo de _abreviação_ para definir a margem. A versão longa se parece com isso
+
+```css
+margin-top: 0;
+margin-bottom: 40px;
+margin-right: auto;
+margin-left: auto;
+```
+
+**auto** ajusta as margens esquerda e direita. Se você tentar diminuir a janela de seu navegador, pode ver que os lados esquerdo e direito se ajustam automaticamente e o **main** continua no meio da página.
+
+**padding** (enchimento) é a área em volta do elemento, mas dentro da border.
+
+>  Não confunda padding (enchimento) com margin (margem), faça um teste para ver como padding e margin de um elemento se diferem.
+
+
+### Elementos flutuantes
+
+```css
+.right-box {
+  float: right;
+}
+```
+
+### Usando elementos vazios para criar o estilo
+
+Algumas vezes, para fazer com que o design de uma página pareça melhor, precisamos adicionar elementos vazios. Como `<div id="top-line"></div>`
+
+```css
+#top-line {
+  width: 100%;
+  height: 5px;
+  background-color: #2d183d;
+  border-bottom: 3px solid #eedffb;
+  margin-bottom: 10px;
+}
+```
+
+Vamos criar também um estilo na parte inferior de nossa página de uma forma muito parecida.
+
+```css
+#bottom-line {
+  width: 100%;
+  height: 5px;
+  background-color: #2d183d;
+  border-top: 3px solid #eedffb;
+}
+```
+
+### Reestilização por elementos seletores
+
+Quando queremos assegurar que a aparência de um elemento mude consistentemente nas nossas páginas, é melhor utilizar elementos seletores. Dessa forma podemos ter certeza que não precisaremos redefinir o estilo e que isso se aplicará a todos os elementos daquele tipo.
+
+```css
+h1 {
+  font-size: 39px;
+  color: #2d183d;
+  text-align: center;
+  border-bottom: 1px solid #f6f4f8;
+  border-top: 1px solid #f6f4f8;
+  padding: 20px 0;
+}
+
+h2 {
+  font-size: 28px;
+  margin: 15px 0;
+  color: #663095;
+  padding: 15px 0;
+  font-weight: 400;
+  text-align: center;
+}
+
+h4 {
+  color: #6D6A6A;
+  font-size: 19px;
+  padding: 27px 25px 15px;
+}
+
+small {
+  color: #6D6A6A;
+  font-size: 15px;
+  margin: 0 30px 10px;
+  text-align: right;
+}
+
+ol {
+  margin: 14px 0;
+}
+
+ol li {
+  background-color: #F6F4F8;
+  color: #663095;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 10px 30px 10px 40px;
+  padding: 6px 20px;
+  border-radius: 9px;
+}
+```
+
+**font-weight** (peso da fonte) espessura do texto apresentado
+
+**text-align** (alinhamento de texto) alinhamento horizontal de um elemento de texto
+
+### Um pouco mais de estilo
+
+```css
+#the-quote{
+  border-bottom: 1px solid #f6f4f8;
+  border-top: 1px solid #f6f4f8;
+  margin: 40px auto;
+  width: 90%;
+}
+
+#links {
+  margin: 10px 15px 0 0;
+}
+
+#links li {
+  margin: 0 7px;
+  font-size: 18px;
+  display: inline;
+}
+
+#text-block {
+  height: 370px;
+}
+
+```
+
+### Mais seletores de cascata
+
+```css
+.pictures li img {
+  border: 2px solid #b9b1bf;
+}
+
+.bigimg img {
+  margin: 15px 2px;
+  width: 439px;
+  border: 2px solid #b9b1bf;
+}
+```
+
+### Alguns toques extras
+
+```css
+.bigimg{
+  display: inline;
+}
+```
+
+## Material extra e avançado
+
+### Pseudo-classes
+
+Uma pseudo-classe é uma palavra-chave adicionada a um seletor que descreve um estado específico de um elemento a ser selecionado. [Estas](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) são as pseudo-classes padrões.
+
+Vamos adicionar o código abaixo para ter certeza que aplicaremos a margin somente para o _primeiro elemento li_ dentro da classe de imagens.
+
+```css
+.pictures li:first-child {
+  margin-left: 5px;
+}
+```
+
+> O que acontece quando você retira _:first-child_ do seu seletor?
+
+
+### Bônus - Reiniciando estilos
+
+Você provavelmente notou que as páginas parecem bem diferentes quando carregadas em navegadores diferentes. Para experimentar e evitar estas inconsistências de navegadores, uma técnica comum é **Reiniciar CSS**
+
+Vamos aplicar isso ao elemento usado em nossa página
+
+```css
+html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+```
+
+-----
+
+Terminamos a nossa segunda aula. Tem alguma coisa que você não entendeu? Tente novamente e utilize os recursos fornecidos junto com o seu tutor. Se você tem algum feedback ou idéias que possam melhorar o nosso tutorial, nos [mande um email](mailto:feedback@codebar.io).
diff --git a/html/lesson3/example.pt.html b/html/lesson3/example.pt.html
new file mode 100644
index 00000000..ad61b967
--- /dev/null
+++ b/html/lesson3/example.pt.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ada Lovelace</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <header>
+    <div class="my-picture">
+      <img src="assets/images/ada_lovelace.jpg" height="60px"/>
+    </div>
+    <div class="title">
+      <h1>Oi, eu sou a Ada Lovelace</h1>
+    </div>
+    </header>
+
+    <div id="container">
+      <div class="sidebar">
+        <strong> Eu na internet</strong>
+        <ul class="social-media">
+          <li><a href="https://www.facebook.com/augusta.ada.lovelace">facebook</a> </li>
+          <li><a href="http://en.wikipedia.org/wiki/Ada_Lovelace">wikipedia</a> </li>
+        </ul>
+      </div>
+      <div class="main">
+        <p>Meu nome é August Ada King. Sou a condessa de Lovelace.</p>
+
+        <p>Sou matemática e escritora. As pessoas me conhecem pelo meu trabalho em um computador mecânico para uso geral, a chamada Máquina Analítica, de <a href="http://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage </a>. Eu escrevi o primeiro algorítmo para ser processado em uma máquina. Em outras palavras, <span class="highlight">sou a primeira programadora do mundo</span>. </p>
+
+        <p>Minha mãe, Anne Isabella Byron, me apoiou muito, já que foi ela quem incentivou meu interesse em matemática e lógica, mas nunca me esquecerei do meu pai, que mudou para a Grécia quando eu era um bebê para lutar na guerra civil.</p>
+
+        <blockquote>&ldquo;Eu não acredito que meu pai era um poeta tão importante como eu serei uma Analista; para mim, os dois são indissociáveis.&rdquo;</blockquote>
+
+        <p>Durante a minha vida, matemática sempre foi meu interesse principal. Eu sempre questionei, inclusive premissas básicas, integrando poesias, outro grande amor na minha vida, e ciências. Também tenho um interesse especial em desenvolvimento científico e evoluções da minha época, como frenologia e magnetismo.</p>
+
+        <p>
+        Charles Babbage escreveu o seguinte poema sobre mim
+        <br/>
+        <span class="poem">
+          Esqueça este mundo e todos os seus problemas<br/>
+          e, se possível, seu excesso de Charlatões - <br/>
+          tudo, em resumo, menos a Encantadora de Números.
+        </span>
+        </p>
+
+        <p>A linguagem de computação <a href="http://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, foi nomeada em minha homenagem. O padrão de Defesa Militar para linguagem, o MIL-STD-1815 também tem seu nome em minha homenagem, com o ano do meu nascimento.</p>
+
+        <p>Hoje em dia, a Sociedade Britânica de Computação tem competições anuais para mulheres estudantes de Ciência da Computação com o meu nome. A conferência anual para as mulheres graduadas também foi nomeada em minha homenagem. O Google também dedicou o <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> a mim, no meu 197º aniversário. </p>
+
+        <p class="google-doodle">
+          <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday"><img src="http://www.google.com/logos/2012/ada_lovelaces_197th_birthday-991005-hp.jpg" /></a>
+        </p>
+      </div>
+    </div>
+
+    <footer>
+      <p>Feito por <a href="http://codebar.io">codebar.io</a></p>
+    </footer>
+  </body>
+</html>
diff --git a/html/lesson3/tutorial.pt.md b/html/lesson3/tutorial.pt.md
new file mode 100644
index 00000000..e429debe
--- /dev/null
+++ b/html/lesson3/tutorial.pt.md
@@ -0,0 +1,582 @@
+---
+layout: page
+title: HTML Aula 3
+footer: true
+---
+
+##  HTML E CSS - Além do básico
+
+### Recapitulando
+
+Nas últimas duas aulas nós falamos de **HTML** (linguagem de marcação de hipertexto) e **CSS** (folha de estilo em cascata). O **HTML** define a _estrutura_ de um site, e o **CSS**, a _apresentação_.
+
+### Hoje nós vamos construir um site do zero.
+
+A página que vamos construir vai parecer com esta [página de exemplo](example.pt.html "Ada Lovelace").
+
+Nós também vamos explicar em maiores detalhes elementos que mencionamos nas aulas anteriores.
+
+## Mas antes de começar...
+
+### Arquivos necessários
+
+Baixe os arquivos necessários para começar os trabalhos deste tutorial [aqui](https://gist.github.com/despo/7328342/download)
+
+### Ferramentas de Desenvolvimento - Inspetor Web
+
+Inspetores são ferramentas de desenvolvimento que te ajudam a ver, editar e depurar o CSS, HTML e JavaScript.
+
+Um inspetor bem popular é o [firebug](http://getfirebug.com/), funciona bem no Firefox. O Chrome tem um inspetor incorporado, mas sugerimos que você use o firebug, já que ele é um programa muito mais fácil para usar e mudar diversas propriedades.
+
+![](assets/images/firebug.png)
+
+>  Peça para seu tutor te mostrar como editar estilos na nossa página de exemplo usando o firebug.
+
+## Início
+
+Vamos começar com o head da nossa página e colocar o title da forma que aprendemos na primeira aula.
+
+```html
+<title>Ada Lovelace</title>
+```
+
+### Estruturando conteúdo
+
+Vamos separar nossa página em três áreas diferentes. O **header** (cabeçalho) estará no topo de nossa página mostrando nosso título e imagem. O **container** (recipiente) é onde vamos especificar o conteúdo principal. E o **footer** (rodapé).
+
+```html
+<header>
+
+</header>
+<div>
+
+</div>
+<footer>
+
+</footer>
+```
+
+> Você lembrou de inserir estas tags dentro da `<body>` tag da sua página?
+
+> Confira a página. Você consegue ver o título e os elementos que acabamos de adicionar?
+
+## Nível dos elementos: inline versus bloco
+
+No CSS existem formas diferentes de [introduzir](https://developer.mozilla.org/en-US/docs/Web/CSS/display "display CSS") os elementos. As formas mais comuns são: _block_ e _inline_.
+
+### elementos block (bloco)
+
+Os elementos aparecem em uma nova linha
+
+![](assets/images/span-block.png)
+
+Alguns elementos de bloco são `<div>, <p>, <h1>, <ul>, <li>`. A maior parte dos elementos são de bloco.
+
+### elementos inline
+
+Os elementos aparecem na mesma linha.
+
+![](assets/images/span-inline.png)
+
+Alguns elementos inline são `<img>, <a>, <em>, <strong>, <span>`
+
+#### Para trocar os elementos e transformá-los de block para inline, ou vice-versa, você pode usar a propriedade de `display` (exibição) do CSS com `inline` ou `block`
+
+
+## Estabelecendo o conteúdo do `<header>`
+
+### Estrutura
+
+Nós vamos desenvolver a página de cima para baixo. Você sempre pode voltar depois e trocar as coisas, caso queira.
+
+Adicione uma imagem envolvida por um elemento `<div>`
+
+```html
+<div>
+  <img src="ada_lovelace.jpg"/>
+</div>
+```
+
+Adicione o heading `<h1>`, abaixo do `<div>` que envolve a imagem, dentro do elemento `<header>`
+
+```html
+<div>
+  <h1>Oi, eu sou a Ada Lovelace</h1>
+</div>
+```
+
+> Carregue a página. Dẽ uma olhada em como os elementos estão apresentados usando o inspetor.
+
+### Apresentação
+
+Vamos usar o que acabamos de aprender e tornar a imagem um elemento inline.
+
+Antes de manipular o `<div>` que está ao redor da imagem, você deve ter condições de acessá-lo da folha de estilo. Coloque o nome `my-picture` na classe daquele elemento.
+
+```html
+<div class="my-picture">
+  <img src="ada_lovelace.jpg"/>
+</div>
+```
+
+Adicione o estilo relevante no seu `style.css`
+
+```css
+.my-picture {
+ display: inline;
+}
+```
+
+> Dê uma olhada na página. Confira a imagem e olhe as suas propriedades CSS.
+
+####Fazendo funcionar
+
+Faça com que o elemento `div` envolva o heading inline. Comece adicionando a classe `title` a ele.
+
+```html
+<div class="title">
+ <h1>Oi, eu sou a Ada Lovelace</h1>
+</div>
+```
+e então o CSS apropriado
+
+```css
+.title {
+  display: inline-block;
+}
+```
+
+`inline-block` é um outro atributo de exibição. Você deve usar o `inline-block` muito mais que o `inline` para fazer o elemento aparecer inline porque o `div` com a classe `title` contém elemento de bloco, o `<h1>`, que toma conta e se expande até o final da linha.
+
+> Usando o firebug, troque o `inline-block` para `inline` e note como aparece na tela.
+
+Ajuste o alinhamento do `.title`
+
+```css
+vertical-align: top;
+```
+
+e torne a imagem um pouco menor
+
+```css
+.my-picture img {
+  height: 60px;
+}
+```
+
+##Caixa modelo (box model)
+
+### O que é uma caixa modelo?
+
+Um elemento pode ser visualizado como uma caixa. A caixa modelo é uma forma de descrever o amontoado de propriedades espaciais de um elemento, aqueles cujos efeitos são tamanho e espaçamento da página. Estes são: `padding` (enchimento), `margin` (margem), `border` (borda), assim como `height` (altura) e `width` (largura).
+
+**<span style="color: rgb(130,171,182);">azul</span>** representa os valores para `height` e `width`. Normalmente estes valores são definidos implicitamente, baseados no conteúdo.
+
+**<span style="color: rgb(185,197,124);">verde</span>** representa o `padding` &mdash; o espaço dentro da `border`. `Padding` contribui para o tamanho total da caixa. Então, se definimos `padding-left: 10px;` e `width: 20px;`, isso aplia o elemento em **30px** na página.
+
+**<span style="color: rgb(244,211,139);">amarelo</span>** é a `border` &mdash; o limite em volta do conteúdo e do `padding`. Pode aplicar o estilo de diversas formas e representa a parte externa mais visível em um elemento.
+
+**<span style="color: rgb(239,195,144);">laranja</span>** é a `margin` &mdash; o espaço fora da borda. Isto separa o elemento de outros elementos na página.
+
+Nota: `padding`, `margin` e `border` podem ser aplicados a qualquer combinação de lados. Abaixo todos os três foram aplicados na mesma medida para os quatro lados em volta do conteúdo.
+
+![](assets/images/box-model.png)
+
+### Formando o estilo do header
+
+A página está se formando gradativamente. Diferencie o `<header>` um pouco mais colocando uma cor de fundo e centralizando o conteúdo.
+
+```css
+header {
+  background-color: #fdfdfc;
+  text-align: center;
+}
+```
+
+### Aplicando as propriedades de caixa no header
+
+Amplie o estilo do header para que tenha uma border e altere o height e padding
+
+```css
+border-bottom: 1px solid #e7e6e6;
+padding-top: 14px;
+height: 70px;
+```
+
+> Você lembra da descrição sobre as propriedades de border da nossa última aula?
+
+
+> Altere o width da border e atualize a página
+
+_border: `thickness` `style` `color`;_
+
+## Criando a barra lateral
+
+Junto com o `width` e `height`, o `min-width` (largura mínima), `max-width` (largura máxima), `min-height` (altura mínima) e `max-height` (altura máxima) podem ser estabelecidas. Estas propriedades tendem a ser usadas para assegurar que, quando a página é redimensionada, o navegador não permita que essa alteração seja menor ou maior do que os valores especificados na propriedade.
+
+Vamos adicionar conteúdo! Adicione o seguinte dentro do `div` no arquivo html.
+
+```html
+<div>
+  <strong>Eu na internet</strong>
+  <ul>
+   <li><a href="https://www.facebook.com/augusta.ada.lovelace">facebook</a> </li>
+   <li><a href="http://en.wikipedia.org/wiki/Ada_Lovelace">wikipedia</a> </li>
+ </ul>
+</div>
+```
+
+### Criando estilo
+
+Adicione uma classe `sidebar` (barra lateral) ao div que acabamos de definir. Isto é para que possamos mudar o estilo sem impactar outros elementos.
+
+```html
+<div class="sidebar">
+  <b>Eu na internet</b>
+  ...
+```
+
+Comece adicionando uma cor de fundo para que nós possamos ver claramente o recipiente.
+
+```css
+.sidebar {
+  background-color: #fdfdfd;
+}
+```
+
+Restrinja o width do sidebar
+
+```css
+width: 30%;
+min-width: 300px;
+max-width: 320px;
+```
+
+Transforme isto num inline-block e estabeleça algumas das propriedades de caixa.
+
+```css
+display: inline-block;
+padding: 25px 30px 20px;
+border: 1px solid #e8e8ea;
+margin-top: 55px;
+margin-left: 20px;
+```
+
+###padding e margin
+Padding e margin podem ser estabelecidos de diversas formas
+
+`padding: top right bottom left;` exemplo: _padding: 10px 20px 30px 5px;_
+
+`padding: top right/left bottom;` exemplo: _padding: 10px 20px 5px;_
+
+`padding: top/bottom right/left;` exemplo: _padding: 5px 15px;_
+
+`padding: all;` exemplo: _padding: 20px_
+
+Como alternativa, você só pode estabelecer o lado que você quer `padding-right: 20px`
+
+_isso também se aplica para margin_
+
+###mais criação de estilo...
+
+Especifique uma classe `.social-media` no elemento `ul`
+
+```html
+<ul class="social-media">
+  <li><a href="https://www.facebook.com/augusta.ada.lovelace">facebook</a> </li>
+```
+
+Remova os tópicos e mude a margin e o padding padrão da ul (**u**nordered **l**ist)
+
+```css
+ul.social-media {
+  list-style: none;
+  margin-left: 10px;
+  padding-left: 20px;
+}
+```
+
+Adicione a border-bottom, para dar um efeito de linha, para os itens individuais da lista e altere suas dimensões
+
+```
+.social-media li {
+  border-bottom: 1px solid #b0afc0;
+  padding: 10px;
+  width: 200px;
+}
+```
+
+> Altere as propriedades usando o inspetor
+> O que acontece quando você remove a width ou aumenta o padding?
+
+## Pseudo-classes
+
+Uma pseudo-classe é uma palavra chave adicionada aos seletores que especifica uma condição. Usando as pseudo-classes, podemos identificar estilos diferentes para diferentes situações de um link:
+
+```css
+a:link
+a:visited
+a:hover
+a:active
+```
+
+Ordem é **muito** importante. Sempre use a ordem descrita acima se você quer aplicar estilos diferentes para todas as situações.
+A pseudo-classe mais usada geralmente para links é `a:hover`. É o que vamos usar hoje.
+
+Falamos sobre *pseudo*-classes porque, diferentemente das classes que são direcionadas quando colocamos um ponto na frente delas, as *pseudo*-classes não tem nenhum correspondente verdadeiro no HTML. Ao invés disso, elas se referem a certas situações do elemento que não são expressas pelos sinais.
+
+## Criando estilo nos links
+
+Nós queremos que somente os links dentro da lista sejam afetados. Então vamos agir somente no `.social-media li a`
+
+```css
+.social-media li a {
+  color: #4c4066;
+  text-decoration: none;
+  text-shadow: 1px 0px #ffffff;
+  border-left: 7px solid #fdcc38;
+  padding-left: 10px;
+}
+```
+
+### Criando estilos de link no :hover state
+
+Nós queremos mudar a cor da border quando o cursor ficar em cima do link. Para evitar repetições, uma forma fácil para fazer isso é ser mais específico e usar `border-left-color`. Visto que não temos nenhuma outra border, podemos também usar `border-color`
+
+**Lembre-se de olhar [a lista de todas as propriedades CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) (mencionada na aula anterior) quando trabalhando com estilos. São muitas propriedades para lembrar!**
+
+```css
+.social-media li a:hover {
+  border-left-color: #a26cd2;
+}
+```
+
+## Quase lá...
+
+A sidebar está quase perfeita. Altere algumas propriedades para que a lista de tarefas esteja alinhada com os outros elementos e destacada.
+
+```css
+.sidebar b {
+  margin-left: 36px;
+  color: #4c4066;
+  font-size: 19px;
+}
+```
+
+## Antes de continuar, algumas propriedades de caixa legais de conhecer...
+
+Adicione isso ao `.sidebar` do CSS
+
+```css
+border-radius: 6px;
+box-shadow: 0 1px 1px 1px rgba(237, 235, 232, 0.4);
+```
+**border-radius** (raio da borda) cria cantos arredondados
+
+**box-shadow** (sombra de caixa) cria um efeito sombreado, permitindo que se determine cor, tamanho, distorção e desvio.
+
+
+## Estabelecendo o recipiente principal
+
+Até agora você fez um excelente trabalho! A barra lateral está pronta e você sabe sobre propriedades de caixa. Hora de adicionar conteúdo à página.
+
+Adicione um div, com a classe main depois de `.sidebar`
+
+```html
+<div class="main">
+
+</div>
+```
+
+Aqui, vamos definir o texto que queremos mostrar sobre **Ada Lovelace**, usando parágrafos para deixar o conteúdo mais fácil para leitura.
+
+### Primeiro, um pouquinho sobre ela
+
+```html
+<p>Meu nome é August Ada King. Sou a condessa de Lovelace.</p>
+
+<p>Sou matemática e escritora. As pessoas me conhecem pelo meu trabalho em um computador mecânico para uso geral, a chamada Máquina Analítica, de Charles Babbage. Eu escrevi o primeiro algorítmo para ser processado em uma máquina. Em outras palavras, sou a primeira programadora do mundo.</p>
+
+<p>Minha mãe, Anne Isabella Byron, me apoiou muito, já que foi ela quem incentivou meu interesse em matemática e lógica, mas nunca me esquecerei do meu pai, que mudou para Grécia quando eu era um bebê para lutar na guerra civil.</p>
+```
+
+Agora que o conteúdo está lá, podemos revê-lo e alterar o elemento para aparecer como inline block e estabelecer o width para ter certeza de que vai aparecer ao lado da sidebar.
+
+```css
+.main {
+  display: inline-block;
+  width: 55%;
+}
+```
+
+> O sidebar e o recipiente estão aparecendo um ao lado do outro? O que acontece quando você altera a width?
+
+
+Adicione um pouco mais de espaço em volta do recipiente principal e estabeleça o alinhamento vertical.
+
+```css
+margin-left: 70px;
+padding-top: 60px;
+vertical-align: top;
+```
+
+> Tente remover o `vertical-align`. O que acontece?
+
+### Agora, concentre-se no conteúdo
+
+Adicione um link para que qualquer pessoa que visite a página possa facilmente descobrir mais sobre Charles Babbage. No segundo parágrafo, coloque o nome dele com o link mostrado abaixo.
+
+```html
+<a href="http://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage's </a>
+```
+
+A Ada foi a primeira programadora do mundo. Nós queremos que esta informação esteja em destaque. Adicione um espaço em volta e especifique a classe como `highlight`, assim a intenção é óbvia e as outras pessoas trabalhando nos códigos da página podem entender isso facilmente.
+
+```html
+<span class="highlight">Eu sou a primeira programadora do mundo</span>
+```
+
+Especifique o estilo para a classe highlight
+
+```css
+.highlight {
+  color: #4c61a9;
+}
+```
+
+### Mais conteúdo
+
+```html
+<blockquote>&ldquo;Eu não acredito que meu pai era um poeta tão importante como eu serei uma Analista; para mim, os dois são indissociáveis.&rdquo;</blockquote>
+
+<p>Durante a minha vida, matemática sempre foi meu interesse principal. Eu sempre questionei, inclusive premissas básicas, integrando poesias, outro grande amor na minha vida, e ciências. Também tenho um interesse especial em desenvolvimento científico e evoluções da minha época, como frenologia e magnetismo.</p>
+```
+
+Já que o primeiro parágrafo é uma citação, podemos usar `<blockquote>`, que é mais apropriado que uma p tag (tag de parágrafo).
+
+```html
+<blockquote>&ldquo;Eu não acredito que...</blockquote>
+```
+
+e aí criar o estilo
+
+```css
+blockquote {
+  border: 1px solid #E7E6E6;
+  padding: 20px 27px;
+  border-radius: 6px;
+  background-color: #FDFDFC;
+  color: #4C4066;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+```
+
+> Altere as propriedades. Explique ao seu tutor o que essa propriedade faz.
+
+Um poema sobre a Ada
+
+```html
+<p>
+ Charles Babbage escreveu o seguinte poema sobre mim
+ <br/>
+ <span>
+   Esqueça este mundo e todos os seus problemas<br/>
+   e, se possível, seu excesso de Charlatões - <br/>
+   tudo, em resumo, menos a Encantadora de Números.
+ </span>
+</p>
+```
+
+> Porque precisamos de uma quebra de linha (`<br/>`) antes do espaço? O que acontece quando removemos a quebra de linha?
+
+Faça o poema aparecer diferente do resto do texto. Adicione uma classe CSS chamada `poem` para dar ênfase no elemento e adicione estilo
+
+```css
+.poem {
+  font-style: italic;
+  color: #4C4066;
+}
+```
+
+### Mais algumas informações sobre a Ada
+```html
+<p>A linguagem de computação <a href="http://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, foi nomeada em minha homenagem. O padrão da Defesa Militar para a linguagem, o MIL-STD-1815 também tem seu nome em minha homenagem, com o ano do meu nascimento.</p>
+
+<p>Hoje em dia, a Sociedade Britânica de Computação tem competições anuais para mulheres estudantes de Ciência da Computação com o meu nome. A conferência anual para as mulheres graduadas também foi nomeada em minha homenagem. O Google também dedicou o <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> a mim, no meu 197º aniversário. </p>
+
+<p>
+ <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday">
+  <img src="http://www.google.com/logos/2012/ada_lovelaces_197th_birthday-991005-hp.jpg" />
+ </a>
+</p>
+```
+
+A aparência está ótima, mas podemos alterar a posição do doodle para que esteja alinhado no meio e para que tenha um pouco mais de espaço entre ele e a página.
+
+Adicione a classe `google-doodle` no último parágrafo e estabeleça seu estilo.
+
+```css
+.google-doodle {
+  text-align: center;
+  margin-top: 90px;
+  margin-bottom: 70px;
+}
+```
+
+### Criando estilo dos links
+
+Anteriormente, nós especificamos o estilo para os elementos de link que estavam dentro da barra lateral. Agora nós vamos estabelecer um estilo de link padrão para ser aplicado a todos os elementos restantes.
+
+```css
+a {
+  color: #7a3cb7;
+}
+
+a:hover {
+  color: #a26cd2;
+}
+```
+
+## Definindo o footer
+Para completar nossa página, vamos adicionar conteúdos e criar o estilo do footer
+
+Dentro do footer, adicione uma atribuição a você e um link para seu twitter, Facebook ou qualquer outro local que você queira.
+
+```html
+<p>Feito por <a href="...">[seu nome]</a></p>
+```
+
+e adicione os toques finais de estilo para os elementos do footer
+
+```css
+footer {
+  height: 60px;
+  padding-top: 20px;
+  padding-left: 30px;
+  background-color: #1f1430;
+  border-top: 1px solid #eeeeee;
+  margin-top: 20px;
+}
+
+footer p {
+  color: #b0afc0;
+  font-size: 14px;
+}
+
+footer a {
+  color: #b0afc0;
+}
+```
+
+> Você tem alguma dúvida?
+
+### Bônus - Inspetor
+
+Dê uma olhada na [página de exemplo](example.pt.html "Ada Lovelace"). O heading e body da página tem algumas diferenças da página que acabamos de criar.
+
+Use o inspetor para olhar o `<body>` e `<h1>` e aplique estas mudanças à sua página.
+
+-----
+
+Assim termina nossa terceira aula. Tem alguma coisa que você não entendeu? Tente novamente e examine os recursos oferecidos junto com o seu tutor. Se você tem algum feedback ou alguma idéia de melhorar esta aula, [mande um email prá gente](mailto:feedback@codebar.io).
diff --git a/index.pt.html b/index.pt.html
index cc9eac03..bf4db85e 100644
--- a/index.pt.html
+++ b/index.pt.html
@@ -29,7 +29,7 @@ <h1>Codebar.io</h1>
           <strong>HTML</strong>
           <ul>
             <li><a href="html/lesson1/tutorial.pt.html">Aula 1 - Introdução ao HTML</a></li>
-            <li><a href="html/lesson2/tutorial.html">Aula 2 - Introdução ao CSS</a></li>
+            <li><a href="html/lesson2/tutorial.pt.html">Aula 2 - Introdução ao CSS</a></li>
             <li><a href="html/lesson3/tutorial.html">Aula 3 - Além do básico</a></li>
             <li><a href="html/lesson4/tutorial.html">Aula 4 - CSS, layouts e formatação</a></li>
             <li><a href="html/lesson5/tutorial.html">Aula 5 - Mergulhe fundo no HTML5 & CSS3</a></li>
