Claude IA para web design criativo: crie sites criativos impressionantes com a Claude IA.

1. Apresentação: Quando você está tentando criar seu próprio site, normalmente, você começa com muitos desses rabiscos, esboços, ideias conceitos para acabar com um site quebrado que não funciona Bem, não mais. Nesta aula atual, mostrarei como aproveitar o poder da inteligência artificial, especificamente Claude, para projetar seu site, especificamente o desenvolvimento web de front-end forma que você não precise pensar em codificação, estilo, gráficos, animações, coisas que normalmente são entediantes Eles consomem muito tempo, muito esforço e quebram com bastante facilidade. Eu vou te mostrar como contornar todo o processo. Nenhum código é necessário, de que você simplesmente se concentre em uma coisa apenas como profissional criativo: a conceituação, a idealização, suas E vou mostrar como criar e projetar o site, desenvolvimento web front-end especificamente para dar vida à sua ideia Quer estejamos falando sobre navegação, estilo, gráficos, animação Conceitos. Você está construindo seu portfólio. Você está construindo sua própria marca pessoal. As aplicações são infinitas. Vou mostrar as táticas, como utilizá-las da melhor maneira possível para integrar Claude como parte de seus esforços de desenvolvimento web de front-end, que, ao final da aula, você tenha um site lindamente projetado para mostrar seu trabalho, mostrar jornada criativa e mostrar seus como utilizá-las da melhor maneira possível para integrar Claude como parte de seus esforços de desenvolvimento web de front-end, de forma que, ao final da aula, você tenha um site lindamente projetado para mostrar seu trabalho, mostrar sua jornada criativa e mostrar seus projetos. 2. Seu projeto: O projeto gira em torno da aplicação das principais lições ensinadas para criar e criar seu próprio site de várias páginas Depois disso, você compartilhará seus resultados com a comunidade para obter feedback. 3. Definindo a fundação: Bem vindo de volta. Agora, o que precisamos fazer é simplesmente navegar até a nuvem e você fará o login e acessará a janela principal da interface, a janela de prompt aqui. Agora, como você lidará com a nuvem como parte do aplicativo atual para desenvolvimento web, especificamente desenvolvimento web de front-end, precisamos estabelecer algumas bases e táticas importantes para garantir o sucesso de nosso aplicativo. Em primeiro lugar, vamos utilizar o seguinte modelo básico, o Sonic five, que está disponível para qualquer usuário que utilize a nuvem, seja a versão gratuita, a versão profissional, você poderá utilizá-la com bastante facilidade Se você estiver em um nível diferente ou quiser optar por uma versão diferente, a decisão é totalmente sua. Você pode escolher Opus five, Fable ou Fab five. Lembre-se de que, à medida que você avança com o modelo, você utilizará mais créditos, que é muito, muito importante ter em mente, especialmente para tarefas complexas pois estamos projetando um site, editando um site, usando códigos para analisar designs, personalizações e edição de vários Portanto, é um processo de ida e volta e pode ser bastante exigente em relação ao modelo de IA. Portanto, consumirá muitos créditos se você estiver em um modelo muito avançado. Para modelos básicos ou modelos de menor complexidade, você pode realizar o trabalho sem o consumo excessivo dos créditos Portanto, se você estiver na versão gratuita e optar pelos modelos avançados, poderá ficar sem créditos rapidamente. Então você tem que esperar por um tempo de reinicialização e então você pode continuar. Se você optar pelo modelo atual ou por um modelo inferior, poderíamos escolher, por exemplo, o Sonic five, que é o que vamos usar, que é o mais eficiente para as tarefas diárias Ele faz o trabalho, mas não sobrecarrega o consumo real de crédito Dessa forma, você pode fazer mais edições, mais feedback e mais iterações com a personalização do site Dessa forma, você está economizando tempo, economizando esforço e ainda obtendo resultados sólidos. Portanto, tenha isso em mente. Então, é um conceito muito importante que precisamos entender. Como estamos lidando com o design de um site, especificamente com o desenvolvimento web de front-end, vamos twittar o projeto, algo que fazemos de forma recorrente, especialmente para o contexto profissional Você não está simplesmente criando um design uma vez, e pronto. Você precisa realmente editar o site. Você precisa ajustar a saída. Você precisa ter certeza de que tem a capacidade de sempre revisitar seu trabalho anterior e continuar de onde parou E é por isso que precisamos abordar isso como um projeto. Isso é muito crítico e muito importante. O que vamos fazer agora é clicar em O plus, o que significa adicionar um novo projeto e criar um novo projeto para nossa aplicação prática. Vamos chamar isso de desenvolvimento frontal e web. Ok. Portanto, podemos utilizar isso com base em nossa preferência. Você pode chamá-lo do jeito que quiser, depende totalmente de você, certo? O que estamos tentando alcançar? Como parte do escopo do aplicativo, podemos descrever o projeto, as metas, o assunto, etc Você pode editar isso ou revisitaremos isso mais tarde. Depende totalmente de você. O que vamos fazer é apenas dar um tema básico. Vamos criar o front-end de um site para projetos de negócios, aplicativos criativos, etc. Simples assim. Esse é o objetivo principal. Esse é o tema principal. Você pode ser específico. No entanto, neste estado atual, isso não é tão necessário. Então, depois de criar o projeto, que é uma etapa fundamental fundamental que precisamos abordar, pois isso garantirá que, em um estágio posterior, depois de ter seu site real e quiser editar coisas e ajustar as coisas, você possa revisitá-lo e escolher um determinado segmento do site, editá-lo com alguns cliques, em comparação com ter que percorrer todo o site processe tudo de novo. Então, quando você acessa a interface do produto, você tem a interface de bate-papo aqui. Você tem a opção de realmente adicionar arquivos, fazer uma captura de tela, habilidades, conectores, plug-ins e a lista continua Dê uma olhada no lado direito aqui. Nós temos instruções. Obtivemos memória, depois obtivemos o contexto e agendamos tarefas recorrentes Eles são muito poderosos se você quiser levar seu aplicativo de desenvolvimento web de front-end a um nível totalmente novo. Deixe-me mostrar a você. Em primeiro lugar, vamos adicionar instruções. Vamos dizer a Claude o que estamos tentando fazer. Isso fornecerá a Claude instruções e informações relevantes para bate-papos com base nesse projeto específico Então, seja específico aqui. O que você está tentando alcançar, certo? Você está tentando criar um site para sua empresa, para sua empresa? Projeto no qual você está trabalhando ou simplesmente tentando aprimorar suas habilidades de desenvolvimento web de front-end. Sinta-se à vontade para adicionar o máximo de detalhes possível. No entanto, para manter as coisas bem simples, vou mostrar o nível básico de instruções que você pode simplesmente injetar e obter resultados realmente poderosos Então, quais são as instruções básicas? Vou dizer à Cloud que vamos trabalhar no desenvolvimento web. Ou, digamos que, em um negócio hipotético, vamos trabalhar em um café e uma padaria Vamos trabalhar na criação do site, no desenvolvimento de front-end um aplicativo hipotético específico, e você poderá injetar e adicionar seu próprio aplicativo e você poderá injetar e adicionar exclusivo de acordo com sua Então, vamos trabalhar no desenvolvimento web de um café Slash Bakery Para criar um design de site com aparência profissional, forma que fique à vontade para incluir quaisquer restrições, quaisquer preferências O design é profissional e editável, o que é muito importante porque gostaríamos editá-lo facilmente Personalizável. Os códigos relevantes para o site, uma vez criados, incluindo HTML, CSS ou quaisquer outros códigos relevantes, são facilmente extraídos e modificados para edição e uso futuros Então, o que estou tentando fazer aqui estabelecer a base com base na minha preferência. Como mencionei, como parte da demonstração, trabalharemos em um projeto hipotético, que é basicamente um negócio É um café e uma padaria, e vamos trabalhar no design de desenvolvimento web de front-end para c. Sinta-se à vontade para utilizá-lo para seu próprio aplicativo exclusivo, seu próprio negócio, seu próprio projeto, sua própria ideia. Siga a mesma estrutura. Portanto, nesta solicitação ou nas instruções básicas ou na solicitação das instruções, estamos dizendo à Cloud que precisamos que o design seja bastante profissional e editável Algo não é estático, algo que podemos consertar e trabalhar com. Facilmente personalizável para referência futura, se eu quiser personalizar o site, volto ao projeto Consigo personalizá-lo facilmente. Os códigos relevantes para o site, uma vez criados, incluindo HTML, CSS ou quaisquer códigos relevantes, são facilmente extraídos e modificados para edição e uso futuros Isso é muito poderoso porque isso dirá ao Cloud que, quando você estiver projetando algo, certifique-se de que o código que você está criando seja algo que eu possa utilizar, pegar e personalizar. Se você estiver movendo isso, por exemplo, para sua própria hospedagem, por exemplo, se tiver um uso mais avançado, estiver tentando escolher um determinado código do código que você criou, como um trecho para o arquivo HTML ou o arquivo CSS, você pode simplesmente entrar no seu projeto, obter esse código e colocá-lo diretamente no seu site, se tiver algum para sua própria hospedagem, por exemplo, se tiver um uso mais avançado, estiver tentando escolher um determinado código do código que você criou, como um trecho para o arquivo HTML ou o arquivo CSS, você pode simplesmente entrar no seu projeto, obter esse código e colocá-lo diretamente no seu site, se tiver algum tipo de habilidades avançadas de codificação ou edição Portanto, isso oferece a flexibilidade futura de que você precisará em um estágio posterior. Em seguida, a memória do projeto real. Tendo em mente o recurso de memória, você precisa ativá-lo depois de acessar as configurações. Portanto, depois de navegar até as configurações, certifique-se de ativar ou desativar a memória de acordo com sua preferência. No entanto, se você ativar a memória, ela começará a ensinar Cloud com base nos bate-papos aqui Então, se tivermos um bate-papo, ele entrará na lista, mas outro bate-papo na lista também fará parte da memória do projeto. Isso é muito importante para futuros aplicativos de desenvolvimento. E esse é um dos meus casos reais de uso ou uso favoritos para o contexto do projeto, o aplicativo do projeto, que é o contexto. Assim, poderíamos adicionar PDFs, documentos outras referências de texto a esse projeto real Estou mais aqui. Eu tenho a opção de fazer o upload dos arquivos, adicionar determinados contextos ou até mesmo conectá-los a códigos externos se você tiver o código configurado como parte do Github, por exemplo No entanto, para nosso aplicativo, como mencionei, não vamos codificar nada Estou mostrando como passar pelo desenvolvimento web de front-end completamente do zero por meio da nuvem sem escrever uma única linha. Dito isso, estabelecemos a base necessária para prosseguir com nosso aplicativo de desenvolvimento web. Temos a configuração do nosso projeto, implementamos nossas instruções, memória é ativada com base em uma preferência. Agora, para o contexto, vou mostrar o que vamos utilizar para nos ajudar a começar a correr No entanto, neste estágio atual, estamos simplesmente criando uma base para um aplicativo de desenvolvimento web de front-end bem-sucedido. Conforme você avança no projeto, lembre-se de que você tem a opção de criar uma tarefa agendada na qual você pode, por exemplo, nomeá-la, dar instruções e, se quiser, por exemplo, o Cloud digitalize automaticamente um código específico, Cloud digitalize automaticamente por exemplo, para o site que você está adicionando e, em seguida, forneça alguns tipo de feedback em que você aprova manualmente ou o Cloud aprova automaticamente Isso é algo um pouco mais avançado para um estágio posterior, quando você terminar o projeto real. Se você estiver adicionando determinados códigos ou conectando o Cloud a códigos externos por meio do contexto ou dos conectores, por exemplo, você adiciona um conector, adiciona um plug-in nuvem tem a capacidade acessar ferramentas externas que você conectou a ela. Em seguida, você pode agendar tarefas em que o Cloud possa realizar ações específicas e aprová-las automaticamente ou passá-las para você para aprovação manual Essa é uma tática avançada, lembre-se de que ela existe. Se você é um desenvolvedor web profissional, gostaria que o Cloud passasse por uma série de códigos de vez em quando. Essa é uma ferramenta mais avançada que você pode usar para ajudá-lo a realizar essas tarefas repetitivas de forma programada Agora, dito isso, já estamos nesta fase. Criamos a base para iniciar nosso aplicativo de desenvolvimento web de front-end. 4. Adicionando inspiração para design: E bem-vindo de volta. Então, eu estabeleci nosso projeto e estabelecemos a base para nossa aplicação. Este é o estágio em que vamos adicionar inspiração. Você me ouviu bem. Como parte de seu desenvolvimento web de front-end e sem aplicativo de código, vamos nos inspirar Por exemplo, você já visitou um determinado site ou seu próprio site ou um determinado papel no qual escreveu seu design ou algum esquema ou captura de tela que obteve para fins de inspiração como parte de seu Este é o estágio em que começaremos a adicioná-lo ao nosso contato. Agora vamos adicionar alguns arquivos como parte de nossa demonstração. Vamos trabalhar no desenvolvimento web de front-end para um site, para um café e uma padaria Por exemplo, esse é o estágio em que você adiciona os elementos da marca Você pode adicionar um logotipo. Você pode adicionar paletas de cores se tiver uma. Você pode adicionar a mensagem da marca. Você pode adicionar uma captura de tela de um determinado design que você viu em algum lugar para fins de inspiração, ou até mesmo referenciar alguns sites que você achou bastante inspiradores para ajudá-lo a criar um design exclusivo para seu site ou imagens ou fotos que você capturou com seu site ou imagens ou fotos que você sua câmera ou algo que você escreveu em um pedaço de papel, literalmente O contexto que você pode adicionar para ajudá-lo na criação do seu site é infinito Aqui estão algumas coisas que você pode adicionar para ajudar a criar o contexto para o site. Você pode adicionar o logotipo. Você pode adicionar uma imagem que tenha capturado com sua câmera. Você dirá que está andando na rua. Você encontrou uma ótima planta, árvore ou flor. Você se inspira para adicionar esse design ao seu site. Você tira uma imagem e pode enviá-la para o contexto. Ou você pode fazer uma captura de tela, por exemplo, do seu próprio site atual Em seguida, adicione-o se estiver tentando editar um site existente, ou melhor ainda. Por exemplo, digamos que você esteja tomando uma xícara de café e, em um pedaço de papel, desenhe o design de um site Pegue uma imagem disso e adicione aqui, mesmo em um guardanapo Mesmo um URL, por exemplo, para o seu próprio site que você está utilizando atualmente e que gostaria de modificar, você pode adicioná-lo, bem como parte de um arquivo PDF, adicionar todos esses detalhes ou imagens, capturas de Estou lhe dando todas essas ideias inspiradoras para ajudá-lo a ver que você é capaz de adicionar muitos detalhes para ajudá-lo a começar a trabalhar Então, neste estágio atual, o objetivo desta palestra atual é que você traga sua inspiração, obtenha seu logotipo, obtenha suas imagens, obtenha suas capturas de tela, para seu site, obtenha suas capturas de tela, para o design em que você está trabalhando, obtenha o documento real do Word, PowerPoint, PDF, arquivo El, qualquer referência que você tenha, até mesmo o guardanapo que você é ou no papel em que você rabiscou Sinta-se à vontade para digitalizá-lo e simplesmente começar a adicionar todos esses elementos ao contexto do projeto, pois isso ajudará Claude analisar como avançar com facilidade e eficácia Portanto, neste estágio atual, comece a adicionar seus elementos de marca, seus logotipos, uma captura de tela do seu site atual, se quiser editá-lo, alguns elementos inspiradores que você coletou e estamos prontos para mergulhar no web de front-end do 5. Como criar um site de página única: E bem-vindo de volta. Agora, vamos criar um site de uma página. Isso é muito importante para qualquer empresa, qualquer profissional criativo, qualquer profissional de trabalho, profissional de marketing, profissional de vendas, e a lista continua Normalmente, quando você está tentando criar, por exemplo, um lançamento de produto, um novo almoço de negócios ou um determinado produto que gostaria de mostrar ou uma determinada página de destino para qualquer evento que esteja conduzindo, você normalmente cria um site de uma página, certo? Digamos que, como parte de nosso aplicativo atual, tenhamos o lançamento do negócio, que é uma padaria e um café, hipoteticamente chamados Este é um negócio hipotético simplesmente para fins de demonstração Todos esses detalhes são simplesmente hipotéticos para você ver como eles podem ser facilmente mapeados de acordo com sua situação específica Então, vamos criar um site de página única de uma forma muito criativa para anunciar o lançamento do negócio. Então, como vamos criar um site de página única? A propósito, isso pode funcionar para qualquer coisa, para um almoço de produtos, um almoço de negócios, alguns detalhes, uma página de vendas, seja o que for, uma página de detalhes sobre um evento específico sobre sua empresa, seja o que for. Está tudo pronto, então o que vamos fazer é dizer a Claude que atue especificamente como desenvolvedor web profissional Desenvolvimento frontal e web no qual você vai me ajudar a criar um site de uma única página, que inclui o seguinte. Esse é um prompt muito poderoso. Ele fornece contextos e requisitos claros. O logotipo dos arquivos do projeto. Veja como é poderoso adicionar muitos arquivos importantes ao contexto Claude é capaz de escolher todos esses detalhes e mapeá-los em nosso aplicativo, o logotipo dos arquivos do projeto, a paleta de cores das diferentes imagens adicionar um design profissional elegante E então vamos Tell Claude totalmente personalizável. Então, eu vou para o Tag Cloud aqui, atuando como um desenvolvedor web profissional, especificamente a partir de um desenvolvimento web no qual você vai me ajudar a criar um site de uma única página. Esse é o estágio em que você adicionará seu próprio aplicativo exclusivo de uma empresa, sua empresa, seu site, onde quer que esteja, algo relacionado ao seu próprio aplicativo no qual você está aplicando essas táticas. Ajude-me a criar um site de uma única página para minha nova empresa chamado canecas, que é um café e uma padaria, que inclui o seguinte Então eu vou contar para Claude, me fazer qualquer pergunta relevante ao longo do caminho Portanto, essa é uma estrutura de prompt muito poderosa, pois fará com que o Cloud atue como um desenvolvedor web profissional, especificamente no desenvolvimento web de front-end, no qual você me ajudará a criar um site de uma única página para meu novo negócio Eu adicionei o tema, os contatos, certo, incluindo o logotipo dos arquivos do projeto, a paleta de cores das diferentes imagens adicionadas, design profissional elegante, um site totalmente personalizável E código. E vou acrescentar: o que estou tentando obter deste site real, ou eu poderia simplesmente mantê-lo como está. Então, se você quiser simplesmente optar por um site de uma página, o que é suficiente para sua empresa, ótimo. Se você tiver uma tarefa específica para isso, por exemplo, anunciar o almoço da empresa, poderá adicionar o requisito específico Então, vou mantê-lo específico. Site de página única para meu novo negócio chamado UGS, que é um café e padaria O site de página única deve anunciar o próximo dia e data de abertura. Aqui vamos nós. Vou deixar a data e o dia em branco porque Claude definitivamente me perguntará se eu gostaria de alterar a data do almoço ou a abertura ou datas específicas por minha Que tal passarmos o dia e a hora? Para adicionar mais variação a ele. Então, como você pode ver aqui, comecei com um prompt genérico. Em seguida, personalizei o prompt como parte das práticas adequadas de engenharia de prompt para incluir algum contexto, tema, algumas referências, alguns aplicativos específicos para que você veja exatamente como eu faria isso de ter um site genérico de página única para um site específico de página única. Dessa forma, você pode se inspirar e se orientar por meio de seu próprio aplicativo exclusivo Aqui vamos nós. Então, Claude agora está analisando o projeto Como podemos ver aqui, como parte do projeto, iniciamos um novo bate-papo. Isso é muito poderoso porque nos permitirá realizar o processo em vários períodos de tempo sem a necessidade de redefinir as coisas repetidamente. Então, quais campos de direção visual são adequados para o Mug? Por que Claude me fez essa pergunta? Porque é parte da minha estratégia. qualquer pergunta relevante ao longo do caminho, que é uma tática avançada de engenharia rápida que permite que o modelo de IA ajude você a elevar a produção Então, qual é a direção visual? Padaria aconchegante e rústica, texturas aconchegantes, elegantes e minimalistas, ousadas e Deixe-me decidir com base no logotipo. Portanto, se você tiver seu próprio logotipo específico para sua empresa, para sua empresa, e quiser simplesmente começar a partir daí, isso o ajudará a realizar o trabalho. No entanto, para fins de demonstração, estou mostrando a extensão da flexibilidade e as alterações que você pode fazer e fazer ao longo do processo de design Vamos escolher o elegante e o minimalista. Então, de quais seções a próxima página do Zoom precisa? Isso é muito, muito poderoso. Isso não foi colocado intencionalmente no aviso porque dará a Claude a margem de manobra ou a flexibilidade de sugerir itens para verificarmos sugerir itens para Isso é muito importante se você é um iniciante completo desenvolvimento web ou desenvolvimento web front-end, ou se não tem inspiração suficiente para realmente detalhar as seções reais da Você já dividiu as seções da página como parte do contexto pode simplesmente ignorá-las completamente clicando em Ignorar completamente clicando em Ignorar No entanto, se essas saídas estão inspirando você, sinta-se à vontade para personalizar a saída, pois todos esses resultados que você está vendo são baseados na sólida tática de engenharia rápida que estou lhe ensinando Então, de quais seções a próxima página do Zoom precisa? Apenas logotipo, dados de abertura e contagem regressiva, além de endereço, mais uma breve sinopse sobre nós, inscrição por e-mail para notificações de lançamento, além social Que tal adicionarmos todos eles? Vou contar para Claude. Aqui vamos nós. Todas as opções acima ou eu posso simplesmente selecionar todas elas. Depende totalmente de mim. Aqui vamos nós. Em seguida, passe isso para o Cloud. Vamos criar a página completa para mim. Lembre-se de que estamos simplesmente nos concentrando no desenvolvimento frontal e web neste estágio atual. Para usuários avançados, isso é algo muito poderoso para agilizar seu processo de desenvolvimento web No entanto, como parte de nosso aplicativo, estamos nos concentrando no desenvolvimento web de front-end Vamos dar uma olhada no feedback. Entendi, elegante e minimalista, com tudo: logotipo, contagem regressiva, sinopse, inscrição por e-mail e Antes de começar a construir, preciso de alguns detalhes concretos. Usarei espaços reservados de bom gosto para qualquer coisa que você prefira preencher mais tarde Isso é muito poderoso porque me permitirá dar uma olhada no design, pegar a tela e personalizá-la posteriormente com base nas minhas preferências. Qual é a data e hora de abertura, endereço e localização, identificadores sociais, uma linha ou duas sobre canecas, e-mail de contato Isso aparecerá com base em seu próprio aplicativo exclusivo. Sinta-se à vontade para adicionar seus próprios dados, se desejar. Sinta-se à vontade para responder o que você tem e pular o espaço reservado restante para qualquer coisa que esteja faltando, de forma clara, para que seja fácil identificá-la e trocá-la Então, vou dizer a Claude que continue com vagas reservadas para todos eles. Viu como isso é poderoso? Agora, tenho uma tela personalizável completa pronta para utilizar com base na configuração do meu projeto Portanto, isso é muito poderoso porque, se você se lembra, como parte da base do projeto para a configuração, solicitamos que tudo fosse bastante personalizável, viável Então, essa é a base para a base que você está vendo agora. Se não seguirmos as etapas que eu ensinei a você e as seguirmos em sequência, o up from Cloud será bem diferente. E é por isso que muitos estudantes, muitos alunos, muitos profissionais, estão obtendo resultados do uso básico da nuvem, em comparação com um resultado completamente diferente do uso profissional da É aqui que a distinção acontece. Se você estiver usando o Cloud casualmente com esse conhecimento sólido em termos de como usá-lo como parte da sequência que estou ensinando, você obterá resultados bem diferentes No entanto, se você seguir o modelo estratégico passo a passo que estou mostrando, obterá resultados de nível profissional, que o ajudará a ver a diferença, e você poderá se destacar com base na produção que está gerando, que é bastante única, profissional em comparação com um pote básico genérico que não é totalmente algo que você poderia utilizar como parte de suas atividades diárias. Como podemos ver aqui, vamos lá. Claude está ligando o motor para passar por todo o processo. Dê uma olhada nisso. Então, como podemos ver aqui, aqui está o site em breve, HTML com ponto de índice único, tudo, HTML, CSS, JS, independente, além de seu logotipo salvo nos ativos Excelente. O que há nele? Veja os detalhes em que todos os espaços reservados estão marcados com Excelente. Veja como isso é profissional. É criar o código real para mim com referência ao logotipo Então, obtivemos o logotipo. E dê uma olhada no arquivo e no site real, site página única aqui. Então, temos canecas, café e padaria. Algo quente está se preparando, um novo local no bairro para manhãs lentas, presunto, café expresso e pão assado do zero Em seguida, obtivemos o espaço reservado para a data. Quando eu simplesmente digo a Claude, vá em frente, atualize o dia. Vamos corrigir isso automaticamente. Em seguida, dê uma olhada no pequeno trecho sobre o tema do café Eu posso editar isso como eu prefiro. Dê uma olhada nisso também para ver os detalhes. Fique por dentro, seja o primeiro a passar pela porta. Você pode simplesmente conectar isso em um estágio posterior, depois concluir o desenvolvimento web de front-end Temos as mídias sociais aqui A propósito, se quisermos conectá-los, e depois de clicar em qualquer um deles, a propósito, ele simplesmente indicará que você abra o link externamente, pois são considerados espaços reservados para os links reais Lembre-se de que, no estágio atual, estamos construindo um site de uma única página, e nosso aplicativo é totalmente livre de código e é específico para desenvolvimento web de front-end Então, como você pode ver aqui, em caso de erros, Claude os identificará no caminho Então, vou dizer a Claude que corrija todos os erros. Isso é basicamente algo que você pode fazer com Claude quando ele se depara com erros, basta dizer a Claude que vá em frente, encontre qualquer erro e vá em frente e corrija o Este é um site de página única muito profissional e elegante Como você pode ver aqui, temos os espaços reservados para o logotipo real como parte do site de uma única página Agora, como Claude está corrigindo os erros, tenho a opção de baixá-lo como um arquivo HTML ou adicioná-lo como parte do meu projeto Basta dizer ao Cloud: vá em frente adicione isso ao projeto de desenvolvimento web de front-end, que é outro aplicativo ou outro nível para levar seu aplicativo adiante, onde você pode obter a saída que está gerando para ajustar seu Portanto, cada saída que você está obtendo da nuvem pode ser adicionada ao projeto para obter resultados cada vez melhores com o tempo. E vamos supor que você seja um desenvolvedor web profissional, você pode simplesmente navegar pelo código aqui. Você pode clicar nos comentários se quiser comentar ou editar algo. Como mencionei, nosso aplicativo é livre de código. No entanto, para ver exatamente o que está acontecendo, caso tenha interesse adicional em tenha interesse adicional aplicativos adicionais ou seja capaz de codificar, ou queira aprender mais sobre como utilizar esses códigos e aplicá-los às suas próprias práticas exclusivas, você pode ver basicamente todos esses recursos e opções frente para que você possa obter inspirado e para aplicá-lo à sua situação única. Então, podemos clicar no ícone Alternar aqui. Eu tenho a opção de dar uma olhada em todo o código. Para o design do site. Eu tenho a opção de copiá-lo. Tenho a opção de baixá-lo para edição posterior ou utilizá-lo como parte da minha hospedagem atual, por exemplo, de um site Se você estiver usando qualquer hospedagem de site ou estiver usando qualquer construtor de sites, como o Wordpress, por exemplo, você pode simplesmente pegar o arquivo HTML e adicioná-lo à sua página do Wordpress, por exemplo, como parte de uma página recém-criada Portanto, esses são aplicativos bastante exclusivos para você se inspirar. No entanto, neste estágio atual, tudo o que estamos fazendo ainda está totalmente 100% dentro de Claude e livre de código Então, temos nosso site, site página única totalmente projetado. Como podemos ver aqui, Claude adicionou uma data hipotética simplesmente para corrigir os erros, o que é bastante óbvio Recebemos uma data hipotética, um cronômetro de contagem regressiva e eu poderia simplesmente editar qualquer parte do processo com base na Então, essa é simplesmente a saída inicial que estamos recebendo de Claude É um site de página única baseado no contexto atual. 6. Personalização de design: Bem vindo de volta. Então, obtivemos nossa saída inicial da nuvem e, normalmente, qualquer site requer alguma personalização E como parte da palestra atual, vou mostrar como você pode personalizar a saída do Cloud com base na preferência Você pode simplesmente alterar as fontes, alterar os gráficos, alterar as cores, adicionar certos elementos. Depende totalmente de nós. Então, como podemos ver aqui, a partir da saída básica, temos espaços reservados para o logotipo real E, de acordo com minha preferência, não quero ter que lidar com nenhum segmento dos espaços reservados e gostaria que tudo estivesse simplesmente pronto para ser Então eu vou para Ta Claude. A imagem do logotipo está quebrada no site. Certifique-se de que o logotipo esteja totalmente visível e edite o que for necessário para que isso aconteça. Isso exigirá Cloud. Você tem alguma flexibilidade. Meu resultado final é bem simples. Gostaria que meu logotipo fosse apresentado diretamente aqui como parte do design. Como você pode ver, aqui, é um processo de ida e volta , típico quando você está lidando com qualquer modelo de IA, e faz parte da interação estratégica com o modelo de IA. Você sempre pode obter os resultados de sua preferência de acordo com suas preferências. Claude está simplesmente examinando o processo e dando uma olhada nos arquivos reais aqui E, como você pode ver aqui, ele está usando um formato diferente do processo e ainda está encontrando algum tipo de erro na formatação, porque o logotipo parece corresponder à paleta de cores real que está criando o erro, o que é algo muito bom se lidar agora. Por quê? Porque se você fizesse isso manualmente, você mesmo lidaria com o erro. Então, quando nos depararmos com um erro, basta devolvê-lo a Claude, que Claude possa realmente corrigir o erro em nosso nome Agora, como podemos ver aqui, está quase chegando lá. Então, vou dizer a Claude, bem, o logotipo deve ser colocado exatamente no site com uma moldura circular Até o momento, o logotipo não foi exibido. Aqui vamos nós. Portanto, qualquer editor que normalmente encontramos manualmente, trazendo algum tipo de ativo de marca, seu logotipo, formato diferente ou paletas de cores diferentes, e você esteja tentando exibi-los, esses são editores típicos com os quais qualquer desenvolvedor, qualquer desenvolvedor web front-end terá Bem, não precisamos fazer isso. Simplesmente seguindo as táticas que estou ensinando, podemos simplesmente dizer a Claude como realizar o processo de personalização e deixar que Claude faça o trabalho pesado por nós em termos de edição do código, personalizando a saída até chegarmos ao design finalizado que preferimos chegarmos ao design finalizado Como podemos ver, Claude tentou incorporar algumas edições do logotipo e ainda teve problemas em fazer com que o logotipo correspondesse exatamente às nossas preferências Então, isso é muito importante. Como podemos ver aqui, podemos fazer várias edições para chegar aos resultados que estamos tentando obter Então Claude está tentando consertá-lo repetidamente, repetidamente até que seja feito. Viu como isso é poderoso? Aqui vamos nós. Assim, pudemos ver diretamente à nossa frente todas as iterações pelas quais Claude passou e que você normalmente faria manualmente para fazer isso, economizando tempo e evitando todo o trabalho E aqui vamos nós. Conseguimos ver o logotipo lindamente apresentado à nossa frente 7. Adicionando animações para o site de página única: Bem vindo de volta. Por isso, adicionamos com sucesso um lindo logotipo como parte de nosso site de uma única página. Agora, vamos adicionar mais personalizações, certo? Estamos passando pelo desenvolvimento web de front-end e poderíamos passar por uma série de personalizações com base em nossas preferências Que tal eu editar isso, por exemplo, para adicionar mais animação a ele. Algo quente está se formando, por exemplo, eu poderia simplesmente fazer uma captura de tela, arrastá-la e soltá-la diretamente aqui, ou simplesmente destacar o elemento, copiá-lo e colá-lo na nuvem Eu vou contar para Cloud. Eu também gostaria de adicionar animação. Aqui vamos nós. Destaque isso. Algo quente está se formando, tal forma que vira Digamos que algo quente esteja cozinhando. Aqui vamos em um estilo animado. Sugira várias animações para selecionar aqui. Então, isso dirá a Cloud. Vá em frente. Eu gostaria de animar isso. Se você tem uma animação específica em mente, depende totalmente de você. No entanto, se você quiser passar por várias opções, enquanto está tentando descobrir o melhor design para você, a melhor animação, este prompt dirá a Claude: vá em frente, liste algumas animações para mim e, em seguida, vou encontrar a que eu mais gosto Então, qual estilo de animação combina melhor Brewing e Cooking Swap Soft cross fade, rolo vertical, tipo anterior, transformação azul Bem, eu poderia contar para Claude. Eu gostaria de testar todos eles. Portanto, exiba-os um por um forma interativa no bate-papo até eu confirmar Então, o que isso faria? Ao adicionar a palavra interativamente ao prompt aqui, você está dizendo a Claude que eu gostaria de ver as animações reais exibidas uma por uma antes realmente confirmar qual delas devo escolher, é muito importante como parte Você gostaria de ver quais são as melhores opções para o seu site, certo? Especialmente se você está tentando se inspirar para um determinado design ou está tentando descobrir quais são as opções que você tem. Ao adicionar esse prompt sólido, você pode contar a Claude no bate-papo Mostre-me exatamente como é. Eu confirmo, então você pode mapear. Algo quente está cozinhando. Essa é a primeira opção. É chamado de soft cross fade Ok, o que é bom. Vamos dar uma olhada no próximo. Vou clicar em Avançar. Aqui vamos nós. Assim, podemos ver a animação direta e a interação diretamente na interface do Cloud antes de migrá-la para o nosso site Algo quente está cozinhando, que é o papel vertical. Eu gosto mais desse. Vamos para a opção três. Vou clicar em Avançar também aqui. Como parte dos recursos de personalização. Então, como você pode ver, aqui, você pode adicionar animações ao seu design Qualquer parte do site real de página única é totalmente personalizável de acordo com sua preferência Você pode alterar a fonte, alterar a cor, adicionar uma determinada seção, por exemplo, alterar o gráfico. Vamos mudar o gráfico aqui. Se quisermos, depende totalmente de nós. Então, qualquer coisa que você veja como um aplicativo de Claude, você tem a opção de personalizá-la , basta seguir as táticas que estou lhe ensinando Algo quente está se formando. Eu acho que esse está bom. Vou mandar Claude continuar. Com a opção três, eu gosto das duas, três e duas. Eles são bastante profissionais e se encaixam no tema do negócio atual em questão. Então, algo quente está fermentando, vamos mudar para algo quente está cozinhando, certo? Então, como podemos ver aqui, Cloud está executando a codificação dos arquivos para trocar a saída aqui E cada linha de código, como mencionei, você pode encontrá-la diretamente no menu de alternância se quiser levá-la ao seu próprio site direto para edição posterior Dê uma olhada nisso. Algo quente está se formando Aqui vamos nós. Ele está executando o comando, e podemos ver as edições começando a se formar aqui Agora, vamos validar a saída. Algo quente está se formando e ainda está sendo editado Aqui vamos nós. Está validando isso aqui. Então, uma vez feito, ele nos mostra que a compilação da saída foi concluída Então, temos a opção de ver finalmente funcionando como parte de um site de uma única página. Aqui vamos nós. Algo quente está cozinhando, algo quente está se preparando e isso nos dirá que está tudo perfeitamente bem como parte da adição das animações E a mesma tática funciona para qualquer segmento que você queira aqui para ajudá-lo a editar esse segmento específico Você gostaria de adicionar uma certa animação a ele, para adicionar uma aparência e um toque mais profissionais ao seu próprio site de página única E a nuvem aqui está simplesmente verificando se tudo está funcionando sem problemas e perfeitamente Então, tudo está certo. O arquivo HTML está limpo. Rodapé, está tudo bem, leitores de tela, obtêm uma frase estável e depois cintilante Portanto, todos os problemas que você normalmente enfrentaria manualmente no desenvolvimento web de front-end, Claude está ajudando você a contorná-los E o código está pronto. Eu posso simplesmente clicar em Baixar. Eu poderia levá-lo ao meu site para posterior edição. Para criar uma página U no meu site. Se eu realmente tiver um site completo como parte do meu projeto para esse negócio atual , posso adicionar uma página U e simplesmente abrir uma página Zoom. As aplicações são infinitas. Portanto, essa é uma tática de personalização muito poderosa que você pode adicionar como parte do desenvolvimento web de front-end por meio 8. Como adicionar imagens para o site de página única: Bem-vindo de volta. Agora, vamos avançar um nível. Digamos que eu gostaria de adicionar algum tipo de apelo vibrante à página lateral única. Gostaria de adicionar alguns cartões, por exemplo, como parte de uma seção que mostra nossos produtos como parte de um café e uma padaria Temos croissants, temos expressos, temos baguetes. Temos pão, café com leite e a lista continua Então, eu gostaria de mostrar esses produtos aqui como parte de cartões Certo? Então, vou dizer a Claude, adicione uma seção Logo abaixo da data e hora de abertura, a seção incluirá cartões invertíveis que mostram os Por exemplo, vamos dizer croissants aqui, vamos dizer café com leite ou café com leite. Vamos dizer café expresso. Vamos manter um único item. Aqui vamos nós. Depois vamos comer pão e a lista continua. Então você entendeu. Então, isso dirá a Claude, vamos lá, criar uma nova seção entre essas duas seções E adicione cartões invertíveis para refletir esses produtos. Qualquer desenvolvedor web front-end precisaria fazer isso se estivesse exibindo seus produtos Eles estão mostrando seus serviços, seu portfólio de projetos Você pode adicionar esses cartões dobráveis lindamente animados, que normalmente leva muito tempo tentando fazer isso sozinho, ou está tentando encontrar uma versão pronta por meio dos ou está tentando encontrar criadores de sites. Por exemplo, estou mostrando as táticas, como você pode fazê-las com facilidade por meio Cloud, diretamente como parte da interface Esse é um aplicativo muito poderoso, tática muito poderosa para você se inspirar, certo? Portanto, temos a opção de animar. Temos a opção de adicionar logotipos e certos recursos e imagens com base em nossas preferências, personalizando elemento por elemento com base em nossas necessidades Em seguida, temos a opção de adicionar seções. Tudo o que você normalmente poderia fazer como parte de um criador de sites, estou ensinando como fazer isso por meio da nuvem. Adicionando animações por meio de cartões, além das seções, você pode obter os códigos exatamente para edição e personalização adicionais Se você sabe como usar esses códigos, também tem a flexibilidade de fazer isso seguindo as lições que estou lhe ensinando. E Claude aqui entendeu o contexto real que estamos tentando alcançar, e ele começará a construir aqui a seção Está passando pelo código. propósito, vamos expandi-lo, se você quiser ver o que está acontecendo. Depois de clicar nele , você poderá ver o que a nuvem está tentando alcançar por meio dos arquivos. Agora, normalmente, quando você clica nele, ele se expande, mas como está executando muitos códigos, não o expandirá diretamente no momento em que clicamos nele, apenas se expande diretamente aqui. Então, sim, se ele estiver executando uma série de códigos consecutivos, pode simplesmente haver um pequeno atraso clicável quando você clica nele para mostrar exatamente o que está acontecendo nos bastidores da nuvem E em apenas alguns segundos, você clica nele novamente e pode ver toda a codificação oculta que está ocorrendo por meio da nuvem até que o trabalho seja concluído Agora, podemos ver o arquivo. Deve estar pronto. Expandimos movendo o botão para o lado esquerdo. E aqui vamos nós. Logo abaixo da data e da hora, uma amostra do que está por vir, croissants frescos todas as manhãs, vamos lá, HoverTypeK, laminados uma amostra do que está por vir, croissants frescos todas as manhãs, vamos lá, HoverTypeK, laminados e dobrados com manteiga. Ele até adicionou alguns elementos adicionais baseados em texto para complementar a ideia que eu tenho. Veja como é poderoso construí-lo da maneira que eu ensinei até o estágio atual você pode ter um projeto completo, onde Claude está lhe dando um impulso na direção certa Pego um café com leite, café expresso à mão e leite cozido no vapor, pão excelente , Como você pode ver, nosso site de página única está se formando. Vamos alterar o gráfico atual como parte de nossa personalização Vou contar para Claude. Aqui vamos nós. Copie e cole isso. Abaixo, vamos lá. Algo quente está se formando. Há um gráfico que eu preciso que seja alterado. Transforme-o em uma caneca de café. Com vapor animado saindo da caneca. Você pode adicionar sua própria visão e inspiração se tiver algo em mente, mas não tiver ideia de como codificá-lo. Siga a tática que estou lhe ensinando agora e você poderá fundi-la como parte do seu design Ele simplesmente vai além das táticas básicas de desenvolvimento web de front-end, adicionando seções, fontes, adicionando imagens e adicionando animações Não, você pode ir um nível adiante por meio de outras personalizações Ao trazer sua própria visão e combiná-la com o prompt para realmente contar a Claude, vá em frente e construa-a para mim Então, vou mudar esse gráfico atual, que parece não se alinhar com o tema atual que temos Então, animamos tudo até o estágio atual, corrigimos tudo até o estágio atual. Todos os outros elementos são facilmente comestíveis. Eles são bem simples de editar. Se você acompanhou até este ponto atual, agora vou simplesmente elevar o design para torná-lo uma saída profissional de desenvolvimento web de front-end Como podemos ver aqui, Claude está examinando o design Para finalizá-lo com base na minha visão e nas minhas preferências. Aqui vamos nós. Está executando o código, economizando meu tempo, economizando meu esforço. Portanto, nosso site finalizado de página única está se desenvolvendo lindamente. Temos o logotipo pequeno, o logotipo principal. Temos algo quente cozinhando aqui. Em seguida, compramos um novo local no bairro para manhãs lentas e retiramos os spreads, então temos um cronômetro de contagem regressiva Poderíamos mudar a data se quisermos. Depois, temos cartões invertíveis, excelente declaração, o local que podemos editar Então, poderíamos ter um pequeno formulário para os e-mails. Se você tiver concluído a criação do site, poderá utilizá-lo para desenvolvimento posterior, se preferir Temos os espaços reservados para os links reais de mídia social, tendo em mente tudo o que estamos fazendo neste estágio atual, apenas desenvolvimento web de front-end, e o código está Então, como podemos ver aqui, temos a caneca animada e o site de uma única página está funcionando perfeitamente Portanto, neste estágio atual, criamos um site personalizado e de página única para negócios hipotéticos, que pode ser mapeado para qualquer aplicativo que você tenha em mente 9. Implantando seu site de página única: E bem-vindo de volta. Criamos com sucesso nosso site de página única, que serve para a inauguração um negócio hipotético, que é um café e uma padaria Nós criamos um belo design. Eu te ensinei as táticas de personalização em termos de adição de animações, gráficos cada item aqui Se você quiser alterá-lo, basta seguir as táticas que abordamos e você poderá alterá-las Você pode simplesmente alterar as datas, os horários. Você pode remover seções se ainda não estiver pronto para utilizá-las, por exemplo, você pode eliminar seções. Você pode eliminar, por exemplo, os ícones de mídia social. Se você não quiser conectá-los às mídias sociais, depende totalmente de você, certo? Mas você entendeu a ideia. Digamos que depois de seguir todas as táticas que eu ensinei e você personalizou seu site de uma página, você esteja pronto para realmente publicá-lo e lançá-lo. A melhor maneira de fazer isso para sites de uma página, normalmente quando você os usa para anúncios, eventos, páginas de destino e a lista continua, é lançá-lo em é lançá-lo em alguns segundos simplesmente por meio de um coágulo Quando terminar, navegue até o topo aqui e depois de clicar em publicar artefato Antes de publicá-lo, você pode adicioná-lo a um projeto, que é o projeto que já criamos. Dessa forma, você tem tudo sob o mesmo guarda-chuva. Para futuros desenvolvimentos, você pode simplesmente entrar no projeto, personalizar qualquer coisa, extrair qualquer código que desejar com base em sua preferência. E então avance com facilidade, em vez de simplesmente ter que fazer tudo fizemos do zero todas as vezes. Portanto, você tem várias opções que você pode utilizar. Você pode fazer o download como um arquivo HTML para edição posterior ou, se quiser adicioná-lo a uma determinada página como parte de sua hospedagem, isso depende totalmente de você como parte do Construtor de sites. Isso depende totalmente de você. Você pode adicioná-lo ao projeto para desenvolvimento futuro se estiver fazendo isso de forma recorrente para sua empresa E, finalmente, se você estiver pronto, pronto para começar, publique Artifact Clique em Publicar artefato e dê uma olhada nisso. publicação desse artefato o tornará acessível a qualquer pessoa na Internet e potencialmente visível nos mecanismos de pesquisa É um site completo. Seu bate-papo permanecerá privado. Esse é o nome do artefato real. É chamado de HTML de ponto de índice com base na configuração real do arquivo. Depois de clicar no link Publicar e copiar, aqui está. Publique e copie o link. Este é o link real e está completamente publicado. Eu posso simplesmente cancelar a publicação com base na minha preferência ou posso simplesmente obter um código de incorporação Se você estiver usando um construtor de sites, qualquer construtor de sites, depois de receber um código de incorporação, poderá incorporar essa página real diretamente como parte do seu site poderá incorporar essa página real existente Ou, se for uma página independente, copie o link e você poderá compartilhá-lo com seus amigos Você pode compartilhá-lo com seus clientes. Você pode compartilhá-lo com seus colegas. Depende totalmente de você. E uma vez que você clica nele e simplesmente navega até a página finalizada real aqui está o site lindamente projetado em alguns cliques, certo, em alguns minutos, sem a necessidade de ler tudo É um aplicativo muito, muito poderoso para você se inspirar e faz parte dos artefatos da nuvem Assim, você pode simplesmente compartilhar um link ou isso ou simplesmente navegar de volta com base em sua preferência. Depende totalmente de você. Mas, neste estágio atual, você lançou com sucesso seu site real de página única. Você pode simplesmente navegar de volta para a nuvem e ver exatamente o que abordamos até o ponto atual como parte da construção. Você volta para Claude depois de lançar seu site, ele já é um artefato lançado Já foi publicado. Eu posso simplesmente editar isso e publicá-lo novamente, ou simplesmente as edições serão publicadas novamente. Posso compartilhá-lo diretamente ou colocá-lo diretamente no site ou copiar o código para o meu site. Todas essas são opções que você pode utilizar com facilidade. 10. Criando seu site de várias páginas: E bem-vindo de volta. Agora, começando, vamos criar um site de várias páginas Vamos criar um site W que consiste em uma série de páginas reais, um site completo e um desenvolvimento web front-end Dessa forma, você pode levar seu conjunto de habilidades em termos de desenvolvimento web front-end a um nível totalmente novo Já adicionamos o logotipo da nossa demonstração atual, o hipotético café e a padaria, imagens de referência como parte do contexto Poderíamos adicionar qualquer informação adicional que gostaríamos de acrescentar, uma imagem inspiradora adicional e uma captura de tela inspiradora que temos uma nota inspiradora que elaboramos em algum lugar As ideias são infinitas. Assim, você pode adicionar todos esses elementos adicionais, se quiser , ao contexto do projeto. Ao fazer isso, começaremos a criar nosso site de várias páginas, não um site de uma única página, mas uma série de páginas, um site completo, que é algo com o qual muitas empresas, muitos profissionais e muitas pessoas interagem no dia a dia ou com o qual trabalham como parte de seu ambiente profissional Então, o que vamos fazer é dizer a Claude que atue como desenvolvedor web profissional, especificamente, desenvolvimento frontal e web Lembre-se de que todos os aplicativos com os quais estamos avançando atualmente são baseados em front-end, front-end e desenvolvimento web Desenvolvimento frontal e web no qual você vai me ajudar a criar um site completo para meu novo negócio, que é o café e padaria Mugs Usando os arquivos anexados no contexto para referência e inspiração. O site deve incluir o seguinte. Essa é a parte ou o estágio em que você vai ser criativo. Como você imaginaria seu site? Por exemplo, o site consistiria em cinco páginas exclusivas , seção clara sobre nós, página de contato, galeria de imagens e sugestões de páginas relevantes com base no contexto e no tema. Todas as páginas devem ser totalmente editadas e personalizáveis para evitar problemas de codificação que você possa encontrar em edições futuras Qualquer seção ou segmento do site também pode ser facilmente recuperado como um código para implantação futura recuperado como um código para implantação futura. Se você estiver planejando levar seu site, por exemplo, a um determinado provedor de hospedagem ou estiver tentando personalizá-lo no futuro, essas táticas imediatas garantirão que você esteja estabelecendo as bases certas para seu aplicativo, a fim de evitar problemas em termos de codificação e falta de flexibilidade com a saída. Então eu vou dizer a Cloud, vá em frente aqui. Vou contar para Cloud, vá em frente. Adicione qualquer entrada relevante que torne o design do site melhor e mais eficiente. Então, isso prepara o terreno para nosso site de várias páginas. Estamos criando um site completo para o negócio hipotético, um site de várias páginas É basicamente para esse contexto comercial atual, o qual muitos alunos e estudantes se identificarão usando os com o qual muitos alunos e estudantes se identificarão usando os arquivos anexados como parte do contexto inspirador do Qualquer restrição que você queira adicionar, sinta-se à vontade para adicioná-la Um requisito para seu próprio site exclusivo, sinta-se à vontade para adicionar. O site, com base na minha preferência, consistiria em cinco páginas exclusivas, o que é padrão típico em muitos sites. Esclareça uma seção, página de contato, galeria de imagens e sugira páginas relevantes com base no contexto e no tema. Se você quiser que Claude sugira com base nas melhores práticas para o aplicativo específico em questão, o que poderia ser uma boa opção adicional Todas as páginas devem ser totalmente editáveis e personalizáveis para sua edição futura. É muito importante que, se você está familiarizado com HTML, CSS e está tentando codificar sozinho, mesmo que o aplicativo atual seja puramente zero, sem código, você possa utilizar o código, extrair o código das saídas para suas próprias preferências e aplicativos exclusivos Qualquer seção ou segmento do site pode ser facilmente recuperado como código para implantação futura Se eu quiser extrair um determinado trecho do site ou migrar o arquivo inteiro para o site que criei por meio da nuvem, cada conteúdo ou código deve ser facilmente movido e não falha simplesmente porque eu saí da nuvem, e não falha simplesmente porque isso é muito importante, pois todo o incômodo de tentar refazer as coisas desde o início Agora, Claude está realmente criando o site para nós com base na solicitação atual e no contexto atual Agora, como você pode ver aqui, ele está examinando os detalhes do projeto que criamos, todas as imagens relevantes, todos os designs relevantes. Lembre-se de que há um componente muito importante para um site de várias páginas, que é a navegação Como navegar de uma página para outra. E, normalmente, como um estágio de desenvolvimento web de front-end, isso pode ser muito complicado de seguir manualmente , porque você é o único responsável pela navegação E vou mostrar estratégias muito poderosas para eliminar todo o incômodo, de forma que, ao final de nosso aplicativo, você tenha um pacote completo de desenvolvimento web de front-end totalmente pronto para E uma nuvem está executando o design principal aqui. Ele está utilizando JavaScript, CSS, HTML, simplesmente para criar tudo o que eu pedi que ele fizesse E depois de clicar em qualquer um deles, a propósito, você tem a opção de ver em qual estágio do código do processo de codificação está Mesmo que você tenha alguns segundos de atraso para ver o que está acontecendo, porque código simplesmente percorre a série de códigos. aqui, por exemplo, temos o JS, os arquivos JSON, depois os arquivos CSS e, em seguida os arquivos HTML também, em execução Portanto, ele executa vários códigos ao mesmo tempo para criar o design. Agora, imagine se você fizesse isso sozinho. Manualmente, codificando cada linha para que funcione. É isso e você levará muito tempo, muito esforço para fazer isso. E simplesmente ligando para as táticas que estou ensinando agora, você pode simplesmente passar por todo o processo Agora, como podemos ver aqui, Claude está quase pronto, e a tela simplesmente continuará mudando de uma tela para outra para refletir o palco em que a nuvem está como parte do processo de compilação Está construindo o site inteiro aqui. Isso pode mostrar que há um erro. Talvez eu mostre que ainda está carregando. Pode mostrar a você. Está compilando porque ainda está passando pela fase de construção, da mesma forma que você faria Você fará isso em etapas. E ao clicar em cada estágio, você pode ver o que está acontecendo e em qual estágio o Cloud está basicamente para ajudá-lo a definir o ritmo de seu próprio fluxo exclusivo. Onde você está agora na fase de desenvolvimento do site, tendo em mente que tudo em que baseamos a análise é baseado em um negócio hipotético Pode funcionar para seu próprio negócio exclusivo, para seu próprio projeto exclusivo. Todos os personagens, todos os elementos são completamente hipotéticos Para fins de demonstração, para que você veja que é facilmente transferível e mapeável para sua própria carreira, para seu próprio negócio criativo, para seu próprio projeto, para seu próprio ambiente corporativo, qualquer que seja o domínio em que você esteja, você pode entender algo que o ajudará a elevar suas habilidades de desenvolvimento web frontal e levá-las a um mundo totalmente novo. nível. Então, como podemos ver aqui, Claude está simplesmente construindo todas essas páginas, uma de cada vez Ele está executando todos os códigos de cinco páginas exclusivas com todos esses requisitos de acordo com nossa preferência. Podemos ver a casa sobre nós, o cardápio, a galeria, o contato. Acrescentou também reservar uma tabela com base na solicitação atual que passei para Claude, sugira algo que se alinhe ao nosso tema E como vai ser um café e uma padaria, Claude sugeriu: Sabe o que? Que tal reservar uma mesa? Página, o que faz todo o sentido. Portanto, isso é muito poderoso porque sempre deixe espaço para o modelo de IA compartilhar com você alguma saída que você possa achar útil. E como podemos ver aqui, temos um arquivo MD. Tudo é construído do zero. Estamos simplesmente monitorando a saída em vez simplesmente construir tudo do zero. Isso é muito, muito poderoso. A construção do seu site está construída. Cinco páginas HTML, CSS, JS, usando logotipos, fotos, o que há de melhor sobre nós, menu, galeria, entre em contato conosco, direção de design, por que é fácil editar e extrair. CSS de um estilo. Cada seção, cada página tem quebras claras. Excelente. Sem etapa construída, sem estrutura, excelente. Os arquivos leia-me abrangem a personalização de cores. Algumas coisas que valem a pena fazer antes de iniciar conecte o formulário de contato aos servidores e troque os blocos de espaço reservado por seu endereço e fotos reais Ambos estão sinalizados, excelentes. Então, como estamos focados no desenvolvimento web front-end, obviamente, para estágios posteriores de desenvolvimento web, qualquer formulário ou qualquer página externa, digamos, que exija algum tipo de preenchimento de um formulário para coletar dados, por exemplo, como parte da inscrição em Isso é considerado algo relacionado ao desenvolvimento do front end. E, como mencionei, não estamos cobrindo isso. Estamos nos concentrando apenas no desenvolvimento web de front-end. Como parte do nosso aplicativo. Agora, vamos dar uma olhada nisso. Temos um arquivo zip completo que podemos simplesmente baixar e que inclui tudo, todas essas páginas. E isso é muito importante, aliás, como parte do nosso design. Por quê? Porque criamos cada página sozinha como um único código, em vez de simplesmente ter tudo compilado e agrupado Cada página pode ser personalizada sozinha. Então, temos o código HTML básico para o nosso site, certo? Isso é algum tipo de espinha dorsal para. No entanto, gostaríamos de adicionar algum tipo de gráfico de personalização porque, obviamente não vamos utilizar apenas uma tela HTML simples para nosso site. Não. Agora vou mostrar a vocês depois de coletarmos a espinha dorsal do site, que está cheia de arquivos HTML, e obtivermos a pasta zip real do site, incluindo todos os códigos Agora vamos elevar isso e realmente transformar o site em algo apresentável, incluindo gráficos e 11. Apresentando o site para aplicativos de design: Bem-vindo de volta. Então, a Cloud criou o pacote completo para o nosso site. Ele inclui todos os códigos HTML. E depois de baixar o arquivo zip do site, você obtém todos os códigos que pode utilizar se estiver tentando carregá-lo como parte do construtor de sites. No entanto, esse não é o objetivo que estamos tentando alcançar. Como mencionei, estamos utilizando Claude para o desenvolvimento web de front-end completo Embora este seja um site totalmente pronto, vou mostrar as táticas de como fazer tudo como parte da nuvem de A a Z. Então, criamos o site com sucesso, correto Temos os códigos HTML. Agora, vamos dizer a Claude que precisamos do site, não que seja construído para ser usado externamente Não, quero que tudo seja exibido, personalizado, editado e totalmente visível na nuvem. Então, no prompt do Fong, quero que o site criado seja totalmente exibido aqui na interface, incluindo as cores, o logotipo, os designs, etc Então, isso dirá a Claude, ótimo. Recebemos o resultado do site. No entanto, não quero fazer isso externamente baixando tudo para trabalhar externamente Não, eu gostaria de ver tudo internamente como parte da interface porque, como parte da análise de Claude, ela tentará fazer o trabalho da maneira mais rápida possível, simplesmente baixando todos esses arquivos HTML separados Eu poderia levá-los a um criador de sites e baixar o arquivo zip, que inclui todas as personalizações necessárias, os arquivos CSS, que são algo mais que um desenvolvedor web front-end avançado usaria como parte da um desenvolvedor web front-end avançado usaria criação de No entanto, como mencionei, não é isso que estamos tentando alcançar. Estamos tentando minimizar a interação manual e aumentar automação por meio da nuvem para desenvolvimento web de front-end Então, ao adicionar o seguinte prompt, Cloud criará a solução novamente, diretamente na interface aqui , mostrando-me todas essas páginas, todos esses vários designs, todos esses vários elementos com base na análise e no contexto do projeto, no tema e na solicitação que fornecemos a Claude Então, como podemos ver aqui, extraia o conteúdo principal de cada página. Ele está percorrendo o código que nos forneceu anteriormente, montando a página, reunindo todos os arquivos HTML e CSS Então, como você pode ver, está fazendo o trabalho do desenvolvedor web que normalmente pegaria todos esses arquivos e construiria o site usando esses arquivos. Então, isso dá a você um sabor mais intermediário e mais intermediário do sabor mais intermediário e mais intermediário quão poderoso seu aplicativo pode ser, certo? Como podemos ver, o site foi lançado com sucesso sem a necessidade eu realmente começar a baixar todos os componentes do arquivo e, em seguida, levá-los a um criador de sites e simplesmente iniciar o site ou criar o site. Não, seguindo a tática, sou capaz de atingir dois objetivos Tenha todos os arquivos prontos para mim. Eu poderia baixar todos eles. Se você contratou, por exemplo, um desenvolvedor web, pode passar os arquivos para o desenvolvedor web trabalhar neles para edições futuras ou, se conseguir conduzir o aplicativo sozinho como parte da hospedagem e criador de sites, poderá utilizá-los Ou não, se você não quiser mergulhar em nenhum aplicativo que envolva a movimentação externa de um arquivo que contém um código, tudo bem Estou mostrando todas as táticas que você pode seguir. Simplesmente dizendo a Claude para fazer isso agora, você tem um site completo e pronto Vamos dar uma olhada nisso. Veja como isso é profissional. Na verdade, temos um site completo, dividido em diferentes segmentos e componentes. Lembre-se de que, como parte da saída inicial de Claude, você pode encontrar erros, o que é básico, o que normalmente é perfeitamente normal, nada com que se preocupar O que estou tentando alcançar agora é confirmar que o Cloud está realmente criando o site com base nas minhas preferências. Então, temos o cabeçalho aqui, depois temos a navegação. Se você clicar na navegação, nada aparecerá, certo, que é algo bastante óbvio porque a Cloud está montando o site No entanto, se tiver algum redemoinho, esses são redemoinhos não detectados que você encontraria esses são redemoinhos não detectados que você encontraria manualmente. Não, vou dizer ao Claude, vá em frente, corrija todos esses erros Mas antes de fazermos isso, vamos dar uma olhada em todos esses itens aqui. Se eu clicar nas coisas, o que obtemos? Aqui vamos nós. Então, se eu clicar em, por exemplo, café, bebidas e menu, temos alguns cabeçalhos de menu, mas não temos os recursos do Toggle . Nós podemos consertar isso. Então, poderíamos voltar para a página inicial real. E, a propósito, depois de clicar nele porque ele tem um espaço reservado para um link, se você clicar em Abrir link, não chegará a lugar nenhum porque a página ainda não foi lançada O site não está ativo. Eu posso clicar em Reservar tabela. Está bem? Isso me leva a esta página aqui. Então eu poderia navegar até a página inicial. Portanto, temos uma configuração sólida aqui, que requer um ajuste fino, correto? Vamos clicar no C no menu completo. Em seguida, navegamos até o menu, café e bebidas, doces e pães, café da manhã e almoço, sazonais, que é algo que podemos editar com base em nossa preferência Portanto, temos a configuração real em vigor. E se você notar, a propósito, a imagem inicial de fundo, essa é a imagem que adicionamos como parte do contexto, que é basicamente a parte da configuração do projeto. Temos uma manchete clara, que é muito profissional Então, tudo parece em ordem, no entanto, necessárias mais algumas edições, como podemos ver no caso de hoje, algumas favoritas Isso é para a galeria, como podemos ver, mas como não temos imagens, vamos lá. Não temos imagens colocadas como parte da galeria. É por isso que não conseguimos ver nenhuma imagem porque estamos criando o site real para integração com quaisquer imagens adicionais. Agora, vamos avançar um nível. Vou até Ta Claude, corrigir quaisquer erros no site e me certificar incluir imagens fornecidas a partir do contexto do projeto e locais onde as imagens podem ser adicionadas, rotulando-as com um espaço reservado Portanto, esta é a primeira saída que estamos obtendo para o site de várias páginas, o que é ótimo, aliás, porque temos os arquivos completos, além de fazer com que Claude exiba os arquivos do site diretamente E como parte do processo, quando você encontrar algum erro de integração, não precisamos fazer esse menu sozinhos. Basta dizer a Claude que vá em frente, corrija todos esses erros e certifique-se de que o site esteja totalmente funcional Como parte da fase de design, obviamente, não teremos simplesmente uma saída pronta para uso desde a primeira execução, especialmente se essa for sua primeira interação com Claude Não, teremos a saída básica, como podemos ver aqui. Agora estamos corrigindo os erros, o que é muito importante para garantir que tudo esteja funcionando bem. Então, como podemos ver, Claude encontrou um bug aqui, ele está tentando analisar todos os erros no código, o que é algo que você precisa fazer Manualmente para garantir que o site esteja totalmente funcional. Tendo em mente que as táticas que estou ensinando, você pode personalizar ainda mais o site. Digamos que você tenha uma determinada imagem que gostaria de adicionar ou um determinado ícone que gostaria de colocar ou um determinado item de menu que gostaria de substituir, tudo o que você pode fazer diretamente no Claude com base nas táticas que estou lhe ensinando agora Então, estamos passando por isso como parte dos estágios. Agora, estamos removendo todos os erros do estágio atual para confirmar que tudo está funcionando perfeitamente bem. E estou dizendo a Claude que use todos os recursos que eu forneci Para seu próprio aplicativo exclusivo, se você quiser minimizar o tempo de interação de ida e volta com Claude, basta informar Claude ou adicionar mais imagens, mais arquivos e mais detalhes contextuais ao segmento de contexto do projeto E então Claude simplesmente poderá preencher todos esses detalhes de forma rápida e eficaz Agora vamos dar uma olhada nisso. Agora vamos dar uma olhada no site aqui. Novamente, o arquivo zip. Recebemos a página sozinha. A transmissão ao vivo reflete todos os detalhes, mesma navegação, as mesmas cores. Tudo está perfeitamente no lugar. Ok, vamos ver isso a partir da capa de hoje, menu completo de favoritos. Bom. Essa é a espinha dorsal básica do site real No entanto, não está completo porque precisamos adicionar a navegação a ele. Esse é um deles. Em seguida, temos a opção de editar os outros itens aqui, como a tabela de reserva, ver nosso menu, que exigem mais personalização Agora, neste estágio atual, estamos prontos para mergulhar aprimoramentos e na personalização de nosso site 12. Navegação e edição em sites: E bem-vindo de volta. Por isso, lançamos com sucesso a base do site. No entanto, precisamos realizar algumas edições. Precisamos integrar a navegação para garantir que ela esteja totalmente funcional, certo? Então, obtivemos os códigos. Dissemos a Claude, vá em frente, execute os códigos dentro de Claude para ver o Agora vamos avançar mais um nível. Vamos dizer a Claude, certifique-se de que a navegação esteja funcionando totalmente. Essa é uma delas. O menu exibe todas as páginas corretamente e os links do menu para a página em questão são corretamente. Essa é a primeira coisa que precisamos fazer. Vamos lá, apenas para garantir que tenhamos a navegação correta antes realizar qualquer edição adicional para garantir que o site esteja totalmente funcional Então, o que isso faria? Isso dirá a Claude, vá em frente Claro que, com base no site atual, vimos que sempre que clico em algo, por exemplo, não vejo a navegação completa. Eu gostaria que as coisas estivessem totalmente apresentáveis dessa forma Quando clico em um determinado item do menu aqui, consigo navegar de uma página para a outra com bastante facilidade Então isso é muito importante. E, a propósito, quando terminarmos com isso, mostrarei que, quando você exibe a saída da nuvem, há uma área muito importante da qual você precisa estar muito ciente, que é a expansão aqui, porque quando a nuvem está criando o site real, às vezes mostra versões diferentes com base em dispositivos móveis ou computadores. Então, quando eu precisar ver o site completo funcionando, vou expandi-lo totalmente para confirmar que tudo foi construído. E quando eu amplio o zoom e percebo, por exemplo, digamos que o menu não está funcionando com base no tamanho do celular, direi a Claude que o site também funciona para dispositivos móveis, apenas para garantir que você possa adaptar o site com base em qualquer dispositivo com o qual esteja o site com base em lidando Essa é uma dica profissional avançada. Mantenha isso dessa forma, ao criar a nuvem, sempre, depois de terminar o design, tente expandi-lo para ver completamente o layout porque conforme você altera as dimensões e o tamanho, como você pode ver aqui, o layout real começa a mudar, certo? O menu começa a mudar, a organização do texto começa a mudar. Portanto, lembre-se sempre de que alguns recursos podem depender de determinados dispositivos. Então, isso faz parte do seu processo de desenvolvimento. É muito simples. Simplesmente por uma linha de código, você diz ao Cloud por meio de um prompt; na verdade, diz a Claude, vá em frente e certifique-se de que o dispositivo funcione no celular e no desktop É principalmente isso. Portanto, não há nada de complexo nisso, mas algo para manter em mente ao iniciar o processo de criação do seu site real. Então, como podemos ver aqui, estamos dizendo a Claude que confirme a navegação É dar uma olhada na navegação para garantir que tudo esteja silencioso, de acordo com os requisitos que temos. Então, vamos dar uma olhada nas etapas para garantir que todas as páginas anteriores que criamos, cerca de páginas anteriores que criamos, cinco páginas, estejam vinculadas corretamente, e vou mostrar como podemos confirmar que está tudo bem. Então, está passando pelo processo. Ele pode apresentar erros. E se você puder ver aqui, problemas reais de alternância de dispositivos móveis. Ele identificou o problema do celular sozinho. Simplesmente dizendo, vá em frente, verifique se a navegação está funcionando corretamente. Está examinando os códigos. Ele descobriu isso, você sabe o que? Com base no celular, isso pode não estar funcionando corretamente. Com base no desktop, ele pode estar funcionando corretamente. Então, isso é algo que eu conheço bem e, durante o processo, Claude conseguiu identificar sozinho Então eu te dei a dica, eu te dei um conselho profissional, mas, ao mesmo tempo, mantenha isso em mente, pois Claude está simplesmente ajudando você a evitar esse obstáculo por padrão Mas, como alguém que está usando nuvem de forma profissional, quando terminar de criar seu site, sempre o estenda para todas as dimensões do site para ver todos os recursos e, em seguida, diga ao Cloud, torne-o compatível com dispositivos móveis. Então, como podemos ver aqui, por padrão, Cloud também está tentando torná-lo compatível com dispositivos móveis. Ele está percorrendo a navegação, em vez de precisar fazer isso manualmente. Estamos confirmando as etapas para a construção, um nível Então, obtivemos o código inicial do backbone. Dissemos ao Cloud que o executasse dentro do Cloud sem qualquer referência externa a um criador de sites ou o uso do criador de sites ou hospedagem em qualquer formato ou formato. Então, estamos levando em consideração a navegação, garantindo que a navegação esteja funcionando corretamente como uma criação completa do site. Portanto, estamos avançando um nível por vez para ter um site completo e finalizado que possamos utilizar e, ao mesmo tempo, você possa se inspirar para criar seu próprio aplicativo exclusivo Agora, Claude está finalizando o aplicativo aqui. Podemos expandi-lo para ver exatamente a configuração da navegação, que faz parte do processo, da mesma forma que você cria um site, o front-end do site, você faz isso por etapas, Você passa pela construção, percorre as seções, os gráficos, a navegação, e isso leva tempo São necessárias algumas semanas para realmente criar um site totalmente funcional. E por meio da integração da nuvem, você pode minimizá-la 2 minutos a uma hora, no máximo, à medida que aprende as táticas que estou ensinando. Então, agora a Cloud está finalizando o Appo aqui. E estamos quase prontos com a navegação pronta para nosso site. Lembre-se sempre de que Claude finalize a tarefa antes de avançar para Agora, ele está escrevendo as funções reais. Ele está arquitetando a navegação para validá-la. Você pode ver todos os diferentes estágios da construção. Obviamente, como parte do desenvolvimento do site, o desenvolvimento web front-end, às vezes você precisa adicionar textos Você precisa adicionar algumas referências para o design, para o projeto em que está trabalhando As táticas que estou ensinando fornecem o conjunto de habilidades para navegar em qualquer projeto com o qual você esteja lidando e que exija desenvolvimento web front-end Então, quando terminamos a navegação, estamos avançando para outro nível, que confirma que temos a espinha dorsal, a funcionalidade do site A navegação está funcionando. No entanto, precisamos personalizá-lo mais. Precisamos adicionar alguns recursos a ele, algumas animações, que fazem parte de qualquer desenvolvimento web front-end Então, Claude agora está compilando o resultado final e o resultado final e carregando a visualização real para que possamos confirmar exatamente se a navegação está funcionando E, como mencionei, lembre-se sempre de que, uma vez obtido o resultado, sempre expandido para a forma completa. Clique na opção de alternância aqui para ver o resultado finalizado E depois de ajustar o tamanho, e se perceber que algo não está funcionando, por exemplo, você pode avisar Claude Confirm Está funcionando no celular ou não? Está funcionando no desktop ou não? E se Claude lhe der a confirmação, então sim, pode ser que você esteja limitado com a interface que está tendo, mas é uma medida de precaução para garantir que seu site funcione em vários dispositivos Agora, a nuvem aqui está confirmando a lógica de navegação. Tudo funciona perfeitamente bem. Então, precisei pesar adequadamente, mas descobri que um problema genuíno de endurecimento pode causar dentro da estrutura de uma caixa Então, ele está passando pelo processo de iteração que normalmente faz como parte da busca de erros, corrigindo erros quando necessário Caso um eddor seja algo que afete a saída, ele será corrigido Se não tiver um impacto negativo, ele simplesmente o ignorará, o que, novamente, é algo que você também faria manualmente Então, estamos esperando o resultado finalizado aqui. E, como podemos ver, há uma mudança no resultado, e espero que a nuvem confirme agora que está tudo pronto A navegação confirmada está funcionando. Meu teste só precisava pesar adequadamente. Ok, já abordamos esse problema. Vamos dar uma olhada no comando atual em execução na pré-visualização. Agora, toda a navegação está verificada. Eu sempre prefiro expandir para ver o que está por trás do capô, o que está acontecendo nos vários estágios da análise. É uma dica profissional. Eu aconselho você a passar por isso porque isso lhe dirá em que estágio Claude está e, caso você encontre ou identifique algo que não prefira, poderá abordá-lo diretamente Dê uma olhada no feedback de Claude. Tudo parece bem alinhado. Ele encontrou um bug no processo e o corrigiu. Além disso, preparei o arquivo zip, incluindo todos os códigos, pronto para usar. Ele continuará fornecendo isso. Quanto mais atualizamos o arquivo, mais iteramos o arquivo, como mencionei, porque você está lidando com isso como parte de um projeto Portanto, em qualquer edição, adição, atualização ou alteração futura adição, atualização ou em seu projeto atual, você poderá simplificar Claude, atualizar o zip completo do site e enviá-lo para mim Eu aceito. E então você pode movê-lo para um construtor de sites. Você pode movê-lo para sua própria hospedagem em vez de ter que fazer isso do zero todas as vezes. Agora vamos dar uma olhada na saída finalizada. Aqui vamos, aqui. Agora vou alternar o menu superior, expandir os recursos e vamos lá. Lindo, certo? Temos a página Abo. Excelente. Dê uma olhada na imagem, que faz parte do contexto do projeto. Adicionou uma história. Aqui está, como é feito. Conheça a equipe, indivíduos aleatórios, nomes hipotéticos, situação hipotética, projeto hipotético No entanto, tem um design bonito. Dê uma olhada na galeria, por exemplo, dê uma olhada nisso. Essas são as imagens, aliás, que adicionamos como parte do contexto. Se você der uma olhada nisso, adicione uma foto aqui, adicione uma foto aqui. Está nos dando espaços reservados para indicar exatamente quais são algumas boas sugestões Os títulos marcados como foto são espaços reservados, coloque suas imagens e você poderá trocá-las Poderoso. Página de contato conosco. Aqui vamos nós. Recebemos um formulário. Que poderíamos utilizar posteriormente o conteúdo, por exemplo, basicamente, se você obtivesse um formulário ou espaço reservado adicional para isso, poderíamos corrigir isso. Está perfeitamente bem. Em seguida, dê uma olhada na galeria também. Nós vimos isso. Esta é a vida do café, da padaria, do café. Se você tiver certas imagens do café sobre nós. Esta é uma das minhas páginas favoritas: mix, proof, shape, core, bake. Essas são adições sugeridas por Claude com base no prompt adicionado, que se encaixam no tema, certo Então, todos esses são detalhes importantes. Como podemos ver, ele simplesmente forneceu alguns nomes hipotéticos para funcionários hipotéticos que poderíamos simplesmente alterar e alterar com base em nossas preferências, nossos valores, vir e dizer olá, entrar em contato, o que faz parte da página sem contato, eu acredito Vamos dar uma olhada nisso. Aqui vamos nós. Excelente. A navegação está funcionando perfeitamente bem. Para casa, voltamos, reservamos uma mesa. Antes de reservarmos uma mesa, vamos dar uma olhada nisso. Algumas coisas favoritas: massa azeda country, croissont com manteiga, canecas com leite caseiro, excelente menu completo de Ca. canecas com leite caseiro, excelente menu completo de Ca. Lindo, certo? Pegamos o café. Nós temos os doces Se eu rolar isso um pouco para o lado, se eu clicar aqui, se você notar, temos nosso menu, certo? Nosso menu está presente como parte de uma visualização móvel em comparação com simplesmente uma visualização para desktop, o que é uma grande vantagem. É um ótimo complemento para garantir que tudo esteja bem alinhado e em ordem A página Sobre nós limpa tudo. Podemos ver o logotipo do local real, membros hipotéticos da equipe do forno até Esse é simplesmente um caso hipotético fictício que pode ser facilmente mapeado de acordo com Essas imagens, que foram fornecidas como parte do contexto do projeto, foram usadas para criar o site. A página inicial parece incrível. Temos as capas favoritas reais, os preços extraídos do menu, nossa história usando as imagens fornecidas, as instruções. Se você quiser adicionar algum tipo de recurso de mapa, dê uma olhada no rodapé. Tudo está ótimo. Vamos experimentar a navegação se eu clicar em Contato. E sim, aqui vamos nós. Vamos para a página de contato. E então, se eu der uma olhada na página Sobre nós, sim, ela também está funcionando. Chegamos à página Sobre nós. Se eu der uma olhada no cardápio, nos doces e no pão, sim, vamos lá Claude em segundo plano, como mencionei, conserte isso. Sazonal. Aqui vamos nós. Planejando uma visita em grupo, reserve uma mesa. Clique em Reservar. Sim. Volte ao menu. Aqui vamos nós. 13. Adicionando animações para o site de várias páginas: E bem-vindo de volta. E configuramos com sucesso, neste estágio atual, a navegação em nosso site e testamos se tudo está funcionando perfeitamente bem. E a configuração da navegação, aliás, é um processo muito demorado. Se você tentou fazer isso manualmente, como eu, ao desenvolver o front-end de um site, você pode facilmente quebrar links diferentes, segmentos diferentes, sem falar na alternância entre visualização móvel e visualização em desktop, e a lista continua E por meio da integração da nuvem, da mesma forma que estou compartilhando com você, conseguimos contornar todo o incômodo e chegar a esse belo design, totalmente funcional, com navegação totalmente funcional, com Tudo está perfeitamente alinhado. Agora, nesta palestra atual, vou ensinar como aplicar uma das minhas partes favoritas para minhas partes favoritas para o desenvolvimento web front-end de qualquer site, que é Muitas vezes, somos limitados por temas. Não temos ideia de como codificar, ou não temos ideia de como usar o CSS ou o HTML, sem falar nas coisas mais importantes. Agora vou mostrar como podemos simplesmente contornar todo o processo integrando a Portanto, se dermos uma olhada no site que criamos até o estágio atual, as lições que compartilharei com você e as táticas ajudarão você a as táticas ajudarão você a se inspirar verá que tem a capacidade integrar várias personalizações com base em sua preferência Dando o pontapé inicial. Digamos, por exemplo, como parte da página inicial aqui, eu gostaria de adicionar algum tipo de animação. As animações são consideradas uma adição muito poderosa a qualquer site, certo? Que tal eu gostaria de ter o título principal aqui. Algo está sempre fervendo nas canecas. Vamos adicionar algum tipo de animação dinâmica na qual teremos a palavra fervendo Digamos que passe a cozinhar, ferver e preparar cerveja. Dessa forma, é algo mais interativo. Então, vou dizer a Claude que quero adicionar uma animação dinâmica ao título E então eu tenho duas opções, a propósito. Ou eu copio e colo como está e coloco entre aspas, Claude entenderá ou uma das minhas opções alternativas favoritas é simplesmente fazer uma captura de tela deste site ou do seu próprio site Se você estiver editando seu próprio site, basta fazer uma captura de tela, arrastá-la e soltá-la diretamente como parte da interface e adicionar o comando Isso é muito poderoso. E uma dica profissional adicional, você tem a opção arrastar a captura de tela para dizer ao Cloud, me dê o código, o arquivo HTML, que está sendo executado por trás da captura Dessa forma, se você quiser pegar um trecho colocá-lo em seu site, por exemplo, você tem a opção de fazer isso É uma dica muito poderosa para se ter em mente. Então, eu quero adicionar uma animação dinâmica ao título. Algo está sempre fervendo nas canecas, tal forma que a fervura Cozinhar vira cerveja, por exemplo. E vamos levar isso um nível adiante. Vou contar para Claude Mostre-me as diferentes opções de animação de forma interativa. Adicione essa palavra sempre quando estiver lidando com Claude. Se você quiser ver o resultado a seguir, que é a saída diretamente no chat aqui , em comparação com o resultado simplesmente sendo refletido na saída. Depois de adicionar a palavra de forma interativa, Claude entenderá que preciso mostrar os resultados aqui E caso a opção de interatividade não esteja funcionando para você, significa que você precisa acessar as configurações e ativar a interatividade Essa é uma dica muito poderosa que muitos não têm ideia de que existe, e eu a estou ensinando para ajudá-lo a levar sua integração de Claude a um nível totalmente novo Mostre-me as diferentes opções de animação de forma interativa, que eu possa confirmar a quero, caso você não tenha ideia do tipo de animação que gostaria de ter Essa é uma tática profissional muito poderosa para o desenvolvimento web de front-end Você pode usá-lo, em primeiro lugar, para personalizar certos elementos, adicionar animações a determinados elementos E o mais importante, se você tem uma certa animação em mente, sinta-se à vontade para injetá-la como parte do baile No entanto, se você não tem ideia de que tipo de animação precisa ou quais são as diferentes opções que você tem? Talvez você queira se inspirar para seu design ou ver quais são as melhores opções que você tem como parte das opções de animações Em geral, se você não está familiarizado com isso, todo o objetivo é que você, como alguém que não tem ideia de como codificar, como utilizar qualquer tipo de código, seja capaz de conduzir o desenvolvimento web de front-end sem a necessidade de nada Então, simplesmente, essa tática ajudará você a se inspirar, ver todas as opções sem realmente quebrar o site Se você fez desenvolvimento web de front-end para seu próprio projeto, por exemplo, deve ter notado que, se tentar editar algo, por exemplo, aqui, poderá interromper a navegação Você pode quebrar a configuração, pode quebrar o tema e, em seguida, boa sorte em passar horas tentando corrigir qualquer edição que tenha feito. Portanto, essa tática, a solicitação a seguir ajudará você a manter tudo sob o ambiente de bate-papo na nuvem, interatividade aqui Você está bem com isso, confirma e pode migrá-lo diretamente pela interface E o mais importante, a nuvem, por padrão, ao executar o comando, dê uma olhada nas etapas que está sendo executada. Está criando as animações. Está criando as opções. No entanto, depois de fazer uma seleção, ela corrigirá tudo como parte do seu site para garantir que nada quebre E essa é uma das integrações poderosas de Claude porque a nuvem é muito poderosa para Portanto, ele tem a capacidade de executar códigos rapidamente, depurar os códigos e garantir que tudo esteja funcionando bem Agora vamos dar uma olhada na saída. Veja como isso é poderoso. Essa é uma tática profissional muito poderosa que economizará muito tempo Vamos dar uma olhada nas saídas. Algo está sempre se formando. Aqui vamos nós. Canecas fervendo, excelente slide de odômetro. OK. Então, algo está sempre fervendo canecas ou cozinhando, três Em seguida, temos crossfade plus scale, depois blur focus, algo é sempre uma caneca, aumento de vapor na marca vapor Excelente. Cada carta é pré-visualizada com o estilo real do herói Excelente. Fundo escuro. Então, está pegando os elementos exatamente como estão. Como seria, e você pode ver as animações aqui Então, vamos escolher um para fins simples de demonstração. Que tal irmos para o Steam Rise aqui? Vou clicar em usar isso e dar uma olhada na saída. O Simply Cloud confirmará o requisito de design , o requisito de animação e, em seguida, executará o código para atualizar esse segmento específico. Então, todo o objetivo desta palestra, em primeiro lugar, é aprender essa nova tática, nova dica, mas, ao mesmo tempo, entender que você não está limitado apenas a essa edição Não. Você pode usá-lo para animar o texto aqui. Podemos usá-lo para animar certos botões, por exemplo, animar certos elementos Assim, você pode se inspirar para aprender essa tática e aplicá-la à sua própria situação, ajudando você a abrir muitas portas como parte de seu desenvolvimento web de front-end E a tática que estou ensinando agora, a interatividade, muitas vezes é esquecida até mesmo por usuários profissionais da nuvem É uma tática muito poderosa e específica, lembre-se de que você precisa acessar as configurações e habilitá-la E então, no prompt aqui, mencione a palavra interativamente É muito importante porque isso fará com que Cloud, antes de migrar qualquer coisa para cá, eu gostaria que você me mostrasse os resultados corretamente na minha frente, como parte da interface E depois que eu fizer uma seleção, você a migrará e, por padrão, o Cloud implementará a saída do design e seguida, garantirá que está criando o arquivo, executando testes de que nada está quebrando Tudo está perfeitamente funcional. Então, sinta-se à vontade, a propósito. Simplesmente, se você estiver trabalhando em seu próprio site ou em seu próprio design, reserve um momento e tente se inspirar para criar ou personalizar seu próprio site. Ou se você estiver criando um site do zero. Se você está tentando personalizar seu próprio site, você pode realmente dar um passo mais avançado. Você pode usar seu design atual. Você pode fazer uma captura de tela, por exemplo, do seu site e adicioná-la a Claude e fazer que Claude a crie para você e personalize para você. Depois, peça a Claude que obtenha seu arquivo HTML e, em seguida, você poderá copiar esse arquivo HTML e colá-lo novamente no editor do site Isso é algo para os desenvolvedores web front-end que se sentem confortáveis com Como mencionei, a prática atual, a palestra atual, as aulas atuais são personalizadas para alguém que não tem ideia de como codificar, mas, ao mesmo tempo, se você quiser experimentar a codificação, poderá fazê-lo de uma forma muito simplificada e Portanto, isso é muito importante para qualquer pessoa que queira trabalhar em seu site, criar um novo site, seja para seu próprio projeto pessoal, para seu próprio negócio, para seu próprio cliente. Essas táticas que estou ensinando ajudarão você a economizar muito tempo e esforço. Dê uma olhada no Apu Bado, como você pode ver, Claude, verifique se tudo está funcionando E quanto mais edições fazemos, o que você notaria com base na configuração que fizemos? Claude está, na verdade, empacotando o site novamente, incluindo o arquivo HTML e o pacote completo do site, incluindo todos os resultados mais recentes Isso é muito importante porque como parte da configuração, como mencionei, você gostaria de sempre voltar ao que está fazendo, certo? Você não precisa construir tudo do zero. E seguindo essas táticas, digamos, daqui a um mês, você pode simplesmente voltar ao seu projeto e dar uma olhada na edição mais recente, realizar algumas edições, ajustar a saída, exportá-la e usá-la novamente Dê uma olhada no aplicativo aqui. E aqui vamos nós. Adicionamos uma bela animação especificamente com base em nossa preferência, sem quebrar nada do site real, o que é muito importante E digamos que eu gostaria de mudar para um design diferente, certo? Então, eu simplesmente subia, daria uma olhada no feedback aqui. Então, digamos que eu mudei de ideia. Eu vou usar esse design aqui. Clique em Usar este design. Aqui vamos nós. Tenha cuidado antes de executar esse prompt. conteúdo malicioso de uma conversa pode induzir a nuvem a tentar ações prejudiciais Bem, essa é uma entrada automática que simplesmente aparece por padrão se você estiver tentando corrigir algo que já gerou . Isso acontece às vezes. Isso está perfeitamente bem. Não é um problema. Então, vamos mencionar o uso do slide do odômetro, animação para a palavra principal do herói Em vez disso, basta adicionar a palavra e executaremos o código novamente. Então, isso mostrará que tenho a opção de fazer uma seleção, atualizar o arquivo. E então, ao dar uma olhada na saída aqui, notei que, bem, ela parece boa, com base na marca. No entanto, gostaria de ver se as diferentes animações se encaixam melhor com base na minha preferência. E se eu fizesse isso manualmente sozinho, eu poderia quebrar o arquivo. Talvez eu tenha que passar muito tempo tentando ver isso antes e depois da comparação, e não tenho nenhuma referência a que me referir caso algo quebre, por exemplo. Muitos de nós que tentamos fazer isso manualmente enfrentamos esses problemas. Então, se você notar aqui, Claude executará o prompt básico novamente. Ele corrigirá a animação, atualizará o arquivo inteiro sem a necessidade de qualquer intervenção. Simplesmente, lembre-se de que você tem a opção e a capacidade de continuar executando em segundo plano. Se você estiver fazendo outra tarefa, basta adicionar o prompt, deixar Claude fazer a decodificação e a edição E uma vez feito isso, você pode voltar a ele para dar uma olhada na saída E aqui vamos nós. Dê uma olhada nisso. Demorou alguns segundos para Claude simplesmente consertar tudo. E, como você pode ver, esta é a versão mais recente. Aqui vamos nós. Então, pudemos simplesmente mudar para essa animação atual, que é o slide do odômetro Então, com alguns cliques, podemos mudar toda a estrutura de codificação do site para incorporar a animação sem a necessidade de qualquer codificação E essa tática se aplica a qualquer segmento do seu site que você esteja tentando criar, se quiser animar Digamos que eu gostaria de animar esta carta aqui. Eu gostaria de animar esse texto aqui. Sinta-se à vontade para se inspirar para ajudá-lo a levar seu aplicativo a um nível totalmente novo. 14. Como adicionar gráficos para o site de várias páginas: E bem-vindo de volta. Portanto, criamos com sucesso as animações como parte de nossos requisitos, e isso é algo que podemos mapear em diferentes partes do site Agora, nesta palestra atual, vou mostrar como podemos adicionar alguns gráficos , digamos que você queira adicionar alguns gráficos aqui ou em uma parte diferente do site, aqui, por exemplo, ou em uma seção diferente , céu é o limite. Você pode se inspirar para se candidatar à sua própria situação. Agora, deixe-me mostrar alguns truques em termos de adicionar gráficos ao seu site. Vou dizer a Claude que gostaria de adicionar alguns gráficos animados à seção principal do herói E a seção de heróis, é basicamente o que chamamos de seção de heróis aqui, certo? Ao lado do botão para reservar uma mesa. E, a propósito, você não precisa ler a descrição completa . Como mencionei novamente, faça uma captura de tela da localização exata aqui, por exemplo, e depois etiquete-a em um pedaço de papel, em um guardanapo, em qualquer software que você quiser Na verdade, você pode escrever as edições que gostaria de fazer e simplesmente fazer aquela captura de tela, pegar aquele pedaço de papel, pegar aquele guardanapo, o que quer que esteja fazendo as edições, e depois mapear Dite, arraste e solte aqui, mas estou mostrando a abordagem básica mais simples por meio de uma interação baseada em texto. Então, estou dizendo a Claude que gostaria de adicionar um gráfico aqui ao lado para reservar uma mesa E eu gostaria de ter algumas opções. Então, vou pedir a Claude que adicione alguns gráficos interativos. Aqui vamos nós. Só para ter certeza de que Claude entende, eu gostaria de vê-los primeiro antes de migrá-los Aqui na interface, vamos lá. É assim que você eleva seus prompts, que são animados para a seção principal do herói ao lado do botão para reservar uma mesa Além disso, poderíamos torná-lo mais específico para ser adicionado. Aqui vamos nós. Portanto, os dois prompts fornecerão resultados No entanto, se eu quiser que seja bem específico, confirmo a interatividade aqui, posso ver os gráficos Eu gostaria de dar uma olhada em algumas opções antes de migrá-las. Então, Claude analisará o tema, o contexto, a construção que criamos até o estágio atual e sugerirá alguns gráficos importantes ou úteis que se alguns gráficos importantes ou úteis alinham ao caso hipotético com o qual estamos lidando, certo Adicionamos um projeto. É uma abordagem baseada no contexto. Temos arquivos, temos elementos a serem adicionados. Então, Claude foi treinado bem o suficiente agora para ser capaz dizer exatamente o que precisávamos fazer e sugerir alguns elementos importantes Dê uma olhada nesses gráficos animados com tema de padaria , que são muito poderosos porque nos dizem que Claude está na mesma página que nós sobre o que estamos Aqui vamos nós. Dê uma olhada nesses. Mesa aberta agora. um indicador ativo. Isso é muito bom. Temos uma xícara, uma caneca. Recebemos um novo diário. Temos que reservar uma mesa. Dê uma olhada nessas adições poderosas e poderosas como parte dos gráficos Então, com base na minha preferência, digamos que, se vamos reservar uma mesa, eu gostaria de adicionar esse recurso aqui. Então, vou dizer a Claude, vá em frente, adicione esse recurso No crachá de status aberto agora, pulsante , ao lado do botão de reserva da mesa Portanto, é uma animação muito boa e, caso eu queira, é um gráfico muito bom, que é animado. Se eu quiser testar outra coisa sem quebrar o site real, o que normalmente acontece manualmente, eu simplesmente voltaria a clicar nele, usar isso e dizer a Claude que use isso em vez disso Ou eu poderia simplesmente dizer a Claude, bem, me mostre mais opções se eu quiser ter opções adicionais para encontrar a mais adequada para minha inscrição Mas esses são gráficos muito bons que você normalmente precisa fazer sozinho se estiver escrevendo o código para realmente integrá-los como parte do seu site. Então, no momento, a Cloud está corrigindo o código, o HTML, o CSS, tudo deve estar para integrar esse gráfico para elevar nosso conjunto de habilidades de desenvolvimento web de front-end e levá-lo a um Como você pode ver aqui, Claude está simplesmente executando os comandos, economizando tempo, economizando esforço, e você pode ver qual estágio da codificação está passando Como mencionei, os aplicativos que estamos acompanhando não precisam que você saiba codificar nada. Basta seguir as táticas que estou ensinando e você poderá realizar o trabalho como desenvolvedor web de front-end profissional com muitas táticas e habilidades disponíveis para permitir que você se destaque quando se trata de desenvolvimento web front-end Agora, vamos dar uma olhada na saída e vamos lá. As mesas estão abertas agora. Veja como isso é poderoso. Ele complementa o design de uma forma cinza. Sobre, vamos adicionar outro gráfico para elevar ainda mais o design Vou contar para Claude. Para reservar uma mesa, vou colocá-la ao lado, por exemplo, ou dentro do botão para ver nosso menu. Então eu vou contar para Claude. Vamos usar isso. Aqui vamos nós. No entanto, vou ser específico com minha solicitação. Adicione a animação do ícone da caneca fumegante, não ao lado do botão da mesa de reserva Não, mas vou corrigi-lo dentro do botão Exibir nosso menu. Isso faz parte da sua jornada criativa, certo? Ao fazer o desenvolvimento web de front-end, espera-se que você seja criativo no processo E estou mostrando a vocês as táticas, da mesma forma que eu as usaria normalmente, como vou lidar com a interação com Claude interação com Claude Achei isso muito útil. Então eu percebi, bem, eu gostei desse gráfico. Não quero simplesmente ignorá-la, e ela se encaixa perfeitamente, não ao lado da mesa de reserva, mas faz parte do menu, certo? Isso é algo que você faria normalmente manualmente. Ou se você estiver trabalhando como parte de uma empresa, por exemplo, você tem uma reunião para discutir o layout, a apresentação, e podemos integrar tudo isso da maneira mais rápida e eficaz possível por meio das táticas que estou ensinando a você. Agora, com base nas minhas expectativas, vamos fazer com que Claude coloque essa caneca dentro do botão que é ver nosso menu, e vamos lá Veja o quão poderoso é o design. Totalmente dinâmico, totalmente profissional e de alto nível, de acordo com nossos requisitos Então, neste estágio atual, você aprendeu como adicionar gráficos como parte do seu design, e isso funciona em qualquer nível qualquer página ou em qualquer estágio do seu site real, certo? Simplesmente você pode navegar até a página de contato, página sobre nós. Galeria, seja ela qual for, e você pode aplicar essas táticas para ajudá-lo a integrar gráficos como parte do seu design. E, como mencionei, recebemos a confirmação de Claude de que o site está pronto e o design foi finalizado, onde adicionamos os gráficos das mesas abertas até agora e adicionamos uma caneca animada para aprimorar ainda mais a presença visual do 15. Vasculhamento de fontes em todo o site: Bem vindo de volta. Agora, digamos que eu gostaria de alterar e alterar as fontes de todo o site. Digamos que eu esteja passando pelo processo de design e percebi que gostaria de ter fontes diferentes com base nos meus requisitos. Agora, mesmo que a fonte pareça perfeitamente alinhada com a marca, eu gostaria de testar fontes diferentes para ver qual delas reflete melhor a essência do projeto atual, seja para fins de marketing, para sua própria criação de conteúdo, e a lista continua Então eu vou até Claude. Eu gostaria de testar fontes diferentes para todo o site. Exiba amostras interativas no bate-papo aqui para que eu possa confirmar a varredura completa da fonte do site Então, o que esse prompt faria? Em primeiro lugar, dizemos a Claude qual é meu objetivo como parte de uma sólida tática de engenharia rápida E então, uma vez que você adiciona a palavra interatividade, sempre em mente que você coloca a palavra interativo, isso dirá a Claude: Você sabe Exiba os resultados aqui primeiro. É uma tática profissional avançada muito poderosa. Para ajudá-lo a tirar o suco de Claude. No chat, aqui é possível confirmar a varredura completa da fonte E eu mencionei a varredura de fontes completa do site porque isso dirá a Claude qual é o objetivo final Depois que eu confirmar tudo, você atualizará tudo como parte do site. O site completo será completamente editado e atualizado, em vez de simplesmente solicitar que eu faça isso manualmente. Dê uma olhada nisso. Dê uma olhada na saída. Aqui vamos nós. Temos os rótulos da fonte, a atual é a fonte atual. Então, temos as diferentes opções. Aqui vamos nós. A propósito, você pode ver o nome da fonte. Se você é profissional de marketing, especialista em branding, é especialista em branding, consegue entender os nomes reais das fontes, o par de fontes e, a propósito, Claude entenderá quais são as fontes que melhor combinam equipe atual com a qual estamos trabalhando Cada cartão aplica o emparelhamento ao conteúdo real do seu site. Veja como isso é poderoso. Consigo ver as fontes exatas que eu poderia usar, e Claude entende que essas fontes são combinadas e o que elas indicam Assim, você pode navegar por qualquer um deles corretamente. E então você pode fazer uma seleção. Em seguida, tocaremos em usar isso ou manter isso para ficar parado e eu aplicarei de lado Então, vou escolher qualquer fonte que se alinhe com minha preferência Vamos escolher um deles para garantir que tudo esteja bem alinhado Com base na marca atual, acho que essa é muito boa. Então, eu vou usar o que está aqui. Aqui vamos nós. Essa. Ao clicar em US Does, mude as fontes do site para Lib e depois Nunito Então, eu vou ter essa combinação Liber e Nonito como uma E esse é exatamente o design de um único painel de controle que compensa. Eu só preciso mudar. Aqui vamos nós. Um elemento e o Cloud são capazes de fazer com que todo o site seja varrido Portanto, se você aplicar as táticas até o estágio atual , em qualquer edição, seja no momento atual ou no futuro, sempre que voltar ao seu projeto paralelo em andamento, poderá simplesmente entrar no projeto e realizar uma edição em alguns minutos, se não segundos, em comparação com passar por todo o processo do zero Portanto, no início , você pode levar algum tempo para chegar ao estágio atual. No entanto, quando seu projeto estiver em execução, qualquer edição adicional estará a apenas alguns segundos de uma saída finalizada Agora, o Cloud está simplesmente examinando todas as fontes do site e trocando todos os códigos necessários sob o capô de Claude para alterar o design e a exibição da fonte do E você pode utilizar qualquer fonte que tenha em mente. A propósito, você não precisa simplesmente depender das sugestões de Claude Agora, se você tiver suas próprias fontes ou estiver usando fontes específicas como parte do seu site atual, poderá simplesmente adicioná-las ao prompt e Claude poderá mapeá-las diretamente para a saída Claude está executando o comando aqui, e podemos ver que ele atualizou tudo com sucesso de forma bastante sistemática Aguardamos a confirmação e vamos lá. Recebemos a última edição do nosso site e, como você pode ver, as fontes foram atualizadas. Isso é muito profissional. Isso é muito elegante, e Claude conseguiu simplesmente mapear todos esses resultados com bastante facilidade, certo E somos capazes de ver a clara distinção entre o antes e o depois. Na seção principal do herói aqui, podemos identificar diretamente que a fonte foi completamente alterada E simplesmente, eu poderia pedir a Claude que confirmasse todo o site mudou de fonte Simplificando. É um prompt muito básico. O site mudou sua fonte completa. Portanto, isso confirmará que Claude não perdeu nada como parte de uma verificação de confirmação Portanto, confirme se o site inteiro mudou sua fonte. É um aviso muito básico, muito direto. Dessa forma, Claude Claude dirá exatamente o que estamos procurando No entanto, se você notar aqui, como parte da verificação, sempre faça isso, aliás. Quando você está executando algo como parte de qualquer ferramenta de IA, incluindo Claude, sempre confirme o resultado final porque, no final do dia, adivinhe Uma ferramenta de IA comete erros ao longo do caminho. Então, depois de adicionar esse aviso extra de precaução, confirme se o site inteiro mudou suas fontes, dê uma olhada nisso Encontrei uma pequena ponta solta para o arquivo real Com base nas fontes antigas, encontrei um comentário em algum lugar. É puramente descritivo. Deixe-me verificar a pré-visualização para depois verificar o estilo computado Portanto, será necessária uma medida adicional de precaução caso falte algo aqui ou ali como parte disso. Se dermos uma olhada nisso, confirmamos que o site inteiro agora está na mesma fonte que eu selecionei Veja como o modelo de IA foi verificado, não apenas o globo ocular. Ótimo. Eu te mostrei as etapas para a confirmação. Isso lhe dá outra camada de confiança na saída, em vez de simplesmente dar uma olhada em cada linha de fonte sozinha, você pode aplicar a tática e fazer com que o modelo de IA confirme exatamente a saída em caso de erros, e sua tarefa seria simplesmente verificar e confirmar de uma forma muito sistemática 16. Adicionando imagens: E bem-vindo de volta. Agora, vamos levar nossas habilidades de desenvolvimento web e habilidades desenvolvimento web front-end a um patamar totalmente novo por meio do uso de tecidos Normalmente, quando você está lidando com qualquer site, especialmente do ponto de vista comercial, do ponto de vista criativo, precisamos adicionar algum tipo de arquivo a ele, certo? De vez em quando. Por exemplo, se você se lembra, como parte de nossa construção, criamos uma galeria Então, isso é algo típico de qualquer pessoa criativa. Você está trabalhando em seu portfólio, apresentando sua empresa ou trabalhando como parte de uma Você gostaria de mostrar seus produtos. Esta palestra atual ajudará você a se inspirar para mostrar como é fácil adicionar sua própria opinião exclusiva e atualizar o site com alguns cliques Como parte da construção do projeto, adicionamos inicialmente algumas entradas contextuais como parte da No entanto, se você notar, por exemplo, que temos alguns espaços reservados aqui para futuras adições como parte da construção do site Eu poderia adicionar uma foto, por exemplo, uma mesa de jantar ou sala de jantar, adicionar outra foto sugerida por Claude, croissants frescos, adicionar uma foto sobre a barra, marcar massa azeda No balcão da inauguração, frequentadores regulares da comunidade Isso é muito poderoso, e todos eles se alinham perfeitamente com uma padaria e um café, certo Assim, você pode ver todos esses elementos normalmente em qualquer café ou padaria, onde você tem croissants frescos, você tem uma Você toma um café no bar. Você tem um balcão na abertura. Portanto, é muito, muito realista no sentido de que estamos obtendo o resultado. No entanto, se eu quiser adicionar alguma contribuição da minha parte, certo, como parte da adição que estou adicionando a Claude, vou, por exemplo, digamos que gostaria de adicionar algumas imagens com base nessa padaria hipotética Então, neste estágio atual, vou dizer a Claude que adicione as seguintes imagens à galeria Simplificando, e sinta-se à vontade para aplicar isso à sua situação única. Vou adicionar, por exemplo, uma imagem de uma xícara de café, imagem de pão, imagem adicional ou outra imagem de pão, e você pode adicionar qualquer elemento contextual com o qual gostaria de atualizar seu site Pode ser sua própria obra de arte exclusiva, projetos da sua empresa, a inspiração e as ideias são infinitas quando se trata disso Então, vou até Claude, adicionar as seguintes imagens à galeria e garantir que elas estejam organizadas forma profissional e remova quaisquer espaços reservados vazios Digamos que eu esteja satisfeito com essas imagens. Não preciso ter espaços reservados adicionais. Simplesmente, direi a Claude: vá em frente, carregue essas imagens como parte da minha galeria e quaisquer espaços reservados em branco neste momento, não vejo necessidade A propósito, se você notou, Claude alterou o layout e a personalização com base na imagem real, nos tamanhos, nas fontes estrutura para adicionar o apelo do desenvolvimento web de front-end ao resultado real ou à saída real que Você pode ver aqui, verificar as imagens enviadas, verificar qual arquivo carregado corresponde aos slots reais que temos ou aos espaços reservados, e Claude começará a compilar as imagens como parte da galeria e precisará remover quaisquer Lembre-se de que, como estamos construindo o site, você poderá ver alguns comentários de Claude No entanto, uma vez finalizado o design, você pode simplesmente, Claude, remover todas essas observações Portanto, os blocos marcados em Foto são espaços reservados. Então eu estou dizendo a Claude, você sabe o que? Não quero mais ter esses espaços reservados. Estou quase terminando minha galeria, então não há necessidade de ter essas instruções ou ter esses espaços reservados no lugar Muito importante se você estiver trabalhando como parte de uma equipe, certo? Se você tem uma equipe de designers desenvolvedores web front-end, pode deixar essas observações para eles, adicionar uma foto como parte dos espaços reservados, colocar suas próprias imagens e depois trocá-las como parte aqui. Consulte o Leia-me para colocar suas próprias imagens obter instruções Consulte o Leia-me Isso é muito poderoso como parte de agências de design ou equipes maiores, nas quais alguém continua de onde você parou Portanto, sempre faça com que, como possamos ver aqui, Claude está realmente construindo a galeria finalizada, e a mesma tática pode funcionar para qualquer setor em que você esteja, esteja você trabalhando em uma determinada indústria de arte, construção, desenvolvimento, seja o que for, você pode usar essa tática de galeria para Claude está realmente construindo a galeria finalizada, e a mesma tática pode funcionar para qualquer setor em que você esteja, esteja você trabalhando em uma determinada indústria de arte, construção, desenvolvimento, seja o que for, você pode usar essa tática de galeria para adicionar e mostrar seu trabalho de uma forma muito sistemática, e você sempre pode voltar a ele e depois atualizar Na galeria real, adicionando entradas, da mesma forma que estou compartilhando com você agora, você pode fazer com que Claude pegue essas entradas e as organize de forma sistemática E você também tem a opção de adicionar animações a ele. Em vez de simplesmente passar o mouse sobre as imagens, posso dizer a Claude que, ao clicar em uma imagem, você pode transformá-la em um flip card e escrever uma nota sobre ela com base nas táticas que abordamos até o estágio atual, que o ajudará a se inspirar e, ao mesmo tempo, equipá-lo com as habilidades necessárias para superar seu próprio front-end front-end posso dizer a Claude que, ao clicar em uma imagem, você pode transformá-la em um flip card e escrever uma nota sobre ela com base nas táticas que abordamos até o estágio atual, o que o ajudará a se inspirar e, ao mesmo tempo, equipá-lo com as habilidades necessárias para superar seu próprio front-end desenvolvimento web. Como mencionei, estou ensinando essas táticas, as habilidades, e você pode se inspirar para aplicá-las à sua própria situação, seja em um nível individual específico ou em uma combinação delas. Você pode adicionar gráficos aqui. Você pode adicionar animações. Você pode adicionar imagens e depois combinar tudo. Então, Claude aqui, como você pode ver, a saída está piscando, o que indica que os resultados estão quase concluídos Como você pode ver, a propósito, se fizéssemos isso manualmente, dê uma olhada na quantidade de esforço que precisamos investir para fazer isso, redimensionando, ajustando, empacotando, molduras, listas Portanto, se você fez este manual, essa não é uma tarefa fácil. Mesmo que pareça fácil, não é. Vou levar muito tempo para você fazer isso. Então Claude está chegando ao estágio finalizado, que é validar a prévia, como mencionei Você pode manter isso funcionando em segundo plano se estiver trabalhando em No entanto, estamos quase terminando o resultado, e Claude está simplesmente verificando cada item está perfeitamente alinhado, que é uma ótima saída e uma ótima etapa como parte do desenvolvimento web de front-end, porque normalmente, quando você adiciona imagens ou elementos externos, você tende a quebrar seu tema ou seu layout E muitos de nós experimentamos isso. Francamente, experimentei isso ao criar manualmente um site Que se você quiser adicionar uma imagem, de repente você quebra o layout e tenta descobrir o que aconteceu ou as dimensões, elas parecem bastante sólidas no desktop. No entanto, eles quebram no celular. Então, tudo isso ou nos bastidores, nos bastidores , verificações de erros e confirmações, Claude as examina para eliminar todo o incômodo de tentar consertar as coisas Agora, vamos examinar a saída aqui. Como podemos ver, Claude está fazendo um trabalho muito bom adicionando as imagens que eu adicionei para serem integradas como parte da minha galeria No entanto, como mencionei, não tomamos o resultado diretamente antes de recebermos a confirmação de que tudo está definido, então começamos a realmente verificar a saída de Claude, que é muito importante e muito necessário para evitar lidar com resultados incompletos No entanto, à primeira vista, podemos ver que adicionamos as imagens aqui, e Claude as organizou e estruturou para garantir que tudo pareça elegante e profissional E adivinha? Todos os espaços reservados foram removidos As instruções sobre como usar os espaços reservados foram removidas Esta é uma etapa avançada à medida que você finaliza seu design Você está moldando todo o site. Um comentário está sendo removido. E como você pode ver aqui, temos uma galeria muito boa, incluindo algumas imagens relacionadas ao contexto e ao caso hipotético com o qual estamos lidando, que é um café e uma padaria E então podemos navegar até a tela inicial. Tudo está bem alinhado. Adicionamos alguns gráficos. Adicionamos alguma integração para a navegação. Temos algum tipo de item de menu hipotético. Tudo parece bastante organizado e sistemático. E qualquer elemento, aliás, com base nas táticas que estou ensinando, você pode atualizá-lo de acordo com sua preferência. E este é um site muito poderoso e elegante, no qual você pode se inspirar Criamos um site de várias páginas. Normalmente, isso levará algumas semanas de trabalho se você estiver construindo isso do zero, certificando-se de que está codificando e tentando colocar tudo em ordem e funcionando, certo? Sem falar nos erros, nas interrupções que podem ocorrer quando você tenta atualizar as coisas aqui e ali. Não, seguindo as táticas agora, podemos manter tudo compilado como um único projeto ao qual sempre podemos consultar. Essa é uma das lições mais importantes que você precisa entender como parte do curso atual. Não é simplesmente uma interação de bate-papo que você está lidando com Claude agora Não, na verdade, você está passando por um projeto completo criado com o Cloud. É muito importante ter isso em mente, porque se você estiver fazendo isso profissionalmente, talvez seja necessário consultar seu design anterior realizar algum tipo de edição Você precisa fazer algum tipo de alteração, detectar um erro em algum lugar ou, se estiver fazendo isso profissionalmente como parte de sua empresa ou como parte de um estúdio de design, por exemplo, seu cliente menciona que precisamos de uma atualização Você não precisa passar por isso do zero todas as vezes. Não, você tem a opção de simplesmente entrar no projeto e personalizar tudo o que gostaria de personalizar com base nas táticas que você aprendeu até o estágio atual, que é muito poderoso e oferece ótimo complemento para suas habilidades de desenvolvimento web front-end Podemos ver aqui que Claude está simplesmente finalizando toda a produção No entanto, à primeira vista, você pode ver que Claude entendeu o objetivo final que estamos tentando Colocamos as imagens no lugar certo e é apenas uma questão de alguns segundos até que Claude realmente finalize os resultados e confirme que tudo está Então, podemos ver exatamente para onde Claude está indo. Então, isso completa o resultado real da lição atual, e você é completamente capaz de simplesmente aplicar essas táticas Colocamos as imagens no lugar certo, os espaços reservados sumiram, minha galeria está praticamente intacta, e simplesmente tenho a opção, no futuro, de continuar adicionando imagens, removendo imagens de acordo com minha preferência Assim, você pode usar as táticas, essas táticas para ajudá-lo a integrar elementos externos como parte do seu site, esteja você adicionando um determinado projeto uma determinada imagem, um certo Yo ou uma determinada obra de arte com a qual está trabalhando Você não precisa simplesmente acessar o criador de sites real e continuar carregando-os um de cada vez. Não, você pode fazer isso com alguns cliques. E aqui vamos nós. Esta é a reconstrução final, e Claude está simplesmente confirmando que o site Embora tenha demorado alguns segundos a mais para finalizar o resultado, em comparação com, aliás, alguns dias de trabalho, porque o que está acontecendo sob o capô de Claude, se você notar, ele está fazendo muitas edições para confirmar, com base na estrutura que seguimos, que o design está pronto porque, no final de cada iteração, faz parte do a mais para finalizar o resultado, em comparação com, aliás, alguns dias de trabalho, porque o que está acontecendo sob o capô de Claude, se você notar, ele está fazendo muitas edições para confirmar, com base na estrutura que seguimos, que o design está pronto porque, no final de cada iteração, faz parte do sólido táticas de engenharia rápidas, você está recebendo o código do site atualizado e o pacote completo do site, o que é muito importante Então, todas essas adições nos bastidores para o código HTML, o CSS, o layout, a estrutura, o dimensionamento e muito mais que a Cloud está fazendo Portanto, neste estágio atual, podemos integrar imagens e elementos externos adicionais a serem incorporados ao nosso site por meio da nuvem. 17. Como mudar os temas de design de sites: E bem-vindo de volta. Você acha que terminamos? Claro que não. Vamos elevar seu desenvolvimento web de front-end habilidades de IA e levá-las a um nível totalmente novo Agora, nesta palestra atual, vou mostrar uma etapa muito poderosa, mas muitas vezes considerada uma etapa problemática no desenvolvimento web de front-end, que está mudando o que está Quando você está lidando com desenvolvimento web de front-end, normalmente, se eu mudasse o tema do site atual, muitas vezes, isso é algo que muitos desenvolvedores web de front-end evitarão , porque essa é uma receita para No entanto, vou mostrar a vocês as táticas agora. Como vamos ter Claude, vá em frente e altere o tema de todo o site uma forma muito estratégica Vou dizer a Claude que gostaria de mudar todo o tema do site Sugira diferentes opções de tema, incluindo cores e layouts forma interativa, para que eu escolha o adequado antes da migração e tenha certeza de que é muito importante manter uma cópia do site atual , criada para voltar. Então, o que isso faria? Em primeiro lugar, estou criando um backup por meio de Claude para meu site atual, caso eu queira extraí-lo novamente Essa é uma tática muito avançada qual muitos não estão familiarizados Estou utilizando Claude, mais um mecanismo de backup para mim. E eu estou dizendo a Claude, você sabe o que? Vou explorar vários temas do site. Vá em frente, mostre-me essas opções, mas, ao mesmo tempo, certifique-se de preservar o trabalho que fizemos. Dê uma olhada no resultado para que Claude passe pelo processo, pensando em apresentar diferentes opções interativas de sites para comparação Está construindo esse recurso interativo aqui. Em seguida, ele salvará o arquivo inteiro, em primeiro lugar, salvará o arquivo inteiro como backup e depois me mostrará esses temas. Então, vamos começar fazendo backup da versão atual para que você possa sempre reverter. Em seguida, reunirei opções de temas interativos para você comparar. Agora, normalmente, essa é uma tarefa bastante complexa. Se você pensar sobre isso do ponto de vista manual, é bastante exigente. Então, quando estamos lidando com um modelo de IA, tudo bem se ele demorar mais do que o normal, porque a tarefa exige mais do que o normal. Então, basicamente, Claude, com base na tarefa, ela pode variar em termos da duração da saída Pode levar alguns segundos, às vezes pode levar alguns minutos, que é perfeitamente normal, dependendo da construção e da tarefa. Vamos dar uma olhada nisso. Antes de tudo, faça backup, confirme e salve. Então, estamos prontos para tentar experimentar temas diferentes. Vamos criar uma comparação interativa de temas. Este é o atual aqui. OK. Então pegamos um diferente. Mínimo moderno. Eu gosto desse. Que tal esse aqui? Sofisticado e temperamental, pastel suave, contemporâneo ousado. Cada cartão pré-visualiza a mesma estrutura. No entanto, temos temas diferentes. Portanto, seu backup já está salvo. A atual padaria quente compõe todas as cinco páginas. Tudo está bem alinhado e fechado, pronto para começar. Então, digamos que, em primeiro lugar, eu possa dizer a Claude, bem, eu não gosto de nenhum deles. Vá em frente, sugira outras opções. No entanto, eu gosto desse tema atual aqui. Então eu vou dizer a Claude, vá em frente, use isso. Aqui vamos nós. Então, isso é muito importante porque isso dirá a Claude, sabe o que? Eu gosto desse tema. Vá em frente e reforme completamente o site inteiro. Se você fizer isso, aliás, manualmente, corre o risco de quebrar o site. Como eu fiz isso manualmente em várias ocasiões, passar de um tema para outro é suficiente para destruir todo o trabalho que você está tendo e boa sorte tentando encontrar os editores aqui e ali Então, estamos ignorando toda a opção. Escolhemos um tema muito bom, e simplesmente estou dizendo a Claude, vá em frente Altere toda a organização do site atual com base no tema que tenho em mente e sinta-se à vontade para incorporar elementos de marca, com base no tema que você tem Se estiver trabalhando em um determinado site, seu site atual, poderá adicionar suas próprias paletas de cores, suas próprias suas próprias Dessa forma, você pode fazer edições que imitam completamente seu site atual Vamos dar uma olhada no feedback de Claude. Vamos fazer isso corretamente. Primeiro, uma auditoria completa de todas as folhas de estilo de referência de cores, exatamente o que você precisa fazer manualmente. Claude está fazendo isso automaticamente. Então, ele está passando por todas essas edições para garantir que não perca A propósito, tudo será atualizado para refletir seu próprio tema exclusivo atualizado para refletir seu próprio tema exclusivo e personalizado. E depois de mudar o tema, você pode seguir as táticas que abordamos adicionando gráficos, animações e imagens. Depende totalmente de você. Portanto, essa é uma adição muito poderosa ter em mente para ajudá-lo a elevar suas habilidades de desenvolvimento web front-end na web porque tudo o que você normalmente precisaria fazer manualmente, estou lhe ensinando uma maneira de utilizar a IA para fazer isso em Então, se você não tem ideia de como codificar, tudo bem. Você é novato no desenvolvimento web de front-end. Isso está perfeitamente bem. Você está trabalhando como parte de uma empresa. Você está trabalhando em um projeto, está trabalhando em uma empresa. Seja qual for, as táticas que estou ensinando ajudarão você a elevar suas habilidades de criação de sites, especialmente as habilidades de desenvolvimento web de front-end, porque essa é a essência do que estamos fazendo como parte Então, como você pode ver aqui, Claude identificou todas as paletas de cores e está corrigindo-as ou substituindo-as pelas paletas de cores alternativas com base na minha preferência, tendo em mente Isso é simplesmente para fins de demonstração. Eu prefiro o tema atual, as cores se alinham perfeitamente com o negócio hipotético atual No entanto, para você entender as diferentes opções em termos da saída que está obtendo, porque você não está simplesmente confinado à saída que está recebendo de Claude, na verdade Você tem a opção de adicionar suas próprias preferências, alterá-las, ajustá-las até obter o resultado que prefere e se sinta confortável em ter Todo o propósito é que você obtenha o resultado, que reflita sua verdadeira visão da maneira mais sistemática possível. Agora, enquanto Claude está finalizando o resultado, vamos dar uma olhada na página inicial real, porque normalmente é onde você vê a maior variação em termos de E se eu quiser mudar uma imagem, digamos, a imagem de fundo do herói, eu poderia simplesmente dizer a Cloud: Sabe de uma coisa? Mude essa imagem. Eu poderia fazer o upload de algo se eu quiser. Ou, se eu tiver um gráfico em mente, posso desenhá-lo em um pedaço de papel Faça uma captura de tela do meu site atual e, em seguida, tenho a opção de fazer o upload e dizer ao Cloud, você sabe o que, adicione-o à versão atual também Portanto, essas são táticas muito poderosas que você pode integrar como parte de suas atividades. Agora, vamos examinar o estágio em que a nuvem está. Como você pode ver, é uma grande construção, definitivamente, porque estamos atualizando um tema inteiro, um tema inteiro. E é por isso que, no início da aula atual, eu disse que isso é algo que muitos desenvolvedores web de front-end ignoram quando estão tentando fazer, porque você não tem ideia se o tema pode prejudicar No entanto, estamos contornando todos esses problemas de forma estratégica Como podemos ver, estamos na fase final de validação e, francamente, gosto ainda mais do novo tema em comparação com o tema anterior Isso é muito elegante, muito profissional. Podemos ver que tudo está bem alinhado e temos o pacote finalizado aqui, que é a pasta zip pronta para uso E fique à vontade para fazer uma pausa a qualquer momento. Digamos que, se você desenvolvedor web de front-end profissional, para ver exatamente o que Claude está fazendo, para obter o resultado, algo que você precisa fazer de vez em quando para ter certeza de que está dando supervisão Isso é muito importante porque, no final das contas, você é o único responsável pela saída que está obtendo de qualquer ferramenta de IA. Agora, como você pode ver aqui, dê uma olhada no design, muito moderno, muito elegante Tudo foi atualizado de forma muito bonita. Deixe-me examinar os menus. A navegação está funcionando. E, normalmente, quando você está lidando com o tema, essa é a primeira coisa que pode falhar como parte do processo. Tudo parece bastante sistemático. Deixe-me dar uma olhada na galeria, por exemplo. Que tal isso? Aqui vamos nós. Excelente. Tudo está bem alinhado Temos bons recursos integrados. E, neste estágio atual, temos uma versão muito poderosa para nosso site e podemos simplesmente nos inspirar para atualizar as cores, os temas, adicionar gráficos e imagens quando se trata suas próprias habilidades de desenvolvimento web de front-end Se você seguiu até o estágio atual, com base no que eu lhe ensinei, você é capaz de levar todo o seu conjunto de habilidades a um nível totalmente novo. 18. Implantando o design de sites por meio de Claude: E bem-vindo de volta. Então, quando finalizarmos nosso site, é hora de implantá-lo e lançá-lo Isso é muito útil se você estiver tentando mostrar seu trabalho, se estiver trabalhando como parte de uma equipe ou tentando mostrar isso ao seu cliente, é muito útil lançá-lo diretamente Sim, você me ouviu bem. Você pode implantar o site do seu site, seu site diretamente na Internet, diretamente da nuvem. Como mencionei, atualmente estamos lidando com desenvolvimento web front-end Então, se você está fazendo isso como parte de seu trabalho criativo, está tentando finalizar o design do front-end antes realmente continuar trabalhando em Lembre-se sempre de que você tem a opção de iniciá-lo diretamente no Claude para ver como ele também funciona Então, como você faz isso? Basta navegar até o canto superior aqui. Clique no menu suspenso. Você tem a opção de fazer o download como um arquivo HTML. Além disso, você pode adicioná-lo ao projeto. Essa é uma das minhas preferências e táticas favoritas. Depois de concluir essa compilação, adicione-a ao projeto no qual você está trabalhando. Por quê? Porque isso treinará Claude para edições futuras Dessa forma, você não precisa começar do zero. Não, Claude tem um projeto completo que ele construiu com você para consultar em futuras adições Essa é uma tática muito poderosa que aumentará sua economia de tempo, economizará seu esforço, elevará seu conjunto de habilidades e o resultado toda vez que você usar o projeto repetidamente E então você tem o recurso, qual estou falando, que é publicar o site como um artefato Depois de clicar nele, você terá o URL real do site. E depois de clicar em publicar e copiar link por padrão, seu site estará ativo na Internet Você pode compartilhá-lo com seus colegas, compartilhá-lo se estiver exibindo seu próprio portfólio em seu site, por exemplo, se estiver adicionando-o como uma página extra em seu site ou se estiver tentando mostrar essa atividade como parte de seu cliente, os aplicativos são infinitos Vamos clicar aqui, publicar e copiar o link. Agora, levará alguns segundos para carregar. Tenho a opção de incorporar todo esse site em algum lugar. É muito útil se você estiver criando, por exemplo, uma pequena tela dentro do site ou se tiver uma página dedicada em seu próprio site atual e quiser adicioná-la como complemento Como mencionei, os aplicativos são infinitos. Tenho a opção de cancelar a publicação se quiser fazer algum tipo de trabalho adicional sobre isso Agora vamos dar uma olhada no resultado final e vamos lá. Este site agora está ativo na Internet. Veja como isso é poderoso. Temos a página Sobre nós. Aqui vamos nós. Nós temos o menu. Excelente. Tudo está aqui. Temos a galeria. Tudo está funcionando perfeitamente bem. Como você pode ver, é um site totalmente funcional que pudemos criar diretamente. E eu percebi que, depois de clicar em qualquer um desses ícones de navegação aqui, você recebe essa mensagem. Por quê? Porque estamos lançando isso na Internet com Claude Então, continuará nos lembrando, sabe o que? Você está prestes a deixar Claude para acessar isso. Então, isso é algo para se ter em mente, porque, como mencionei, estamos construindo isso como parte de Claude, certo? Então, quando você faz isso e navega para diferentes partes do site, já que ele está ativo na Internet, o que ele está fazendo é nos dizer: Sabe o que? Agora é externo. Não está mais em Claude. Portanto, tenha isso em mente se quiser navegar até este site. Bem, isso não muda nada. Francamente, falando, você ainda está recebendo um site funcional completo e totalmente implantado na Você tem a opção de compartilhar o link, copiar esse código e incorporá-lo ao seu site, e os aplicativos, como mencionei, são infinitos 19. Outras opções para implantação de sites.: Bem vindo de volta. Agora, vou mostrar outra opção muito poderosa para implantar e lançar seu site Se você se lembra, simplesmente lançamos nosso site como um artefato dentro de Claude Está totalmente ativo na Internet e, em seguida, podemos compartilhar o link e incorporar o código As aplicações, como mencionei, são infinitas. Digamos que, por exemplo, você esteja tentando obter este site e levá-lo para sua própria hospedagem atual ou esteja tentando levá-lo ao seu próprio criador de sites atual para implantá-lo lá. Então, como você faria isso? Este é o principal resultado da palestra atual. Vou mostrar como você simplesmente pede a Claude que prepare um pacote completo pronto para ser chamado , de forma que você simplesmente baixe e implante da maneira mais rápida possível, sem a necessidade Então eu vou contar para Claude. Gostaria que o site estivesse disponível como um pacote completo e pronto para uso, incluindo imagens, gráficos e recursos que criamos. Por quê? Porque você não quer que Claude, que é algo que pode acontecer, por exemplo, com as imagens na galeria ou com as fundo reais, as deixe para trás Isso pode lhe dar um espaço reservado se você for, digamos, um desenvolvedor web de front-end profissional, sabe programar e está bem Você pode simplesmente pegar o código, implantá-lo em seu site e em sua hospedagem na web. Ou seu criador de sites e, em seguida, você adiciona manualmente as imagens. Essa é uma opção. No entanto, eu não prefiro essa opção. Eu gostaria de ter uma versão completa na nuvem. Eu simplesmente pego a saída totalmente e, em seguida, a implanto totalmente sem nenhuma ação intermediária. Portanto, gostaria que o site estivesse disponível como um pacote completo e pronto para uso, incluindo todas as imagens, gráficos e recursos que criamos de forma que o arquivo esteja completo e nada que precise de mais ações. E certifique-se de que o arquivo seja compatível com criadores de sites externos e hospedagem Então, isso marcará Cloud. Você sabe o que? Compile tudo como um pacote completo e confirme se tudo o que criamos e adicionamos, incluindo imagens e gráficos na lista, continua, faz parte do arquivo pronto para uso E o mais importante, você precisa garantir que o arquivo que obteremos do Cloud seja compatível com criadores e hospedagem de sites externos, porque se você o estiver usando, faz parte da hospedagem atual do site ou do criador de sites atual Existem muitos construtores. Existem muitos provedores de hospedagem. No entanto, isso pode variar de aluno para aluno, de profissional para profissional, de aluno para aluno Precisamos ter certeza de que Claude seja capaz de nos dar o resultado, que é facilmente mapeável para qualquer situação com a qual você esteja lidando Então, ao adicionar esse prompt atual, qualquer compilação que você está tendo aqui, você está simplesmente contando a Claude como parte do aplicativo front-end de desenvolvimento web Obtenha o resultado completo como está, porque eu gostaria de pegar o site atual que construímos e implantá-lo como parte do meu provedor de hospedagem, meu criador de sites ou qualquer outro tipo de serviço que pudesse pegar seu código atual e implantá-lo como um site ativo. Há muitos deles por aí. A lista é extensa. A propósito, sinta-se à vontade para fazer sua própria pesquisa. Você pode identificar muitas dessas opções que são completamente acessíveis, onde você obtém o arquivo HTML completo que você criou. Literalmente, você arrasta e solta e obtém o URL do seu próprio site e pode adicionar seu próprio domínio exclusivo. Então, isso é algum tipo de atividade que você pode fazer sozinho, mas estou mostrando como chegar a esse ponto simplesmente tendo o arquivo pronto para uso totalmente disponível para download, você pode utilizá-lo de acordo com suas circunstâncias Se você vai aplicar isso à sua própria hospedagem na web, essa é parcialmente uma opção para o seu próprio criador de sites seu próprio criador de sites. Essa é outra opção. Você encontrará um desses serviços em que simplesmente arrasta e solta seu arquivo HTML, por exemplo, o arquivo que obtivemos aqui, que é mais do que suficiente. Deixe-me mostrar o arquivo que você pode usar. Digamos que esse arquivo atual, o código HTML, ou você pode simplesmente descompactar o arquivo, pegar o código HTML também e simplesmente implantar o site literalmente arrastando e soltando Você pega o código, arrasta e solta em qualquer desses serviços diretos de almoço, obtém seu próprio URL e seu site fica totalmente acessível on-line. No entanto, como mencionei, estamos lidando com o desenvolvimento web front-end do E há outros componentes que acompanham totalmente o desenvolvimento web, obviamente. front-end é um segmento, no entanto, você tem o back-end para outro E como parte do curso atual, estamos lidando apenas com o desenvolvimento web front-end Portanto, é muito importante ter isso em mente, porque as táticas estou ensinando podem ajudá-lo a aprimorar seu site atual, criar um site completo do zero, exportar todos os resultados para edição posterior, mas sempre tenha em mente que, ao lidar com essas saídas e os resultados do modelo de IA, você precisa ter certeza e os resultados do modelo de IA, de que o resultado está alinhado com sua própria situação única por meio da aplicação das táticas que estou lhe ensinando. Então, vamos preparar essa produção genuinamente. Vou resolver várias lacunas reais, compatibilidade de carregamento frontal com criadores de sites formulário de contato funcional sem a necessidade de configuração Como você pode ver aqui, por exemplo, um formulário de contatos típico, você pode criá-lo a partir do front-end, mas, obviamente, precisa conectá-lo a um banco de dados a partir do back-end Então, isso é algo que não faz parte do escopo sobre o qual estamos falando ou com o qual estamos lidando. Como mencionei, estamos nos concentrando apenas no desenvolvimento web de front-end Portanto, tenha isso em mente ao criar seu próprio aplicativo exclusivo. No entanto, Claude está bem ciente disso e está tentando minimizar quaisquer problemas de compatibilidade, quaisquer problemas que possam surgir à medida que você passa por essa etapa ou por essa integração, o que é muito importante ter em mente por meio do prompt atual Precisamos que o pacote para nosso web design front-end seja compatível, seja facilmente personalizável E então depende totalmente de você como você faria isso a partir daí, sua própria hospedagem, seu próprio serviço direto de almoço, sua própria conexão de back-end, seja o que for. Você pode pegar a saída e depois alterá-la com base em sua própria situação específica. E como podemos ver aqui, Claude está verificando tudo O código HTML, o arquivo CSS, os cabeçalhos, as imagens, a navegação, os gráficos, as fontes, tudo está basicamente pronto para usar, pronto para exportar, pronto para implantar o design de front-end do site Agora, isso é muito importante como parte de suas opções quando se trata de implantar seu site E, obviamente, isso varia de acordo com a natureza do site. Portanto, se você tem um site que não exige formulários ou integração de back-end. Você pode simplesmente iniciá-lo em qualquer lugar. No entanto, como mencionei, estou compartilhando com você as diferentes opções que você tem, incluindo outras adições avançadas Você pode utilizar a saída para facilitar esse processo. No entanto, com base na sua situação, se você não precisar de nenhum desses recursos adicionais, poderá lançar seu site diretamente, como mencionei na nuvem como um artefato, ou pode considerá-lo um arquivo de saída pronto para envio Você pode implantá-lo diretamente como parte do criador de sites, da hospedagem na web ou de qualquer um desses códigos HTML de código direto para serviços de sites ativos disponíveis no mercado. Você precisa de alguns minutos simplesmente pesquisando para poder identificar os que melhor se adequam à sua aplicação. No entanto, como parte do resultado da lição atual, estamos fornecendo o produto final, o resultado final, o resultado final, que é um site totalmente projetado. E o resultado e as lições que você aprendeu com ele para personalizar a saída com base em sua própria situação específica, com base em suas próprias circunstâncias únicas. Dessa forma, você obteve o conjunto de habilidades, a experiência, não simplesmente para ficar preso. Com base em seu próprio resultado. Não, você tem as ferramentas e o conhecimento, e tem as demonstrações para mostrar exatamente, passo a passo, como realizar o processo Agora, dito isso, Claude está finalizando tudo. Está percorrendo todas as páginas, como podemos ver. Está personalizando tudo e pode atingir um limite porque é muito exigente para Claude Basta clicar em Continuar. E se você encontrar créditos, simplesmente aguardará o horário de redefinição e poderá continuar sua inscrição. No entanto, não há necessidade disso neste estágio atual, e vamos lá. Nosso site está totalmente pronto. Eu tenho o código HTML que posso baixar e posso implantá-lo como parte do HTML para serviços de sites ativos. Sinta-se à vontade para explorar diferentes opções. Sinta-se à vontade para pesquisar opções diferentes, se elas estiverem de acordo com os requisitos Ou posso simplesmente clicar em Baixar completo no arquivo zip. Inclui tudo o que estou vendo e tudo o que construímos com a ATZ Posso usar isso como parte da minha hospedagem na web como meu site atual para edição posterior, ou posso simplesmente levá-lo a um criador de sites e carregá-lo diretamente. As aplicações são infinitas e você pode simplesmente ter esses resultados prontos para uso com base em suas próprias preferências. 20. Resumo: Então, o que você acha? Impressionante? Eu realmente espero que você tenha achado a aula bastante útil, ajudado você a se inspirar e até mesmo a aumentar seu conhecimento em pelo menos 1%. É um trabalho bem feito. Estou ansioso para receber seus comentários sobre a classe de cartas e garantir que você siga meu perfil para os últimos lançamentos e atualizações, e nos vemos na próxima aula.