Aprender sobre o desenvolvimento da Web

Bem-vindo à Área de Aprendizagem da MDN. Este conjunto de artigos visa fornecer aos principiantes no desenvolvimento da web com tudo o que eles precisam para começarem a programar websites simples.

O objetivo desta área da MDN não é transformá-lo de "principiante" em "especialista", mas sim, de "principiante" a "competente". A partir daí, deverá conseguir começar o seu próprio trajeto, a aprender com o resto da MDN e outros recursos de nível intermediário e / ou avançado que requerem conhecimento prévio.

Se é principiante, o desenvolvimento da web pode ser um desafio — nós iremos dar-lhe a mão e fornecer-lhe detalhes suficientes para que se sinta confortável e aprenda os tópicos adequadamente. Deve sentir-se confortável, quer seja um estudante a aprender desenvolvimento web (por sua conta ou como parte de uma turma), um professor a pesquisar matéria para aulas, como passatempo, ou alguém que apenas quer saber mais sobre como as tecnologias da web funcionam.

What's new?

O conteúdo a Área de Aprendizagem está a ser acrescentado com regularidade. Começámos a manter Registo de atualizações na Área de aprendizagem (texto em inglês) para mostrar as mudanças mais recentes.

Se tem questões sobre tópicos que gostaria que fossem abordados ou acha que estão em falta, contacte nos através do Discourse forum.

Deseja ser um programador de front-end?

Nos construimos um curso que inclui toda a informação essencial que precisa para atingir o seu objetivo.

Começar a Aprender

Onde começar

  • Principiante: Se é principiante no do desenvolvimento da Web, nós recomendamos que comesse pelo nosso módulo Começar com a Web, que fornece uma introdução prática ao desenvolvimento web.
  • Além do básico: Se já tem algum conhecimento, o próximo passo é aprender HTML e CSS em detalhe: comece com o nosso módulo Introdução a HTML e avance para o nosso módulo Introdução a CSS.
  • Mover para scripting: Se já se sente confortável com HTML e CSS, ou se está interessado principalmente em código, poderá querer seguir para JavaScript ou desenvolvimento do lado do servidor. Comece com os nossos módulos JavaScript - primeiros passos e Primeiros passos do lado do servidor.
  • Frameworks e ferramentas: Após ter um conhecimento forte dos essenciais de HTML, CSS e JavaScript, deve aprender sobre ferramentas de desenvolvimento client-side, e a seguir considere aprender sobre client-side JavaScript frameworks e programação de websites server-side.
     

Nota: O nosso Glossário proporciona definições de terminologia. Ademais, se tiver uma questão específica pode ver a página de Questões Comuns.

Tópicos abrangidos

A seguir, tem uma lista de todos os tópicos que nós abordaremos na área de aprendizagem da MDN.

Primeiros passos na aprendizagem Web
Proporciona uma introdução prática ao desenvolvimento web para os principiantes.
HTML — Estruturar a web
HTML é a Linguagem que é usada para estruturar as diferentes partes dos conteúdos e definir o seu significado ou propósito. Este tópico ensina HTML em detalhe.
CSS — Estilizar a web
CSS é a Linguagem usada para estilizar e formatar o conteúdo Web, como também acrescenta comportamentos como, por exemplo, animações. Este tópico apresenta uma cobertura abrangente de CSS.
JavaScript — Scripts dinâmicos do lado do cliente
JavaScript é a Linguagem usada para adicionar funcionalidades dinâmicas a uma página Web. Este tópico ensina o essencial para se tornar confortável a escrever e compreender JavaScript.
Acessibilidade — tornar a web utilizável por todos
Acessibilidade é a prática de tornar a Web disponível ao maior número possível de pessoas independentemente de alguma incapacidade física, localização, dispositivo ou outro fator qualquer. Este tópico mostrará-lhe tudo o que precisa saber.
Ferramentas e testes
Este tópico abrange as ferramentas que os programadores utilizam para facilitar o seu trabalho, como, por exemplo, ferramentas de testes para diferentes navegadores, linters, formatadores, ferramentas de transformação, sistemas de controlo de versão, ferramentas de deployment, e client-side frameworks de JavaScript.
Programação Server-Side
Mesmo que esteja focado em desenvolvimento client-side, é muito útil saber como funcionam os servidores e como são as características da programação server-side. Este tópico fornece uma introdução geral em como tudo isso funciona e fornece também tutoriais detalhados que mostram como construir uma aplicação server-side a usar duas frameworks populares: Django (Phyton) e Express (Node.js).

Como obter os nossos exemplos de código

Os exemplos de código que irá encontrar na Área de Aprendizagem podem ser encontrados na nossa página no GitHub. Se preferir copiá-los para o seu computador, a maneira mais fácil é descarregar o ficheiro ZIP do código mais recente.

Se preferir copiar o código duma maneira mais flexível que permite atualizações automáticas, pode seguir estas instruções um pouco mais complexas:

  1. Instale Git na sua máquina. Este é o sistema de controlo de versão sob qual o GitHub funciona.
  2. Inscreva se no GitHub. Isto é simples e fácil (mas é em inglês).
  3. Quando se tiver inscrito, entre na sua conta no github.com com o seu nome de utilizador e senha.
  4. Abra o command prompt (Windows) ou terminal (Linux, MacOSX) no seu computador.
  5. Para copiar o repositório da área de ensino para uma pasta chamada learning-area dentro da pasta a qual o command prompt / terminal esta apontado, use o seguinte comando:
    git clone https://github.com/mdn/learning-area
  6. Agora pode entrar na pasta e encontrar os ficheiros que procura (a usar o finder / file explorer ou o comando "cd").
  7. Visite a página de ajuda no GitHub para mais informação.

Também pode atualizar a sua versão do repositório learning-area com quaisquer mudanças feitas na versão master no GitHub com os seguintes passos:

  1. No command prompt / terminal, vá à pasta learning-area usando cd. Por exemplo, se estiver na pasta que a contem:
    cd learning-area
  2. Atualize o repositório usando o comando:
    git pull

Contactar-nos

Se nos deseja contactar sobre o que for, a melhor forma é através do nosso Discourse forum. Nós desejamos saber de tudo que está incorreto ou em falta no site, pedidos para novos tópicos, pedidos de ajuda com items que não entende, ou qualquer outra questão ou preocupação.

Se estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja o artigo Como Contribuir. Estamos interessados em falar com você, seja um aluno, professor, programador da web experiente, ou alguém interessado em ajudar a melhorar a experiência de aprendizagem.

Ver também

Boletim Informativo de Desenvolvimento da Mozilla
O nosso boletim para programadores da web, que é um recurso fantástico para todos os níveis de experiência (escrito em inglês).
Codecademy
Um ótimo site para aprender linguagens de programação, sem necessitar conhecimentos prévios.
Code.org
Teoria e prática básica de programação, focado em ensinar crianças ou principiantes.
EXLskills 
Cursos gratuitos e abertos para o aprendizado de habilidades tecnológicas, com orientação e aprendizagem baseada em projetos.
freeCodeCamp.org
Um website interativo com tutoriais (challenges) e projetos para aprender desenvolvimento web.
Web Literacy Map
Uma framework para conhecimento básico da web & habilidades do século XXI, que também dá acesso a atividades de ensino divididas em categorias.
Atividades de ensino
Uma série de atividades de ensino para uso no ensino (e aprendizagem pessoal) criada pela Mozilla Foundation, cobre tudo desde os básicos da web, até privacidade com JavaScript e hacking o Minecraft.
Edabit
Milhares de desafios interativos de JavaScript.