We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

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 configura o ambinte visual, fazendo você usar conceitos e sintaxe importantes, buscando aplicar HTML ao texto, como criar hiperlinks e como usar o 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 para criar uma página web com exemplos de código.
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 simples 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 (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 tabulares 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)
Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, 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
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
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
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, cor, e outras unidades em CSS, herança em cascata, modelos de boxes, e debug em CSS.
Estilizando Boxes
Próximo, 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, e 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
Perquntas e respostas comuns para iniciantes.

Nível intermediário

CSS layout
Até este ponto nós temos visto em CSS fundamental, como estilizar texto, como formatar e manipular caixas dentro do seu conteúdo. Agora neste momento veja como colocar suas caixas no lugar certo em relação à viewport, e a qualquer outro. Nós cobrimos os pré-requisitos necessários 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
Referencia 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, a escala e tradução utilizando CSS.
CSS Transições
Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, em vez de fazer 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

 
JavaScript primeiros passos
Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como "O que é JavaScript?", "O que se parece?", e "O que se pode fazer com isso?", 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 essas coisas no curso, mas apenas de passagem - aqui 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 JavaScript. É interativo e você pode fazer com 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 orientação a objetos é nativa em JavaScript é importante para se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, portanto, 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 explicação de o que são dados JSON e como trabalhar com isto
Client-side web APIs
Quando escreve JavaScript do lado do cliente (client-side) para sites ou aplicações web, voce não vai muito longe para começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro web service ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrara frequentemente eu seu trabalho.
Uma Reintrodução ao JavaScript
Uma recaptulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.
JavaScript Eloquente
Um guia compreencivo para intermediário e avançado em metodologias JavaScript
Falando JavaScript (Dr. Axel Rauschmayer)
For programmers who want to learn JavaScript rápido e prioritário, e para JavaScript programmers who want to deepen their skills and/or look up specific topics.
Para programadores que querem aprender JavaScript rápido e prioritário, e para programadores que querem aprofundar suas habilidades e/ou desejam olhar um tópico específico.
Design Patterns Escencial em JavaScript (Addy Osmani)
An introduction to essential JavaScript design patterns.
Uma introdução de design patterns para JavaScript.

Nível avançado

JavaScript Guide
Um guia completo, atualizado regularmente para 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 as cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, design patterns, padões em geral, padrões de literalmente e construtor, padrões de criação de objetos, padrões de reuso de código, DOM.
Como navegadores trabalham
Um artigo detalhado descrevendo diferentes navegadores navegadores, seus motores, renderização de páginas.
Videos de JavaScript (GitHub)
A collection of JavaScript videos to watch.
Uma coleção de vídeos JavaScript para assistir.

Estendendo o desenvolvimento

WebExtensions
WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.
WebExtensions é um sistema de cross-browser para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensões suportada por Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com apenas com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.

Etiquetas do documento e colaboradores

Última atualização por: rejunges,