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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
---
title: Desenvolvedor Web Front-end
slug: Learn/Front-end_web_developer
tags:
- Aprender
- CSS
- Ferramentas
- Front-end
- HTML
- Iniciantes
- JavaScript
- Padrões Web
translation_of: Learn/Front-end_web_developer
original_slug: Aprender/Front-end_web_developer
---
<p>{{learnsidebar}}</p>
<p>Boas vindas a nossa trilha de estudos para front-end web developer.</p>
<p>Aqui nós provemos um curso estruturado que irá lhe ensinar tudo o que você precisa para se tornar um desenvolvedor web front-end. Simplesmente trabalhe em cada sessão, aprendendo novas habilidades (ou melhorando as existentes) à medida que avança. Durante cada sessão, você encontrará exercícios e avaliações para testar sua compreensão antes de avançar.</p>
<h2 id="Temas_cobertos">Temas cobertos</h2>
<p>Os temas gerais abordados são:</p>
<ul>
<li>Configuração básica e aprender como aprender</li>
<li>Padrões Web e melhores práticas (como acessibilidade e compatibilidade cross-browser)</li>
<li>HTML, a linguagem que fornece significado e estrutura ao conteúdo web</li>
<li>CSS, a linguagem usada para estilizar as páginas web</li>
<li>JavaScript, a linguagem de scripts usada para criar funcionalidades dinâmicas na web</li>
<li>Ferramentas usadas para facilitar o desenvolvimento client-side moderno.</li>
</ul>
<p>As diferentes sessões são desenhadas para trabalhar em ordem, mas cada uma também é independente. Se, por exemplo, você já souber HTML, pode avançar rapidamente para a sessão de CSS.</p>
<h2 id="Pré-requisitos"><strong>Pré</strong>-<strong>requisitos</strong></h2>
<p>Você não precisa de nenhum conhecimento prévio para começar este curso. Tudo o que você precisa é um computador executando um navegador web moderno, uma conexão com internet, e vontade de aprender.</p>
<p>Se você não tem certeza se o desenvolvimento front-end é para você, e/ou se deseja uma introdução mais suave antes de começar um curso mais completo, você pode conferir primeiro nossa <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à web</a>.</p>
<h2 id="Conseguindo_ajuda">Conseguindo ajuda</h2>
<p>Nós tentamos deixar os estudos de desenvolvimento web front-end o mais confortável possível, entretanto, você provavelmente chegará em algum ponto em que irá travar por não entender alguma coisa, ou algum código pode não funcionar como deveria.</p>
<p><span>Não entre em pânico. Às vezes, todas as pessoas ficam presas, sejamos iniciantes ou profissionais em desenvolvimento web. O artigo Aprendendo a Aprender (à ser adicionado) irá te prover uma série de dicas e sugestões sobre como procurar informações e se ajudar. E se você continuar travando, sinta-se à vontade para postar uma dúvida em nosso <a href="https://discourse.mozilla.org/c/mdn/learn/">fórum no Discourse</a>.</span></p>
<p><span>Vamos começar. Boa sorte!</span></p>
<h2 id="A_trilha_de_estudos">A trilha de estudos</h2>
<h3 id="Começando">Começando</h3>
<p>Tempo para completar: 1–2 horas</p>
<h4 id="Pré-requisitos_2">Pré-requisitos</h4>
<p>Nada, exceto conhecimentos básicos de informática.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente">Como saberei se posso seguir em frente?</h4>
<p>Não há avaliações nesta parte do curso. Certifique-se de não ignorá-lo — é importante para te preparar para enfrentar os exercícios mais tarde.</p>
<h4 id="Guias_principais">Guias principais</h4>
<ul>
<li><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> — configuração básica das ferramentas (15 min de leitura)</li>
<li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Introdução à Web e aos Padrões Web</a> (45 min de leitura)</li>
<li><a href="/en-US/docs/Learn/Learning_and_getting_help">Aprendendo a buscar ajuda</a> (45 min de leitura)</li>
</ul>
<h3 id="Semântica_e_estrutura_HTML">Semântica e estrutura HTML</h3>
<p>Tempo para completar: 35–50 horas</p>
<h4 id="Pré-requisitos_3">Pré-requisitos</h4>
<p>Nada, exceto conhecimentos básicos de informática e o ambiente de desenvolvimento web básico.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_2">Como saberei se posso seguir em frente?</h4>
<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
<h4 id="Guias_principais_2">Guias principais</h4>
<ul>
</ul>
<ul>
<li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> (15–20 horas de leitura/exercícios)</li>
<li><a href="/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding">Multimídia e Incorporação</a> (15–20 horas de leitura/exercícios)</li>
<li><a href="/pt-BR/docs/Aprender/HTML/Tables">Tabelas em HTML</a> (5–10 horas de leitura/exercícios)</li>
</ul>
<h3 id="Estilizando_e_layout_com_CSS">Estilizando e layout com CSS</h3>
<p>Tempo para completar: 90–120 horas</p>
<h4 id="Pré-requisitos_4">Pré-requisitos</h4>
<p>É recomendável que você possua o conhecimento básico de HTML antes de começar aprender CSS. Você pode estudar nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> primeiro.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_3">Como saberei se posso seguir em frente?</h4>
<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
<h4 id="Guias_principais_3">Guias principais</h4>
<ul>
</ul>
<ul>
</ul>
<ul>
<li><a href="/pt-BR/docs/Learn/CSS/First_steps">Primeiros passos com CSS</a> (10–15 horas de leitura/exercícios)</li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks">Blocos de construção CSS</a> (35–45 horas de leitura/exercícios)</li>
<li><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando Texto</a><a href="/pt-BR/docs/Aprender/CSS/Estilizando_texto">stilizando Texto</a> (15–20 horas de leitura/exercícios)</li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout </a><a href="/pt-BR/docs/Learn/CSS/CSS_layout"> </a>(30–40 horas de leitura/exercícios)</li>
</ul>
<h4 id="Conteúdo_adicional">Conteúdo adicional</h4>
<ul>
<li><a href="/pt-BR/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li>
</ul>
<h3 id="Interatividade_com_JavaScript">Interatividade com JavaScript</h3>
<p>Tempo para completar: 135–185 horas</p>
<h4 id="Pré-requisitos_5">Pré-requisitos</h4>
<p>É recomendável que você possua o conhecimento básico de HTML antes de começar aprender JavaScript. Você pode estudar nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> primeiro.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_4">Como saberei se posso seguir em frente?</h4>
<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
<h4 id="Guias_principais_4">Guias principais</h4>
<ul>
</ul>
<ul>
</ul>
<ul>
<li><a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos com JavaScript</a> (30–40 horas de leitura/exercícios)</li>
<li><a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Elementos construtivos do Javascript</a> (25–35 horas de leitura/exercícioss)</li>
<li><a href="/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">APIs web do lado cliente</a> (30–40 horas de leitura/exercícios)</li>
<li><a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em Javascript</a> (25–35 horas de leitura/exercícios)</li>
<li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a> (25–35 horas de leitura/exercícios)</li>
</ul>
<h3 id="Formulários_Web_—_Trabalhando_com_dados_de_usuário">Formulários Web — Trabalhando com dados de usuário</h3>
<p>Tempo para completar: 40–50 horas</p>
<h4 id="Pré-requisitos_6">Pré-requisitos</h4>
<p>Formulários demandam conhecimento em HTML, CSS e JavaScript para o seu bom uso. Eles são complexos e, portanto, recebem tratamento separado.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_5">Como saberei se posso seguir em frente?</h4>
<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
<h4 id="Guias_principais_5">Guias principais</h4>
<ul>
</ul>
<ul>
</ul>
<ul>
<li><a href="/pt-BR/docs/Web/Guide/HTML/Forms">Formulários da Web - Trabalhando com dados do usuário</a> (40–50 horas)</li>
</ul>
<h3 id="Fazendo_uma_web_para_todas_as_pessoas">Fazendo uma web para todas as pessoas</h3>
<p>Tempo para completar: 60–75 horas</p>
<h4 id="Pré-requisitos_7">Pré-requisitos</h4>
<p>É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão — muitas das técnicas e melhores práticas contidas aqui utilizam várias tecnologias.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_6">Como saberei se posso seguir em frente?</h4>
<p>As avaliações em cada módulo são projetadas para testar seu conhecimento sobre o assunto — a conclusão de cada uma provará que você pode passar para o próximo.</p>
<h4 id="Guias_principais_6">Guias principais</h4>
<ul>
</ul>
<ul>
</ul>
<ul>
<li><a href="/pt-BR/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross Browser Teste</a> (25–30 horas de leitura/exercícioss)</li>
<li><a href="/pt-BR/docs/Web/Acessibilidade">Acessibilidade</a> (20–25 horas de leitura/exercícios)</li>
</ul>
<h3 id="Ferramentas_modernas">Ferramentas modernas</h3>
<p>Tempo para completar: 55–90 horas</p>
<h4 id="Pré-requisitos_8">Pré-requisitos</h4>
<p>É uma boa ideia que você saiba HTML, CSS e JavaScript antes de ler esta sessão, as ferramentas citadas aqui utilizam várias dessas tecnologias.</p>
<h4 id="Como_saberei_se_posso_seguir_em_frente_7">Como saberei se posso seguir em frente?</h4>
<p>Não temos avaliações específicas neste conjunto de módulos, mas os tutoriais de estudo de caso no final dos 2º e 3º módulos irão te preparar bem para compreender os elementos essenciais das ferramentas modernas.</p>
<h4 id="Guias_principais_7">Guias principais</h4>
<ul>
</ul>
<ul>
</ul>
<ul>
<li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 hour read)</li>
<li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 horas de leitura)</li>
<li>
<p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 horas de leitura/exercícios)</p>
</li>
</ul>
|