Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ This is the source code for <http://tutorials.codebar.io>

## Getting started

This is a [GitHub Pages](https://pages.github.com/) repo, so you can render the pages with [Jekyll](http://jekyllrb.com/).
This is a [GitHub Pages](https://pages.github.com/) repo, so you can render the pages with [Jekyll](https://jekyllrb.com/).
First make sure to [install the version of Ruby](https://www.ruby-lang.org/en/documentation/installation/)
indicated in `.ruby-version`, as well as the [bundler](http://bundler.io/) gem. Then:
indicated in `.ruby-version`, as well as the [bundler](https://bundler.io/) gem. Then:

1. `bundle install`, which will install Jekyll
2. `bundle exec jekyll serve --watch`
Expand Down Expand Up @@ -135,4 +135,4 @@ This can be done with a tool like [NVM](https://github.com/creationix/nvm).

## License

codebar Tutorials are released under the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](http://creativecommons.org/licenses/by-nc-sa/4.0/).
codebar Tutorials are released under the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](https://creativecommons.org/licenses/by-nc-sa/4.0/).
2 changes: 1 addition & 1 deletion android/1introduction/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ arriving at the workshop!)
If you want to run your app on your own phone, remember to enable USB debugging in the device system settings, under Settings -> Developer options.
(please note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings -> About phone and tap Build number seven times. Return to the previous screen to find Developer options.)

Feel free to chose a different topic other than cookies, we really like the popular pokémon [Goomy Clicker](http://joezeng.github.io/goomyclicker) - what things do you like?
Feel free to chose a different topic other than cookies, we really like the popular pokémon [Goomy Clicker](https://joezeng.github.io/goomyclicker) - what things do you like?

![Imgur](http://i.imgur.com/ssQF3jO.png)

Expand Down
2 changes: 1 addition & 1 deletion general/setup/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ We recommend you use **[Atom](https://atom.io/)** at codebar. It's free, open so

## A web browser (required)

You'll have one of these already! Windows comes with [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/), and OS X comes with [Safari](https://www.apple.com/uk/safari/). Most Linux distributions come with [Firefox](https://www.mozilla.org/en-US/firefox/), which is also available for Windows and OS X. You can also download [Chrome](https://www.google.com/chrome/) which is a popular alternative. You can get started with whatever you currently use, but when you reach the later tutorials the powerful developer tools in Chrome and Firefox will be useful. Your coach will show you how to use them while you work through the tutorials.
You'll have one of these already! Windows comes with [Internet Explorer](https://windows.microsoft.com/en-us/internet-explorer/), and OS X comes with [Safari](https://www.apple.com/uk/safari/). Most Linux distributions come with [Firefox](https://www.mozilla.org/en-US/firefox/), which is also available for Windows and OS X. You can also download [Chrome](https://www.google.com/chrome/) which is a popular alternative. You can get started with whatever you currently use, but when you reach the later tutorials the powerful developer tools in Chrome and Firefox will be useful. Your coach will show you how to use them while you work through the tutorials.

## A compression utility (handy on Windows)

Expand Down
2 changes: 1 addition & 1 deletion general/setup/tutorial.pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Nós recomendamos usar **[Atom](https://atom.io/)** no Codebar. É de graça, te

## Um navegador de internet (obrigatório)

Você já tem um desses! O Windows vem com o [Internet Explorer](http://windows.microsoft.com/pt-br/internet-explorer/), e o OS X vem com [Safari](https://www.apple.com/br/safari/). [Firefox](https://www.mozilla.org/pt-BR/firefox/new/) e [Chrome](https://www.google.com.br/intl/pt-BR/chrome/) são alternativas populares. Você pode começar com qualquer um que já use, mas quando você chegar nos últimos tutoriais, as ferramentas poderosas do Chrome e Firefox vão ser úteis. Seu tutor vai te mostrar como usá-las quando vocês estiverem trabalhando nestes tutoriais.
Você já tem um desses! O Windows vem com o [Internet Explorer](https://windows.microsoft.com/pt-br/internet-explorer/), e o OS X vem com [Safari](https://www.apple.com/br/safari/). [Firefox](https://www.mozilla.org/pt-BR/firefox/new/) e [Chrome](https://www.google.com.br/intl/pt-BR/chrome/) são alternativas populares. Você pode começar com qualquer um que já use, mas quando você chegar nos últimos tutoriais, as ferramentas poderosas do Chrome e Firefox vão ser úteis. Seu tutor vai te mostrar como usá-las quando vocês estiverem trabalhando nestes tutoriais.

## Ferramenta de compactação (importante para Windows)

Expand Down
4 changes: 2 additions & 2 deletions html/lesson1/example-styled.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h2>Why do I like owls so much?</h2>
<div style="display: inline;"><img src="images/img4.jpg"></div>
<div style="display: inline;"><img src="images/img5.jpg"></div>
<div style="margin-top: 20px">
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
</div>
<h4>
<i>&#34;A wise old owl sat on an oak; The more he saw the less he spoke; <br>
Expand All @@ -36,7 +36,7 @@ <h3>Owls:</h3>
the owl's forward-facing <strong>eyes permits the greater <br>
sense of depth perception </strong>necessary for low-light hunting. <br>
<br>
<a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
<a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
</p>
</div>
<div style="width: 30%; display: inline">
Expand Down
4 changes: 2 additions & 2 deletions html/lesson1/example-styled.pt.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2>Porque nós gostamos tanto de corujas?</h2>
<div style="display: inline;"><img src="images/img4.jpg"></div>
<div style="display: inline;"><img src="images/img5.jpg"></div>
<div style="margin-top: 20px">
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Assista o vídeo</a>
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Assista o vídeo</a>
</div>
<h4>
<i>&#34;Uma coruja sábia e anciã pousou em um carvalho; Quanto mais observava, menos falava; <br>
Expand All @@ -37,7 +37,7 @@ <h3>Corujas:</h3>
<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://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
<a href="https://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
</p>
</div>
<div style="width: 30%; display: inline">
Expand Down
4 changes: 2 additions & 2 deletions html/lesson1/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h2>Why do I like owls so much?</h2>
<li><b>and cuddly</b></li>
<div><img src="images/img4.jpg" alt="cute owl"/></div>
<div><img src="images/img5.jpg" alt="another cute owl"/></div>
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
</ol>
<h4>
<i>&#34;A wise old owl sat on an oak; The more he saw the less he spoke; <br>
Expand All @@ -34,7 +34,7 @@ <h3>Owls:</h3>
the owl's forward-facing <strong>eyes permits the greater <br>
sense of depth perception </strong>necessary for low-light hunting. <br>
<br>
<a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
<a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
</p>
</div>
<div>
Expand Down
4 changes: 2 additions & 2 deletions html/lesson1/example.pt.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2>Porque nós gostamos tanto de corujas?</h2>
<li><b>e apertáveis</b></li>
<div><img src="images/img4.jpg"></div>
<div><img src="images/img5.jpg"></div>
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Assista o vídeo</a>
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Assista o vídeo</a>
</ol>
<h4>
<i>&#34;Uma coruja sábia e anciã pousou em um carvalho; Quanto mais observava, menos falava; <br>
Expand All @@ -35,7 +35,7 @@ <h3>Corujas:</h3>
<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://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
<a href="https://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
</p>
</div>
<div>
Expand Down
8 changes: 4 additions & 4 deletions html/lesson1/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ It tells the browser which version of HTML the page is using.
<!DOCTYPE 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).
We will only be using html for now, but you can find more about doctypes [here](https://www.w3.org/wiki/Doctypes_and_markup_styles).

The doctype is always followed by the `<html>` tag, which contains the contents of your page.

Expand Down Expand Up @@ -145,7 +145,7 @@ A link lets the user click through to another webpage. We use the attribute `hre
Let's add a link to the bottom of your paragraph:

```html
<a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
<a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
```

### Element: Div `<div>`
Expand All @@ -161,7 +161,7 @@ Wrap your existing paragraph and link in a div and add a new heading to it.
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.
<a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
<a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
</p>
</div>
```
Expand Down Expand Up @@ -236,7 +236,7 @@ Add this underneath the ordered list about why we like owls.

```html
<div>
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">
<img src="images/img4.jpg" alt="cute owl">
<img src="images/img5.jpg" alt="another cute owl">
<br>
Expand Down
8 changes: 4 additions & 4 deletions html/lesson1/tutorial.pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Ele diz ao navegador qual a versão de HTML a página está usando.
<!DOCTYPE html>
```

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).
Por enquanto nós vamos usar somente HTML, mas você pode descobrir mais sobre doctypes [aqui](https://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.

Expand Down Expand Up @@ -186,7 +186,7 @@ Vamos adicionar um link no final do nosso parágrafo

```html
<br/>
<a href="http://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
<a href="https://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
```

### Elemento: Div `<div>`
Expand All @@ -206,7 +206,7 @@ Cerque o parágrafo já existente por um div e adicione um novo cabeçalho a ele
<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/>
<a href="http://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
<a href="https://pt.wikipedia.org/wiki/Coruja">Mais informações sobre corujas...</a>
</p>
</div>
```
Expand Down Expand Up @@ -289,7 +289,7 @@ Adicione este texto abaixo da lista ordenada sobre porque gostamos de corujas.

```html
<div>
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">
<img src="images/img4.jpg" alt="coruja fofa"/>
<img src="images/img5.jpg" alt="outra coruja fofa"/>
<br/>
Expand Down
4 changes: 2 additions & 2 deletions html/lesson2/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h2>Why do I like owls so much?</h2>
</ol>
<div><img src="images/img4.jpg" alt="cute owl"/></div>
<div><img src="images/img5.jpg" alt="another cute owl"/></div>
<a href="http://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
<a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
<div id="the-quote">
<h4>
<i>&#34;A wise old owl sat on an oak; The more he saw the less he spoke; <br>
Expand All @@ -40,7 +40,7 @@ <h3>Owls:</h3>
the owl's forward-facing <strong>eyes permits the greater <br>
sense of depth perception </strong>necessary for low-light hunting. <br>
<br>
<a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
<a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
</p>
</div>
<ul id="links">
Expand Down
10 changes: 5 additions & 5 deletions html/lesson3/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ <h1>Hi, I'm Ada Lovelace</h1>
<strong> Me on the 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>
<li><a href="https://en.wikipedia.org/wiki/Ada_Lovelace">wikipedia</a> </li>
</ul>
</div>
<div class="main">
<p>My name is August Ada King. I'm the Countess of Lovelace.</p>

<p>I am a mathematician and a writer. People know me from my work on <a href="http://en.wikipedia.org/wiki/Charles_Babbage">Charle's Babbage's</a> early mechanical general-purpose computer, the Analytical engine. I wrote the first algorithm intended to be processed by a machine. In other words,<span class="highlight"> I am the world's first programmer</span>. </p>
<p>I am a mathematician and a writer. People know me from my work on <a href="https://en.wikipedia.org/wiki/Charles_Babbage">Charle's Babbage's</a> early mechanical general-purpose computer, the Analytical engine. I wrote the first algorithm intended to be processed by a machine. In other words,<span class="highlight"> I am the world's first programmer</span>. </p>

<p>My mother, Anne Isabella Byron, was a great help to me as she helped me by promoting my interest in mathematics and logic, but I also never forgot about my dad, who moved to Greece when I was just an infant to help out in the civil war.</p>

Expand All @@ -43,12 +43,12 @@ <h1>Hi, I'm Ada Lovelace</h1>
</span>
</p>

<p>The computer language <a href="http://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.</p>
<p>The computer language <a href="https://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.</p>

<p>These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> to me, on the 197th anniversary of my birth. </p>
<p>These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its <a href="https://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> to me, on the 197th anniversary of my birth. </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>
<a href="https://www.google.com/doodles/ada-lovelaces-197th-birthday"><img src="https://www.google.com/logos/2012/ada_lovelaces_197th_birthday-991005-hp.jpg" /></a>
</p>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions html/lesson3/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ In the previous two lessons, we spoke about **H**yper **T**ext **M**arkup **L**a

Inspectors are development tools that help you view, edit and debug CSS, HTML and JavaScript.

Chrome Devtools are already built into your Chrome browser, or Inspector if you are using Firefox. For advanced users, many other tools are available as browser plugins, including the Firefox add-on [Firebug](http://getfirebug.com/).
Chrome Devtools are already built into your Chrome browser, or Inspector if you are using Firefox. For advanced users, many other tools are available as browser plugins, including the Firefox add-on [Firebug](https://getfirebug.com/).

![](assets/images/chrome-devtools.png)

Expand Down Expand Up @@ -230,7 +230,7 @@ Let's add some content! Add the following inside the `div` in the html file
<strong>Me on the 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>
<li><a href="https://en.wikipedia.org/wiki/Ada_Lovelace">wikipedia</a> </li>
</ul>
</div>
```
Expand Down Expand Up @@ -440,7 +440,7 @@ vertical-align: top;
Add a link so that anyone coming to the page can easily find out more about Charles Babbage. In the second paragraph, wrap his name in a link as shown below.

```html
<a href="http://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage's </a>
<a href="https://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage's </a>
```

Ada was the world's first programmer therefore we want that to stand out. Add a span around it and specify a class `highlight`, so the intention is obvious and other people working on the code of the page can easily understand it.
Expand Down Expand Up @@ -514,13 +514,13 @@ Make the poem look different than the rest of the text. Add a CSS class `poem` t

### Some more information about Ada
```html
<p>The computer language <a href="http://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.</p>
<p>The computer language <a href="https://en.wikipedia.org/wiki/Ada_(programming_language)">Ada</a>, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.</p>

<p>These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its <a href="http://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> to me, on the 197th anniversary of my birth. </p>
<p>These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its <a href="https://www.google.com/doodles/ada-lovelaces-197th-birthday">Google doodle</a> to me, on the 197th anniversary of my birth. </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 href="https://www.google.com/doodles/ada-lovelaces-197th-birthday">
<img src="https://www.google.com/logos/2012/ada_lovelaces_197th_birthday-991005-hp.jpg">
</a>
</p>
```
Expand Down
6 changes: 3 additions & 3 deletions html/lesson4/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ <h1> Grace Hopper</h1>
<div id="resources">
<ul>
<li><a href="http://www.cs.yale.edu/homes/tap/Files/hopper-story.html">Computer Scientist</a></li>
<li><a href="http://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a></li>
<li><a href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a></li>
<li><a href="http://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a></li>
<li><a href="https://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a></li>
<li><a href="https://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a></li>
<li><a href="https://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a></li>
</ul>
</div>
</header>
Expand Down
Loading