Aprendendo desenvolvimento web

Bem-vindo à área de aprendizado da MDN. Este conjunto de artigos tem como objetivo fornecer aos iniciantes no desenvolvimento web tudo o que eles precisam para começar a codificar sites.

O objetivo desta área da MDN não é levá-lo de "iniciante" a "especialista", mas levá-lo de "iniciante" a "confortável". A partir daí, você poderá começar a fazer o seu próprio caminho, aprendendo com o restante da MDN e outros recursos intermediários a avançados que assumem muito conhecimento prévio.

Se você é um iniciante, o desenvolvimento web pode ser desafiador - nós o ajudaremos e forneceremos detalhes suficientes para que você se sinta à vontade e aprenda os tópicos adequadamente. Você deve se sentir em casa, seja um aluno aprendendo desenvolvimento web (sozinho ou como parte de uma classe), um professor que procura materiais para a aula, um hobby ou alguém que só quer entender mais sobre como as tecnologias web funcionam.

O que há de novo?

O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as Notas de versão da área de aprendizado para mostrar o que mudou - verifique regularmente!

Se você tiver dúvidas sobre os tópicos que gostaria de ver cobertos ou que estão faltando, envie-nos uma mensagem em nosso Fórum do discussão.

Onde começar

Nota: Nosso glossário fornece definições de terminologia.

Entrada aleatória do glossário

W3C
O Consórcio da Rede Mundial (tradução livre de World Wide Web Consortium), ou simplesmente W3C é uma sociedade internacional que mantém as regras e  frameworks relacionadas à Web

Assuntos abordados

A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.

Intordução à Web
Fornece uma introdução prática ao desenvolvimento da web para iniciantes.
HTML - Estruturando a Web
HTML é a linguagem que usamos para estruturar as diferentes partes do nosso conteúdo e definir qual é o seu significado ou propósito. Este tópico ensina HTML em detalhes.
CSS - Estilizando a Web
CSS é a linguagem que podemos usar para estilizar e esquematizar nosso conteúdo web, além de adicionar comportamentos como animação. Este tópico fornece uma cobertura abrangente de CSS.
JavaScript — Script dinamico do lado do cliente
JavaScript é a linguagem de script usada para adicionar funcionalidade dinâmica a páginas da web. Este tópico ensina todos os elementos essenciais necessários para se sentir confortável com a escrita e a compreensão do JavaScript.
Formulários web - Trabalhando com dados do usuário
Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados ​​para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário. Nos artigos listados abaixo, abordaremos todos os aspectos essenciais da estruturação, estilo e interação com os formulários web.
Acessibilidade - torne a web utilizável por todos
Acessibilidade é a prática de disponibilizar o conteúdo web para o maior número possível de pessoas, independentemente da deficiência, dispositivo, localidade ou outros fatores de diferenciação. Este tópico fornece tudo o que você precisa saber.
Desempenho da Web - tornando os sites rápidos e responsivos
O desempenho da Web é a arte de garantir que os aplicativos façam download rápido e respondam à interação do usuário, independentemente da capacidade, tamanho da tela, rede ou recursos do dispositivo.
Ferramentas e testes

Este tópico aborda as ferramentas que os desenvolvedores usam para facilitar seu trabalho, como ferramentas de teste entre navegadores, linters, formatadores, ferramentas de transformação, sistemas de controle de versão e ferramentas de implantação.

Programação do site no servidor
Mesmo se você estiver se concentrando no desenvolvimento web do lado do cliente, ainda é útil saber como os servidores e os recursos de código do lado do servidor funcionam. Este tópico fornece uma introdução geral sobre como funciona o lado do servidor e tutoriais detalhados que mostram como criar um aplicativo do lado do servidor usando duas frameworks populares - Django (Python) e Express (Node.js).

Obtendo nossos exemplos de código

Os exemplos de código que você encontrará na Área de aprendizado estão disponíveis no GitHub. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o download de um ZIP da última ramificação do código mestre.

Se você preferir copiar o repositório de uma maneira mais flexível que permita atualizações automáticas, siga as instruções mais complexas:

  1. Instale o Git na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.
  2. Abra o prompt de comando do seu computador (Windows) ou terminal (Linux, macOS).
  3. Para copiar o repositório da área de aprendizado para uma pasta chamada learning-area no local atual para o qual o prompt de comando / terminal está apontando, use o seguinte comando:
    git clone https://github.com/mdn/learning-area
  4. Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o comando cd).

Você pode atualizar o repositório learning-area com as alterações feitas na versão principal no GitHub com as seguintes etapas:

  1. No prompt de comando / terminal, entre no diretório learning-area usando cd. Por exemplo, se você estivesse no diretório pai:
    cd learning-area
  2. Atualize o repositório usando o seguinte comando:
    git pull

Contate-nos

Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso Fórum de discussão. Gostaríamos de ouvir sua opinião sobre qualquer coisa que você acha que está errada ou ausente no site, solicitações de novos tópicos de aprendizado, solicitações de ajuda com itens que você não entende ou qualquer outra pergunta ou preocupação.

Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja como você pode ajudar e entre em contato! Temos o prazer em conversar com você, seja você um aluno, professor, desenvolvedor web experiente ou alguém interessado em ajudar a melhorar a experiência de aprendizado.

Veja também

Boletim informativo para desenvovedores mozilla
Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.
Learn JavaScript
Um excelente recurso para aspirantes a desenvolvedores web - Aprenda JavaScript em um ambiente interativo, com breves lições e testes interativos, guiados por avaliação automatizada. As primeiras 40 lições são gratuitas e o curso completo está disponível por um pequeno pagamento único.
Web demystified
Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por Jérémie Patonnier.
Codecademy
Um ótimo site interativo para aprender linguagens de programação do zero.
BitDegree

Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.

Code.org
Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.
EXLskills
Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.
freeCodeCamp.org
Site interativo com tutoriais e projetos para aprender desenvolvimento web.
Web literacy map
Uma estrutura para alfabetização na web de nível básico e habilidades do século XXI, que também fornece acesso a atividades de ensino classificadas por categoria.
Edabit
Milhares de desafios interativos de JavaScript.