1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: Aprendendo desenvolvimento web
slug: Learn
tags:
- Aprender
- CSS
- HTML
- Index
- Iniciante
- Intro
- Novato
- Web
translation_of: Learn
original_slug: Aprender
---
<p>{{LearnSidebar}}</p>
<p class="summary">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.</p>
<p>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 <a href="/pt-BR/">restante da MDN</a> e outros recursos intermediários a avançados que assumem muito conhecimento prévio.</p>
<p>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.</p>
<h2 id="O_que_há_de_novo">O que há de novo?</h2>
<p>O conteúdo da área de aprendizado está sendo adicionado regularmente. Começamos a manter as <a href="/pt-BR/docs/Learn/Release_notes">Notas de versão da área de aprendizado</a> para mostrar o que mudou - verifique regularmente!</p>
<p>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 <a href="https://discourse.mozilla.org/c/mdn">Fórum de discussão</a>.</p>
<h2 id="Onde_começar">Onde começar</h2>
<ul class="card-grid">
<li><span>Iniciante:</span> Se você é um iniciante no desenvolvimento web, recomendamos que você comece trabalhando no nosso módulo <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à Web</a>, que fornece uma introdução prática ao desenvolvimento web.</li>
<li><span>Perguntas específicas:</span> Se você tiver uma pergunta específica sobre desenvolvimento web, nossa seção <a href="/pt-BR/docs/Learn/Common_questions">Perguntas comuns</a> pode ter algo para ajudá-lo.</li>
<li><span>Além do básico:</span> Se você já possui um pouco de conhecimento, o próximo passo é aprender {{glossary ("HTML")}} e {{glossary ("CSS")}} em detalhes: comece com o módulo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> e vá para nosso módulo <a href="/pt-BR/docs/Learn/CSS/First_steps">Primeiros passos com CSS</a>.</li>
<li><span>Passando para o script:</span> Se você já está familiarizado com HTML e CSS ou se interessa principalmente por codificação, deve passar para o {{glossary ("JavaScript")}} ou para o desenvolvimento no servidor. Comece com nossos módulo <a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos com JavaScript</a> e<a href="/pt-BR/docs/Learn/Server-side/First_steps"> Primeiros passos programando o site no servidor</a>.</li>
</ul>
<div class="note">
<p><strong>Nota</strong>: Nosso <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p>
</div>
<p>{{LearnBox({"title":"Entrada aleatória do glossário"})}}</p>
<h2 id="Assuntos_abordados">Assuntos abordados</h2>
<p>A seguir, uma lista de todos os tópicos abordados na área de aprendizado da MDN.</p>
<dl>
<dt><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Intordução à Web</a></dt>
<dd>Fornece uma introdução prática ao desenvolvimento da web para iniciantes.</dd>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">HTML - Estruturando a Web</a></dt>
<dd>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.</dd>
<dt><a href="/pt-BR/docs/Aprender/CSS">CSS - Estilizando a Web</a></dt>
<dd>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.</dd>
<dt><a href="/pt-BR/docs/Learn/JavaScript">JavaScript — Script dinamico do lado do cliente</a></dt>
<dd><span>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.</span></dd>
<dt><a href="/pt-BR/docs/Web/Guide/HTML/Forms">Formulários web - Trabalhando com dados do usuário</a></dt>
<dd>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.</dd>
<dt><a href="/pt-BR/docs/Learn/Accessibility">Acessibilidade - torne a web utilizável por todos</a></dt>
<dd>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.</dd>
<dt><a href="/pt-BR/docs/Aprender/Performance">Desempenho da Web - tornando os sites rápidos e responsivos</a></dt>
<dd>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.</dd>
<dt><a href="/pt-BR/docs/Aprender/Ferramentas_e_teste">Ferramentas e testes</a></dt>
<dd>
<p>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.</p>
</dd>
<dt><a href="/pt-BR/docs/Learn/Server-side">Programação do site no servidor</a></dt>
<dd>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).</dd>
</dl>
<h2 id="Obtendo_nossos_exemplos_de_código">Obtendo nossos exemplos de código</h2>
<p>Os exemplos de código que você encontrará na Área de aprendizado estão<a href="https://github.com/mdn/learning-area/"> disponíveis no GitHub</a>. Se você deseja copiar todos eles para o seu computador, a maneira mais fácil é fazer o <a href="https://github.com/mdn/learning-area/archive/master.zip">download de um ZIP da última ramificação do código mestre</a>.</p>
<p>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:</p>
<ol>
<li><a href="https://git-scm.com/downloads">Instale o Git </a>na sua máquina. Este é o software do sistema de controle de versão, no qual o GitHub trabalha.</li>
<li>Abra o <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">prompt de comando</a> do seu computador (Windows) ou terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
<li>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:
<pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
</li>
<li>Agora você pode entrar no diretório e encontrar os arquivos que procura (usando o Finder / File Explorer ou o <a href="https://en.wikipedia.org/wiki/Cd_(command)">comando cd</a>).</li>
</ol>
<p>Você pode atualizar o repositório <code>learning-area</code> com as alterações feitas na versão principal no GitHub com as seguintes etapas:</p>
<ol>
<li>No prompt de comando / terminal, entre no diretório <code>learning-area</code> usando <code>cd</code>. Por exemplo, se você estivesse no diretório pai:
<pre class="brush: bash notranslate">cd learning-area</pre>
</li>
<li>Atualize o repositório usando o seguinte comando:
<pre class="brush: bash notranslate">git pull</pre>
</li>
</ol>
<h2 id="Contate-nos">Contate-nos</h2>
<p>Se você quiser entrar em contato conosco sobre qualquer coisa, a melhor maneira é enviar uma mensagem para o nosso <a href="https://discourse.mozilla.org/c/mdn">Fórum de discussão</a>. 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.</p>
<p>Se você estiver interessado em ajudar a desenvolver / melhorar o conteúdo, veja <a href="/pt-BR/docs/Aprender/Como_contribuir">como você pode ajudar</a> 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.</p>
<h2 id="Veja_também">Veja também</h2>
<dl>
<dt><a href="https://www.mozilla.org/pt-BR/newsletter/developer/">Boletim informativo para desenvovedores mozilla</a></dt>
<dd>Nosso boletim informativo para desenvolvedores web, que é um excelente recurso para todos os níveis de experiência.</dd>
<dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
<dd>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.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
<dd>Uma grande série de vídeos explicando os fundamentos da web, destinados a iniciantes no desenvolvimento web. Criado por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
<dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
<dd>Um ótimo site interativo para aprender linguagens de programação do zero.</dd>
<dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
<dd>
<p>Teoria básica de programação com um processo de aprendizado gamificado. Principalmente focado em iniciantes.</p>
</dd>
<dt><a href="https://code.org/">Code.org</a></dt>
<dd>Teoria e prática básicas de programação, destinadas principalmente a crianças / iniciantes.</dd>
<dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
<dd>Cursos gratuitos e abertos para o aprendizado de habilidades técnicas, com orientação e aprendizado baseado em projetos.</dd>
<dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
<dd>Site interativo com tutoriais e projetos para aprender desenvolvimento web.</dd>
<dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt>
<dd>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.</dd>
<dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
<dd>Milhares de desafios interativos de JavaScript.</dd>
</dl>
|
