CLONANDO HOME PAGE DA APPLE COM HTML+CSS
HTML-код
- Опубликовано: 25 ноя 2024
- 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
🎁 Aprenda HTML, CSS, JavaScript e muito mais com 10% OFF
tr.ee/kipperdev-desconto-rocketseat-one
Fê, graças a sua recomendação estou estudando na rocket, mas eu me esqueci que você tinha o cupom 😢
Pra gente que é mais iniciante, esse tipo de conteúdo ajuda demaiss.
Que bomm, @juninhogameplayyy
Fico feliz que ajude quem está iniciando.
O intuito desse vídeo foi justamente isso 💜
Eu ia comentar isso mais nem vai precisar mais 🤣🤣🤣 só agradecer ela 😄
Nossa esse vídeo é muito bom pra quem está iniciando os estudos em html e css igual a mim. Continue a fazer mais vídeos assim por favor ajuda bastante ❤.
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! 🙏🏻
Que legall, Lucas 💜
Realmente ajuda muito a praticar.
Que bom que você pelo menos descobriu o que você gosta hahah
toda vez que eu vejo os seus videos eu me apaixono, mulher vc é extremamente incrivel
Parabéns pelo conteúdo Fe.
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.
Que legalll, Lucius
Muito legal ler esse tipo de comentário, fico muito feliz em ajudar 💜
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
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
Como assim a Fernanda manja muito de front e ninguém contou, obrigado pelo rico conteúdo, sou fã demaisssssss
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
Que bomm, @biolii. Muito bom poder ajudar a descomplicar
E muito obrigado pelo seu comentário, feedbacks assim me deixam muito feliz 💜
Estou começando nos estudos de front end, esse vídeo é tudo oq eu precisava!!!!!
Boaa, @rosarvitor, que bom 💜
Agora é praticar bastante!
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❤.
Muito obrigadaa, Valmir. Muito bom saber que o meu jeito de explicar tem te ajudado.💜
Que aula!!!!! gratidão.
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
Muito obrigadoo 💜
Que legall, Klaus, vou trazer sim!
excelente conteúdo, eu sou iniciante, conheço algumas tags e consegui acompanhar tranquilo, obrigado !!
Que bomm, Davi! Era esse o intuito!
Fico feliz que tenha conseguido seguir e que tenha gostado 💜
to fazendo curso tem 8 meses e to nessa fase de html e bootstrap e q video sensacional de vdd , ajuda muito parabens!
Muito obrigadaa, @sdfgpegasus4700
Fico feliz que tenha ajudado você 💜
Sua forma de explicar as coisas é bem leve e de fácil entendimento. Parabéns!
Que bom que você gostou, Daniel 💜
Em cada vídeo seu suas explicações ficam melhor. Guria
💜💜
parabens Fer, descobri seu canal esses dias e to amando :D obg
Muito obrigadoo, @MateoAtalo
Fico muito feliz que esteja gostando do canal💜
Ótimo conteúdo, Obrigada pela dedicação!
Muito obrigadaa, @stefannymaximo 💜
Vc é muito didática 👏🏻👏🏻
Muito obrigadaa, Phelipe 💜
ò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.
Obrigada Doglas!!! Claroo, seria sim, inclusive mais pro final do vídeo eu corrijo esse erro hahaha eu coloquei dentro do header sem querer.
amo seus videosssss
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.
Muita gente pensa assim também hahahh
Mas dependendo do caso eu uso absolute mesmo
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
Oii, Ricardo.
Boa! Achei legal a ideia. Vou trazer algo assim em algum vídeo
Abraços 💜
Parabéns pelo teu conteúdo Fer 🤩🤩
Muito obrigadaa, @chaienekrebs4563 💜
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
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 😄
Curti demais o conteúdo Fe, parabéns!!
Que bomm, Tiago! Fico feliz 💜
Admiro muito o seu conhecimento, espero um dia ser semelhante, sucesso.
Muito obrigadaa, @EMonteiro 💜
É tudo questão de muita prática
Sucesso pra você também!
Maravilha. Nova subscrição aqui.
Plural de pixel, é pixels
Show de bola
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?
Oii, Jean.
Muito obrigado!
Eu tenho visto bastante vagas de Java ultimamente!
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 ❤
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!
Esse site é muito fodasso !
Amo seus videos!!
Que bomm, feliz em saber 💜
Ótimo vídeo fê!
Muito obrigadaa, Tiago💜
Por que dá erro se botar bg-primary em vez de --bg_primary?
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 :(
Valeu!
Muito obrigadaa, Leo 💜
Excelente vídeo 🚀
Muito obrigadaa, Jhon
E muito obrigada pela confiança por se tornar membro💜
@@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 ❤️🥰
Você é muito braba👏🏽
💜
Conteúdo massa ❤
Valeuu Elias! 💜
conteudo foda, continua ;)
valeuuu Fab!!
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?
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 💜
@@kipperdev Muito obrigado pela explicação!
Opa Fernanda, você sabe dizer qual é a prova de proficiência de inglês que as empresas estrangeiras pedem?
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)
Bom dia Fernanda, qual tema você usa no vscode ?
Bom dia Luis! Eu uso o Emerald, versão Dark!
Valeuuu!!@@kipperdev
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.
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/
@@kipperdevVou dar uma olhada em todos, muito obrigado!
@@nicolascarvalho8087 por nada!
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!
Oii, Nata. Claro!
www.figma.com/community/file/1175869172569168844
Boa noite, vc usar vscode inglês ou português??
oii, eli! eu uso em português
qual tema vc usa no vsscode
kipper?
Oii, @K4tofx
O tema é esse daqui: marketplace.visualstudio.com/items?itemName=igornfaustino.emerald 💜
Queria muito chegar até o final 😢 mas as imagens não consigo baixa no figma
Que estranho, Denyel. Você selecionou a imagem e clicou em "Export"?
@@kipperdev sim🥺 deu erro ai não vai em avg aí mudo para outros formatos aí baixa uma imagem branca.
Ela ta mais loooira olha ela
Pq ela fala "mãs" no lugas de mas?
Vício de linguagem
O mesmo ocorre quando nós ficamos começando uma conversa com: Então né, então, é que. Dentre outros.
Deixa eu editar seus vídeos?
Oii, muito obrigado, mas no momento já tenho quem faça isso pra mim!