---
title: Front-end web developer
slug: Learn/Front-end_web_developer
translation_of: Learn/Front-end_web_developer
---
<p>{{learnsidebar}}</p>

<p>Bem-vindos ao roteiro de aprendizado em desenvolvimento web front-end!</p>

<p>Aqui disponibilizamos tudo o que precisas para te tornares um desenvolvedor Web front-end. Simplesmente trabalha cada secção deste curso, aprendendo novas habilidades (ou melhorando as que já tens) á medida que avanças. <span>Cada secção inclui exercicios e avaliações para testar a tua compreensão antes de avançares para proxima.</span></p>

<h2 id="Temas_abrangidos">Temas abrangidos</h2>

<p>Os temas abrangidos são:</p>

<ul>
 <li>Preparação básica e aprender como estudar</li>
 <li>Normas da Web e boas práticas (como por exemplo acessibilidade e compatibilidade entre navegadores)</li>
 <li>HTML, a linguaguem de marcacao que proporciona a estrutura do conteudo web e seu significado</li>
 <li>CSS, a linguaguem usada para estilizar as paginas web</li>
 <li>JavaScript, a linguagem de definicoes usada para criar interacoes na web</li>
 <li>Ferramentas que sao usadas para facilitar o desenvolvimento web moderno do lado do cliente</li>
</ul>

<p>Sinta-se livre para trabalhar nas seccoes por ordem, mas cada uma e tambem independente. Por exemplo, se voce ja domina HTML, podes seguir para a seccao de CSS.</p>

<h2 id="Pre_requisitos">Pre requisitos</h2>

<p>Voce nao precisa de nenhum conhecimento anterior para este curso. Tudo que precisas e de um computador que possa operar um navegador moderno, conexao a internet, e boa vontade para aprender.</p>

<p>Se nao estiveres seguro de que desenvolvimento web front-end e para si, e/ou voce quer uma introducao mais gentil antes de iniciar um curso mais longo e completo, trabalhe no nosso modulo <a href="/en-US/docs/Learn/Getting_started_with_the_web">Iniciando com a web</a> (ingles) primeiramente.</p>

<h2 id="Obtendo_ajuda">Obtendo ajuda</h2>

<p>Nos tentamos tornar o aprendizado de desenvolvimento web front-end mais confortavel possivel, mas provavelmente voce ainda fique bloqueado porque nao percebe alguma coisa, ou algum codigo ainda nao esteje funcionando.</p>

<p>Nao entre em panico. Todos nos bloqueamos, quando somos iniciantes ou desenvolvedores web profissionais. O artigo <a href="/en-US/docs/Learn/Learning_and_getting_help">Estudando e obtendo ajuda</a> (ingles) e proporcionado a ti com uma serie de dicas para encontrares informacoes e auto ajudas. Se ainda assim continuas bloqueado, sinta se avontade para postar uma pergunta no nosso <a href="https://discourse.mozilla.org/c/mdn/learn/">Forum discussao</a> (ingles).</p>

<p>Vamos iniciar. Boa sorte!</p>

<h2 id="O_roteiro_de_aprendizagem">O roteiro de aprendizagem</h2>

<h3 id="Iniciando">Iniciando</h3>

<p>Tempo de duracao: 1.5–2 horas</p>

<h4 id="Pre_requisitos_2">Pre requisitos</h4>

<p>Nada mais, excepto um basico dominio computacional.</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar">Como saberei que estou pronto para continuar?</h4>

<p>Nao ha avaliacoes nesta seccao do curso. Mas certifique se de nao ignora-la. E importante que voce esteja preparado para trabalhar com os proximos exercicios do curso.</p>

<h4 id="Guias">Guias</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando softwares basicos</a> (ingles)— configurando as ferramentas basicas (15 min leitura)</li>
 <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Segundo plano da web e seus principios</a> (ingles)—(45 min leitura)</li>
 <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Aprendendo e obtendo ajuda</a> (ingles)—(45 min leitura)</li>
</ul>

<h3 id="Semantica_e_estruturas_com_HTML">Semantica e estruturas com HTML</h3>

<p>Tempo de duracao: 35–50 horas</p>

<h4 id="Pre_requisitos_3">Pre requisitos</h4>

<p>Nada mais, excepto um basico dominio computacional e um basico ambiente de desenvolvimento web.</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_2">Como saberei que estou pronto para continuar?</h4>

<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>

<h4 id="Modulos">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles)—(15–20 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and incorporacao</a> (ingles)—(15–20 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/HTML/Tables">tabelas com HTML</a> (ingles)—(5–10 horas leitura/exercicios)</li>
</ul>

<h3 id="Estilizando_e_organizando_com_CSS">Estilizando e organizando com CSS</h3>

<p>Tempo de duracao: 90–120 horas</p>

<h4 id="Pre_requisitos_4">Pre requisitos</h4>

<p>E recomendavel que voce tenha um conhecimento basico sobre HTML antes de comecar a aprender CSS. Deves no minimo estudar primeiramente a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles).</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_3">Como saberei que estou pronto para continuar?</h4>

<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>

<h4 id="Modulos_2">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS primeiros passos</a> (ingles)–(10–15 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS construindo blocos</a> (ingles)–(35–45 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text">Estilizando textos</a> (ingles)–(15–20 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS organizacao</a> (ingles)–(30–40 horas leitura/exercicios)</li>
</ul>

<h4 id="Fontes_extras">Fontes extras</h4>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS organizacao cookbook</a> (ingles)</li>
</ul>

<h3 id="Interacao_com_JavaScript">Interacao com JavaScript</h3>

<p>Tempo de duracao: 135–185 horas</p>

<h4 id="Pre_requisitos_5">Pre requisitos</h4>

<p>E recomendavel que voce tenha um conhecimento basico sobre HTML antes de comecar a aprender JavaScript. Deves no minimo estudar primeiramente a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducao ao HTML</a> (ingles).</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_4">Como saberei que estou pronto para continuar?</h4>

<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>

<h4 id="Modulos_3">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeiros passos</a> (ingles)–(30–40 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript construindo blocos</a> (ingles)–(25–35 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducao aos objectos JavaScript</a> (ingles)–(25–35 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 horas leitura/exercicios)</li>
</ul>

<h3 id="Formularios_web_—_Trabalhando_com_dados_de_usuario">Formularios web — Trabalhando com dados de usuario</h3>

<p>Tempo de duracao: 40–50 horas</p>

<h4 id="Pre_requisitos_6">Pre requisitos</h4>

<p>Formularios requerem conhecimento sobre HTML, CSS e JavaScript. A complexidade em trabalhar com formularios fazem deste um topico dedicado.</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_5">Como saberei que estou pronto para continuar?</h4>

<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>

<h4 id="Modulos_4">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Forms">Formularios web </a>(ingles)–(40–50 hours)</li>
</ul>

<h3 id="Fazendo_o_trabalho_de_web_para_todos">Fazendo o trabalho de web para todos</h3>

<p>Tempo de duracao: 60–75 horas</p>

<h4 id="Pre_requisitos_7">Pre requisitos</h4>

<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao. Inclui outras tecnicas e boas praticas em contacto com multiplas tecnologias.</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_6">Como saberei que estou pronto para continuar?</h4>

<p>As avaliacoes em cada modulo estao designadas para testar o teu conhecimento sobre a importancia do assunto.  A conclusao das avaliacoes confirma que estas pronto a seguir para o proximo modulo.</p>

<h4 id="Modulos_5">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testando a Compatibilidade entre navegadores</a> (ingles)–(25–30 horas leitura/exercicios)</li>
 <li><a href="/en-US/docs/Learn/Accessibility">Acessibilidade</a> (ingles)–(20–25 horas leitura/exercicios)</li>
</ul>

<h3 id="Ferramentas_modernas">Ferramentas modernas</h3>

<p>Tempo de duracao: 55–90 horas</p>

<h4 id="Pre_requisitos_8">Pre requisitos</h4>

<p>Seria uma otima ideia conhecer sobre HTML, CSS e JavaScript antes de trabalhar nesta seccao, tal como ferramentas abordadas que trabalham em conjunto com muitas destas tecnologias.</p>

<h4 id="Como_saberei_que_estou_pronto_para_continuar_7">Como saberei que estou pronto para continuar?</h4>

<p>Nao ha avaliacoes especificas nos artigos definidos neste modulo. Os tutoriais de estudo de caso no final do segundo e terceiro modulo preparar-te-ao para dominar o essencial sobre as ferramentas modernas.</p>

<h4 id="Modulos_6">Modulos</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git i GitHub</a> (ingles)–(5 horas leitura)</li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Compreendendo as ferramentas para desenvolvimento web client-side</a> (ingles)–(20–25 horas leitura)</li>
 <li>
  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Compreendendo as estruturas client-side JavaScript</a> (ingles)–(30-60 horas leitura/exercicios)</p>
 </li>
</ul>