CLONANDO HOME PAGE DA APPLE COM HTML+CSS

No video

CLONANDO HOME PAGE DA APPLE COM HTML+CSS

Рет қаралды 27,772

9 ай бұрын

Nesse vídeo iremos clonar a home page do site da Apple para colocar nossos conhecimentos de HTML e CSS em prática, e no final iremos realizar o deploy da nossa Landing Page na AWS.
🎁 Aprenda HTML, CSS, JavaScript e muito mais com 10% OFF
tr.ee/kipperde...
👉 Aprenda inglês com 47% OFF
tr.ee/kipperde...
👉 Repositório Github
github.com/Fer...
👉 Link do Figma
www.figma.com/...
👉 Me siga no instagram!
/ kipper.dev
👉 Seja também um membro do canal e tenha benefícios exclusivos!
/ @kipperdev
🌎 Comunidade do Discord
/ discord

Пікірлер: 103

@kipperdev 9 ай бұрын

🎁 Aprenda HTML, CSS, JavaScript e muito mais com 10% OFF tr.ee/kipperdev-desconto-rocketseat-one

@dezinho091 5 ай бұрын

Fê, graças a sua recomendação estou estudando na rocket, mas eu me esqueci que você tinha o cupom 😢

@juninhogameplayyy 9 ай бұрын

Pra gente que é mais iniciante, esse tipo de conteúdo ajuda demaiss.

@kipperdev 9 ай бұрын

Que bomm, @juninhogameplayyy Fico feliz que ajude quem está iniciando. O intuito desse vídeo foi justamente isso 💜

@danielleal4132 9 ай бұрын

Eu ia comentar isso mais nem vai precisar mais 🤣🤣🤣 só agradecer ela 😄

@lucas-mds-198 9 ай бұрын

Quando eu estava cursando técnico, fiz muito site estático assim clonando interfaces, Spotify, Netflix, Nubank etc, me ajudou muito a aprender o básico dessa "tríade" web 😅. Também me ajudou a ver que eu não era nenhum pouco habilidoso no front, o que me levou ao back que é onde eu trabalho hoje 🤡 Ótimo vídeo Fe! 🙏🏻

@kipperdev 9 ай бұрын

Que legall, Lucas 💜 Realmente ajuda muito a praticar. Que bom que você pelo menos descobriu o que você gosta hahah

@Dev_HugoCruz 9 ай бұрын

toda vez que eu vejo os seus videos eu me apaixono, mulher vc é extremamente incrivel

@luciusstark 9 ай бұрын

Sou system dev/backend, manjo nada de front-end. Estou procurando entender como esta parte funciona para montar o meu projeto pessoal e este vídeo de graça é absurdo de bom. Muito obrigado! Ganhou +1 inscrito e logo menos estarei maratonando. Já ouvi muito sobre o Figma, mas não sabia do que se tratava direito e o motivo da galera front-end gostar dele. Em menos de 30 minutos você conseguiu me mostrar isso.

@kipperdev 9 ай бұрын

Que legalll, Lucius Muito legal ler esse tipo de comentário, fico muito feliz em ajudar 💜

@biolii 9 ай бұрын

Sou estudante de ADS, e no semestre que eu to a gente n pegou JavaScript ainda, so HTML CSS, o jeito q vc explica as coisas descomplica muita coisa q eu n entendi na aula, fora que tudo que vc faz vc da um motivo, uma explicação e fica bem didadico seus videos, vc faz isso de uma forma em q n fica chato e que 1 hora de video se parece mais 10 minutos Obrigado pelo excelente conteudo

@kipperdev 9 ай бұрын

Que bomm, @biolii. Muito bom poder ajudar a descomplicar E muito obrigado pelo seu comentário, feedbacks assim me deixam muito feliz 💜

@valmirsales5709 9 ай бұрын

Estou ainda no iniciozinho do vídeo, como já assisti a outros vídeos seus, não pude deixar de afirmar que a sua didática é excelente. Gosto muito da forma como ensinas, obrigado por compartilhar❤.

@kipperdev 9 ай бұрын

Muito obrigadaa, Valmir. Muito bom saber que o meu jeito de explicar tem te ajudado.💜

@rosarvitor 9 ай бұрын

Estou começando nos estudos de front end, esse vídeo é tudo oq eu precisava!!!!!

@kipperdev 9 ай бұрын

Boaa, @rosarvitor, que bom 💜 Agora é praticar bastante!

@orodrigosobral 9 ай бұрын

O que eu gosto de fazer é colocar o font-size: 62.5% pra deixar padrão 10px ai fica mais fácil de calcular o fontsize

@silviocyrus Ай бұрын

Parabéns pelo conteúdo Fe.

@KlausVisual 9 ай бұрын

Obrigado pelo vídeo, estou começando e esse é o primeiro vídeo seu que consigo entender alguma coisa rsrsrsrs. quero entrar na área de front-end tudo que aprendo é aqui pelo o youtube, traga mais conteúdo assim, para quem está começando ajuda muito.... Fernanda você se garante de mais parabéns

@kipperdev 9 ай бұрын

Muito obrigadoo 💜 Que legall, Klaus, vou trazer sim!

@Matheusguilherme10 9 ай бұрын

Como assim a Fernanda manja muito de front e ninguém contou, obrigado pelo rico conteúdo, sou fã demaisssssss

@sdfgpegasus4700 9 ай бұрын

to fazendo curso tem 8 meses e to nessa fase de html e bootstrap e q video sensacional de vdd , ajuda muito parabens!

@kipperdev 9 ай бұрын

Muito obrigadaa, @sdfgpegasus4700 Fico feliz que tenha ajudado você 💜

@daniellima8704 9 ай бұрын

Sua forma de explicar as coisas é bem leve e de fácil entendimento. Parabéns!

@kipperdev 9 ай бұрын

Que bom que você gostou, Daniel 💜

@mauricioantonelli4145 4 ай бұрын

mt obrigado fer! teu canal ajuda mttt! vou me tornar membro do seu canal! um pedido pra vc apenas seria fazer conteudo qdo der pra iniciantes, sabe? as vezes sentimos dificuldade em acompanhar certos processos por mais que voce seja super didatica! obrigado mesmo, faz mais projetinhos em java basico com a gente

@ronansoares3287 9 ай бұрын

Que aula!!!!! gratidão.

@Davizin29 9 ай бұрын

excelente conteúdo, eu sou iniciante, conheço algumas tags e consegui acompanhar tranquilo, obrigado !!

@kipperdev 9 ай бұрын

Que bomm, Davi! Era esse o intuito! Fico feliz que tenha conseguido seguir e que tenha gostado 💜

@stefannymaximo 9 ай бұрын

Ótimo conteúdo, Obrigada pela dedicação!

@kipperdev 9 ай бұрын

Muito obrigadaa, @stefannymaximo 💜

@phelipemoz 9 ай бұрын

Vc é muito didática 👏🏻👏🏻

@kipperdev 9 ай бұрын

Muito obrigadaa, Phelipe 💜

@Zero.Matheus 9 ай бұрын

parabens Fer, descobri seu canal esses dias e to amando :D obg

@kipperdev 9 ай бұрын

Muito obrigadoo, @MateoAtalo Fico muito feliz que esteja gostando do canal💜

@user-qh3fm3pb7o 9 ай бұрын

Em cada vídeo seu suas explicações ficam melhor. Guria

@kipperdev 9 ай бұрын

💜💜

@victormarques9181 9 ай бұрын

Fernanda, uma outra boa ideia é subir com Heroku, assim a pessoa também pode ver o Deploy como funciona com Git em CI/CD porque do jeito que você fez qualquer modificação no site vai envolver de novo essa operação toda de subir os arquivos manualmente no servidor

@kipperdev 9 ай бұрын

Valeu pela sugestão Victor! 💜 E sobre essa questão do CI/CD, com essa solução que escolhi também podemos fazer uma esteira de CD para fazer o deploy automaticamente após qualquer push ou merge... só não fiz por conta que não era o objetivo do vídeo, mas já tem vídeo sobre isso aqui no canal 😄

@doglassousa9413 9 ай бұрын

òtima aula Fernanda, sua didatica é exelente por sinal. Só uma dúvida, no HTML não seria melhor colocar o fora do ? De forma semântica.

@kipperdev 9 ай бұрын

Obrigada Doglas!!! Claroo, seria sim, inclusive mais pro final do vídeo eu corrijo esse erro hahaha eu coloquei dentro do header sem querer.

@chaienekrebs4563 9 ай бұрын

Parabéns pelo teu conteúdo Fer 🤩🤩

@kipperdev 9 ай бұрын

Muito obrigadaa, @chaienekrebs4563 💜

@tiagohourneaux1349 9 ай бұрын

Curti demais o conteúdo Fe, parabéns!!

@kipperdev 9 ай бұрын

Que bomm, Tiago! Fico feliz 💜

@tubalaokk 9 ай бұрын

Eu odeio usar position absolute nos meus projetos. Na hora que vou deixar responsivo zoa tudo kkkkk. Uso absolute só em casos bem extremos mesmo. Não usei ele pra fixar no meio não. Além de ser um código mais complicado pq usa transform translate, com o display flex ja fazemos isso.

@kipperdev 9 ай бұрын

Muita gente pensa assim também hahahh Mas dependendo do caso eu uso absolute mesmo

@ricardoricarte1776 9 ай бұрын

Oi Fernanda, poderia fazer um conteúdo consumindo uma api de GPS. por exemplo: Monitorar entregas, delivery, em tempo real. aqui no youtube não achei nada relevante, ajudaria bastante, ainda mais com sua ótima didática...Abrax

@kipperdev 9 ай бұрын

Oii, Ricardo. Boa! Achei legal a ideia. Vou trazer algo assim em algum vídeo Abraços 💜

@cachorrinhobalofodepoisdor6479 4 ай бұрын

amo seus videosssss

@Pewiebe 9 ай бұрын

Amo seus videos!!

@kipperdev 9 ай бұрын

Que bomm, feliz em saber 💜

@zymbc 8 ай бұрын

Maravilha. Nova subscrição aqui.

@tiagorodriguesazevedo9361 9 ай бұрын

Ótimo vídeo fê!

@kipperdev 9 ай бұрын

Muito obrigadaa, Tiago💜

@EMonteiro 9 ай бұрын

Admiro muito o seu conhecimento, espero um dia ser semelhante, sucesso.

@kipperdev 9 ай бұрын

Muito obrigadaa, @EMonteiro 💜 É tudo questão de muita prática Sucesso pra você também!

@Fabandy88 8 ай бұрын

conteudo foda, continua ;)

@marlosbross423 9 ай бұрын

Show de bola

@delvyodc7231 9 ай бұрын

Esse site é muito fodasso !

@regashira 6 ай бұрын

Plural de pixel, é pixels

@Jhoonnn 9 ай бұрын

Excelente vídeo 🚀

@kipperdev 9 ай бұрын

Muito obrigadaa, Jhon E muito obrigada pela confiança por se tornar membro💜

@Jhoonnn 9 ай бұрын

@@kipperdev eu que agradeço Kipper pelo conteúdo fantástico que você vem fazendo!!! Pode ter certeza que estarei aqui para aprender cada vez mais ❤️🥰

@Eliasdevcode 9 ай бұрын

Conteúdo massa ❤

@kipperdev 9 ай бұрын

Valeuu Elias! 💜

@brunopereira8325 9 ай бұрын

Você é muito braba👏🏽

@kipperdev 9 ай бұрын

💜

@roddito 9 ай бұрын

Por que dá erro se botar bg-primary em vez de --bg_primary?

@kipperdev 9 ай бұрын

Por que as declarações de variáveis customizadas no CSS é feita obrigatoriamente usando um nome que começa com um hífen duplo (--), sem ele o CSS não consegue identificar que é uma variável e não vai funcionar :(

@jeanjack7616 9 ай бұрын

Fe parabens pelos videos, quero começar a estudar pra ser um futuro DEV, o que daria de dica, o que hoje ta sendo o mais pedido no mercado em relação a linguagem utilizadas?

@lindifarias2456 9 ай бұрын

Oi fernanda , vi no seus vídeos que vc é formada em engenharia de software, queria sua opinião de qual instituição vc acha que tem um metodo excelente de aprendizado. Amo seus videos ❤

@kipperdev 9 ай бұрын

Oii Lindi, na verdade eu curso Ciência da Computação! Eu trabalho já como Eng. de Software no Itaú, porém estou concluindo a gradução de CC (estou no semestre 7 de 8). Sobre instuições, eu só conheço as da minha região (Rio Grande do Sul), então universidades como UFPEL, FURG, UFRGS, PUC, Unisinos sei que são ótimas!

@leosilva0411 9 ай бұрын

Valeu!

@luiz.henrique9 9 ай бұрын

Oi Fernanda, acredito que ao fazer o build do React também temos arquivos estáticos. Por que não funcionaria jogar para o S3 nesse caso?

@kipperdev 9 ай бұрын

Oii Luiz. Ótima pergunta! É mais uma questão de SEO (Search Engine Optimization). Apesar de termos arquivos estáticos com o build do React (o que nos permitiria usar no S3), o que temos no final é um arquivo JS que, quando necessário, vai montar tudo na tela, inserindo os componentes na tela de acordo com o necessário. Isso funcionaria para mostrar o nosso site para humanos, mas os robôs indexadores não esperam essa montagem ser concluída. Eles sequer habilitam o JS na hora de fazer uma requisição. Ou seja, eles teriam como retorno um site vazio e acabariam indexando o nosso site assim. Apple.com pra eles significaria nada. Isso faria o nosso site não aparecer em pesquisas do Google, por exemplo. Agora imagina pesquisar Apple no Google e só aparecerem maçãs... Alguém seria demitido hahah Espero ter ajudado 💜

@luiz.henrique9 9 ай бұрын

@@kipperdev Muito obrigado pela explicação!

@andreavelino_ 9 ай бұрын

Opa Fernanda, você sabe dizer qual é a prova de proficiência de inglês que as empresas estrangeiras pedem?

@kipperdev 9 ай бұрын

Oii, Andre! Depende do lugar. Se eu não me engano, Australia precisa de um TOEFL e algumas empresas dos EUA tbm pedem (mas não deve ser obrigatório por lei, daí depende de cada empresa)

@natadossantos3702 9 ай бұрын

Fer, você consegue me manda o link do figma? acabei não conseguindo encontrar, fui até os links no Reame, mas também não encontrei!

@kipperdev 9 ай бұрын

Oii, Nata. Claro! www.figma.com/community/file/1175869172569168844

@elieudosilva23 9 ай бұрын

Boa noite, vc usar vscode inglês ou português??

@kipperdev 9 ай бұрын

oii, eli! eu uso em português

@DenyellPlayer 9 ай бұрын

Queria muito chegar até o final 😢 mas as imagens não consigo baixa no figma

@kipperdev 9 ай бұрын

Que estranho, Denyel. Você selecionou a imagem e clicou em "Export"?

@DenyellPlayer 9 ай бұрын

@@kipperdev sim🥺 deu erro ai não vai em avg aí mudo para outros formatos aí baixa uma imagem branca.

@nicolascarvalho8087 9 ай бұрын

Bom dia Fernanda, conheces algum serviço que eu possa hospedar meu backend? Não precisa ser gratuito, desde que o valor seja acessível.

@kipperdev 9 ай бұрын

Oii Nicolas, tudo bem? Tem vários, mas dependendo do que você for hospedar uns podem ser melhores que os outros - O Render é um site que eu gosto bastante, ele é bem simples de usar render.com/ - Digital Ocean é um site super famoso de hospedagem. www.digitalocean.com/ - Netlify, como o Render, acho super bom e fácil de usar. www.netlify.com/ - Heroku é conhecido e bom, mas não tem Free Trial mais. www.heroku.com/ - AWS é super completa mas requer um pouco mais de configuração. Tem vídeo aqui no canal fazendo deploy lá. aws.amazon.com/pt/

@nicolascarvalho8087 9 ай бұрын

@@kipperdevVou dar uma olhada em todos, muito obrigado!

@kipperdev 9 ай бұрын

@@nicolascarvalho8087 por nada!