├── Cursos └── HTML5 │ ├── ExerciciosResolvidos │ ├── Exercicio5 │ │ └── Exercicio5.html │ ├── Exercicio6 │ │ └── Exercicio6.html │ ├── Exercicio2 │ │ ├── img │ │ │ ├── icone.png │ │ │ ├── favicon.ico │ │ │ ├── favicon.png │ │ │ ├── github-g.png │ │ │ ├── github-m.png │ │ │ ├── github-p.png │ │ │ ├── github-gg.png │ │ │ └── github-pp.png │ │ └── Exercicio2.html │ ├── Exercicio3 │ │ ├── img │ │ │ ├── icone.png │ │ │ ├── mapa01.png │ │ │ ├── mapa02.png │ │ │ ├── mapa03.png │ │ │ ├── mapa04.png │ │ │ ├── mapa05.png │ │ │ ├── mapa06.png │ │ │ ├── mapa07.png │ │ │ ├── mapa08.png │ │ │ └── mapa09.png │ │ └── Exercicio3.html │ ├── Exercicio4 │ │ ├── img │ │ │ └── icone.png │ │ └── Exercicio4.html │ ├── Exercicio7 │ │ ├── img │ │ │ └── banner.jpg │ │ └── Exercicio7.html │ └── Exercicio1 │ │ └── Exercicio1.html │ ├── Apostila HTML.pdf │ └── Exercicios │ ├── Exercicio2.PNG │ ├── Exercicio3.PNG │ └── Exercicio7.pdf ├── .gitattributes ├── LICENSE └── README.md /Cursos/HTML5/ExerciciosResolvidos/Exercicio5/Exercicio5.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio6/Exercicio6.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /Cursos/HTML5/Apostila HTML.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/Apostila HTML.pdf -------------------------------------------------------------------------------- /Cursos/HTML5/Exercicios/Exercicio2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/Exercicios/Exercicio2.PNG -------------------------------------------------------------------------------- /Cursos/HTML5/Exercicios/Exercicio3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/Exercicios/Exercicio3.PNG -------------------------------------------------------------------------------- /Cursos/HTML5/Exercicios/Exercicio7.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/Exercicios/Exercicio7.pdf -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/icone.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/icone.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio4/img/icone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio4/img/icone.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/favicon.ico -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/favicon.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-g.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-m.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-p.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa01.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa02.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa03.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa04.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa05.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa06.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa07.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa08.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio3/img/mapa09.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio7/img/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio7/img/banner.jpg -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-gg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-gg.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-pp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MilenaCarecho/GuiaDesenvolvedoraWeb/HEAD/Cursos/HTML5/ExerciciosResolvidos/Exercicio2/img/github-pp.png -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio1/Exercicio1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mensagens 6 | 7 | 8 | 9 |

Desafio das mensagens

10 |

11 | *Um
12 | **Dois
13 | ***Três
14 | ****Quatro
15 |

16 |

17 | ****Quatro
18 | ***Três
19 | **Dois
20 | *Um
21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio2/Exercicio2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Imagens 7 | 8 | 9 | 10 |

Desafio das Imagens

11 |

Inserir imagens em HTML é muito simples, tanto no contéudo quanto lá em cima, como ícone de favoritos

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio3/Exercicio3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mapa mundi 8 | 9 | 10 |

Desafio do Mapa

11 |

Agora chegou a hora de treinar um pouco o uso de imagens, parágrafos e quebra de linhas.

12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Milena Carecho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio4/Exercicio4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Emojis 8 | 9 | 10 |

Meus emojis favoritos

11 |

Carinhas

12 | 17 |

Mãos

18 | 23 |

Animais

24 | 29 |

Esportes

30 | 35 |

Comidas

36 | 41 |

Objetos

42 | 47 | 48 | -------------------------------------------------------------------------------- /Cursos/HTML5/ExerciciosResolvidos/Exercicio7/Exercicio7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Campeões League of legends 10 | 11 | 12 | 13 | 14 |

Lanes League of legends

15 | 16 | 17 | Banner League of Legends 18 | 19 | 20 |

League of Legends (abreviado como LoL) é um jogo eletrônico do gênero multiplayer online battle arena (abreviado como MOBA), desenvolvido e publicado pela Riot Games para Microsoft Windows[3] e Mac OS X. É um jogo gratuito para jogar e inspirado no modo Defense of the Ancients[4] de Warcraft III: The Frozen Throne.

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 |
Funções de cada lane no League of Legends
LaneFunçãoExemplo
TOPA Top Lane, justamente por estar na parte superior do mapa e longe de onde a maior parte dos confrontos acontecem no começo do game, tende a ser uma rota mais baseada em farm (matar tropas para acumular ouro e se equipar melhor). Por esse motivo, os campeões mais indicados para a top lane são os com muito sustain – a capacidade de se manter na rota sem precisar ir à base por um longo período de tempo.Aatrox é um exemplo de top laner em League of Legends
JUNGLERO jungler. Ele não ocupa nenhuma lane e evolui matando tropas neutras espalhadas pela selva (área contornada no mapa). Atualmente muitos personagens podem ser junglers: tanks, assassins ou bruisers. Algo essencial, entretanto, é a presença de alguma habilidade de CC e/ou um gap-closer (habilidades de ‘pulo’, que permitam a um campeão cruzar distâncias rapidamente), pois isso facilita os ganks. Alguns exemplos de bons junglers são Jarvan IV, Aatrox, Vi, Nocturne, Nautilus e Lee Sin.Vi é um exemplo de jungler em League of Legends
MIDA Mid lane é uma das mais importantes do jogo, justamente por estar no meio do mapa e, consequentemente, próxima às outras duas rotas e aos objetivos globais, Dragão e Barão. Nela são encontrados geralmente dois tipos de campeões: AP Carries e AssassinsBrand é um exemplo de mid laner em League of Legends
ADCO AD Carry é um dos personagens mais importantes do jogo, mas sem dúvida nenhuma é o mais frágil e o mais focado durante as team fights. São geralmente campeões que atacam à longa distância, que fazem itens caros e que tem como responsabilidade principal causar o máximo de dano possível no time inimigo. Alguns exemplos de ADCs são: Vayne, Caitlyn, Graves e Tristanna.Lucian é um exemplo de AD Carry em League of Legends
SUPORTE“Suporte” é qualquer campeão que possa ser útil para o time sem precisar de muito ouro. São geralmente campeões com muitas habilidades de crowd-control, campeões com cura ou que possam dar buffs para aliados – aumento de dano, velocidade de ataque, etc. Alguns exemplos de suportes são: Tresh, Sona, Lulu, Nami, Alistar e Taric.Nami é um exemplo de suporte em League of Legends
Clique aqui para jogar league of legends
65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # O que é o Guia Desenvolvedora Web 3 | >*"Comece de onde você está. Use o que você tiver. Faça o que você puder" – Arthur Ashe* 4 | 5 | 6 | Fala Devs, tudo bem? :vulcan_salute: 7 | 8 | Vim compartilhar com vocês como estou me tornando uma desenvolvedora front-end. :dart: 9 | 10 | Decidi 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. 11 | 12 | - [ ] [Você é um colecionador de cursos?](https://www.youtube.com/watch?v=mUqo8a1FDSM&list=PLHz_AreHm4dk_kkE0WS7010x8_AsU7twX&index=1) 13 | 14 | >"*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.*" 15 | 16 | ## O que você vai encontrar nesse guia: 17 | 18 | * Cursos 19 | * Artigos 20 | * Vídeos 21 | * Desafios 22 | * Idéias de projetos 23 | 24 | Todo o material utilizado neste guia é gratuito.:money_with_wings: 25 | 26 | Não pule etapas, o intuito desse guia é justamente fornecer a ordem e um cronograma para seus estudos. 27 | 28 | Realize os exercícios e desafios propostos :rocket: 29 | 30 | 31 | ## Índice 32 | 33 | * [O que é o Guia Desenvolvedora Web](#id1) 34 | * [O que você vai encontrar nesse guia](#id2) 35 | * [Como usar o Guia](#id3) 36 | * [Não sinta que você não é inteligente o suficiente](#id4) 37 | * [Por que ser um programador?](#id5) 38 | * [O que faz um programador Front end](#id6) 39 | * **[Git e Github](#id7)** 40 | * [Material de estudo](#git1) 41 | * [Exercicios](#git2) 42 | * [Desafios](#git3) 43 | * **[HTML5](#id8)** 44 | * [Material de estudo](#html1) 45 | * [Exercicios](#html2) 46 | * [Desafios](#html3) 47 | * **[CSS3](#id9)** 48 | * [Material de estudo](#CSS1) 49 | * [Exercicios](#CSS2) 50 | * [Desafios](#CSS3) 51 | * **[Design responsivo](#id10)** 52 | * Material de estudo 53 | * Exercicios 54 | * Desafios 55 | * **[Logica de programação](#id11)** 56 | * Material de estudo 57 | * Exercicios 58 | * Desafios 59 | * **[JavaScript](#id)** 60 | * Material de estudo 61 | * Exercicios 62 | * Desafios 63 | 64 | 65 | ## Como usar esse guia ? :books: 66 | 67 | ## Não sinta que você não é inteligente o suficiente :brain: 68 | 69 | >*"O melhor momento para ter começado algo era há uns dez anos atrás, o segundo melhor momento é agora."* 70 | 71 | Muitas 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. 72 | 73 | Eu 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. 74 | 75 | Como 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. 76 | 77 | É importante deixar claro que programação não é facil, mas tambem não é dificil, não desista. 78 | 79 | 80 | * Videos (Pt-Br) 81 | - [ ] [Aprender programação sem ter dom da programação](https://www.youtube.com/watch?v=ZtMzB5CoekE) 82 | - [ ] [Programação é dificil](https://www.youtube.com/watch?v=wvPAODEdQNI) 83 | 84 | 85 | 86 | * Videos (Inglês) 87 | - [ ] [It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech](https://www.youtube.com/watch?v=1i8ylq4j_EY) 88 | - [ ] [The Myth of the Genius Programmer](https://www.youtube.com/watch?v=0SARbwvhupQ) 89 | 90 | * Artigos 91 | - [ ] [Ninguém simplesmente aprende a programar](https://www.programaria.org/ninguem-simplesmente-aprende-como-programar/) 92 | - [ ] [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.&text=Como%20resultado%2C%20os%20programadores%20t%C3%AAm,enorme%20na%20qualidade%20de%20vida.) 93 | - [ ] [Programar é muito fácil](https://medium.com/@julia.maschion/programar-%C3%A9-muito-f%C3%A1cil-ddf610ca6f18) 94 | 95 | ## Por que ser um programador?:desktop_computer: 96 | 97 | >*"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."* 98 | 99 | Abaixo listei alguns vídeos e leituras que da aquele UP pra começar :rocket: 100 | 101 | * Vídeos 102 | - [ ] [Por que todos deveriam aprender a programar?](https://www.youtube.com/watch?v=mHW1Hsqlp6A) 103 | - [ ] [Seja um Programador](https://www.youtube.com/watch?v=S9uPNppGsGo) 104 | - [ ] [Como Virar Programador](https://www.youtube.com/watch?v=R6NCG9gqcX0) 105 | 106 | * Artigos 107 | - [ ] [Por que aprender a programar?](https://recode.org.br/por-que-aprender-a-programar/) 108 | - [ ] [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) 109 | 110 | ## O que faz um programador Front end? :hippopotamus: 111 | 112 | >*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* 113 | 114 | Abaixo listei dois vídeos para ajudar a entender o que faz um desenvolvedor front-end 115 | 116 | - [ ] [O QUE É UM DESENVOLVEDOR FRONT-END? ](https://www.youtube.com/watch?v=v0cN26_1d3I) 117 | - [ ] [O que faz uma desenvolvedora front-end?](https://www.youtube.com/watch?v=ZY3-MFxVdEw) 118 | 119 | ## Git e Github :trident: 120 | 121 | Bom, 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: 122 | 123 | O primeiro curso deste guia é o de Git e Github. Mas por quê? 124 | Antes 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: 125 | 126 | ## Material de estudo 127 | #### Video 128 | - [ ] [Curso de Git e GitHub: Grátis, pratico e sem usar comandos no terminal](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA) 129 | 130 | #### Leitura 131 | - [ ] [Slides](https://github.com/gustavoguanabara/git-github/tree/master/slides-aulas) 132 | - [ ] [Guia markdown](https://github.com/gustavoguanabara/git-github/blob/master/manuais-PDF/guia-markdown.pdf) 133 | - [ ] [A importância do Github para Desenvolvedores](https://willianjusten.com.br/a-importancia-do-github-para-desenvolvedores/) 134 | - [ ] [Git e a importância de versionar um projeto](https://www.hostgator.com.br/blog/git-o-sistema-de-controle/) 135 | - [ ] [Como fazer um README.md BONITÃO](https://medium.com/@raullesteves/github-como-fazer-um-readme-md-bonit%C3%A3o-c85c8f154f8) 136 | 137 | ## Exercicios 138 | - [ ] Crie sua conta no [Github](https://github.com/) 139 | - [ ] Siga o meu [perfil](https://github.com/MilenaCarecho) 140 | - [ ] Dê uma estrela no [Guia](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb) 141 | - [ ] [Divulgue seu perfil](https://github.com/gustavoguanabara/git-github/issues/3) 142 | 143 | ## Desafios 144 | - [ ] Clone esse repositorio e utilize ele como cronograma 145 | 146 | ## HTML5 :bone: 147 | 148 | Bom, o que falar sobre nosso querido HTML5 ? 149 | 150 | HTML5 é uma linguagem de marcação hipertexto utilizada para criar sites. 151 | 152 | Eu acho importante seguir a seguinte ordem para o estudo de html5: 153 | 1. 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. 154 | 2. Fazer o curso de HTML5 para iniciantes da NodeStudio (curso gratuido com certificado :heart_eyes:) 155 | 3. realizar os exercícios e desafios 156 | 4. Em paralelo realizar o curso de [Lógica de programação](#id11) 157 | 158 | Caso você tenha alguma dificuldade na realização dos exercícios, consulte os documentos anexos no tópico *Leitura* :mag_right: 159 | 160 | Tem muito conteúdo na internet de HTML5, muitos cursos gratuitos. 161 | 162 | Mas 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: 163 | 164 | 165 | ## Material de estudo 166 | 167 | #### Video 168 | - [ ] [História da internet](https://www.youtube.com/watch?v=rsFCVjr5yxc&t=2s) 169 | - [ ] [História do HTML](https://www.youtube.com/watch?v=NSmapCNcSyI) 170 | - [ ] [Como funciona a internet](https://www.youtube.com/watch?v=LMfeZ6XD0No&t=3s) 171 | - [ ] [Curso de HTML5 para iniciantes](https://www.nodestudio.com.br/curso/curso-de-html5) 172 | - [ ] [SEO E META TAGS SOCIAIS COM HTML](https://www.youtube.com/watch?v=YRGLRFJh4fM) 173 | - [ ] [HTML - Basics and Good Practices PT-Br](https://www.youtube.com/watch?v=wi9jZJZYSIY) 174 | 175 | 176 | #### Leitura 177 | - [ ] [Entenda o que é HTTP](https://rockcontent.com/blog/http/) 178 | - [ ] [Como os navegadores funcionam](https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#:~:text=A%20funcionalidade%20principal%20de%20um,ou%20outro%20tipo%20de%20arquivo.) 179 | - [ ] [DNS: o que é, como funciona](https://rockcontent.com/blog/dns/) 180 | - [ ] [O que é nome de domínio](https://pt.wikipedia.org/wiki/Nome_de_dom%C3%ADnio) 181 | - [ ] [O QUE É SERVIÇO DE HOSTING](https://blog.intnet.com.br/o-que-e-servico-de-hosting/) 182 | - [ ] [SEO básico](https://rockcontent.com/blog/seo-basico/) 183 | - [ ] [7 Tags HTML Que Diferenciam um Profissional SEO de um Amador](https://neilpatel.com/br/blog/tags-htm/) 184 | - [ ] [HTML: Boas práticas em acessibilidade](https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML) 185 | - [ ] [Como escrever HTML com acessibilidade](https://medium.com/reprogramabr/como-escrever-html-com-acessibilidade-eb5fb1a6af5a) 186 | - [ ] [W3Schools](https://www.w3schools.com/html/default.asp) 187 | - [ ] [Apostila de HTML](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/HTML5/Cursos/HTML5/Apostila%20HTML.pdf) 188 | 189 | 190 | #### 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: 191 | 192 | * Como funciona a internet? 193 | * O que é HTTP? 194 | * O que são os navegadores e como eles funcionam? 195 | * O que é DNS e como ele funciona? 196 | * O que é um nome de dominio? 197 | * O que é hosting? 198 | * O que é SEO e como utilizar com HTML? 199 | * Como ter acessibilidade com HTML? 200 | 201 | 202 | ## Exercicios 203 | 204 | - [ ] **[Exercício 01](https://codepen.io/milenacarecho/full/PoZRdME)
** 205 | *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d001/desafio-mensagens.pdf) para mais informações sobre o exercício 01* 206 | - [ ] **[Exercício 02](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio2.PNG)**
207 | *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d002/desafio-imagens.pdf) para mais informações sobre o exercício 02* 208 | - [ ] **[Exercício 03](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio3.PNG)**
209 | *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* 210 | - [ ] **[Exercício 04](https://codepen.io/milenacarecho/full/oNbyEpL)**
211 | *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d004/desafio-emoji.pdf) para mais informações sobre o exercício 04* 212 | - [ ] **[Exercício 05]()**
213 | *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d005/desafio-social.pdf) para mais informações sobre o exercício 05* 214 | - [ ] **[Exercício 06]()**
215 | *Clique [aqui](https://github.com/gustavoguanabara/html-css/blob/master/desafios/d006/desafio-tags.pdf) para mais informações sobre o exercício 05* 216 | - [ ] **[Exercício 07](https://codepen.io/milenacarecho/full/VweQdpQ)**
217 | *Clique [aqui](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/blob/master/Cursos/HTML5/Exercicios/Exercicio7.pdf) para mais informações sobre o exercício 07* 218 | 219 | #### Tente resolver o exercicio sozinha (o), não vá direto ao exercicio resolvido :frowning_face: 220 | 221 | * [*Exercicio 01 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio1) 222 | * [*Exercicio 02 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio2) 223 | * [*Exercicio 03 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio3) 224 | * [*Exercicio 04 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio4) 225 | * [*Exercicio 05 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio5) 226 | * [*Exercicio 06 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/master/Cursos/HTML5/ExerciciosResolvidos/Exercicio6) 227 | * [*Exercicio 07 resolvido*](https://github.com/MilenaCarecho/GuiaDesenvolvedoraWeb/tree/HTML5/Cursos/HTML5/ExerciciosResolvidos/Exercicio7) 228 | 229 | 230 | ## Desafios 231 | 232 | * 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: 233 | 234 | ## CSS3 :nail_care: 235 | 236 | ## Material de estudo 237 | 238 | #### Video 239 | - [ ] [Curso de CSS3 para iniciantes](https://www.nodestudio.com.br/curso/curso-de-css3) 240 | 241 | #### Leitura 242 | 243 | ## Desafios 244 | 245 | - [ ] [Desafio 30 dias de CSS](https://github.com/MilenaCarecho/30diasDeCSS) 246 | 247 | ## Desing responsivo 248 | 249 | ## Material de estudo 250 | 251 | #### Video 252 | 253 | - [ ] [Curso de Design Responsivo](https://www.nodestudio.com.br/curso/curso-de-design-responsivo) 254 | 255 | #### Leitura 256 | 257 | 258 | ## Logica de programação 259 | 260 | ## Material de estudo 261 | 262 | #### Video 263 | 264 | #### Leitura 265 | 266 | ## Desafios 267 | 268 | 269 | 270 | ## Javascript 271 | 272 | ## Material de estudo 273 | 274 | #### Video 275 | 276 | #### Leitura 277 | 278 | ## Desafios 279 | 280 | 281 | ## Contribuição 282 | 283 | Você tem alguma sugestão de como podemos melhorar esse projeto em geral? Me informe! Gostaria muito de ouvir seus comentários! 284 | Quaisquer contribuições são muito apreciadas.:smile: 285 | 286 | ## Espalhe a palavra 287 | 288 | Se 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! 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | --------------------------------------------------------------------------------