{"id":21130885,"url":"https://github.com/milenacarecho/guiadesenvolvedoraweb","last_synced_at":"2026-03-16T19:33:11.674Z","repository":{"id":112686137,"uuid":"277165796","full_name":"MilenaCarecho/GuiaDesenvolvedoraWeb","owner":"MilenaCarecho","description":"Guia de como se tornar uma desenvolvedora front end.","archived":false,"fork":false,"pushed_at":"2020-08-22T23:26:05.000Z","size":2215,"stargazers_count":338,"open_issues_count":3,"forks_count":21,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-09T22:16:01.335Z","etag":null,"topics":["css3","desenvolvimento-web","guia-de-estudo","html5","javascript","material-de-estudo","web","web-development"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MilenaCarecho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-04T18:35:46.000Z","updated_at":"2025-03-29T14:02:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"6bb9c490-2fe9-4ad4-a784-72a092740092","html_url":"https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2FGuiaDesenvolvedoraWeb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2FGuiaDesenvolvedoraWeb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2FGuiaDesenvolvedoraWeb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MilenaCarecho%2FGuiaDesenvolvedoraWeb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MilenaCarecho","download_url":"https://codeload.github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119287,"owners_count":21050755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","desenvolvimento-web","guia-de-estudo","html5","javascript","material-de-estudo","web","web-development"],"created_at":"2024-11-20T05:40:38.974Z","updated_at":"2026-03-16T19:33:11.616Z","avatar_url":"https://github.com/MilenaCarecho.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# O que é o Guia Desenvolvedora Web \u003ca name=\"id1\"\u003e\u003c/a\u003e\n\u003e*\"Comece de onde você está. Use o que você tiver. Faça o que você puder\" – Arthur Ashe*\n\n\nFala Devs, tudo bem? :vulcan_salute:\n\nVim compartilhar com vocês como estou me tornando uma desenvolvedora front-end. :dart:\n\nDecidi criar esse guia porque na internet existe muito conteúdo ao nosso dispor, essa quantidade de material, quando somos iniciantes, muitas vezes pode nos confundir e até atrapalhar ao invés de ajudar. \n\n- [ ] [Você é um colecionador de cursos?](https://www.youtube.com/watch?v=mUqo8a1FDSM\u0026list=PLHz_AreHm4dk_kkE0WS7010x8_AsU7twX\u0026index=1)\n\n\u003e\"*O grande segredo para se tornar um bom programador é deixar o imediatismo de lado e entender que seu cérebro vai precisar de tempo para absorver e entender as coisas. Se você estiver fazendo algo e parecer que isso é muito difícil, apenas pare, reflita no pouco que conseguiu aprender sobre isso e volte mais tarde ou no outro dia. Você verá que tudo é questão de ter paciência com o seu tempo natural de aprendizado e perceverança nos estudos.*\"\n\n## O que você vai encontrar nesse guia: \u003ca name=\"id2\"\u003e\u003c/a\u003e\n\n* Cursos \n* Artigos\n* Vídeos \n* Desafios \n* Idéias de projetos\n\nTodo o material utilizado neste guia é gratuito.:money_with_wings:\n\nNão pule etapas, o intuito desse guia é justamente fornecer a ordem e um cronograma para seus estudos.\n\nRealize os exercícios e desafios propostos :rocket:\n\n\n## Índice\n\n* [O que é o Guia Desenvolvedora Web](#id1)\n* [O que você vai encontrar nesse guia](#id2)\n* [Como usar o Guia](#id3)\n* [Não sinta que você não é inteligente o suficiente](#id4)\n* [Por que ser um programador?](#id5)\n* [O que faz um programador Front end](#id6)\n* **[Git e Github](#id7)**\n   * [Material de estudo](#git1)\n   * [Exercicios](#git2)\n   * [Desafios](#git3)\n* **[HTML5](#id8)**\n   * [Material de estudo](#html1)\n   * [Exercicios](#html2)\n   * [Desafios](#html3)\n* **[CSS3](#id9)**\n   * [Material de estudo](#CSS1)\n   * [Exercicios](#CSS2)\n   * [Desafios](#CSS3)\n* **[Design responsivo](#id10)**\n   * Material de estudo \n   * Exercicios \n   * Desafios\n* **[Logica de programação](#id11)**\n   * Material de estudo \n   * Exercicios \n   * Desafios\n* **[JavaScript](#id)**\n   * Material de estudo \n   * Exercicios \n   * Desafios\n\n\n## Como usar esse guia ? :books:\u003ca name=\"id3\"\u003e\u003c/a\u003e\n\n## Não sinta que você não é inteligente o suficiente :brain: \u003ca name=\"id4\"\u003e\u003c/a\u003e\n\n\u003e*\"O melhor momento para ter começado algo era há uns dez anos atrás, o segundo melhor momento é agora.\"*\n\nMuitas vezes, principalmente quando somos iniciantes, ao pensar em entrar para o mundo da programação, nos vem a sensação de que não somos inteligentes o suficiente, ou não temos capacidade para isso. \n\nEu particularmente sofri (e as vezes ainda sofro) com isso, uma eterna sensação de que não nasci pra isso, como se pra programar fosse necessario um certo dom, o que claramente não é verdade. \n\nComo esse é um pensamento sabotador e que esta presente em quase todos nós, montei esse topico com alguns videos e artigos que me ajuda a não cair no mito do programador Genio. \n\nÉ importante deixar claro que programação não é facil, mas tambem não é dificil, não desista. \n\n\n* Videos (Pt-Br)\n- [ ] [Aprender programação sem ter dom da programação](https://www.youtube.com/watch?v=ZtMzB5CoekE)\n- [ ] [Programação é dificil](https://www.youtube.com/watch?v=wvPAODEdQNI)\n\n\n\n* Videos (Inglês)\n- [ ] [It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech](https://www.youtube.com/watch?v=1i8ylq4j_EY)\n- [ ] [The Myth of the Genius Programmer](https://www.youtube.com/watch?v=0SARbwvhupQ)\n\n* Artigos \n- [ ] [Ninguém simplesmente aprende a programar](https://www.programaria.org/ninguem-simplesmente-aprende-como-programar/)\n- [ ] [Programar não requer talento ou paixão.](http://kwan.pt/pt/blog/programar-nao-requer-talento#:~:text=%22O%20mito%20do%20%22programador%20g%C3%A9nio%22%20%C3%A9%20extremamente%20perigoso.\u0026text=Como%20resultado%2C%20os%20programadores%20t%C3%AAm,enorme%20na%20qualidade%20de%20vida.)\n- [ ] [Programar é muito fácil](https://medium.com/@julia.maschion/programar-%C3%A9-muito-f%C3%A1cil-ddf610ca6f18)\n\n## Por que ser um programador?:desktop_computer: \u003ca name=\"id5\"\u003e\u003c/a\u003e\n\n\u003e*\"Programação é uma linguagem, assim como português ou inglês. É o “idioma” do computador. Mesmo que você não queira seguir uma carreira em tecnologia, aprender a programar estimula o desenvolvimento de diversas habilidades.\"*\n\nAbaixo listei alguns vídeos e leituras que da aquele UP pra começar :rocket:\n\n* Vídeos \n- [ ] [Por que todos deveriam aprender a programar?](https://www.youtube.com/watch?v=mHW1Hsqlp6A)\n- [ ] [Seja um Programador](https://www.youtube.com/watch?v=S9uPNppGsGo)\n- [ ] [Como Virar Programador](https://www.youtube.com/watch?v=R6NCG9gqcX0)\n\n* Artigos \n- [ ] [Por que aprender a programar?](https://recode.org.br/por-que-aprender-a-programar/)\n- [ ] [Por que deveríamos saber programar ?Mesmo se não for trabalhar com isso!](https://medium.com/codando/por-que-deveriamos-saber-programar-mesmo-se-n%C3%A3o-for-trabalhar-com-isso-d9ac0e900f7b)\n\n## O que faz um programador Front end? :hippopotamus: \u003ca name=\"id6\"\u003e\u003c/a\u003e\n\n\u003e*Desenvolvimento web front-end é a prática de converter dados em uma interface gráfica, através do uso de HTML, CSS e JavaScript, para que os usuários possam visualizar e interagir com esses dados. - Wikipedia*\n\nAbaixo listei dois vídeos para ajudar a entender o que faz um desenvolvedor front-end\n\n- [ ] [O QUE É UM DESENVOLVEDOR FRONT-END? ](https://www.youtube.com/watch?v=v0cN26_1d3I)\n- [ ] [O que faz uma desenvolvedora front-end?](https://www.youtube.com/watch?v=ZY3-MFxVdEw)\n\n## Git e Github :trident: \u003ca name=\"id7\"\u003e\u003c/a\u003e\n\nBom, finalmente depois de uma boa introdução ao mundo da programação, chegamos ao primeiro curso, espero que você não tenha pulado o contéudo acima :triumph:\n\nO primeiro curso deste guia é o de Git e Github. Mas por quê? \nAntes de começar de fato a criar projetos e aprender o conteúdo, é importante você saber utilizar o git e como se comportar no github para tirar o maior proveito dessa rede e já começar a demontrar suas habilidades para o mundo :wink:\n\n## Material de estudo \u003ca name=\"git1\"\u003e\u003c/a\u003e\n   #### Video\n   - [ ]  [Curso de Git e GitHub: Grátis, pratico e sem usar comandos no terminal](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA)\n\n   #### Leitura\n   - [ ]  [Slides](https://github.com/gustavoguanabara/git-github/tree/master/slides-aulas)\n   - [ ]  [Guia markdown](https://github.com/gustavoguanabara/git-github/blob/master/manuais-PDF/guia-markdown.pdf)\n   - [ ]  [A importância do Github para Desenvolvedores](https://willianjusten.com.br/a-importancia-do-github-para-desenvolvedores/)\n   - [ ]  [Git e a importância de versionar um projeto](https://www.hostgator.com.br/blog/git-o-sistema-de-controle/)\n   - [ ]  [Como fazer um README.md BONITÃO](https://medium.com/@raullesteves/github-como-fazer-um-readme-md-bonit%C3%A3o-c85c8f154f8)\n\n## Exercicios \u003ca name=\"git2\"\u003e\u003c/a\u003e\n   - [ ]  Crie sua conta no [Github](https://github.com/)\n   - [ ]  Siga o meu [perfil](https://github.com/MilenaCarecho) \n   - [ ]  Dê uma estrela no [Guia](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb)\n   - [ ]  [Divulgue seu perfil](https://github.com/gustavoguanabara/git-github/issues/3)\n\n## Desafios \u003ca name=\"git3\"\u003e\u003c/a\u003e\n   - [ ]  Clone esse repositorio e utilize ele como cronograma \u003ca name=\"id3\"\u003e\u003c/a\u003e\n\n## HTML5 :bone: \u003ca name=\"id8\"\u003e\u003c/a\u003e\n\nBom, o que falar sobre nosso querido HTML5 ? \n\nHTML5 é uma linguagem de marcação hipertexto utilizada para criar sites.\n\nEu acho importante seguir a seguinte ordem para o estudo de html5: \n1. Conhecer a internet e o funcionamento dela, pra isso separei 3 videos do curso de HTML5 do *Curso em vídeo*, e é por lá que você começa.\n2. Fazer o curso de HTML5 para iniciantes da NodeStudio (curso gratuido com certificado :heart_eyes:)\n3. realizar os exercícios e desafios \n4. Em paralelo realizar o curso de [Lógica de programação](#id11)\n\n   Caso você tenha alguma dificuldade na realização dos exercícios, consulte os documentos anexos no tópico *Leitura* :mag_right:\n\nTem muito conteúdo na internet de HTML5, muitos cursos gratuitos. \n\nMas não se prenda a eles, a melhor forma de aprender é colocando a mão na massa, o curso linkado ja fornece a base necessária para que você aprenda a realizar suas buscas na documentação da W3School ou na apostila de HTML :relaxed:\n\n\n## Material de estudo \u003ca name=\"html1\"\u003e\u003c/a\u003e\n\n   #### Video\n   - [ ] [História da internet](https://www.youtube.com/watch?v=rsFCVjr5yxc\u0026t=2s)\n   - [ ] [História do HTML](https://www.youtube.com/watch?v=NSmapCNcSyI)\n   - [ ] [Como funciona a internet](https://www.youtube.com/watch?v=LMfeZ6XD0No\u0026t=3s)\n   - [ ] [Curso de HTML5 para iniciantes](https://www.nodestudio.com.br/curso/curso-de-html5)\n   - [ ] [SEO E META TAGS SOCIAIS COM HTML](https://www.youtube.com/watch?v=YRGLRFJh4fM)\n   - [ ] [HTML - Basics and Good Practices PT-Br](https://www.youtube.com/watch?v=wi9jZJZYSIY)\n\n\n   #### Leitura\n   - [ ] [Entenda o que é HTTP](https://rockcontent.com/blog/http/)\n   - [ ] [Como os navegadores funcionam](https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#:~:text=A%20funcionalidade%20principal%20de%20um,ou%20outro%20tipo%20de%20arquivo.)\n   - [ ] [DNS: o que é, como funciona](https://rockcontent.com/blog/dns/)\n   - [ ] [O que é nome de domínio](https://pt.wikipedia.org/wiki/Nome_de_dom%C3%ADnio)\n   - [ ] [O QUE É SERVIÇO DE HOSTING](https://blog.intnet.com.br/o-que-e-servico-de-hosting/)\n   - [ ] [SEO básico](https://rockcontent.com/blog/seo-basico/)\n   - [ ] [7 Tags HTML Que Diferenciam um Profissional SEO de um Amador](https://neilpatel.com/br/blog/tags-htm/)\n   - [ ] [HTML: Boas práticas em acessibilidade](https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML)\n   - [ ] [Como escrever HTML com acessibilidade](https://medium.com/reprogramabr/como-escrever-html-com-acessibilidade-eb5fb1a6af5a)\n   - [ ] [W3Schools](https://www.w3schools.com/html/default.asp)\n   - [ ] [Apostila de HTML](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/HTML5/Cursos/HTML5/Apostila%20HTML.pdf)\n\n\n#### Após estudar o material acima, veja se consegue responder com facilidade as perguntas abaixo, caso alguma das perguntas seja um desafio pra você, recomendo que reveja e procure mais sobre o tema para fixação :nerd_face:\n\n   * Como funciona a internet?\n   * O que é HTTP? \n   * O que são os navegadores e como eles funcionam?\n   * O que é DNS e como ele funciona? \n   * O que é um nome de dominio?\n   * O que é hosting? \n   * O que é SEO e como utilizar com HTML?\n   * Como ter acessibilidade com HTML? \n   \n\n## Exercicios \u003ca name=\"html2\"\u003e\u003c/a\u003e\n\n   - [ ] **[Exercício 01](https://codepen.io/milenacarecho/full/PoZRdME)\u003cbr\u003e**\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d001/desafio-mensagens.pdf) para mais informações sobre o exercício 01*\n   - [ ] **[Exercício 02](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio2.PNG)**\u003cbr\u003e\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d002/desafio-imagens.pdf) para mais informações sobre o exercício 02*\n   - [ ] **[Exercício 03](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio3.PNG)**\u003cbr\u003e\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d003/desafio-mapa-mundi.pdf) para mais informações sobre o exercício 03*\n   - [ ] **[Exercício 04](https://codepen.io/milenacarecho/full/oNbyEpL)**\u003cbr\u003e\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d004/desafio-emoji.pdf) para mais informações sobre o exercício 04*\n   - [ ] **[Exercício 05]()**\u003cbr\u003e\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d005/desafio-social.pdf) para mais informações sobre o exercício 05*\n   - [ ] **[Exercício 06]()**\u003cbr\u003e\n   *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d006/desafio-tags.pdf) para mais informações sobre o exercício 05*\n   - [ ] **[Exercício 07](https://codepen.io/milenacarecho/full/VweQdpQ)**\u003cbr\u003e\n   *Clique [aqui](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio7.pdf) para mais informações sobre o exercício 07*\n   \n#### Tente resolver o exercicio sozinha (o), não vá direto ao exercicio resolvido :frowning_face:\n\n   * [*Exercicio 01 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio1)\n   * [*Exercicio 02 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio2)\n   * [*Exercicio 03 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio3)\n   * [*Exercicio 04 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio4)\n   * [*Exercicio 05 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio5)\n   * [*Exercicio 06 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio6)\n   * [*Exercicio 07 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/HTML5/Cursos/HTML5/ExerciciosResolvidos/Exercicio7)\n   \n\n## Desafios \u003ca name=\"html3\"\u003e\u003c/a\u003e\n\n   * Não vai ter desafios no módulo HTML5, eu quis fazer o módulo HTML mais curtinho porque é melhor treinar ele com o complemento de CSS. Mas vou compensar isso colocando bastante desafios no módulo CSS3 :nerd_face:\n\n## CSS3 :nail_care: \u003ca name=\"id\"\u003e\u003c/a\u003e\n\n## Material de estudo \u003ca name=\"css1\"\u003e\u003c/a\u003e \n\n   #### Video \n   - [ ] [Curso de CSS3 para iniciantes](https://www.nodestudio.com.br/curso/curso-de-css3)\n\n   #### Leitura\n\n## Desafios \u003ca name=\"css3\"\u003e\u003c/a\u003e\n\n- [ ] [Desafio 30 dias de CSS](https://github.com/MilenaCarecho/30diasDeCSS)\n\n## Desing responsivo\u003ca name=\"id\"\u003e\u003c/a\u003e\n\n## Material de estudo\n\n   #### Video\n\n- [ ] [Curso de Design Responsivo](https://www.nodestudio.com.br/curso/curso-de-design-responsivo)\n\n   #### Leitura\n\n   \n## Logica de programação \u003ca name=\"id11\"\u003e\u003c/a\u003e \n\n## Material de estudo\n\n   #### Video \n\n   #### Leitura\n\n## Desafios \n\n\n\n## Javascript\u003ca name=\"id\"\u003e\u003c/a\u003e \n\n## Material de estudo  \n\n   #### Video \n\n   #### Leitura\n\n## Desafios \n\n\n## Contribuição \n\nVocê tem alguma sugestão de como podemos melhorar esse projeto em geral? Me informe! Gostaria muito de ouvir seus comentários!\nQuaisquer contribuições são muito apreciadas.:smile:\n\n## Espalhe a palavra\n\nSe as informações deste repositório foram úteis para você de alguma forma, certifique-se de dar uma estrela 🌟, dessa forma, outras pessoas podem encontrá-lo e se beneficiar também! Juntos, podemos crescer e melhorar nossa comunidade!\n\n\n\n\n\n\n\n\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilenacarecho%2Fguiadesenvolvedoraweb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilenacarecho%2Fguiadesenvolvedoraweb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilenacarecho%2Fguiadesenvolvedoraweb/lists"}