Transcrições
1. 00 introdução do curso: Se você sempre quis
sair do seu arquivo de
design e ver sua criação ganhar vida
na web, isso é para você. Durante este curso,
mostrarei como transformar um design simples do Figma em
um site ao vivo com a ajuda
do Cursor,
um assistente de codificação gratuito com inteligência artificial O melhor do
Cursor é que você está basicamente conversando
com seu editor de código. Você pode perguntar qualquer coisa,
e o cursor não apenas ajudará, mas também
explicará como construí-lo. É como ter um desenvolvedor
superpaciente sentado ao seu lado. Construiremos nosso
primeiro site usando CSS
HTML e um
pouco de JavaScript,
aprendendo os fundamentos, editando seu design
e, finalmente, publicando um site
real Transformaremos seu
design de um arquivo um site ativo em
menos de uma hora. Este curso é para
você que é designer de interface quer quebrar a
barreira da codificação e começar a criar
suas próprias ideias Nenhuma experiência em programação é necessária, apenas a vontade de
experimentar algo novo Este é um curso de
moonlearning dot IO.
2. 01 O que é cursor: O Cursor é um assistente de
codificação com inteligência artificial que ajuda você a
criar projetos incríveis rapidamente, quase como se estivesse conversando
com seu editor de código Seja você
iniciante ou experiente, cursor torna a codificação mais rápida
e intuitiva, permitindo que você crie coisas
incríveis em pouco tempo Então, por que o cursor é tão bom para vocês, designers,
começarem? Ele permite que você vá
além de apenas projetar e construir produtos completos.
Como isso funciona? Você pode descrever o que
deseja na linguagem cotidiana, e a maldição é que eu
criarei o código para você e sugerirei
onde colocá-lo Você pode perguntar qualquer coisa literalmente, desde como começar a criar um site até adicionar
uma seção de sinalização e formulário ou apenas ajustar o design
durante o projeto Por exemplo, vamos ajustar
a cor
do botão de azul para nossa variável preta. Mas o Cursor também vai
além do editor de código. Então você pode perguntar, por exemplo, como posso
transformar isso em banco de dados? Ou como faço para começar a usar bancos
de dados? O que há aí? O que eu tenho que procurar? E como posso conectar essas coisas? Ele o guiará passo a passo. Como Cursor explica
em vez de assumir o controle, você permanece no controle e a
curva de aprendizado é incrível. Quando estiver pronto para
escrever seu próprio código, o Cursor AI pode
ajudá-lo a encontrar e corrigir erros ou organizar seus
arquivos usando as melhores práticas O Cursor não é apenas
mais uma ferramenta de IA. É uma das ferramentas mais úteis e capacitadoras
do mercado atualmente, permitindo que você vá
além dos arquivos de design e realmente construa seus
produtos como designer
3. 02 O que vamos construir: Durante este curso,
vamos criar um site de
um pager totalmente responsivo do zero com código Como base, estou usando um design Figma que
configurei anteriormente Mas observe que,
para usar o Kersey, você não precisa de nenhum conhecimento do
Figma Você não precisa de um arquivo Figma. Você também pode simplesmente trabalhar a partir de um esboço ou de uma
ideia em sua cabeça Pessoalmente, gosto
muito de configurar meu design em um
software de design de interface de usuário com antecedência Eu posso mover as coisas livremente. Posso pensar nos
componentes e na hierarquia e depois passar para a codificação No entanto, isso depende
totalmente de você.
4. 03 Material de trabalho: Vá para os downloads e aqui você encontrará os arquivos de cada um
dos cursos de aprendizagem do Mu, e você também encontrará um
download para este curso Certifique-se de baixar
o material do curso. Lá dentro, você encontrará diferentes arquivos de cursor para as diferentes etapas nas quais
trabalharemos. Durante o curso, quero
mostrar como abri-los, e você também encontra
o design aqui. Se você clicar no design, terá uma
visão geral em PDF do nosso design, e isso só lhe dará uma ideia do código hexadecimal das cores Você pode copiar
o texto e simplesmente acompanhar e ver o que
vamos construir. Se você não tem
Figma, então
está tudo bem
como referência Se você tem uma conta
Figma e prefere ter o arquivo FGMA
original, basta copiar este link e colá-lo em seu
navegador e ele
criará uma cópia
do arquivo
Figma original para arquivo
Figma original Por favor, não clique nele para
realmente copiar e colar.
5. 04 HTML e css básicos: Um guia super rápido e fácil para iniciantes nos conceitos básicos de HTML e CSS e como eles trabalham juntos
para criar um site Um site é
composto principalmente de HTML. Se você clicar com o botão direito do mouse
em uma página da web em seu navegador, por exemplo, no Chrome, e selecionar Inspecionar, você abrirá as ferramentas do
desenvolvedor Isso permite que você veja
a estrutura HTML da página que você está visualizando no
momento, e você pode até mesmo alterá-la
temporariamente para experimentar. Não se preocupe Essas alterações estão apenas no seu navegador e
desaparecerão quando você atualizar. O código HTML consiste em caracteres entre
colchetes angulares, conhecidos como elementos HTML A maioria dos elementos é
composta por duas tags, uma tag de abertura
e uma tag de fechamento. A tag de fechamento é semelhante
à tag de abertura, mas inclui uma barra
adicional antes do nome do elemento A tag define um
tipo de conteúdo. Por exemplo, a tag P diz ao navegador que exiba o conteúdo incluído
como um parágrafo As tags em si não
são exibidas. A
tag H one to H six, por exemplo, oferece títulos diferentes
em diferentes níveis de importância,
sendo a idade um a mais alta e
H seis a mais baixa Também podemos adicionar atributos
a uma tecnologia que fornecem informações
adicionais,
como usar um atributo de classe
para aplicar estilos. Eu vou te contar mais
sobre isso em um minuto. Também existem
elementos de fechamento automático, como a tag de imagem, que extrai o
conteúdo, no nosso caso, a imagem por meio do
atributo chamado source Mas como podemos configurar uma
página inteira com esses elementos? Bem, a estrutura mais
básica de uma página HMR
consiste em um elemento HML, que contém o cabeçalho
e a seção do corpo O cabeçalho contém
informações do navegador, que não são visíveis,
como o título da página. Então esse é o pequeno nome que você vê na guia do
seu navegador, meta descrição
para mecanismos de pesquisa, e você também pode vincular
folhas de estilo e fontes e assim por diante. A seção do corpo contém tudo o que
aparece na página. Então, seu texto, suas imagens, botões, tudo o que você cria. Aqui está uma lista das tags
mais comuns que você pode achar úteis. Você pode fazer uma captura de tela. Normalmente, a página inicial de um site é chamada de Índice HTML por convenção Você também pode criar subpáginas como uma página Sobre ou projetos Para criar links para essas subpáginas, você pode usar a tag âncora, A. Isso cria um link clicável que você pode colocar
em qualquer lugar Você também pode criar links para sites
externos fora da sua página. No entanto, se você abrir
uma página HTML pura, notará que, embora
o conteúdo esteja lá, ele não parece muito bom. É aí que entra o CSS. Enquanto o HTML controla o
conteúdo da sua página, CSS controla a aparência dos elementos HTML, como cores,
fontes, espaçamento Para conectar seu
arquivo CSS ao seu arquivo HTML, você adiciona um link para ele
na seção principal. Agora, imagine seus
elementos HTML como caixas invisíveis. O CSS permite criar
regras que
controlam aparência e o comportamento de cada caixa e de seu
conteúdo. Uma regra CSS consiste em duas partes
principais, um seletor, que tem como alvo um ou
mais elementos em HML, e uma declaração que define como esses elementos
devem ser A declaração em si é
composta por uma propriedade, como cor, e um valor
correspondente como um código hexadecimal para a cor Você pode adicionar várias
declarações dentro dos colchetes e também pode combinar vários seletores para aplicar
o mesmo estilo a o mesmo estilo Em CSS, os seletores podem ter
como alvo tags simples, mas muitas vezes você verá
classes sendo usadas em vez disso As classes são atribuídas dentro
da tag HTML e depois referenciadas em CSS simplesmente
adicionando um ponto antes do nome As aulas são mais flexíveis
e reutilizáveis, pois podem ser aplicadas a diferentes elementos
para um estilo consistente Existem outras maneiras de
usar lets em CSS. Vale a pena conhecer o seletor
universal, que é um signo e
tem como alvo a página inteira Também temos IDs, e eles são atribuídos
praticamente como classes em HML
e, em seguida, chamados em CSS
colocando uma tag de hash
antes do No entanto, os IDs
só devem ser usados para estilizar um
elemento específico, não vários Embora você possa usá-los em CSS, eles normalmente são usados em JavaScript para comportamento dinâmico. Você também pode ver
seletores que têm como alvo elementos aninhados dentro de
outros Por exemplo, este visa apenas
um elemento de parágrafo dentro
da classe chamada venda. Uma coisa importante
a saber sobre CSS é que ele está em cascata Isso significa que se você aplicar vários estilos ao mesmo elemento, o último terá prioridade. Por exemplo, se você definir a cor para azul e
depois para vermelho, o texto será exibido em vermelho porque a última
regra tem prioridade. Aqui está uma lista dos seletores CSS mais
comuns. Talvez você queira fazer uma captura de tela.
6. 05 Como configurar uma estrutura de arquivos: Para começar, acesse cursor.com, faça login em uma conta gratuita e
certifique-se baixar a
versão desktop do Quando você abre o Cursor
pela primeira vez, provavelmente
verá algo assim ou será perguntado se deseja usar um terminal. Vamos ficar
longe do terminal. Vamos manter as coisas super, super simples para iniciantes
absolutos e vamos
trabalhar apenas com pastas. Então, basta abrir uma pasta
como você sempre faria. No meu caso,
vou criar um, e vou
chamá-lo de café clichê Clique em Criar e
agora basta clicar em Abrir. Em seguida, você verá o espaço de trabalho, e é aqui que todo o nosso
código ficará hospedado mais tarde Então, no lado esquerdo, você vê a pasta
que acabamos de criar. Caso você veja outra coisa, basta clicar
um pouco aqui. Você também pode tentar abrir
uma pasta no menu. Você pode alternar esse menu por Comando e B, caso
não o veja E também queremos outro
menu muito importante porque queremos nosso chatbot
aqui no lado direito Então, eu vou fazer
isso com o menu. Eu vou ver. E aqui em cima, eu
posso ver a aparência, e aqui você vê que esta é
sua barra lateral primária, a esquerda, e então
eu quero a direita, então a secundária,
também podemos usar o atalho
que nos é dado aqui Portanto, você também pode alternar isso
com Option Command e B, no meu caso, em um Mac Se você quiser usar um
atalho para quatro Windows, basta clicar aqui e
ele será exibido Você pode simplesmente
começar agora e dizer à IA o que deseja
construir e ela o
configurará para você. Mas eu prefiro primeiro configurar minha
própria estrutura de arquivos e depois vou falar com
a IA e adicionar todo o meu conteúdo
e todo o meu design. Então, vou clicar na minha
pasta e aqui você pode ver que posso adicionar um arquivo
ou adicionar uma nova pasta. Vou adicionar três arquivos. O primeiro é
chamado de índice HTML, e é muito
importante que você o nomeie exatamente assim. Então o segundo eu
vou chamar de Styles CSS, e então eu vou ter um
terceiro para mais tarde, talvez, que eu vou
chamar de script JS. Para sua compreensão,
o arquivo HTML é para onde vai o conteúdo da
página e fornece
estrutura e significado. Além disso, um arquivo HTML
responderia a uma página que você vê ao
abrir uma janela do navegador. O arquivo CSS, é
aqui que o design da página
é controlado. O CSS lida com todo o
estilo e arranjo. No arquivo JavaScript, é
aqui que o comportamento da
página é definido, fazendo com que ela responda a
qualquer coisa que os usuários façam. Então, coisas como um
clique ou uma entrada. O que vai
manter as coisas muito simples. Tenha um HTML, um CSS e um JavaScript, mas
obviamente você pode ter vários
desses arquivos. A única coisa que você
precisa considerar é que, no HTML, você deve sempre
começar com um HTML de índice
e, em seguida, você pode ter
subpáginas O melhor é que, se
você não sabe nada, basta
perguntar ao seu amiguinho aqui, nosso chatbot de IA Então, por exemplo, digamos, o que o índice HTML faz? Então, realmente veja isso como seu assistente com quem você está
constantemente conversando. É como um desenvolvedor super
amigável que vai se sentar ao seu lado, e qualquer pergunta
que você tenha, você pode fazer. E, a propósito, se
você não entender nada, é só avisar. Então, por exemplo, eu
não entendo. Sou totalmente iniciante
e, em seguida, ele
fornecerá uma
versão apropriada para você entender E é o mesmo
se as coisas quebrarem houver um erro ou
algo não funcionar. Fale com ele, como você falaria com uma pessoa, como se
houvesse um erro. Eu não sabia por que isso aconteceu. Vou acrescentar uma última coisa. Então, na minha pasta principal, vou adicionar
outra subpasta, então não queremos arquivar Queremos uma nova pasta e vou
chamá-la de imagens. E isso está vazio no momento.
7. 06 Use pastas e tema existentes: Você pode simplesmente trabalhar comigo
e
configurar toda a sua própria estrutura
e todo o seu próprio código, ou você também pode, especialmente
se você se perder, abrir algumas
pastas predefinidas que criei para você Portanto, certifique-se de
baixar o material do curso
e, no material do curso, você encontrará
algumas pastas prontas. A propósito, o nome e a quantidade de pastas
aqui podem mudar. Mas digamos
que você queira
pular para a
estrutura de arquivos que eu criei
, pegar a
primeira aqui e abri-la. E você então verá
meu trabalho anterior aqui. Quando começarmos a
adicionar código em um minuto, você verá o meu
mais ou menos assim. Então você pode ver que
há uma
cor muito bonita acontecendo aqui. Inicialmente, você pode
ver uma configuração diferente, e esse é o
tema de cores do seu editor. Se você quiser mudar isso, basta clicar no cursor
aqui no menu, depois clicar na configuração
e encontrar o tema. E aqui no tema, você pode escolher qualquer tema. Estou usando o Monochai, que é uma forma
bastante popular de
ver isso, mas qualquer outro que você também possa usar, ele realmente
muda a cor Então,
deixe-me dar um exemplo como
seria de outra forma. Então, clique nas configurações do cursor, tema e escolha aquele com
o qual você se sinta
confortável. Uma pequena nota lateral
antes de começarmos. Estamos trabalhando com IA,
então estamos conversando com ela
e, mesmo que digamos coisas
iguais ou semelhantes, provavelmente não
obteremos exatamente o mesmo código e
exatamente a mesma redação Isso é absolutamente bom. A parte importante é que você
comece a entender como trabalhar com o cursor e como
criar seus próprios produtos. Não se trata de imitar 100% do que estou fazendo
na tela E muito importante, as coisas
vão quebrar, as coisas vão dar errado. Confie em mim. Não
se trata de deixá-lo perfeito. Trata-se de entender
como corrigi-lo e também como usar o cursor
para ajudá-lo a corrigi-lo.
8. 07 Como configurar nosso conteúdo com HTML e cursor: Então, vamos adicionar um pouco de conteúdo. Vamos primeiro ter certeza de que
temos nosso bate-papo aqui. Portanto, lembre-se de que vamos ver
a aparência
e, em seguida, a barra lateral secundária
ou usamos um atalho Agora, o que
queremos criar é uma página de café de um pager Então eu criei um layout bem
rápido aqui, bastante áspero com o Figma E muito importante, você
não precisa usar o Figma. Você poderia simplesmente falar com o Cursor e construir isso
a partir da sua cabeça. Você poderia ter um pequeno
rabisco em um papel, basicamente, ou usar
qualquer outro software Então, na verdade, estou usando
isso apenas como exemplo. Você não precisa
configurá-lo dessa forma. Vamos dar uma olhada porque
vamos passo a passo. Então, aqui temos
seções diferentes, como um herói, um menu, aqui embaixo, o Futa E você pode ver
que o que eu fiz foi, eu tenho um pouco de
hierarquia aqui Novamente, você realmente não precisa disso. Eu acabei de editá-lo. Então você pode ver que no
herói, temos um H. Essa é uma tag HTML. Se você não estiver familiarizado
com isso, não se preocupe. Na vida real, isso provavelmente também
usaria uma
nomenclatura mais semântica como essa, mas queremos
mantê-la bem simples E então eu tenho uma
hierarquia diferente, g um, g quatro, e alguns textos de cópia para o herói e uma
imagem e o menu Vamos começar com isso. O que basicamente vamos
fazer é dizer ao Cursor exatamente o que
queremos construir e
a forma como o vemos. A propósito, às vezes
você pode encontrar um pequeno arquivo anexado
aqui por padrão. Por enquanto, tire isso porque o que queremos que o
cursor faça é usar a
estrutura que já
configuramos e
eu vou contar. Eu vou dizer que use minha estrutura de arquivos no
Next HTML e estilize Quero criar um site de
uma página para um café chamado cliche Cafe Então, vou dar
um exemplo do que eu digitei. Vou
acelerar isso e lê-lo para você, então não espere que
você possa digitar junto. O que você pode fazer é
parar o vídeo e
digitar o mesmo ou
criar seu próprio texto. Não significa que o
meu seja melhor, e
provavelmente não obteremos
a mesma saída de qualquer maneira Vou ler o texto para você
e, a propósito, não importa
se você
tem erros de digitação fantásticos Então, faça uma primeira
seção chamada herói. Isso é meio texto
à esquerda e meia
imagem à direita. O texto está como H one, clichê Café, depois
abaixo do nome da rua A cidade com quatro anos e
menos em texto copiado, use P. Essa é uma tag para copiar
texto, o horário de funcionamento. Faça uma segunda
seção chamada menu, e aqui eu quero adicionar o menu, que consiste em quatro bebidas e quatro opções de comida, todas
contendo um nome, que é copiar o texto em negrito, depois abaixo
da descrição da comida em cópia, e apenas P normal, e
abaixo disso o preço. No final, adicione um rodapé
com os detalhes do contato. Vamos pressionar Enter. Ok, ótimo, vamos dar uma olhada no que temos. Novamente, isso provavelmente
será muito diferente para sua geração do
que eu tenho aqui. Como você pode ver, aqui está uma estrutura simples
do seu pager quente E primeiro de tudo,
temos o índice HTML
e, mais abaixo,
ele está nos dando um pouco de CSS. Portanto, se você quiser
adicionar o HTML do índice, verifique se você está
no arquivo HTML do índice E então, se você passar o mouse sobre ele, verá um pequeno botão de aplicação, clique em Continuar e agora ele gerará todo
esse código para você Por enquanto,
vamos clicar em Aceitar. Você pode ver aqui
que há uma cabeça. Isso não vai ser exibido. Esta é apenas uma informação geral
sobre esta página e já está aqui, inserindo
nosso estilo CSS Está fazendo referência a esse arquivo
CSS aqui. Aqui está o corpo, tudo o
que está na tecnologia corporal, você pode ver que isso é o que veremos exibido
mais tarde. Agora,
certifique-se de salvar isso. Se você ver essa pequena bolha
aqui e ela não estiver salva, basta pressionar Command e S, e assim que você ver a
cruz novamente, ela será salva Agora vamos pular para os estilos e também adicionar nossos estilos. Então, aplique, continue, e agora vamos adicionar
os estilos aqui para nós. Vamos aceitar isso. E
você pode ver aqui que temos alguns estilos para o herói, para as diferentes seções
e para o Putter Ok, agora queremos
ver como isso se parece. Então, a maneira de ver isso é que você precisa encontrar
seu arquivo HTML de índice. Você pode usá-lo
diretamente do cursor ou pode pular para o
arquivo real onde o salvou e depois
abri-lo com o navegador. A maneira mais fácil é simplesmente
soltá-lo no seu navegador. Ícone ou apenas clique com o botão direito para
abri-lo. E aqui vamos nós. Aqui está nosso pequeno site, obviamente ainda não está
muito bonito, mas temos todo o conteúdo sobre
o qual falamos ao cursor. Ok, vamos
refinar um pouco. E antes de tudo, vamos
começar com a imagem. Então, queremos usar
essa imagem aqui. Então você tem essa
imagem em seu arquivo Figma, então você pode simplesmente
exportá-la e
salvá-la em seus arquivos de cursor Então, vamos nos lembrar de
onde queremos isso. Temos nosso arquivo configurado
aqui e lembramos que
criamos uma pequena pasta
chamada imagens. Então, queremos que
esteja aqui. Se você não usa o Figma, basta usar qualquer imagem e
arrastá-la para esse arquivo Novamente, lembre-se de
que este é o mesmo arquivo em seu computador que você
vê espelhado no cursor O que vou fazer no meu caso, vou exportá-lo aqui, e então você pode
ver na minha máquina, eu vejo esses arquivos, e agora
aqui vou
chamá-lo de hero Image e salvá-lo. Agora vamos pular e você pode ver agora que se eu abrir a pasta de imagens,
ela está aqui. O que vou
fazer agora é falar com o cursor novamente e
dizer ao cursor a imagem do herói,
no arquivo, seu ponto de imagem
JPEG na pasta Imagens Pressione Enter para gerar código
adicional. Agora vamos dar uma
olhada no que ele faz. Ele nos diz para
entrar no arquivo de índice. Já estamos aqui e notamos como isso explica
tudo para você. Se agora clicarmos em
Aplicar e continuarmos, isso nos mostrará exatamente onde
será adicionado. Essa é uma ótima maneira de você também aprender e
entender isso. Você pode ver aqui antes
a imagem e a imagem era apenas a imagem de um café, e agora está dizendo
imagens na barra frontal Isso significa entrar nessa pasta
e obter a imagem do herói. Em seguida, basta clicar em Aceitar. Certifique-se de não
esquecer de salvá-lo. E agora vamos dar uma
olhada no nosso site. Precisamos nos atualizar.
Você pode fazer isso aqui mesmo
no navegador ou simplesmente pressionar Command e você pode ver
que agora temos nossa imagem aqui. Ok, então vamos adicionar
alguns últimos pequenos detalhes. Então, vou copiar
o endereço aqui. E agora vou
voltar para o meu arquivo de cursor, e podemos adicionar isso manualmente. Eu poderia simplesmente adicionar
isso aqui também, ou posso dizer ao cursor para
que eu possa dizer, para o endereço, use isso. E então eu simplesmente
copio o texto que copiei do meu
arquivo
de design e pressiono Enter Também vou pedir que
ele os coloque um abaixo outro e, em seguida, pressione Enter e
agora você poderá ver o código. Então, inscreva-se, continue. Fantástico. Novamente, isso
explica isso muito bem para você Vamos também saber nossos horários de
funcionamento. Então, vou
copiá-los, vamos colá-los aqui e
dizer ao cursor para adicioná-los. E, novamente, vamos ao Índice, inscrevemos e podemos ver
bem onde ele foi editado E agora também tem duas linhas. Vamos salvá-lo e
vamos pular até aqui e atualizar. Isso
parece muito bom. E, novamente, provavelmente isso aqui, vou arrumar mais tarde
quando trabalhar com meu design Agora, vamos dar uma olhada
no menu e no
menu, o que eu fiz aqui. É como se fossem componentes com
os quais trabalhar. Mas aqui embaixo, eu tenho
apenas textos soltos. Vou pedir que ele use
esse texto para o menu. Além disso, eu poderia usar
o que ele gerou aqui. Então, vou pedir que ele
use isso no menu
e, em seguida, adicionarei
o texto que acabei de
copiar do meu design Então, vamos aplicar isso, continuar. E isso parece um pouco estranho. É tipo, tipo,
um grande grupo agora, mas vamos ver como seria. Então, perdeu o ousado e não
é tão estruturado. Mas o que podemos fazer é
voltar atrás e contar isso ao
Cursor. Então, o que eu vou
fazer é contar isso no menu. Cada bebida e comida
é um item com o nome em negrito e depois abaixo da descrição
e do preço. E vou perguntar
se ele pode configurar isso com boa semântica para mim, porque eu não sei quais
tags eu usaria Agora vamos clicar em Aplicar pois esse já
parece muito melhor. Está usando um artigo aqui. Vamos aplicar isso. Continuar.
Fantástico, exceto. Vamos pular e atualizar nossa página e então ela
ficará melhor As distâncias estão corretas, mas a configuração geral está boa. Eu só vou fazer
uma última coisinha. Vou mandar
ele limpar. Vou apenas
dizer que arrumei o HTML e tudo o
que vem a seguir para o arquivo CSS para obter uma semântica super boa
e uma configuração perfeita, e então ele me
dará essas alterações
9. 08 Como adicionar estilo com cursor e CSS: Então, este é um design
que temos agora, e então você pode ver
aqui em nosso arquivo Figma, queremos mudar
sua tipografia,
adicionar um pouco de cor, espaçamento Então, vamos aos poucos. E, a propósito, esse é realmente o momento em que
você tem que começar a jogar com isso, porque
você obterá resultados
muito diferentes.
As coisas vão ficar erradas. Você tem que consertar
isso, realmente considere isso um playground para
explorar essa ferramenta. Vou começar
pegando essa cor. Essa é uma variável na Figma. Vou
pegar o código hexadecimal por enquanto. Isso
vai funcionar bem. Então, para a tipografia
de todo o texto, estou usando a ferrovia,
que é uma fonte do Google Vamos recuar e contar ao
Cursor sobre tudo isso. Então, vamos dar uma olhada. Então, aqui temos nosso cabeçalho com o qual
estamos começando. Então você pode ver isso como
uma classe de herói, texto de
classe, imagem de classe. Então, se entrarmos nesse CSS, você poderá encontrar a classe do herói. Dot sempre significa
classe e depois herói. E aqui você
pode ver aqui o texto, imagem do
herói, todas as coisas
diferentes. E você também pode simplesmente entrar lá e
brincar com isso. Então, o que queremos fazer,
vou fazer isso manualmente. Vou apenas copiar
o código hexadecimal com
a cor de fundo porque isso é bastante óbvio Então, vamos dar uma
olhada nisso. Atualizar. Perfeito. E agora o que queremos fazer é adicionar o texto. Então, para o texto, vou
falar com o Cursor e
vou contar. Então eu digo, eu quero usar o
Google font Railway para todo o texto em toda a página. Primeiro, ele me diz
para entrar no HTML, aplicar, continuar e
depois ver o que ele faz. Então, isso vai
aumentar a cabeça. Então, novamente, a cabeça é
o que você não vê. Ele adicionará um
link para essa fonte, então ele extrairá
essa fonte do Google para mim. Isso parece ótimo. Vamos aceitar
isso e salvar esse arquivo. E agora, em estilos Aplique, continue, e está gerando e usando ferrovias Então, vamos também salvar isso e
voltar atrás atualizar e ver
se está aumentando Fantástico. Tudo isso parece bom. Agora eu também não gosto
desse preenchimento aqui. Vamos recuar,
então todo esse preenchimento. A propósito, muito útil
se você estiver no Chrome, clique com o botão
direito do mouse, clique em Inspecionar
e, em seguida, você obtém algo
chamado modo de inspeção Assim, você pode ver o
HTML aqui e depois
ver todo o estilo aplicado E você pode jogar
com ele aqui. Portanto, isso não tem
influência no seu código. Na verdade, isso está acontecendo
aqui mesmo no navegador. Isso é muito útil para conhecer e
entender a estrutura. Então, você pode ver que
há um preenchimento geral em nosso herói de classe, mas há mais preenchimento Se pularmos para a imagem, também teremos
uma margem aqui. Então, queremos tirar tudo isso
, então vamos dar uma olhada. Você pode falar com o cursor ou podemos simplesmente tirar isso. Então, podemos simplesmente retirar todo
o preenchimento, ou outra maneira de fazer isso
é remover o preenchimento superior, direito e inferior Então, vamos conversar com isso, na verdade. Eu te digo,
tire o preenchimento superior, direito e inferior de
50 da classe de heróis Então, outra coisa
que queremos fazer é a imagem do herói também
havia algum
tipo de margem ao redor da imagem,
mas não consigo encontrá-la. Então, vou dizer
a Kursa que não
queremos preenchimento ou
margem ao redor da imagem Vamos gerar isso,
aplicá-lo,
aceitá-lo e, em seguida, vamos voltar atrás e dar
uma olhada no que ele fez. E podemos ver que isso ainda
está no herói, então eles ainda estão preenchendo 20 Então, isso é esquerda e direita. Então Cursor não nos entendeu. Vamos recuar. Então, se
você tem isso, é superior, então é superior e inferior
e esquerda e direita. Então, o que queremos fazer é que o
topo é zero, o direito é zero. O fundo é zero, e então só o queremos no
último pedacinho. Então, vamos fazer sim. Se você não entender isso
, também pode falar com o Cursor e dizer
o que deseja que ele faça. Então, vamos voltar atrás, atualizar isso, e isso se
parece exatamente com o que estamos procurando. Ótimo. Agora, vamos estilizar um pouco
esse texto. Na verdade, eu já
configurei isso no Figma. Novamente, você pode fazer isso
manualmente à medida que avança, mas, como
eu tenho, vou usá-lo. O que eu
vou fazer é copiar tudo isso. Deixe-me copiar isso e
depois vou contar. Na verdade, eu entro no CSS. Eu sei que vai ser em CSS. Eu digo onde eu
quero. No meu caso, H one, e eu
vou apenas colá-lo. Deixe-me ver o que acontece. Eu também poderia simplesmente colar isso em mim mesmo. Isso parece ótimo. A propósito,
acho que nem preciso da família de fontes
porque eu já coloquei isso, vou
deixar assim por enquanto, sempre
posso arrumar isso Ok, exceto. E eu vou fazer o mesmo com
os outros. Então, meus dois anos de idade. E então eu faço isso para
toda a minha escala de tipos aqui. Acabei de copiá-lo do modo profundo do
Figma, onde
você obtém todas as configurações Você não precisa fazer
isso. Você também pode simplesmente pedir ao cursor que
compense isso para você. Você pode simplesmente escrever os valores
que
quiser ou usar algumas configurações
padrão. Portanto, se você trabalha com o Figma
, isso é muito útil Vamos salvar isso e depois vamos ver se
temos alguma diferença. Então, isso
já parece muito bom. Na verdade, torna
isso um pouco maior. Então, isso parece ótimo. E agora eu vou
mandar ele limpar. Eu digo para ele limpar o CSS, eliminar a repetição
e criar variáveis para cor e família de fontes.
Vamos aplicar isso. Então, isso é muito bom.
Ele realmente arruma todo
o seu arquivo
com um clique Salve-o, e isso já
parece muito mais limpo. Você pode ver aqui, tudo isso
está arrumado, e então as variáveis
aqui, fantásticas Então, vamos dar uma olhada.
Vamos garantir que não haja erros e que tenha a mesma
aparência. Mas vamos dar uma
olhada porque há acolchoamento estranho acontecendo. Vamos inspecionar e dar uma olhada de onde
isso vem Temos essa margem
de 16 e aqui temos uma margem e eu
realmente não consigo vê-la aqui de
onde ela vem. Vamos voltar atrás e
perguntar ao Cursor. Estou perguntando no modo de inspeção, há uma margem aplicada
ao herói H um, H quatro
e P, mas não consigo vê-la.
De onde vem isso? Mostre-me em CSS. Então, aqui está nos dizendo
que a margem vem da configuração padrão
do navegador. Então, uma explicação
aqui, nós entendemos isso. Então, adicione margem zero
a tudo isso. Ok. Eu só vou perguntar, você
pode fazer isso por mim? Vamos clicar em Aplicar e
, em seguida, você vê aqui a margem zero, exceto vamos salvá-la, e vamos recortar e
ver se isso funcionou Perfeito. Ok, agora podemos simplesmente adicionar as margens que realmente
queremos Então eu digo: Ok, ótimo. Agora basta adicionar algum espaço
entre o nome H one e o endereço
do horário de funcionamento. Me dê uma atualização de CSS. Ok, então é primeiro adicionar
algumas classes
no HTML. Vamos fazer isso. É caneta. Adicionando algumas classes. Sim, não tenho certeza se é isso
que eu quero, na verdade. E então está adicionando alguns aqui. Vamos rejeitar isso e falar com ele novamente. Então, eu
vou contar isso. Então, o H é uma unidade. Então, a rua e a cidade
devem ser uma unidade, H quatro. Mas abaixo um do outro, com uma distância de cerca de 32
pixels até a próxima unidade, que é o horário de abertura. Você pode adicionar os molhos ou como você os
organizaria da melhor maneira Ok, isso parece bom. Vamos dar uma olhada no que ele faz. Isso parece ótimo. Então crie
um pequeno cluster aqui, pequeno cluster aqui.
Isso parece muito lindo. Sempre peça que ele
defina isso da melhor maneira
e, em seguida, ele
fornecerá uma configuração bastante boa. Em seguida, vá para CSS. R Não consigo ver bem. Eu edito aqui embaixo. Amanhã, mais tarde, podemos
pedir que ele se limpe. Vamos recuar. Isso
parece muito bom. Agora, vamos organizar nosso menu aqui, então
vamos voltar atrás. Então, se dermos uma olhada aqui, podemos ver que
o menu estava um
pouco bagunçado quando arrumamos Então, o que eu vou fazer
é que às vezes é mais fácil. Nós apenas removemos isso e , em seguida, vamos pedir
que ele adicione um novo. Então, vamos pular
para o nosso arquivo Figma. E aqui eu realmente
lembro que essa é a configuração. Então, tudo isso está em um componente, mas aqui eu só tenho
um texto solto para copiar, então vou pegar isso ,
pular e
dizer o que fazer. Então, vou dizer
abaixo do cabeçalho, herói, adicionar uma nova seção
chamada menu de bebidas. Este é o conteúdo
e então eu simplesmente copio todo o meu conteúdo. A
manchete das bebidas e da comida é de três anos, e o resto é
apenas copiar o texto P, em que o
nome da comida está em negrito e depois abaixo da descrição
e, em seguida, do preço Edite e atualize
o HTML e o CSS. Novamente, parece um
pouco do que me deu, então vamos pedir
que fique um pouco mais arrumado Digamos que parece bom, mas
certifique-se de que cada item de comida e bebida seja como um item próprio e tenha a melhor configuração
semântica em HTML Isso geralmente sempre funciona se você não
sabe o que dizer. Isso parece muito melhor. , está usando um H quatro No entanto, está usando um H quatro, então
vou apenas contar. Isso parece ótimo. Só
não use um H four. Basta colocar o P em forma
forte para o nome. Então, veja se agora
temos o correto. Ok,
finalmente parece muito melhor. Então, digamos que se inscreva. Continuar. E,
na verdade, não está adicionando isso. Então, vamos apenas copiá-lo. E então vamos
colá-lo aqui abaixo. Ótimo. Vamos ver a seção. É chamado de menu de bebidas. Isso soa bem.
Ele nos deu uma identificação. Novamente, prefiro ter
isso como aula, mas fique à vontade para fazer
isso da maneira que desejar. E eu também preciso do CSS. Eu digo que também
preciso do CSS e observo que mudei
o ID para uma classe. Se isso estiver novamente muito avançado,
pergunte o que fazer. Dê uma olhada e
diga o que
funciona ou não, e
isso vai te ajudar. Então, vamos entrar no CSS. Inscreva-se, continue e aceite. Ok, vamos ver
se isso funcionou. Isso parece fantástico.
Eu só quero centralizá-lo agora e
ter algum espaço aqui. Mas eu digo isso. Parece ótimo. Basta centralizar todos os textos e ter ortografia errada,
não importa Portanto, espaço acima do
título H três nesta seção. E, a propósito,
agora sabe que estou me referindo à
última coisa que atualizei. Às vezes, você
precisa dizer a qual classe você está se referindo. Ok, vamos aplicar isso. Continuar. Você pode ver que ele
centralizou todo o texto e adicionou um pouco de
margem. Vamos aceitar isso. Pule aqui, atualize. E isso já parece um site muito
bom. Eu só vou mandar isso
para arrumar tudo. Então eu digo arrumar HTML e CSS
usando as melhores práticas. Então, isso pode levar um momento. Em seguida, você pode
aplicar isso ao HTML primeiro e depois aplicar o
outro ao arquivo CSS E há uma pequena coisa que eu pessoalmente não
quero colorir aqui, então vou
tirá-la à mão. Ok, ótimo. Vamos dar uma
olhada. Isso ainda funciona. Fantástico. Então, como eu
já mencionei, não tome isso como um tutorial com as etapas um, dois e três. Na verdade, está apenas mostrando como eu agi nesse cenário. Se você digitar o
mesmo, poderá obter um resultado diferente. Você
tem um projeto diferente. Então, na verdade, trata-se
apenas de brincar com isso, entender
e encontrar soluções. Uma pequena nota lateral
após a gravação, notei que esse
título aqui é na verdade, muito
mais ousado do que o da minha produção Então, se eu der uma olhada
aqui, então esse é um peso de fonte de 900. Se eu der uma olhada no meu CSS
, isso também está definido como 900. No entanto, pergunto ao cursor enquanto
isso está acontecendo e ele indica que, quando estou
inserindo a fonte do Google,
você pode ver aqui
que tudo o que está sendo
extraído você pode ver aqui
que tudo o que está sendo
extraído por padrão é 407 Vou
selecionar isso aqui
e, em seguida, posso pedir que ele
inclua o resto também. À medida que atualizamos, você pode ver que agora eu tenho o
peso correto aplicado
10. 09 Tornando nosso site responsivo com curso: Então esta é a nossa página agora, e você pode ver
que temos nossa introdução, temos nosso menu, e eu
adicionei outra seção sobre curso
Brisa e
limpei a puta Então, o que queremos
fazer, no entanto, agora, é que, se redimensionarmos isso,
queremos que isso se comporte adequadamente Então, queremos, por exemplo, que essa
imagem seja empilhada logo abaixo. Então, vamos dar uma olhada em
como podemos fazer isso. Vamos perguntar ao cursor. Quando você diz como deseja que
todas as seções se comportem, é uma boa ideia dar uma olhada no nome
das seções. Um deles é chamado de menu de bebidas para heróis, e aqui embaixo, nossa seção, então a aula é
chamada de Barista Course Também aparecerá maioria das vezes se
você apenas descrevê-lo, mas às vezes há um pouco de confusão com o
texto à medida que você se aprofunda É uma boa ideia fazer isso Vamos contar como queremos que
todos eles se comportem. Novamente, estou acelerando
um pouco,
então talvez você queira ir
até o final, parar com isso e escrever o que eu escrevi ou apenas escrever seu próprio texto Portanto, torne a página responsiva. Portanto, fica bem do
celular para o desktop. Herói em telas grandes, mantenha as IAs. Em telas pequenas, empilhe
a imagem abaixo do texto. Certifique-se de adicionar espaço entre texto e imagem em telas pequenas. Em seguida, o menu de bebidas.
Vamos manter isso como está. Curso Brisa e anote como
eu uso o nome da turma. Empilhe ou não, em telas grandes, mantenha o AIS em telas pequenas, empilhe o texto abaixo da imagem Certifique-se de adicionar algum
espaço abaixo da imagem nas telas pequenas e
também abaixo dos botões. Clique em Enser. Então, vamos dar uma olhada. Está nos dizendo que devemos
usar consultas de mídia. Então, para agilidade,
usamos consultas de mídia, que significa que, a partir de
uma largura dessa largura,
usaremos essas E aqui, por exemplo,
abaixo dessa largura, use as regras que os
IDs usam aqui. Em seguida, usamos o Flexbox,
a grade SS. Então, se você sabe sobre isso e simplesmente entra e brinca com isso, se não sabe,
certifique-se de avisar o Cursor. Então, vamos aplicar isso
e ver o que acontece. E você pode ver que ele acabou adicionar
as consultas de mídia para o herói, para o texto do herói, para
a imagem de Barris de course, Bars de course Na verdade, não tenho certeza
se tudo se chama assim. Vamos dar uma olhada.
Barras para imagem do curso ,
texto, inscrição, botão. Então, às vezes, fica um pouco
confuso com os nomes das classes. Então você pode querer, tipo, limpar isso mais tarde. Vamos ver o que acontece, e então ainda podemos retocar
isso. Então isso é atualização. E isso funciona muito bem.
Preciso desse espaço. Aqui eu queria que isso
não estivesse aumentando e
talvez precisássemos de algum espaço
acima do H,
e aqui embaixo, que também se acumula bem, o espaçamento não
está aumentando,
provavelmente por causa do
que vimos, a nomenclatura fica um pouco confusa com isso confusa Então, talvez, vamos perguntar ao Cursor. Então, realmente
converse como você faria com seus
colegas. Estou perguntando isso. O espaçamento abaixo do texto do herói e do botão Britta não está sendo exibido. Talvez você esteja usando nomes de classes
que não existem? Ok, então agora eu entrei lá e está dando uma olhada novamente. Então, agora, o que isso nos diz? Aqui estão as mudanças atualizadas. Vamos ver se ele realmente os
descobriu sozinho. Não tenho ideia se
é tão inteligente. Vamos atualizar e redimensionar. E isso parece muito melhor. Ótimo. Então, a única
coisa que queremos agora é que queiramos um pouco
de preenchimento na primeira idade Vamos apenas contar isso.
Então, no herói, adicione um pouco de preenchimento
acima do primeiro em telas
pequenas e também
retire o preenchimento
ao redor da imagem telas
pequenas e também retire o preenchimento
ao redor da Vamos fornecer isso, exceto
salvar, atualizar e, a propósito,
uma boa maneira de fazer isso
também é pular em inspecionar, porque o que você obtém em inspecionar tem esse
pequeno botão aqui
e, em seguida, pode pular para
diferentes Agora temos um bom espaço aqui que parece muito
bom. Ainda temos esse. Então, poderíamos dar uma olhada de
onde isso está vindo. Acho que vem de um acolchoamento de um acolchoamento
aqui e do herói Então, temos que tirar essa. E então aqui temos nosso menu, e aqui temos este, que está funcionando
muito bem Então, vamos encontrar esse preenchimento e podemos realmente
tentar fazer isso manualmente Então, isso é realmente o
acolchoamento do herói. E o que podemos fazer
é simplesmente copiar isso, porque agora
começamos a entender CSS, e então vamos colocá-lo aqui e podemos definir
tudo isso como zero. E vamos ver o que acontece. Talvez tenhamos que
dar um pouco mais de preenchimento a este texto agora. Então, vamos dar uma olhada e adicionar o preenchimento aqui E então lembre-se de que isso é superior, direito, inferior e esquerdo. Então, vamos dar uma olhada se
já entendemos CSS suficiente para fazer isso. Perfeito. E é assim que você pode
realmente começar a aprender. E, a propósito, uma pequena dica aqui. Se você clicar aqui,
terá o menor,
que tem 320 pixels. O menor celular
do mercado para que
você tenha certeza de que tudo ainda está
legível neste E assim, você tem
um lindo site responsivo. Então, à medida
que você continua trabalhando, você aprenderá
um pouco sobre CSS É muito importante que
você tente entender. Se você não entender
, pode sempre perguntar ao cursor. Então pergunte. Então, por exemplo, pergunte: O que é flex Tipo, para que você o usa? E vai te dizer
como essas coisas funcionam. Então, isso é
realmente fantástico, e você pode realmente
começar a partir daí. Qualquer coisa que dê errado, mesma coisa. Pergunte isso. A única coisa que você precisa ter um pouco de consciência
é a nomenclatura, porque às vezes ela simplesmente não
atende à convenção de
nomenclatura correta Então, isso é algo que você
pode simplesmente dar uma olhada nome de
todas essas
coisas diferentes. Agora, a única coisa que
queremos fazer é obviamente que tudo
esteja bem e arrumado Eu só vou pedir para
arrumar usando as melhores práticas.
11. 10 Lance sua página online com o Netlify: Portanto, a maneira de
visualizar localmente nosso design é pegar o índice e abri-lo em nosso navegador. E isso nos dá
uma ideia realista da aparência da nossa página, mas ela só é visível para
nós em nossa máquina local. Então, como podemos colocar isso online? Como implantamos essa página? E o melhor de tudo, você
pode simplesmente perguntar ao cursor. Então, qual é a
maneira mais fácil de implantar minha página? Então você pode ver aqui que ele está nos
dando várias opções. Você pode usar o Github, o Netlify
e há mais alguns. O que eu
vou escolher e que eu
mais gosto para iniciantes é o Netlify E você pode simplesmente ir mais longe aqui no cursor e pedir que ele lhe dê
instruções claras sobre como fazer isso. Mas eu só vou te mostrar porque é bem
simples Acesse netlify.com e crie uma
conta gratuita. Vou ver algo
assim e depois verificar se
você está nos sites. E aqui você verá
como adicionar
seus sites ao Netlify.
Então, temos o Github. Você pode procurar modelos
e criá-los aqui. Mas a parte mais fácil que
vamos usar por enquanto é implantar manualmente.
Então isso está aqui embaixo. Agora você pode simplesmente navegar para
fazer o upload e encontrar seu arquivo. Então, no arquivo em que
você está trabalhando no cursor, você pode ver que ele precisa
conter todas as coisas, suas imagens, seu índice, seu CSS, tudo isso. Selecione o
arquivo inteiro e clique em Carregar. E é
basicamente isso. Então, o que você vê aqui,
esta é a sua URL por enquanto. Se clicarmos em produção aberta, vamos diminuí-la um pouco para que
possamos vê-la melhor. E agora temos nossa
página que está ativa. E você pode ver que é exatamente
o mesmo que vimos antes. Então esse é o nosso URL. Queremos
limpar isso um pouco. Então clique na configuração do site, e aqui embaixo você
vê a alteração do nome do site, e agora podemos simplesmente
tirar isso e chamá-lo de clichê Cafe.
Vamos salvá-lo. E agora você pode ver que nosso URL é cliche cafe dot
netlify dot Então, se abrirmos isso novamente, você pode compartilhar isso, e é aqui que você
encontrará sua página. Se você quiser atualizar sua página, basta voltar
para Deploy e procurar uma nova versão. Ele também salvará
todas as versões antigas para que você possa
sempre ir e voltar. Agora você provavelmente
quer usar seu próprio URL. Nesse caso, basta
clicar na Visão geral do site
e, em seguida, você pode ver aqui. Então você implantou seu site. Agora você pode clicar em
configurar seu domínio personalizado. Depende de onde você
obteve seu domínio. Você pode obtê-lo
diretamente com o Netlify, que provavelmente é o
mais fácil, mas você também pode adicionar qualquer domínio que tenha
comprado em qualquer outro lugar, adicionar qualquer domínio que tenha
comprado em qualquer outro lugar,
e o Netlify o
guiará
e você também protegerá seu site, o que
significa que é HTTPS, o que é muito importante o
que provavelmente é o
mais fácil, mas você também pode
adicionar qualquer domínio que tenha
comprado em qualquer outro lugar,
e o Netlify o
guiará
e você também protegerá seu site, o que
significa que é HTTPS,
o que é muito importante. Ou você também pode continuar usando seu novo URL do Netlify gratuitamente
12. 11 Como conectar a aplicativos de terceiros: Então aqui eu tenho minha página, e você pode ver
aqui embaixo com o
curso Brisa em breve, se você clicar em Inscrever-se, agora, nada acontece Então, eu quero que as pessoas
possam se inscrever em uma lista de e-mails para obter
mais informações posteriormente Agora, existem muitos fornecedores
diferentes
para listas de e-mails Vou usar o Mailchim , que é bastante popular Mas você também pode
entrar no Cursor e
perguntar qual deles ele
recomenda para suas necessidades. Para começar, vou
fazer algo super simples. No meu site, se você
clicar em Inscrever-se, você será direcionado
para uma página de inscrição separada No Mailchimp, vou até o público e
depois
me inscrevo E aqui você pode
ver maneiras diferentes. Aparece, incorpora e eu vou escolher uma que seja uma página de destino
separada Então, vou clicar em
Criar uma nova landing page. E aqui basta criar
uma landing page. E vou chamar essa página de destino
clichê do Cafe. Vamos começar. E então você pode ver que há um modelo
muito bom, então você pode fazer com que
pareça muito bom. Mas eu vou
escolher este super simples aqui para a demonstração. Livre-se desse aqui, e vamos chamar
esse café clichê Ou vamos chamá-lo de curso de barista. Salve isso e vamos
salvá-lo e fechá-lo. E então eu vou
clicar em Publicar. Novamente, você pode editar coisas e
torná-las um pouco
mais próprias. Mas, por enquanto,
vou publicar. E agora, se eu clicar
aqui, compartilhar sua página, você pode ver que eu criei apenas este pequeno
sinal e formulário aqui. Então, essa é a URL que
vou copiar e vou contar ao
cursor sobre isso. Uma pequena dica, o que
você pode fazer é simplesmente destacar o
botão porque você sabe que é nesse
botão que você quer e,
em seguida, clicar em Adicionar ao chapéu, e então ele já sabe a
que você está se referindo Se clicado, abra esta
página em uma nova janela
e, em seguida, cole o link
que recebi do Mail Jump E então está
nos dizendo o que está fazendo. Está adicionando um pouco de JavaScript. Podemos fazer isso mais tarde,
mas vamos dizer para
ele usar apenas HTML por enquanto. Então, acabamos de
transformá-lo em um link. Vamos aplicá-lo e agora você pode
ver que, se clicarmos nele, definir em branco significa
abrir uma nova janela, botão de
inscrição e, em
seguida, ele se inscreve. Vamos aceitar isso, guardá-lo. Vamos pular até
aqui e atualizar. Preciso arrumar um pouco o estilo
mais tarde. E então está abrindo aquela
nova página, e podemos nos inscrever. Então, vamos tentar isso. Vou ligar para
essa landing page. OK. Então, se entrarmos aqui
e formos até nosso público e dermos uma olhada no contexto
, podemos ver que
isso agora foi adicionado. Você pode realmente começar a
jogar com isso. Por exemplo, podemos adicionar um campo de entrada
diretamente em nossa página e você pode falar com
o cursor perguntando como configurar que, se houver uma entrada nesse campo, ela
seja passada
imediatamente para o Mailchimp Porque o
melhor do cursor é que ele usa
os chamados LLMs. Não se
preocupe muito com qual deles você escolhe. Todos eles
trabalharão pelo que fazemos. E isso é algo
como Che hiphi ou Claude. Isso significa que, nesse caso, eles veem nosso código e
entendem nosso código, mas também estão conectados à Internet
como tal e são apenas um chatbd de IA
que você
também pode perguntar sobre coisas externas e sobre seu editor
de código Outra ótima coisa que você
pode fazer é, por exemplo, adicionar um
pop-up para Mail him, incorporar os formulários ou
também usar outras ferramentas Uma que eu realmente gosto
é comprar um café para mim. Então, isso tem esses pequenos botões de
suporte aqui, e você pode
adicioná-los à sua página. Então, se eles forem
clicados, alguém puder lhe dar um euro ou cinco euros ou alguns dólares
e apoiar seu projeto Então, é uma coisa muito boa, e você pode simplesmente conversar com Kerse sobre como
integrar isso Ele lhe dirá exatamente onde
ir nessas páginas e quais informações são necessárias para ajudá-lo a conectar tudo isso. Uma última pequena coisa que
quero salientar, porém, é que muitas dessas coisas
exigirão o script Java. Portanto, temos um
arquivo JavaScript em nossa configuração. No entanto, atualmente
não está conectado ao nosso índice. Então você sempre
precisaria dizer ao Cursor, super simples. Vamos
apenas contar isso. Então, eu quero usar o arquivo Script
JS, como conectá-lo. E vai pedir para você adicionar isso
ao seu HTML e observar como isso é adicionado à parte inferior
do seu HTML. Então, na cabeça,
temos o estilo CSS conectado e, em seguida, o JavaScript
logo antes da tag body. Então, o mundo realmente
é sua ostra, então comece a jogar
e conversar com cursor sobre as coisas que você quer fazer e se conectar
à sua página Ele o avisará sobre
problemas de segurança na maioria das vezes. No entanto, ainda é uma IA. Portanto, como iniciante, seja sensato e não use
dados confidenciais
13. Agradecimento: Parabéns por
terminar este curso, sinta-se à vontade para entrar em contato
comigo no Molearningo Estou sempre interessado em
ouvir seus comentários. Você também me faria um grande favor deixar um comentário aqui. Ava gostou deste
curso e também
dê uma
olhada no moonlearning dot IO, onde você pode encontrar muito material
adicional, bem
como Com a assinatura M, você pode
acessar todos os meus vídeos, desde noções básicas de UX UI, muito sobre FINMA,
muitos mergulhos profundos e também uma seção
sobre
CSSNUIFundamentals Então, vamos discutir
o que acontece quando design da
interface do usuário encontra o código
relacionado ao layout, tipografia, cor e quaisquer
outros assuntos relevantes No Moon Learning,
você também pode encontrar um link gratuito de folha
de pagamento para todos os meus artigos recentes, bem
como uma página de recursos
onde tento mantê-lo
atualizado sobre as últimas novidades interessantes que acontecem no mundo
do UX UI Design Se você preferir um evento da vida real, dê uma olhada na seção de
workshops e palestras. Eu falo frequentemente
em conferências, além ministrar workshops on-line sobre temas de UX,
UI Design e empreendedorismo individual Certifique-se de assinar meu boletim informativo para se
manter atualizado. Então, até breve no
moonlaring dot IO.
Christine Vallaure, UI designer, speaker & educator
