path: root/files/pt-br/web/tutorials/index.html

---
title: Tutoriais
slug: Web/Tutorials
tags:
  - Artigos Web
  - CSS
  - Codificando
  - Código
  - Desenvolvimento Web
  - GitHub
  - Guía
  - HTML
  - Iniciante
  - JavaScript
  - MDN
  - Navegador
  - Tutorial
translation_of: Web/Tutorials
original_slug: Web/Tutoriais
---
<p>Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. <strong>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</strong>. 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.</p>

<h2 id="Para_nível_iniciante_da_Web">Para nível iniciante da Web</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a Web  </a></dt>
 <dd><em>Iniciando com a Web</em> é  uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. <span id="result_box" lang="pt"><span>Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples</span></span>.</dd>
</dl>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais de HTML</h2>

<h3 id="Nível_inicial">Nível inicial</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a></dt>
 <dd>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 <em>hiperlinks</em> e fazer uso do HTML para estruturar uma página da web.</dd>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Element">Referência de Elementos HTML da MDN</a></strong></dt>
 <dd>Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Criando uma Página Web simples com HTML</a></strong> (The Blog Starter)</dt>
 <dd>Um guia HTML para iniciantes que inclui explicações de <em>tags</em> 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.</dd>
 <dt><strong><a href="http://bit.ly/2z9xSS2">Guia do Iniciante em HTML</a> (Website Setup)</strong></dt>
 <dd>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.</dd>
 <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Desafio HTML</a> (Wikiversity)</strong></dt>
 <dd>Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, <em>Eu devo usar um elemento &lt;h2&gt; ou um elemento &lt;strong&gt;?</em>), focando numa melhor produtividade.</dd>
</dl>
</div>
</div>

<h3 id="Nível_Intermediário">Nível Intermediário</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimídia e Incorporação</a></dt>
 <dd><span lang="pt">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.</span></dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Tables">Tabelas em HTML</a></dt>
 <dd><span lang="pt">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</span>.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Forms">Formulários em HTML (HTML forms)</a></dt>
 <dd>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.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Dicas para criar páginas HTML de carregamento rápido</a></strong></dt>
 <dd>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.</dd>
</dl>
</div>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais CSS</h2>

<h3 id="Nível_inicial_2">Nível inicial</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Started">CSS Básico</a></dt>
 <dd>CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. <em>CSS Básico</em> 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?</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt>
 <dd>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 <em>boxes</em> e <em>debug</em> em CSS.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilizando <em>Boxes</em></a></dt>
 <dd>A seguir nós veremos em estilização <em>boxes</em> (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 <em>boxes</em>.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando texto</a></dt>
 <dd>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 <em>links</em>.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Questões comuns de CSS</a></strong></dt>
 <dd>Perguntas e respostas comuns para iniciantes.</dd>
</dl>
</div>
</div>

<h3 id="Nível_intermediário">Nível intermediário</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
 <dd>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 à <em>viewport</em> e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no <em>layout</em> CSS, olhando para diferentes configurações de tela, métodos de <em>layout</em> tradicionais envolvendo flutuação e posicionamento e novas ferramentas de <em>layout</em> como o <em>flexbox</em>.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referência CSS</a></strong></dt>
 <dd>Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Grades Fluídas</a> (Uma lista a parte)</strong></dt>
 <dd><em>Layouts</em> de <em>design</em> que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafios CSS</a> (Wikiversity)</strong></dt>
 <dd>Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado_2">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_transforms">Usando transformações CSS</a></strong></dt>
 <dd>Aplique rotação, inclinação, escala e translação utilizando CSS.</dd>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/CSS/CSS_transitions">CSS Transições</a></strong></dt>
 <dd>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.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia Rápido para implementar Fontes da Web com @font-face</a> (HTML5 Rocks)</strong></dt>
 <dd>O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.</dd>
 <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Começando a escrever CSS</a> (David Walsh)</strong></dt>
 <dd>Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.</dd>
</dl>
</div>
</div>

<div class="section">
<dl>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
 <dd>Aprenda a desenhar gráficos usando <em>scripts</em>  e usando o elemento <code>canvas</code>.</dd>
 <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt>
 <dd>Artigos sobre o uso de HTML5.</dd>
</dl>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais Javascript</h2>

<h3 id="Nível_iniciante">Nível iniciante</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt></dt>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt>
 <dd>Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como <em>O que é JavaScript?</em>, <em>Com o que se parece?</em> e <em>O que se pode fazer com ele?</em> 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.</dd>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Construindo blocos com JavaScript</a></dt>
 <dd>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.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Começando com JavaScript</a></dt>
 <dd>O que é JavaScript e como pode lhe ajudar?</dd>
 <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt>
 <dd>Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.</dd>
</dl>
</div>
</div>

<h3 id="Nível_intermediário_2">Nível intermediário</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">APIs da web do lado do cliente</a></dt>
 <dd>Quando se programa em JavaScript do lado do cliente (<em>client-side</em>) 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.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma Reintrodução ao JavaScript</a></strong></dt>
 <dd>Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.</dd>
 <dt><strong><a href="http://eloquentjavascript.net/" rel="external">JavaScript Eloquente</a></strong></dt>
 <dd>Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.</dd>
 <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Falando JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>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.</dd>
 <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Padrões de Design Essenciais em JavaScript</a> (Addy Osmani)</strong></dt>
 <dd>Uma introdução para padrões de design essenciais em JavaScript.</dd>
</dl>
</div>
</div>

<h3 id="Nível_avançado_3">Nível avançado</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide">Guia de JavaScript</a></dt>
 <dd>Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.</dd>
 <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">Você não conhece JS</a> (Kyle Simpson)</strong></dt>
 <dd>Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.</dd>
 <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt>
 <dd>Documentação de partes mais peculiares do JavaScript.</dd>
 <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Explorando ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>Informações profundas e confiáveis sobre ECMAScript 2015.</dd>
</dl>
</div>

<div class="section"><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Padrões JavaScipt</a></strong>

<dl>
 <dd>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.</dd>
 <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Como navegadores trabalham</a></strong></dt>
 <dd>Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.</dd>
 <dt><a href="https://github.com/bolshchikov/js-must-watch">Vídeos sobre JavaScript</a> (GitHub)</dt>
 <dd>Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.</dd>
</dl>
</div>
</div>

<h3 id="Estendendo_o_desenvolvimento">Estendendo o desenvolvimento</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/Add-ons/WebExtensions">WebExtensions</a></dt>
 <dd>WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a <a class="external-icon external" href="https://developer.chrome.com/extensions">API de extensão</a> suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome"> com poucas mudanças</a>. A API é também completamente compatível com <a href="https://developer.mozilla.org/pt-BR/Firefox/Multiprocess_Firefox">multiprocessos Firefox</a>.</dd>
</dl>
</div>
</div>