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.

• [ ] Você é um colecionador de cursos?

"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
  • Material de estudo
  • Exercicios
  • Desafios
• HTML5
  • Material de estudo
  • Exercicios
  • Desafios
• CSS3
  • Material de estudo
  • Exercicios
  • Desafios
• 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 :brain:

"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)

• [ ] Aprender programação sem ter dom da programação
• [ ] Programação é dificil

• 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

• [ ] Por que todos deveriam aprender a programar?
• [ ] Seja um Programador
• [ ] Como Virar Programador

• 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? :hippopotamus:

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

• [ ] O QUE É UM DESENVOLVEDOR FRONT-END?
• [ ] O que faz uma desenvolvedora 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

• [ ] Curso de Git e GitHub: Grátis, pratico e sem usar comandos no terminal

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

• [ ] Clone esse repositorio e utilize ele como cronograma

HTML5 :bone:

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:

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.

2. Fazer o curso de HTML5 para iniciantes da NodeStudio (curso gratuido com certificado 😍)

3. realizar os exercícios e desafios

4. 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

• [ ] Curso de CSS3 para iniciantes

Leitura

Desafios

• [ ] Desafio 30 dias de CSS

Desing responsivo

Material de estudo

Video

• [ ] Curso de Design Responsivo

  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!