CURSO DE PROGRAMAÇÃO GRÁTIS

ANDROID SEM LIMITES

https://www.youtube.com/channel/UCnWG8YD3tlsU_Pg-sb6YWCw/
 ATENÇÃO

Esse material NÃO é distribuído pela Alura. Todo o

material incluso nesse PDF foi editado por mim.
Todas as aulas foram gratuitas e oferecidas pela Alura
e ficaram disponíveis para quem realizou inscrição na
Quarentena DEV por um período de 17 dias. Então
resolvi baixar todo o conteúdo desse curso oferecido
pela Alura e distribuir GRATUITAMENTE para
quem tiver interesse em aprender um pouco sobre
programação. Esse material NÃO tem objetivo
comercial e deve ser distribuído totalmente grátis. O
curso é composto por 10 aulas de aproximadamente
45 minutos cada. Todos os materiais e respostas dos
exercícios de cada aula estarão disponíveis nesse
arquivo. Ao final do curso você poderá obter seu
certificado.
 LINKS DAS AULAS

Playlist com todas aulas:

https://www.youtube.com/playlist?list=PLlP24HtwcC6StZYNiE
YBunGS3VUMHAppg

Aula 1: https://www.youtube.com/watch?v=MJtVTpcEFwM
Aula 2: https://www.youtube.com/watch?v=XPb5kiR1Siw
Aula 3: https://www.youtube.com/watch?v=BUXwoRjkVes
Aula 4: https://www.youtube.com/watch?v=tIAqwte-piI
Aula 5: https://www.youtube.com/watch?v=SHjMR11kwlw
Aula 6: https://www.youtube.com/watch?v=-SOIAnfCZwo
Aula 7: https://www.youtube.com/watch?v=TJD3ug0Xd0U
Aula 8: https://www.youtube.com/watch?v=9dJMLUNk3K8
Aula 9: https://www.youtube.com/watch?v=-ptFKBP7Ct8
Aula 10: https://www.youtube.com/watch?v=lj5eNwkSGE0
 MATERIAL

AULA 3
• Dicas pra usar o Codepen:
https://www.alura.com.br/artigos/codepen-o-que-e-e-como-usar
• Ajuda pra o exercício: https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Element/br
AULA 5
• Vídeo ajudando a responder o exercício:
https://www.youtube.com/watch?v=pZrAG27KZSg&feature=youtu.
be
• Código da Pokébola:
https://codepen.io/AndroidSemLimites/pen/vYNNNyN
AULA 6
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/MWaaomB
AULA 7
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/KKddvmY
AULA 8
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/GRppMva
• Aprenda um pouco mais: https://www.alura.com.br/artigos/criando-
uma-mascara-de-telefone-com-javascript
AULA 9
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/jObbaLZ
AULA 10
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/MWaaQQm
Aula 1: Seu primeiro código JavaScript

Seja bem-vindo e bem-vinda à primeira aula da #QuarentenaDev!

Eu e toda equipe bolamos essa primeira aula para você não precisar instalar nada. Seu
primeiro código será em JavaScript, sem sair do seu navegador (o tal do browser)!

Clique aqui para assistir a primeira aula.

Desa o

Para esta aula, deixamos como desafio você tentar fazer o cálculo de batimentos
cárdiacos e mandar isso no canal! Isto é: dada a sua idade, quantas vezes seu coração já
bateu? Sim, é uma estimativa :).

Na aula de hoje conhecemos o alert ele mostra uma caixa de diálogo de aviso com o que
escrevemos e um botão OK. Então para mostrar um cálculo de multiplicação nessa caixa
podemos escrever o seguinte código no nosso navegador

alert(4*4)

E vamos ver o popup mostrando o número 16.

Podemos fazer outras operações como soma ou subtração:

alert(3 + 3)
alert(4 - 3)

Para fazer a calculo com várias operações juntas precisamos utilizar parênteses para
separar cada uma delas.

alert((((3 * 3 ) * 3) * 3))
A resposta aqui é 81

Também podemos colocar mensagens junto com o resultado da operação que estamos
fazendo, para isso precisamos usar as áspas " " para o navegador entender que estamos
passando um texo: "Ola meu nome é Paulo e eu tenho " e para juntar o texto e a
operação para descobrir a idade o sinal de adição +

alert("Ola meu nome é Paulo e eu tenho " + 10*2 + " anos")

A mensagem exibida aqui é Olá meu nome é Paulo e eu tenho 20 anos. Agora que já
sabemos fazer operações vamos ao desafio.

Calculo das batidas

O nosso coração bate uma média de 75 vezes por minuto aproximadamente. Sabemos
que 1 hora tem 60 minutos. Com essa informação conseguimos descobrir quantas batidas
por hora o coração dá.

Agora que sabemos as batidas por hora, conseguimos saber quantas batidas ele da por
dia já que sabemos quantas horas tem o dia.

Com a informação da quantidade de batida que o coração da por dia, conseguimos

calcular quantas batidas o coração da por ano já que sabemos quantos dias o ano tem.
Agora é só calcular quanto o coração já bateu durante toda nossa vida. Terminou esse
desafio? Então aqui tem mais alguns para você praticar.

Mais exercícios

O criador de galinhas me falou o seguinte: "Comprei 15 galinhas por 300 reais".

Quanto ele pagou por cada galinha?

Maria foi à padaria e comprou 19 balas, depois voltou à padaria e comprou mais 45.
Quantas balas Maria tem agora?

Para calcular a área de uma circunferência usamos a seguinte fórmula: area = pi x

raio x raio. O valor de pi = 3.14. Se o valor do meu raio é 2, qual a área da
circunferência?
 RESPOSTAS DOS EXERCÍCIOS DA
AULA 1

Exercício 1 - Batimentos Cardíacos:

https://codepen.io/AndroidSemLimites/pen/eYppNjy

Exercício 2 - Valor de cada galinha:

https://codepen.io/AndroidSemLimites/pen/xxwwGJa

Exercício 3 - As balas de Maria:

https://codepen.io/AndroidSemLimites/pen/YzyyXjb

Exercício 4 - Área:
https://codepen.io/AndroidSemLimites/pen/RwWWPBX
Aula 2: Capturando informações e variáveis

Você pediu e segue uma aula mais longa e com mais desafios da #QuarentenaDev!

Clique aqui para assistir a segunda aula.

Três desafios para você!

O IMC ou índice de massa corporal, nos ajuda a identificar algumas caracteristicas

como obesidade ou desnutrição. Abaixo temos uma tabela indicando o significado do
valor que você encontrar:

Abaixo de 17 Muito abaixo do peso

Entre 17 e 18,49 Abaixo do peso
Entre 18,5 e 24,99 Peso normal
Entre 25 e 29,99 Acima do peso
Entre 30 e 34,99 Obesidade I
Entre 35 e 39,99 Obesidade II

O IMC é calculado dividindo o peso pela altura elevada ao quadrado. Será que
você consegue descobrir qual o seu IMC?

Guilherme tem 30 anos e tem 3 irmãs, a Carol que tem 20 anos, Márcia que tem 15,
Patrícia que tem 10 anos. Qual a média de idade da família do Guilherme?

Quantos anos tem a avó da amiga da Maria que nasceu em 1940?

 RESPOSTAS DOS EXERCÍCIOS DA
AULA 2

Exercício 1 - IMC:
https://codepen.io/AndroidSemLimites/pen/YzyyXRo

Exercício 2 - Média das idades:

https://codepen.io/AndroidSemLimites/pen/gOaapZp

Exercício 3 - Idade da avó:

https://codepen.io/AndroidSemLimites/pen/BaooNvK
Aula 3: Compartilhando Códigos no Codepen

Seja bem vindo à terceira aula da #QuarentenaDev! E finalmente vamos poder

compartilhar nossos códigos e testes de uma maneira mais simples! Usaremos o
codepen.io!

Clique aqui para assistir a terceira aula.

Exercícios para praticar depois de ver a aula:

Consegue fazer o texto abaixo aparecer na tela?

Oi
como
você
está
pulando
linha
?

O carro da Amanda faz 12km/l, ela viajou por 10 horas a uma velocidade de 81km/h.
Quantos de litros combustível foram necessários para realizar essa viagem?

Post explicando como funciona e como configurar o codepen.io

 RESPOSTAS DOS EXERCÍCIOS DA
AULA 3

Exercício 1 - Quebra de linha:

https://codepen.io/AndroidSemLimites/pen/QWjjbRv

Exercício 2 - Consumo de combustível:

https://codepen.io/AndroidSemLimites/pen/pojjJmW
Aula 4: Aplicativo de Transporte

Seja bem-vindo e bem-vinda à quarta aula da #QuarentenaDev! Dando um passo para o

desenvolvimento do nosso projeto, vamos aprender a calcular a tarifa do nosso aplicativo
de transporte. Sim, vai ficar bonito, vai ser mais completo, mas ainda teremos mais uma
semana pela frente!

Clique aqui para assistir a quarta aula.

Exercícios para praticar depois de ver a aula:

Na aula a Amanda deixou os valores de distância e tempo fixos no programa. Mas as
pessoas querem ir para lugares diferentes certo? Então como deixar as opções de
distância e tempo para quem for usar o nosso programa preencher e descobrir o valor da
sua corrida? E como mostrar isso na tela sem usar o alert?
 RESPOSTAS DOS EXERCÍCIOS DA
AULA 4

Exercício:
https://codepen.io/AndroidSemLimites/pen/JjYYYdV
Aula 5: HTML e CSS

Seja bem-vindo e bem-vinda à quinta aula da #QuarentenaDev! A espera acabou, vamos

aprender como os programadores e programadoras apresentam e estilizam as
informações que vemos nos sites todos os dias.

Clique aqui para assistir a quinta aula.

Desa o da Vanessa

Estudar os capitulos introdutórios da documentação:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

https://developer.mozilla.org/pt-BR/docs/Web/CSS

https://developer.mozilla.org/pt-BR/docs/Web/HTML

Desa o do Art
Ao invés de deixar apenas o fundo branco com a letras pretas, usar o document.write
junto com css para estilizar a calculadora da aula passada da maneira que você quiser!!

Mais um exercício!
Aprendemos algumas tags HTML e como estilizar essas tags usando css. Será que você é
capaz de reproduzir o seguinte layout?
Vamos ter que fazer algumas pesquisas e interagir bastante no discord para resolver esse
problema, vamos lá?

Dicas:

Temos links no HTML, quando eu clicar nele vou ir direto para o codepen onde você
criou o exercicio.

Os links estão dentro de uma lista para ficar organizados

Essa borda mais grossa fazemos pelo css

Lembrando que a imagem, a largura, altura da imagem e espessura da borda não

precisam ser exatamente igual!

Desa o do Mário
Será que você consegue mudar a cor da pokebola de vermelho para roxo???

código da pokebola: https://codepen.io/AndroidSemLimites/pen/vYNNNyN

Cada tag é uma caixa.<div></div> é a nossa caixa e podemos aplicar efeitos nela. Um
deles é o efeito de sombra com a propriedade box shadow.

div {
box-shadow: tamanho tamanho tamanho tamanho cor
}
div {
0px 0px 0px 0px green;
}

Essa propriedade permite que várias sombras possam ser declaradas para a mesma tag.
Não é por ser sombra que ela tem que ser esfumaçada e transparente, podemos fazer
sombras nítidas e sólidas!

Desa o master!!
Se você conseguiu trocar a cor da pokebola, será que você consegue criar a sua?

Por último, aqui está o material sobre vscode que o mário mostrou no video
 RESPOSTAS DOS EXERCÍCIOS DA
AULA 5

Exercício 1 - Calculadora:
https://codepen.io/AndroidSemLimites/pen/mdeeemE

Exercício 2 - Layout:
https://codepen.io/AndroidSemLimites/pen/RwWWWVa

Exercício 3 - Pokebola:
https://codepen.io/AndroidSemLimites/pen/gOaaaWL

Desafio Master:
https://codepen.io/AndroidSemLimites/pen/OJyyymp
Aula 6: Verdadeiro ou Falso

Seja bem-vindo e bem-vinda à sexta aula da #QuarentenaDev! Sabe aquele programa que
te mostra um resultado baseado na sua resposta? Então chegou a hora de aprender como
fazer!!

Clique aqui para assistir a sexta aula.

Desa os da aula6

Utilizando a instrução if você consegue dizer para o usuário qual é o mês baseado no
número de 1 a 12 que ele escolher.

Na aula2 tem uma tabela dizendo qual o significado do resultado do imc. Depois de
calcular, você consegue exibir o significado do IMC da pessoa?

ex: imc for 17 exibir abaixo do peso

Links extras

Código inicial da ficha para fazer o fork: codepen

 RESPOSTAS DOS EXERCÍCIOS DA
AULA 6

Exercício 1 - Mês:
https://codepen.io/AndroidSemLimites/pen/gOaaRdW

Exercício 2 - IMC:
https://codepen.io/AndroidSemLimites/pen/VwvvWGa
Aula 7: Sorteio com Botões e Funções

Seja bem-vindo e bem-vinda à sétima aula da #QuarentenaDev! Você, é você mesmo que
queria descobrir como exibir o html primeiro e depois gerar a interação do usuário com
JavaScript, essa aula é para você. E para você que não queria saber, afinal a aula é para
todos e todas!

Clique aqui para assistir a sétima aula.

Material da aula

Aqui tem a codepen base utilizada na aula.

Desa os da aula7

O Paulo desafiou vocês a trocar o estilo da mensagem de você ganhou ou você perdeu

O Art desafiou você a não deixar o usuário digitar um número maior que 10, caso ele
digite um maior, dizer que ele não pode e pedir para digitar um novo número.

Dica para o exercício do Paulo

Para alterar o html utilizando JavaScript primeiro selecionamos a tag que diz respeito
ao parágrafo a paragrafoResultado e depois usamos a propriedade innerHTML que vai
ser reposável por colocar o texto!

paragrafoResultado.innerHTML= 'Voce ganhou o sorteio'

Para alterar o css o principio é igual, porém no lugar de innerHTML que mexe com html ,
passamos a propriedade style do css e depois a propriedade que queremos alterar.

Nesse exemplo escolhemos a propriedade backgroundColor que altera a cor de fundo e

passamos a cor amarela. Assim quando o evento for ativado e acertarmos o número a cor
de fundo fica amarela.

paragrafoResultado.style.backgroundColor = "yellow"

Dica para o exercício do Art

Dica de como dizer ao usuário que os números precisam ficar entre 0 e 10

no código da aula fazemos a comparação logo no começo

numerocerto=chute==aleatorio

O que vamos fazer é colocar essa comparação depois de ter certeza que o número está
entre 1 e 10.

E para fazer essa comparação vamos usar o if , operador lógico ou que em javascript é ||
e simbolos que indicam : > maior que e < menor que

if( chute < 0 || chute > 10 ){ pedir um novo número}

Estamos dizendo que caso chute for menor que zero ou maior que 10 vamos pedir um
numero novo só depois dessa verificação fazemos a comparação do número digitado com
o gerado pelo aleatorio

chute=prompt('Seu numero da sorte(1-10)')

if( chute < 0 || chute > 10 ){ pedir um numero novo}

numerocerto= chute==aleatorio
 RESPOSTAS DOS EXERCÍCIOS DA
AULA 7

Exercício 1 - Paulo:
https://codepen.io/AndroidSemLimites/pen/wvKKqXR

Exercício 2 - Art:
https://codepen.io/AndroidSemLimites/pen/pojjrmJ
Aula 8: Contadores e Loops

Seja bem-vindo e bem-vinda à oitava aula da #QuarentenaDev! Já aprendemos muita

coisa não é? Como fazer uma ação se repetir utilizando laços de repetição.

Clique aqui para assistir a oitava aula.

Desa os aula 8

Desafio do Mario

Quantas olimpiadas tivemos até hoje?

Desafio do Art

Sim o art disse 10 milhões, mas calma lá, vamos exibir todos os números de 1 até 500 tudo
bem?

Desafio extra

Usando o while consegue exibir os números pares de até de 0 até 100? Pode ser usando
document.write, alert você escolhe.

Desafio randômico do Paulo

Consegue descobrir uma outra fórmula de aleatoriedade que seja mais "justa" que a que
usamos no exercício?

Links extras

codepen base para botão de like

O que é uma biblioteca de código

Outro tipo de validação com JavaScript

 RESPOSTAS DOS EXERCÍCIOS DA
AULA 8

Exercício 1 - Olimpíadas:
https://codepen.io/AndroidSemLimites/pen/vYNNewo

Exercício 2 - De 1 a 500:
https://codepen.io/AndroidSemLimites/pen/ZEbbXNv

Exercício 3 - Números Pares:

https://codepen.io/AndroidSemLimites/pen/OJyyxYM

Exercício 4 - Aleatório Justo:

https://codepen.io/AndroidSemLimites/pen/MWaaELE
Aula 9: Inputs e retorno de funções

Seja bem-vindo e bem-vinda à nona aula da #QuarentenaDev! Você aprendeu muito até
agora parabéns, nessa aula vamos juntar todas as peças que aprendemos até agora e
aplicar no nosso aplicativo de transporte!!!

codepen base para acompanhar a aula!!

Clique aqui para assistir a nona aula.

Desa os aula 9

Desa o da Vanessa

Aprender sobre os tipos de input

Desa o do Art

Trocar o prompt que estavamos utilizando para pegar dados do usuário pelo input
 RESPOSTAS DOS EXERCÍCIOS DA
AULA 9

Ficha Melhorada:
https://codepen.io/AndroidSemLimites/pen/wvKKPpq
Aula 10: Completando nosso certificado

Seja bem-vindo e bem-vinda à última da #QuarentenaDev! É certificado que vocês

querem?? Então nessa última aula vamos criar o nosso! Aliás, você vai criar o seu e
modificá-lo, além de conter todo seu portfólio .

codepen base para acompanhar a aula!!

Clique aqui para assistir a décima aula.

Quer ir um pouco além? Alguns canais e playlists para você dar os próximos passos:

Playlist com dicas de CSS para melhorar seu projeto

https://www.youtube.com/playlist?list=PLh2Y_pKOa4UfHbRqfiiI4uWik2MOKHRfL
Playlist respondendo dúvidas de iniciantes

https://www.youtube.com/playlist?list=PLh2Y_pKOa4UcBRWcWAEp4d4M7INLCec1f)

Canal do Mário onde ele ensina muito código JavaScript

https://www.youtube.com/playlist?list=PLh2Y_pKOa4UfsZfAT5ylSsbcEjpguxoBI

Desa o aula10

Será que usando JavaScript você consegue imprimir ou seja abrir a janela de impressão
de documento e salvar seu certificado que fizemos no codepen em pdf ou até imprimir
mesmo? Dica é um comando apenas

Nós vimos como colocar links para nossas atividades

<li><a href="link do codepen">Nome da atividade da aula</a></li>

Se você conseguiu imprimir seu certificado, percebeu que os links não aparecem. Será
que você consegue deixar eles aparecendo igual na imagem:
Como imprimir o certificado?
Caso você queira imprimir o seu certificado, basta colocar a função "print()" ao final do
código se baseando no exemplo do que a Amanda fez, mas não está no vídeo:
https://codepen.io/AndroidSemLimites/pen/pojjaQP

Links Extras

Apostila de Desenvolvimento Web da Caelum com muito HTML, CSS e JavaScript

Documentação da mdn explicando mais sobre css

 RESPOSTAS DOS EXERCÍCIOS DA
AULA 10

Gerador de Certificado:
https://codepen.io/AndroidSemLimites/pen/pojjaQP