Revision 611759 of Tutoriais

<p>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 se é 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 web que adotaram padrões abertos e as melhores práticas para desenvolvimento web e que fornecem ou permitem traduções, através de uma licença de conteúdo aberto, como Creative Commons.</p>
<div class="row topicpage-table">
 <div class="section">
  <h2 class="Documentation" id="Documentation" name="Documentation">HTML tutoriais</h2>
  <h3 id="N.C3.ADvel_introdut.C3.B3rio">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="/pt-BR/docs/Web/Guide/HTML/Introduction">Introdução ao HTML</a></dt>
   <dd>
    O que é HTML, o que ele faz, uma breve história e com que se parece a estrutura de um documento HTML. Os artigos que se seguem detalham cada parte do HTML com muito mais profundidade.</dd>
   <dt>
    <a href="https://reference.sitepoint.com/html/page-structure">Estrutura Básica de uma página da Web</a> (SitePoint)</dt>
   <dd>
    Saiba, numa visão geral, como os elementos HTML se encaixam..</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/HTML/Element">MDN HTML elemento de referência</a></dt>
   <dd>
    Uma referência abrangente para elementos HTML, e como são suportados pelos diferentes navegadores.</dd>
   <dt>
    <a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges">Desafios HTML</a> (Wikiversity)</dt>
   <dd>
    Use esses desafios para aprimorar suas habilidades em HTML (por exemplo, "Eu devo usar um elemento &lt;h2&gt; ou um elemento &lt;strong&gt;?"), Focando numa melhor produtividade.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    CodeAvengers é uma maneira divertida e eficaz de aprender a codificar aplicações web e jogos com HTML, CSS e JavaScript.</dd>
  </dl>
  <h3 id="Advanced_level">Nível avançado</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/HTML/Dicas_para_criar_p%C3%A1ginas_HTML_de_carregamento_r%C3%A1pido">Dicas para a criação de páginas HTML de carregamento rápido</a></dt>
   <dd>
    Otimizar páginas da Web para fornecer um site mais ágil para os visitantes e reduzir a carga sobre o servidor web e a conexão da Internet.</dd>
   <dt>
    <a href="https://www.html5rocks.com/pt/tutorials/">HTML5 Tutoriais</a> (HTML5 Rocks)</dt>
   <dd>
    Faça uma visita guiada através de código que usa recursos de HTML5.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/semanticsinhtml5/">Semântica em HTML5</a> (A List Apart)</dt>
   <dd>
    Conheça mais sobre a semântica extensível e a compatibilidade "<em>backwards</em>" e "<em>forwards</em>".</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/Canvas_tutorial">Canvas Tutorial</a></dt>
   <dd>
    Aprenda a desenhar gráficos usando scripts usando o elemento canvas.</dd>
   <dt>
    <a href="https://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
   <dd>
    Artigos sobre o uso de HTML5.</dd>
   <dt>
    <a href="https://www.elated.com/articles/html5-audio/">The Joy of HTML5 audio</a> (Elated)</dt>
   <dd>
    Aprenda a usar o elemento audio HTML para incorporar sons em suas páginas da web facilmente. Muitos exemplos de código são incluídos no tutorial.</dd>
  </dl>
  <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais Javascript</h2>
  <h3 id="Introductory_level">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="https://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
   <dd>
    Codecademy é uma maneira fácil de aprender como codificar JavaScript. É interativo e você pode fazer com seus amigos.</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/JavaScript/Getting_Started">Introdução ao JavaScript</a></dt>
   <dd style="margin-left: 40px;">
    O que é JavaScript e como ele pode ajudá-lo?</dd>
   <dt>
    <a href="https://docs.webplatform.org/wiki/tutorials/javascript_best_practices">JavaScript Melhores Práticas</a> (WebPlatform.org)</dt>
   <dd>
    Saiba mais sobre alguns dos melhores práticas óbvias (ou nem tanto) quando se escreve JavaScript.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    Código Avengers é a maneira divertida e eficaz de aprender a aplicações web de código e jogos com HTML, CSS e JavaScript.</dd>
   <dt>
    <a href="https://codecombat.com/#">CodeCombat</a> (codecombat.com/#)</dt>
   <dd>
    CodeCompat são uma designd jogo para ensinar-lhe JavaScript, são Open Source.</dd>
  </dl>
  <p>https://codecombat.com/#</p>
  <h3 id="N.C3.ADvel_intermedi.C3.A1rio">Nível intermediário</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/A_re-introduction_to_JavaScript">A Re-Introdução ao JavaScript</a></dt>
   <dd>
    A recapitulação da linguagem de programação JavaScript destinado a desenvolvedores de nível intermediário.</dd>
   <dt>
    <a href="https://eloquentjavascript.net/contents.html">Eloqüente JavaScript</a></dt>
   <dd>
    Um guia completo de metodologias de JavaScript intermediários e avançados.</dd>
   <dt>
    <a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">Essenciais Padrões JavaScript Projeto</a> (Addy Osmani)</dt>
   <dd>
    Uma introdução aos padrões essenciais de desenho JavaScript.</dd>
   <dt>
    <a href="https://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/">A linguagem de programação JavaScript</a> (YUI Blog)</dt>
   <dd>
    Douglas Crockford explora a língua como ela é hoje, e como ele veio a ser.</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/Introduction_to_Object-Oriented_JavaScript">Introdução ao Object-Oriented JavaScript</a></dt>
   <dd>
    Saiba mais sobre o modelo de objeto de JavaScript.</dd>
  </dl>
 </div>
 <div class="section">
  <h3 id="N.C3.ADvel_avan.C3.A7ado">Nível avançado</h3>
  <ul style="margin-left: 40px;">
   <li>funções,</li>
   <li>JQuery,</li>
   <li>plugins JQuery,</li>
   <li>design,</li>
   <li>construtores e literais,</li>
   <li>criação de objetos,</li>
   <li>reutilização de código e</li>
   <li>DOM</li>
  </ul>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/JavaScript/Guide">Guia JavaScript</a></dt>
   <dd>
    Um guia completo, atualizado regularmente para JavaScript para todos os níveis de ensino, do básico ao avançado.</dd>
   <dt>
    <a href="https://ejohn.org/apps/learn/">Aprender avançada JavaScript</a> (John Resig)</dt>
   <dd>
    Guia de John Resig ao avançado JavaScript.</dd>
   <dt>
    <a href="https://www.elated.com/articles/javascript-dom-intro/">Apresentando o JavaScript DOM</a> (exaltado)</dt>
   <dd>
    O que é o Document Object Model, e por isso é útil? Este artigo fornece uma introdução suave para esta funcionalidade JavaScript poderoso.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/">Uma API Inconveniente: A Teoria do DOM</a> (YUI Blog)</dt>
   <dd>
    Douglas Crockford explica o Document Object Model.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2006/11/27/video-crockford-advjs/">Eloquent JavaScript</a> (YUI Blog)</dt>
   <dd>
    Douglas Crockford olha atentamente para os padrões de código a partir dos quais os programadores de JavaScript podem escolher ao desenvolver suas aplicações.</dd>
   <dt>
    <a href="https://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
   <dd>
    Documentação das partes mais peculiares de JavaScript.</dd>
   <dt>
    <a href="https://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs">Qual Framework JavaScript? </a>(StackOverflow)</dt>
   <dd>
    Conselhos sobre a escolha de um Framework de JavaScript.</dd>
   <dt>
    <a href="https://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Baixe JavaScript desbloqueados</a> (YUI Blog)</dt>
   <dd>
    Dicas para melhorar o desempenho do download de páginas que contenham JavaScript.</dd>
   <dt>
    <a href="https://shichuan.github.io/javascript-patterns">Padrões Javascript</a></dt>
   <dd>
    A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd>
   <dd>
    Uma coleção de padrões e antipadrões que cobre padrões de:</dd>
  </dl>
  <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriais CSS</h2>
  <h3 id="N.C3.ADvel_introdut.C3.B3rio_2">Nível introdutório</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Started">CSS Introdução</a></dt>
   <dd>
    Este tutorial apresenta a Cascading Style Sheets (CSS). Ele orienta você através das características básicas de CSS com exemplos práticos que você pode experimentar por si mesmo em seu próprio computador.</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt>
   <dd>
    Quais são as classes em CSS?</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/External_CSS">CSS externo</a> (Wikiversity)</dt>
   <dd>
    Usando CSS a partir de uma folha de estilo externa.</dd>
   <dt>
    <a href="https://www.w3.org/MarkUp/Guide/Style">Adicionando um toque de estilo</a> (W3C)</dt>
   <dd>
    Um guia para iniciantes para denominar páginas web com CSS.</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/Common_CSS_Questions">Perguntas CSS comuns</a></dt>
   <dd>
    Perguntas e respostas comuns para iniciantes.</dd>
   <dt>
    <a href="https://codeavengers.com/" title="https://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
   <dd>
    CodeAvengers é a maneira divertida e eficaz de aprender a codificar aplicações web e jogos com HTML, CSS e JavaScript</dd>
  </dl>
  <h3 id="N.C3.ADvel_intermedi.C3.A1rio_2">Nível intermediário</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/CSS/CSS_Reference">Referência CSS</a></dt>
   <dd>
    Referência completa para CSS, com detalhes sobre o suporte pelo Firefox e outros navegadores.</dd>
   <dt>
    <a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges">Desafios CSS</a> (Wikiversity)</dt>
   <dd>
    Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.</dd>
   <dt>
    <a href="https://www.html.net/tutorials/css/">Conceitos CSS Intermediate </a>(HTML.net)</dt>
   <dd>
    Agrupamento, pseudo-classes, e mais.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/css-positioning-101/">CSS Posicionamento 101 </a>(A List Apart)</dt>
   <dd>
    Usando posicionamento, disposição livre de mesa compatível com os padrões.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/progressiveenhancementwithcss/">Aperfeiçoamento progressivo com CSS</a> (A List Apart)</dt>
   <dd>
    Integrar melhoria progressiva em suas páginas web com CSS.</dd>
   <dt>
    <a href="https://www.alistapart.com/articles/fluidgrids/">Grades de Fluidos</a> (A List Apart)</dt>
   <dd>
    Layouts de design que fluidamente redimensionar com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.</dd>
  </dl>
  <h3 id="N.C3.ADvel_avan.C3.A7ado_2">Nível avançado</h3>
  <dl>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_transforms">Usando transformações CSS</a></dt>
   <dd>
    Aplique rotação, inclinação, a escala e tradução utilizando CSS.</dd>
   <dt>
    <a href="https://developer.mozilla.org/pt-BR/docs/CSS/CSS_transitions">CSS Transições</a></dt>
   <dd>
    Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, em vez de ter as alterações entrem em vigor imediatamente.</dd>
   <dt>
    <a href="https://www.html5rocks.com/tutorials/webfonts/quick/">Guia Rápido para implementar Fontes da Web com @font-face</a> (HTML5 Rocks)</dt>
   <dd>
    O recurso @font-face das CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável, e escalável.</dd>
   <dt>
    <a href="https://davidwalsh.name/starting-css">Começar a escrever CSS</a> (David Walsh)</dt>
   <dd>
    Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.</dd>
  </dl>
 </div>
</div>
<p>&nbsp;</p>