CONSTRUA UMA LANDING PAGE COM HTML E CSS

Подписаться 304 тыс.

Просмотров 77 тыс.

50% 1

Hospedagem de sites anuais na Hostinger com desconto: www.hostg.xyz/SHE8e + cupom RAFA
No video de hoje eu mostro pra vocês como é simples e rápido montar uma página web de landing page apenas com HTML e CSS!
Nesse caso, utilizamos o projeto BalleCoffee, uma plataforma de receitas de café! ☕️
O que mais você quer ver aqui no canal? Comenta aqui embaixo pra eu saber!
------------------------------------------------------------------------------------------------------------------
Links importantes:
Desconto da ALURA: www.alura.tv/rafaballerini
Visual Studio Code: code.visualstudio.com/Download
Figma com o Design: www.figma.com/community/file/...
Google Fonts: fonts.google.com/
Minhas redes sociais: beacons.ai/rafaballerini
-------------------------------------------------------------------------------------------------------------------
#html #css #landingpage

Наука

Опубликовано:

3 дек 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 144

@felipenunes7415 5 месяцев назад

Mds que nostalgia, lembro dos seus primeiros vídeos de projetos, que me fizeram entrar na área ❤

@witalorocha 2 месяца назад

Não gosto de comentar vídeos. Mas eu fiquei impressionado com a inteligência e habilidade dessa mulher! Parabéns! Detalhe que sou engenheiro civil,nada a ver com programação porém deu pra acompanhar tudo. Estou fazendo uma landing Page para minha noiva.

@robinsonferreirasilva1258 5 месяцев назад

Rafa acompanhei o seu vídeo ontem e sei te dizer que foi ótima. Parabéns! 😊

@danilojoseduarte7551 5 месяцев назад

Muito Top, ficou show Rafa! Obrigado pelo video/aula 🤟🖖

@eduardohilgert7626 5 месяцев назад

Bah muito show achar conteúdos assim, principalmente para pessoas como eu que estão iniciando na área, show de bola de mais, thank you very much 🙏

@IkkydePeixes 5 месяцев назад

Alguns meses atrás, seu primeiro vídeo de landing Page foi o que me ajudou a começar, e hj é muito bom poder ver esse vídeo tendo propriedade de entendimento. 🎉

@ljorgworks 3 месяца назад

caraca Rafa, bizarro como vc deixa isso bizarramente simples! tomei coragem e to partindo pro meu primeiro projeto em code por causa desse video perfeito

@hazyharp Месяц назад

nossa fiquei vendo html 1 ano inteiro no curso de tecnico de informatica para interenet e nunca aprendi tanto quanto nesse video manja muito meus parabens

@senadxs 5 месяцев назад

você não tem noção do quanto esses videos me ajuda, estava estagnado há 2 semanas sem conseguir escrever uma linha de código, acho que tive uma sobrecarga e estava desanimado, vou voltar agora.

@isaque5811 5 месяцев назад

Caraca, ontem eu fiz uma landing page baseada no seu vídeo anterior. Tô treinando a criação de sites estáticos variados (sem JS) e esse vídeo veio na hora certa.

@isaque5811 5 месяцев назад

Acabei de fazer o formulário (do vídeo- formulário com html e css), todos os dias vou indo praticando que logo estarei craque nisso. Já terminei o curso de lógica e vou entrar em JS agora, até o final de 2024 quero estar empregado ksksk

@tiagoandreilopesrego2426 5 месяцев назад

@@isaque5811 eu to fazendo tb vários projetos em html e css, to me saindo muito bem, agora só estou com um pouco de medo de entrar em javascript, mas com fé em Deus vai dar tudo certo

@ruanoliveira1288 5 месяцев назад

@@isaque5811 seu comentário me inspira Fiz uma land do Mario Até que ficou legal 😊

@kahhkahh123 5 месяцев назад

Você está estudando pra front ou pretende ir pra back?

@isaque5811 5 месяцев назад

@@kahhkahh123 front, sei que o mercado tá com muita vaga, mas muita gente disputando por elas, logo fica difícil pra iniciantes entrar, mas sei que vou me destacar. Além disso, já tô usando estratégias para aumentar as chances de ser empregado e buscando contato com quem já é da área, assim terei mais chance

@BrasilisMusic 4 месяца назад

Gosto de estudar e aprender coisas novas, trabalho na área de TI mas não em programação! Excelente conteúdo, Parabéns Rafaella!

@amandabrito5025 5 месяцев назад

muito rafa, obrigada por compartilhar seu conhecimento de graça, likeee

@HardGSs 5 месяцев назад

muito bom realmente ficou incrivel, parabens ruy e rafa, e equipe ballerine o video ficou otimo 😎👍

@cibelletrip 5 месяцев назад

Você é maravilhosa! Que seu canal nunca acabe, pois ele é super necessário!

@rethman53 5 месяцев назад

Obrigado pelos ensinamentos!

@Illudius 5 месяцев назад

Muito bom o conteudo !! Estou aprendendo bastante, obrigaado !!

@kevinnardotto 5 месяцев назад

Muito obrigado pelo seu incrível vídeo

@marcioperozin 5 месяцев назад

Muito bacana Rafa.Valeu. Abração.

@kienny6851 5 месяцев назад

Opa Rafa, ótimo vídeo! 👏🏻 Poderia falar depois quais são as extensões que você utiliza no seu vscode e para que serve?

@JosubaTech 4 месяца назад

Seria interessante Rafa, quando vc for fazer a parte do JavaScript, utilizar o Svelte. Lembro de uma palestra q vc postou aqui no RU-vid sobre e seria interessante. Aliás, ótimo trabalho. Seus vídeos são inspiradores.

@paris6679 Месяц назад

Rafaella! Fenomenal fazer primeiro todo HTML e depois o CSS. Isso para o COGNITIVO é ótimo, pois pensar e construir HTML e CSS juntos são processos completamente opostos. Galera! A Rafaella descobriu e compartilhou não só uma solução, mas 100% a regra de capacidade e velocidade de construção. Em nome de todos os inscritos quero deixar o meu Muuuuuuuuuuuito Obrigado.

@minutoalagoano1864 3 месяца назад

RAFA EU TE AMO OBRIGADO POR EXISTIR ANJA ALADA DO SENHOR

@gabrieldonatojuares6299 5 месяцев назад

Rafa, usa o Salve Automatico, assim quando vc fazer qualquer alteração, o Live Server já atualiza

@helldragom Месяц назад

Você explica bem boa professora.

@dwluciomartins 5 месяцев назад

Para quem ta iniciando eh uma boa opcao!

@ivinaraquel7013 5 месяцев назад

Eu adoro esses vídeos, estou com dificuldades no CSS e seus vídeos estão me ajudando muito, OBRIGADA!

@carlosbarross 5 месяцев назад

Eu parei pq fiquei com dificuldades em grid e Flexbox kkkkkkk vou voltar

@marianaschlickmann2203 3 месяца назад

Oiii, não achei a continuação com a paste de JS, você ainda vai postar? Gostaria de pegar essa parte também! Ótimos vídeos, está me ajudando demais a voltar pra Front-End :)

@AndersonCSilva-mv8br 5 месяцев назад

Muito bom gostei 👏🏻👏🏻👏🏻 Quando vai sair a continuação?

@mayconrocha8723 25 дней назад

Sensacional Rafa.

@rogeriogbarbosa 5 месяцев назад

Oiiii, Fafa, sua linda... Está sumida... Bom te ver produzindo s2 bjusss

@JoaoVictor-gc6op 4 месяца назад

Rafa,vc poderia fazer um to do list com html,css e js

@SOBR4LZINFF 5 месяцев назад

Rafaa, comprei a alura por sua causa, quais formações ensina la?

@vava250 9 дней назад

o cor do itens de menu para mim não funcionou, não foi aplicada como esta no video, tive que aplica diretamente na tag

@MarcosFelipe-up9lc 5 месяцев назад

Top!!!!

@Aless-2024 5 месяцев назад

Oi linda! Tá ótimo.

@franciscocleinaldobarbosad8400 5 месяцев назад

Rafaella quando vc vai lançar o vídeo dando continuidade para adicionarmos o js??? ;)

@user-ug9rd3yw4l 5 месяцев назад

Rafaa, tem como disponibilizar o código no github? Obrigadinhaa

@joaopaulorodrigues1630 3 месяца назад

Oloco, vc emagreceu em rafa

@luishannisch2358 5 месяцев назад

As imagens que eu baixei são pequenas naturalmente, não apareceram primeiro grandes igual no seu.

@samuelsoares1298 Месяц назад

top Dmais 😀

@rize1812 5 месяцев назад

Seus vídeos me fazem esquecer o qual frustrante e a minha situação de ficar estagnado e não arrumar estágio pra conseguir entrar na área obrigado k

@aatroxidadehighlights5221 5 месяцев назад

tenta começar como freelancer.

@brasiliano3201 5 месяцев назад

no mei código os links dentro da nav estavam com href, e não funcionou a color até eu retirar o href de cada . Pq diabos isso aconteceu?

@Reemi 5 месяцев назад

balle, qual teclado voce usa pro mac? estou a procura de um

@HailtonAssisdaSilva-jx3fn 3 месяца назад

Ué professora. Assisti até o final e não vi o restante. Cadê a parte do Javascript?

@yours167 5 месяцев назад

Nice 👍👍👍

@diegograciliano4583 5 месяцев назад

1:36:33 deploy do projeto

@lucastomazini58 2 месяца назад

o vídeo da parte de js está disponível?

@saciprogramacao 5 месяцев назад

esse negocio de aula flexbox seria uma extensao onde contem landing page para estudar?

@saymonmedeiros4912 5 месяцев назад

Deixa a Live no ar !?

@diegoskt5 3 месяца назад

Sou iniciante no front-end e ouvi pessoas falando que h1 só pode usar um por pagina, e vi outras pessoas falando que pode usar mais de 1 h1 por pagina, que foi algo que o pessoal do google disse... qual é o certo? Obrigado pelo conteúdo, tá me ajudando muito!

@thayanesilva79 5 месяцев назад

Olá, eu tenho uma versão do vscode um pouco mais antiga, não consigo atualizar pois meu computador não é compatível com a nova versão. Por isso não consigo baixar a extensão do figma, o que eu faço?

@asleepemy4741 Месяц назад

Por que usar o rem e não o pixel? Tem algum motivo alem do costume?

@alar2763 4 месяца назад

Oi Rafaella. Eu fiz alista com 'dl', já para não aparecer aqueles caracteres antes da lista e o text-decoration eu coloquei no reset '*'. Algum problema?

@gabrielbk4117 5 месяцев назад

PERGUNTA: Se eu estou desenvolvendo um site para alguem, ex um consultorio odontologico, na hora de criar a hospedagem eu mesmo vou fazer tudo e "tomar conta" do site? ou eu faço o envio dos arquivos para o consultorio fiscticio fazer o upload? só por desencargo de consciencia hehe

@brasiliano3201 5 месяцев назад

Também tenho essa dúvida hein. Up

@gpd38 4 месяца назад

Eu faria tudo, pois acredito eu que ele já queira o site no ar e não ter que fazer mais nada. Depois olharia um contrato de manutenção mensal ou anual, caso ele desejasse atualizar alguma informação.

@gabrielbk4117 4 месяца назад

@@gpd38 entendi, obrigado pela resposta

@user-kg3gb3rh6j 5 месяцев назад

So loko por essa bailarina

@Jow__ 5 месяцев назад

Porque exatamente max-width de 1120px ? Como eu acho/defino esse valor

@Sjjsjsjsjsjd 5 месяцев назад

Boa tarde

@shirakotakamoda1862 2 месяца назад

por favor traz o video com javascripty estou precisando muito de mais ajuda sobre eu pretendo ser web

@andersonlemes9927 4 месяца назад

Estou começando no CSS, alguém me tira essa duvida, a cor foi definida para todo body, porem ao adicionar o href no link, ele trabalha com outras cores, como faço para desativar a interação de cores do texto que possui link?

@lucienelima8 5 месяцев назад

Onde acho esse assets no vsc?

@natalnoelmachadojunior1386 5 месяцев назад

vai continuar esse projeto com javascript ?

@xandi6461 4 месяца назад

Quando sai a aula com Javascript??

5 месяцев назад

Alguém poderia explicar como adicionar o emoji? Eu não consegui entender pelo vídeo. Estou aprendendo muito com esses vídeos de projeto, sou iniciante e esses vídeos tem me ensinado muito, obrigado pela dedicação em ensinar!

@WillCollection 5 месяцев назад

Oi, @InteligenciaFinanceira1. Você pode colocar o emoji fazendo o seguinte, clica no lugar onde você deseja colocar e aperta a tecla do Windows e ponto "." juntos. Com isso, vai abrir uma nova janela pra você poder selecionar o emoji que você deseja colocar. Um abraço.

5 месяцев назад

@@WillCollection muito obrigado, mas eu tentei esse método e não funcionou, vou continuar tentando descobrir aqui, abraço meu caro!

@douglassilva1886 4 месяца назад

Rafa! Vou começar ads. Tenho ansiedade de não dá certo e muito medo. 😢

@Sjjsjsjsjsjd 5 месяцев назад

Oi Rafa, seria legal se você fizesse um vídeo sobre o PHP no laravel

@maviuki 4 месяца назад

so consigo fazer pagina fixa com html e css??

@CorrendoContraotempo 16 дней назад

figma está pago, vc recomendaria alguma opção gratuita?

@bidahlfc 5 месяцев назад

Alguém soube como fazer os cards ficarem um do lado do outro? no final ficou um embaixo do outro

@Ricardo_Rosa 5 месяцев назад

Não estou a conseguir adicionar mais caixas como a "EM ALTA 🔥" e alinhar como no design FIGMA :(

@geizi4266 3 месяца назад

Mds, em pensar que não tem mais dev mode gratuíto, apenas 2 meses depois desse video

@yunglc7682 3 месяца назад

SIMMMM Q RAIVA, agr n sei como faço pra pegar as configurações das fontes q seriam mostradas no figma😭😭

@rinellyvasconcelos6171 2 месяца назад

Estou com a mesma dificuldade :( @@yunglc7682

@BRdri 28 дней назад

Agora que está pago o Figma modo dev complicou 😢

@ArilioMaestrosClasesOnline Месяц назад

Olá...vc faz trabalho como free-lancer, caso sim ..como te contratar?

@alicescherbatsky2482 2 месяца назад

Pelo amor de Deus, como eu faço para colocar uma receita do lado da outra igual a do figma???? Já usei border-box, inline-block, justify content e nadaaaa

@Thaylon2003 4 месяца назад

html e css ela entende

@pedrosousa6549 4 месяца назад

alguem poderia me explicar o 'MAX-WIDTH', quando coloco ele fica td desalinado n entendi

@josejunior3250 Месяц назад

Alguém sabe como deixar os cards lado a lado?

@carlim5557 5 месяцев назад

faz backend desse projeto, Rafa!

@nosense1272 4 месяца назад

ela n sabe

@marcoaurelioribeiro9229 Месяц назад

Boa tarde Rafa, como vc abre essa janela de emojis? Tem algum comando específico pra isso?

@cookie_56 Месяц назад

tecla windows + ponto

@diegorodrigues7602 5 месяцев назад

Estou tentando separa o header em 3 mas o github nao desgruda de geito nenhum e ta fora da ul e dentro do nav nao sei pq essa peste nao desgruda KKKKK

@isabellasantos845 2 месяца назад

Gente alguém sabe alguma outra opção parecida com o Figma? pq infelizmente agr o modo dev é pago🥲

@NIKC.BRAZIL 4 месяца назад

Aquela frase la atras no cenario onde vende????

@nathaliamaia5775 4 месяца назад

A gata parece que rackeia o nosso celular e escuta o que a gente precisa. Falei disso e Pah! Video da ballerini

@mateusgarciaouti 3 месяца назад

Justo hj que fui usar o dev do figma, ele começa a ser pago 🥲

@yunglc7682 3 месяца назад

tu conseguiu o código das fontes do google fonts q são importadas pro css? queria muito, mas sem o dev mod eu n consigo😭😭

@BRdri 28 дней назад

Agora que está pago o Figma modo dev complicou 😢

@raulcryptoguy 5 месяцев назад

acho que você esqueceu de linkar as categorias do menu

@maviuki 4 месяца назад

essa atualização é nova do figma??

@yunglc7682 3 месяца назад

infelizmente, o dev mode agr tá pago

@a1nacarolina 5 месяцев назад

Que Deus nos abençoe e que a gente consiga realizar os nossos sonhos. Quem aceita Jesus Cristo como salvador e se arrependem dos pecados tem a vida Eterna. Tem a Bíblia na Internet, ore sempre.

@klaussantos4712 3 месяца назад

Alguem pode ajudar, baixei a extensão do figma, mas ao invés de abrir no vscode, ele redireciona para o site do figma.

@yunglc7682 3 месяца назад

é pq o figma teve umas atualizações q deixou o serviço do "dev mode" q é um modo do figma p desenvolvedor pago vei😞😞 aí essa função de usar o figma no vscode n dá mais pq tem q pagar, por isso redireciona pra o site, esse bagulho foi só pra fuder c a vida do programador

@yunglc7682 3 месяца назад

e pra o nosso azar ele passou a ser pago 2 meses dps desse video, né foda?

@BRdri 28 дней назад

Agora que está pago o Figma modo dev complicou 😢

@gabrielpaloco9192 5 месяцев назад

Qual o atalho pra comentar ?

@Filipecastro1987 5 месяцев назад

no meu vscode é control + ;

@gabrielpaloco9192 5 месяцев назад

@@Filipecastro1987 positivo, vlw✌🏻

@francielyoliveira1647 2 месяца назад

alguém teve problemas ao instalar a extensão ? Instalei e não consegui usar, poderiam me ajudar com isso, por favor?

@soph2486 2 месяца назад

Do figma? Agr o dev mode é pago, vc só consegue usar a extensão se pagar

@anajuliadec.leandro5796 4 месяца назад

Gente alguém conseguiu baixar as imagens em tamanho real? Quando eu dou o export pela extensão do figma vem ela pequena e já arredondada.

@cristhoferb 4 месяца назад

Sim, consegui. As imagens que ela usou no vídeo não são as mesmas q estão no figma. Para baixar as imagens, em tamanho maior, vc vai precisar entrar no figma pelo navegador (não dentro do vscode). Lá você vai poder escolher entre duas opções para baixar, uma no tamanho pequeno e a outra no tamanho maior.

@ashura_vlr 5 месяцев назад

pgt sincera, pq desenvolver uma landing do zero se hj existem tantas ferramentas com layouts que te dao uma base gigante onde tu pode so editar algumas coisas?

@Rafaela.- 5 месяцев назад

Para aprender primeiro o que se está fazendo e depois poder usar as ferramentas ,como o chat gpt para quem não tem entendimento no que está fazendo pode atrapalhar porque se vc ñ sabe o que está fazendo como vai analisar o que vai usar ,e que ótimo que ela disponibiiza tempo para ensinar quem quer

@raynnenogueira 5 месяцев назад

Onde ta o repositório?

@yunglc7682 3 месяца назад

ela nem postou vei😭

@gabirocha_ 5 месяцев назад

Caso fosse pra algum cliente, teria que enviar aqueles arquivos pra ele? Dúvida de quem recém ta entrando nesse mundo kkkkk

@arynicoleli5885 2 месяца назад

Não consegui usar o Figma no Visual Code.

@BRdri 28 дней назад

Agora que está pago o Figma modo dev complicou 😢

@HailtonAssisdaSilva-jx3fn 3 месяца назад

Eu não sei mexer com esse tal de Figma, queria baixar as imagens do projeto, mas não consigo.

@kimfom 5 месяцев назад

which language is this? Spanish? Portuguese?

@Isaac144hz 4 месяца назад

Brazilian portuguese

@raulidev 5 месяцев назад

Sai do básico Rafaella kkkkkk

@jbrunops 3 месяца назад

Essa página dentro do VSCode, se não me engano é do Figma? E como você consegue ver esses elementos da página que está construindo dentro do VSCode? Eu geralmente aperto F12 no navegador 😂