O que é o Guia Desenvolvedora Web
"Comece de onde você está. Use o que você tiver. Faça o que você puder" – Arthur Ashe
Fala Devs, tudo bem?
Vim compartilhar com vocês como estou me tornando uma desenvolvedora front-end.
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.
"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."
O que você vai encontrar nesse guia:
- Cursos
- Artigos
- Vídeos
- Desafios
- Idéias de projetos
Todo o material utilizado neste guia é gratuito.
Não pule etapas, o intuito desse guia é justamente fornecer a ordem e um cronograma para seus estudos.
Realize os exercícios e desafios propostos
Índice
- O que é o Guia Desenvolvedora Web
- O que você vai encontrar nesse guia
- Como usar o Guia
- Não sinta que você não é inteligente o suficiente
- Por que ser um programador?
- O que faz um programador Front end
- Git e Github
- HTML5
- CSS3
- Design responsivo
- Material de estudo
- Exercicios
- Desafios
- Logica de programação
- Material de estudo
- Exercicios
- Desafios
- JavaScript
- Material de estudo
- Exercicios
- Desafios
Como usar esse guia ? 📚
Não sinta que você não é inteligente o suficiente 🧠
"O melhor momento para ter começado algo era há uns dez anos atrás, o segundo melhor momento é agora."
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.
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.
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.
É importante deixar claro que programação não é facil, mas tambem não é dificil, não desista.
- Videos (Pt-Br)
- Videos (Inglês)
- It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech
- The Myth of the Genius Programmer
- Artigos
- Ninguém simplesmente aprende a programar
- Programar não requer talento ou paixão.
- Programar é muito fácil
Por que ser um programador?🖥️
"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."
Abaixo listei alguns vídeos e leituras que da aquele UP pra começar
- Vídeos
- Artigos
- Por que aprender a programar?
- Por que deveríamos saber programar ?Mesmo se não for trabalhar com isso!
O que faz um programador Front end? 🦛
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
Abaixo listei dois vídeos para ajudar a entender o que faz um desenvolvedor front-end
Git e Github 🔱
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
O primeiro curso deste guia é o de Git e Github. Mas por quê?
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
Material de estudo
Video
Leitura
- Slides
- Guia markdown
- A importância do Github para Desenvolvedores
- Git e a importância de versionar um projeto
- Como fazer um README.md BONITÃO
Exercicios
- Crie sua conta no Github
- Siga o meu perfil
- Dê uma estrela no Guia
- Divulgue seu perfil
Desafios
HTML5 🦴
Bom, o que falar sobre nosso querido HTML5 ?
HTML5 é uma linguagem de marcação hipertexto utilizada para criar sites.
Eu acho importante seguir a seguinte ordem para o estudo de html5:
-
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.
-
Fazer o curso de HTML5 para iniciantes da NodeStudio (curso gratuido com certificado
😍 ) -
realizar os exercícios e desafios
-
Em paralelo realizar o curso de Lógica de programação
Caso você tenha alguma dificuldade na realização dos exercícios, consulte os documentos anexos no tópico Leitura 🔎
Tem muito conteúdo na internet de HTML5, muitos cursos gratuitos.
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
Material de estudo
Video
- História da internet
- História do HTML
- Como funciona a internet
- Curso de HTML5 para iniciantes
- SEO E META TAGS SOCIAIS COM HTML
- HTML - Basics and Good Practices PT-Br
Leitura
- Entenda o que é HTTP
- Como os navegadores funcionam
- DNS: o que é, como funciona
- O que é nome de domínio
- O QUE É SERVIÇO DE HOSTING
- SEO básico
- 7 Tags HTML Que Diferenciam um Profissional SEO de um Amador
- HTML: Boas práticas em acessibilidade
- Como escrever HTML com acessibilidade
- W3Schools
- Apostila de HTML
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 🤓
- Como funciona a internet?
- O que é HTTP?
- O que são os navegadores e como eles funcionam?
- O que é DNS e como ele funciona?
- O que é um nome de dominio?
- O que é hosting?
- O que é SEO e como utilizar com HTML?
- Como ter acessibilidade com HTML?
Exercicios
- Exercício 01
Clique aqui para mais informações sobre o exercício 01 - Exercício 02
Clique aqui para mais informações sobre o exercício 02 - Exercício 03
Clique aqui para mais informações sobre o exercício 03 - Exercício 04
Clique aqui para mais informações sobre o exercício 04 - Exercício 05
Clique aqui para mais informações sobre o exercício 05 - Exercício 06
Clique aqui para mais informações sobre o exercício 05 - Exercício 07
Clique aqui para mais informações sobre o exercício 07
Tente resolver o exercicio sozinha (o), não vá direto ao exercicio resolvido ☹️
- Exercicio 01 resolvido
- Exercicio 02 resolvido
- Exercicio 03 resolvido
- Exercicio 04 resolvido
- Exercicio 05 resolvido
- Exercicio 06 resolvido
- Exercicio 07 resolvido
Desafios
- 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
🤓
CSS3 💅
Material de estudo
Video
Leitura
Desafios
Desing responsivo
Material de estudo
Video
-
Leitura
Logica de programação
Material de estudo
Video
Leitura
Desafios
Javascript
Material de estudo
Video
Leitura
Desafios
Contribuição
Você tem alguma sugestão de como podemos melhorar esse projeto em geral? Me informe! Gostaria muito de ouvir seus comentários! Quaisquer contribuições são muito apreciadas.😄
Espalhe a palavra
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!