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 orestante 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 asNotas 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 nossoFórum de discussão.

Onde começar

• Iniciante: Se você é um iniciante no desenvolvimento web, recomendamos que você comece trabalhando no nosso móduloIntrodução à Web, que fornece uma introdução prática ao desenvolvimento web.
• Perguntas específicas: Se você tiver uma pergunta específica sobre desenvolvimento web, nossa seçãoPerguntas comuns pode ter algo para ajudá-lo.
• Além do básico: Se você já possui um pouco de conhecimento, o próximo passo é aprenderHTML eCSS em detalhes: comece com o móduloIntrodução ao HTML e vá para nosso móduloPrimeiros passos com CSS.
• Passando para o script: Se você já está familiarizado com HTML e CSS ou se interessa principalmente por codificação, deve passar para oJavaScript ou para o desenvolvimento no servidor. Comece com nossos móduloPrimeiros passos com JavaScript ePrimeiros passos programando o site no servidor.

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ãodisponíveis no GitHub. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer odownload 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 oprompt 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:

   bash

   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 ocomando cd).

Você pode atualizar o repositóriolearning-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óriolearning-area usandocd. Por exemplo, se você estivesse no diretório pai:

   bash

   cd learning-area

2. Atualize o repositório usando o seguinte comando:

   bash

   git pull

Contate-nos

Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nossoFó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, vejacomo 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 porJé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.