Tutoriais
=========

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. **Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas**. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

Para nível iniciante da Web
---------------------------

Iniciando com a Web

*Iniciando com a Web* é uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.

Tutoriais de HTML
-----------------

### Nível inicial

Introdução ao HTML

Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar *hiperlinks* e fazer uso do HTML para estruturar uma página da web.

**Referência de Elementos HTML da MDN**

Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.

**Criando uma Página Web simples com HTML** (The Blog Starter)

Um guia HTML para iniciantes que inclui explicações de *tags* comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.

**Guia do Iniciante em HTML (Website Setup)**

Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.

**Desafio HTML (Wikiversity)**

Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, *Eu devo usar um elemento <h2> ou um elemento <strong>?*), focando numa melhor produtividade.

### Nível Intermediário

Multimídia e Incorporação

Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.

Tabelas em HTML

Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.

### Nível avançado

Formulários em HTML (HTML forms) (en-US)

Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.

**Dicas para criar páginas HTML de carregamento rápido (en-US)**

Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.

Tutoriais CSS
-------------

### Nível inicial

CSS Básico (en-US)

CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. *CSS Básico* traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?

Introdução ao CSS (en-US)

Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de *boxes* e *debug* em CSS.

Estilizando *Boxes* (en-US)

A seguir nós veremos em estilização *boxes* (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de *boxes*.

Estilizando texto

Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e *links*.

**Questões comuns de CSS (en-US)**

Perguntas e respostas comuns para iniciantes.

### Nível intermediário

CSS layout

Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à *viewport* e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no *layout* CSS, olhando para diferentes configurações de tela, métodos de *layout* tradicionais envolvendo flutuação e posicionamento e novas ferramentas de *layout* como o *flexbox*.

**Referência CSS**

Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.

**Grades Fluídas (Uma lista a parte)**

*Layouts* de *design* que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.

**Desafios CSS (Wikiversity)**

Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.

### Nível avançado

**Usando transformações CSS**

Aplique rotação, inclinação, escala e translação utilizando CSS.

**CSS Transições (en-US)**

Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.

**Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)**

O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.

**Começando a escrever CSS (David Walsh)**

Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.

Tutorial Canvas

Aprenda a desenhar gráficos usando *scripts* e usando o elemento `canvas`.

**HTML5 Doctor**

Artigos sobre o uso de HTML5.

Tutoriais Javascript
--------------------

### Nível iniciante

Primeiros passos em JavaScript

Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como *O que é JavaScript?*, *Com o que se parece?* e *O que se pode fazer com ele?* antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.

Construindo blocos com JavaScript

Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.

Começando com JavaScript

O que é JavaScript e como pode lhe ajudar?

**Codecademy (Codecademy)**

Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.

### Nível intermediário

Introdução a objetos em JavaScript

Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.

APIs da web do lado do cliente

Quando se programa em JavaScript do lado do cliente (*client-side*) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.

**Uma Reintrodução ao JavaScript**

Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.

**JavaScript Eloquente**

Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.

**Falando JavaScript (Dr. Axel Rauschmayer)**

Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.

**Padrões de Design Essenciais em JavaScript (Addy Osmani)**

Uma introdução para padrões de design essenciais em JavaScript.

### Nível avançado

Guia de JavaScript

Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.

**Você não conhece JS (Kyle Simpson)**

Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.

**JavaScript Garden**

Documentação de partes mais peculiares do JavaScript.

**Explorando ES6 (Dr. Axel Rauschmayer)**

Informações profundas e confiáveis sobre ECMAScript 2015.

**Padrões JavaScipt**

Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.

**Como navegadores trabalham**

Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.

Vídeos sobre JavaScript (GitHub)

Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.

### Estendendo o desenvolvimento

WebExtensions

WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.