Crie seu portfólio online sem programar

1. Introdução: Olá, sou o Mat. Sou designer e evangelista aqui na Webflow em São Francisco. Webflow é uma ferramenta que permite que você crie e desenvolva sites ao mesmo tempo. Ele é executado diretamente no seu navegador e é 100% visual. Assim, você pode criar sites dinâmicos responsivos sem escrever uma única linha de código. Você pode começar a criar seu site a partir de um Canvas em branco para que não haja restrições na sua visão criada. Ou você pode começar a partir de um modelo e tweetar rapidamente os estilos e o conteúdo que se adequam a você, à sua empresa ou à sua marca. O Webflow também hospeda um sistema de gerenciamento de conteúdo totalmente visual que você possa criar um blog, portfólio, um site de ventilação ou o que precisar, e ainda assim nunca pensar em código. Quando você estiver pronto para lançar seu site, oferecemos hospedagem rápida, segura e estável sob domínio personalizado. Hoje, vamos criar um site para hospedar seu portfólio para que seja um designer, escritor, fotógrafo ou todos os itens acima, você possa criar algo exclusivo para mostrar seu trabalho. Algumas das coisas sobre as quais falaremos hoje são a importância de construir uma presença online, por que você precisa estar online e como você pode fazer isso sem ser um desenvolvedor ou saber como escrever código. Hoje vivemos em um mundo que está se movendo tão rápido e estamos constantemente absorvendo novas informações e fazendo coisas novas. Seu site de portfólio também precisa seguir essas regras. Antes, usávamos coisas como currículos de papel para acompanhar o trabalho que fizemos, para mostrar a clientes potenciais ou pessoas para quem queríamos trabalhar. Mas agora, algo assim não é bom o suficiente. Precisamos de algo que esteja online. Precisamos de algo que esteja sempre a actualizar, algo que possa mostrar a qualquer momento a qualquer pessoa em qualquer lugar do planeta. Isso é o que vamos construir hoje. 2. Visão geral do projeto: Você decidiu construir um site. Isso é ótimo. Mas quais são os primeiros passos para começar? Bem, às vezes depende do projeto, mas muitas vezes ele vai depender de duas perguntas simples: sobre qual é o propósito do seu site e o que você quer que ele realize. Vamos abordar por que essas perguntas são importantes e estratégias que ajudam você a definir quais são essas respostas. O projeto de hoje é construir um site personalizado totalmente responsivo do zero sem escrever uma única linha de código. Nós vamos fazer isso em um também chamado Web Flow. Mas você pode usar qualquer ferramenta que você quiser. Muitos dos princípios que vamos aprender hoje podem ser aplicados em qualquer lugar na web. Vou guiá-lo através da construção deste local aqui. Um site de portfólio simples, mas exclusivo, que inclui uma barra de navegação pronta para dispositivos móveis , blocos de conteúdo dinâmico e um rodapé responsivo. Nós também projetaremos e construiremos esta página de detalhes que mostrará nossos itens individuais do portfólio, incluindo uma imagem principal e uma descrição do projeto. O projeto que vou mostrar hoje é para um portfólio de designers. Mas o modelo pode ser usado em uma grande variedade de serviços criativos, como fotografia ou escrita. Você pode acessar esse modelo e muito mais acessando webflow.com/templates. Também incluímos um link para este modelo gratuito na descrição do curso. Você pode acessar esses modelos a qualquer momento e até mesmo seguir junto com o modelo enquanto eu estou movendo pelo curso. Uma das coisas que torna o Web Flow tão único é que ele está realmente ensinando princípios básicos da Web enquanto você está projetando seus próprios sites para que tudo o que falamos hoje e tudo o que você aprende possa ser aplicado em qualquer lugar na web. 3. O que você precisa para começar: Para passar por este curso, você vai precisar de algumas ferramentas básicas. Você vai precisar de um computador com acesso à Internet. Como o Webflow é uma ferramenta online, uma conexão com a Internet será crucial para você concluir este projeto. Recomendamos usar o Google Chrome e é isso que vamos usar para demonstrar esse projeto hoje. Como eu mencionei antes, você não precisa de nenhum conhecimento prévio de desenvolvimento para concluir este curso, mas uma compreensão básica e certos princípios da web certamente ajudarão. A primeira parte deste curso será descrever e explicar muitos desses princípios da web, para descrever e explicar muitos desses princípios da web, que você possa seguir adiante com mais clareza, e porque grande parte do site que vamos construir hoje é orientado por conteúdo, ter algum desse conteúdo prontamente disponível vai agilizar todo o processo. Coisas como imagens, conteúdo e talvez até mesmo um logotipo seriam úteis enquanto você está acompanhando. Também incluímos um link para uma pasta onde você pode encontrar todos os ativos que usei para essa classe. Você pode acompanhar esses ativos ou criar seus próprios recursos. Se você quiser criar seus próprios ativos para o site, ajudaria ter um software de edição de fotos como o Photoshop para redimensionar, cortar e criar imagens. Ao usar imagens na web, é importante usar imagens de alta qualidade para que elas fiquem bem em dispositivos de alta definição, como iPhones, mas também ter consciência do tamanho. Carregar imagens com mais de 250 kilobytes de tamanho pode tornar o seu site mais lento. Portanto, é importante tentar manter esses tamanhos baixos, especialmente em um site como este, que usará fortemente imagens no design. Além disso, esperamos que por ter apenas um computador e acesso aos arquivos que publicamos na descrição do curso, você será capaz de passar por este projeto com cores voadoras, e no final, você terá seu próprio portfólio para mostrar para ele. 4. Fundamentos na web: Como eu mencionei antes, ter um forte conhecimento em desenvolvimento web ou codificação não é necessário para este curso, mas ter uma compreensão básica de alguns dos princípios web, eu acho que é crucial e totalmente compreensão e aproveitando o que você pode construir aqui hoje. Vou explicar alguns desses conceitos básicos da web usando este guia de web design visual que criamos aqui no Webflow. Consiste em seis etapas diferentes, cada uma cobrindo um importante conceito web que aplicaremos no curso de hoje. O primeiro conceito impossivelmente mais importante é o do modelo de caixa. O modelo de caixa é a idéia de pensar em elementos da web como caixas, assim como vemos aqui com esta estrutura de layout de preços. Aqui podemos imaginar se cada elemento em nossa página tivesse uma caixa invisível que o contornasse, a idéia do modelo de caixa é que a web é composta por essas caixas, e que a estrutura web é simplesmente adicionando essas caixas dentro de outras caixas e estilizando-os para adicionar espaço e outros layouts para coexistirem juntos de uma forma agradável. Nesta próxima seção, por exemplo, podemos mover este texto de parágrafo para este bloco de preços aqui, e notar que é assim que HTML e estrutura web funcionam. Elementos empilham um sob o outro ou dentro do outro, que é a melhor maneira de construir um layout de site fluido e responsivo. Agora, o modelo de caixa é o conceito geral de elementos da web e como eles trabalham juntos, mas também é importante entender os elementos individuais que estavam aqui também. Quando se trata de estrutura geral, estaremos usando esses três elementos principais da estrutura em seções, contêineres e colunas. Uma seção ocupa 100% da largura do contêiner pai, que seria a janela do navegador se você a adicionasse ao corpo. É ótimo para grandes seções horizontais de um site como o que estamos vendo aqui. Um contêiner é um bloco de 960 pixels de largura centrado no meio do navegador. Normalmente, a maioria do conteúdo do site é adicionado dentro do contêiner, modo que ele é centralizado no meio da nossa página. uso de colunas é a maneira mais rápida de criar um layout de site exclusivo. Para editar quantas colunas você deseja adicionar é mais fácil selecionar nossas colunas, e neste painel de configurações, podemos ajustar tanto o número de colunas que queremos e a largura que eles são. Também podemos ajustar como queremos que nossas colunas responsivas sejam dispostas em diferentes dispositivos. É uma combinação desses três elementos que compõem o site que criamos hoje. Agora que temos elementos em nossa página, o próximo passo é estilizar esses elementos, e na web, isso é feito através de CSS, uma linguagem de codificação que nos permite adicionar estilos como fonte, cor, altura da linha, gradientes, fronteiras, sombras, e muito mais. Aqui no lado esquerdo, temos um botão que tem algum estilo adicional feito para ele, onde à direita temos um link simples sem estilos sobre ele. O que precisamos fazer é primeiro adicionar uma classe CSS. Assim que o fizermos, teremos acesso a uma grande variedade de opções de estilo. Como adicionar espaçamento interno, ajustar a cor da fonte ou o tamanho da fonte, adicionar uma cor de fundo e até adicionar alguns cantos arredondados. CSS nos capacita a projetar na web de uma quantidade quase ilimitada de maneiras. Este botão é apenas um pequeno exemplo disso. Nós estaremos usando muito mais estilos CSS em todo o nosso treinamento na web hoje. Os estilos CSS também são mais do que apenas cores e fontes. Na verdade, CSS também é o que cria os layouts que usamos na web também. O primeiro exemplo aqui nos mostra como atributos CSS de margem e preenchimento nos permitem criar o espaçamento que precisamos para nossos elementos. preenchimento é o espaçamento que compõe o interior de um elemento onde a margem é o espaçamento do lado de fora. Vamos usar margem e preenchimento sobre esses elementos à direita para que possamos fazê-lo coincidir com os elementos à esquerda. Eu vou primeiro selecionar este wrapper externo que está segurando todo o texto dentro dele. Então eu posso segurar Shift no meu teclado e adicionar preenchimento no interior deste elemento. Observe que à medida que adicionamos preenchimento, estamos adicionando espaço no interior do elemento, criando espaço entre a borda externa e o conteúdo dentro dele. Agora vamos adicionar alguma margem ao texto individual, a fim de adicionar espaçamento adicional na parte inferior. Vamos adicionar margem e preenchimento a essas tags para que ele corresponda ao seu parceiro à esquerda. Vamos primeiro adicionar o nosso preenchimento, ótimo, e agora alguma margem. Perfeito. Assim, CSS nos permitiu criar o espaçamento no layout que precisamos aqui. Outra propriedade CSS importante é a propriedade display. Elementos da Web como parágrafos, texto e blocos div são tipicamente dado o valor do bloco de exibição, o que significa que ele preenche a largura da janela pai e pilhas em cima dos outros blocos como vemos aqui. À direita, veremos os mesmos elementos onde quer que estejam dispostos com a propriedade de inline-block. Inline-block fará com que a largura do elemento esteja em conformidade com a largura do conteúdo dentro dele. Isso significa que, se o conteúdo for pequeno o suficiente, eles podem empilhar um ao lado do outro. Observe o que acontece quando alteramos esses botões e links para exibir bloco em vez disso. Eles ocupam a largura total e empilham em cima do outro em vez de ao lado do outro, porque agora eles ocupam toda a largura do invólucro. O próximo tópico é cobrir o dos estilos em cascata, o que nos permite criar facilmente uma variação de elementos, adicionando classes adicionais em cima deles. Podemos mostrar isso aqui com exemplos de botões diferentes. Observe à esquerda que temos três botões com três cores diferentes, e à direita, temos três botões com a mesma cor. Bem, a razão pela qual eles são da mesma cor é porque eles compartilham a mesma classe. Observe que se fizermos uma única mudança de estilo em um deles, a mesma coisa muda para cada um deles, o que também é um enorme benefício do CSS. Ser capaz de fazer uma mudança em todo o site para elementos semelhantes muito rapidamente. Para fazermos quaisquer alterações de estilo a esses elementos sem afetar os outros, precisamos adicionar uma classe adicional. Vamos adicionar uma classe a esta e, em seguida, mudar a cor do plano de fundo. Observe que desta vez ele não mudou a cor para todos os botões, apenas este. Vamos fazer o mesmo para o próximo. Perfeito. A última peça sobre a qual quero falar é sobre estilo móvel e como o CSS funciona em todos os seus dispositivos diferentes. Com o estilo CSS, os estilos só caem em cascata para baixo, que significa que todos os estilos que você adicionar aos seus elementos na área de trabalho também serão seguidos para seus dispositivos móveis. O mesmo vale para o tablet ou qualquer um dos outros dispositivos móveis. Quaisquer alterações de estilo feitas em cascata para baixo. Por exemplo, se fizermos alterações de estilo em nossos tablets, ele só irá em cascata para nossos dispositivos menores e, neste caso, substituir qualquer estilo feito na área de trabalho. Também é importante notar que os estilos não podem traduzir para cima, que significa que qualquer estilo que você adicionaria em um tablet não traduziria para a área de trabalho, eles apenas traduzem para baixo, e é isso. Espero que esta visão geral da web tenha sido útil e que possa fornecer orientação à medida que avançamos por este curso. Para o restante deste curso, não vou mergulhar muito fundo em tópicos específicos da web. Vamos ouvir coisas como o modelo de caixa e outros atributos CSS que já cobrimos ao longo do curso. 5. A importância do conteúdo no design: Neste ponto, devemos ter uma boa compreensão do que é o nosso conteúdo e como queremos usá-lo em nossos sites. Como grande parte do nosso processo de design vai depender de nosso conteúdo dinâmico, precisamos pensar sobre isso antes de começarmos a fase de projeto, realmente perfurando o conceito de conteúdo primeiro. Você perceberá todo o benefício desse fluxo de trabalho à medida que iniciarmos o processo de design. No Webflow, pensamos em conteúdo na forma de coleções, que são simplesmente grupos de conteúdo que são organizados juntos para formar um único item, como uma postagem de blog. Eu já criei um punhado de coleções aqui, mas vou mostrar a vocês como é fácil criar uma das suas. Começaremos simplesmente clicando no botão “Nova Coleção”. Agora, a primeira coisa que precisamos fazer é nomear nossa coleção, que é o que será exibido no CMS mais tarde. Neste caso, estamos criando nossa coleção de projetos. Agora, precisamos criar qual será a URL para nossos itens de projeto individuais. Por exemplo, se escolhermos projetos, o URL seria www.website.com/projects/o nome do projeto. Agora, precisamos adicionar nossos campos individuais ou conteúdo que compõem esses projetos. O nome já é padrão para nós e será simplesmente o nome do projeto. Então, basta clicar em “Adicionar novo campo” e receber uma variedade de opções diferentes aqui, incluindo um campo de texto simples, um campo de rich text, imagem, vídeo, link, um campo numérico, data e hora, alternar, cor e opção e, em seguida, dois tipos diferentes de campos de referência. Vamos começar adicionando nosso campo de imagem. Precisamos dar um rótulo para este campo, que vamos chamar de imagem principal. Esta vai ser a imagem principal que usamos para nossos diferentes itens de projeto. Também podemos fornecer texto de ajuda, que pode fornecer informações adicionais que ajudarão a orientar os usuários do CMS durante a atualização ou o upload de uma nova imagem. Em seguida, clicamos em “Salvar”. Vamos agora adicionar nossa descrição do projeto, que usaremos como um campo de rich text e clique em “Salvar”. Por fim, eu quero poder adicionar uma tag a este projeto e vou fazer isso ligando a outra coleção que eu já criei. Eu posso fazer isso usando o campo de referência única e em seguida, selecionando a coleção de tags de projeto que eu já criei. Agora, que temos todos os campos que queremos, podemos criar nossa coleção. No início, não haverá itens nele, mas podemos adicioná-los facilmente clicando no botão “Novo projeto”. Agora, tudo o que precisamos é preencher os campos individuais com o conteúdo de um de nossos projetos, que eu já salvei. Este projeto é chamado Sketched Designs. Podemos fazer upload de nossa imagem principal do meu desktop, e então eu vou colar em algum conteúdo que funcionará como nossa descrição para o projeto e, por último, para a tag do projeto, vou selecionar branding. Lá temos ele. Agora, que temos algum conteúdo no lugar, podemos começar o processo de design da nossa página inicial. 6. Seção de hero + navegação: Agora que temos toda a nossa configuração de conteúdo e fizemos uma breve visão geral de alguns de nossos princípios básicos de web design, agora vamos entrar e replicar a construção desta página inicial que eu construí aqui que consiste apenas em uma seção de heróis simples, seguido por cinco telhas diferentes que vemos abaixo, incluindo um cerca de telha, mais recentes projetos telha que puxa esta imagem de seu projeto mais recente, publicações mais recentes, que vai puxar a última imagem post blog, contratar-me e, em seguida, quatro links de mídia social. Também construiremos um rodapé que será em todo o site. Para projetar isso, vamos construir isso visualmente em nossa ferramenta Web Flow, e quando olharmos aqui, veremos que estamos começando com uma tela em branco. Não há nada aqui. Então vamos construir esta página inteira do zero. Agora, vamos começar a usar alguns dos nossos fundamentos básicos que aprendemos no vídeo anterior, mas eu vou tentar educá-los enquanto formos. Agora, a primeira coisa que queremos fazer é adicionar uma seção para nossa seção de heróis. Então eu vou para o painel Adicionar e, em seguida, arrastar em uma seção. Agora, a primeira coisa que queremos fazer depois de adicionar elementos é dar-lhes um estilo para que possamos atribuir estilos e classes a eles. Neste caso, vamos dar a isso uma classe de seção de herói, e vamos adicionar um pouco de estofamento na parte superior e inferior apenas para que possamos ter um pouco de espaço. Vamos em frente e adicionar nossa imagem de fundo, que vai nos ajudar a preencher este espaço. Então, se eu rolar para baixo até nossa seção de fundo, eu vou extrair isso de nossos ativos que já temos, e eu vou usar essa imagem aqui. Você vai notar agora que a imagem é bem grande, então não pode caber. Então vamos usar este atributo cover que eu posso selecionar, e eu vou corrigir isso no meio. Lá vamos nós. Agora, para que possamos aumentar o tamanho disso, eu não vou adicionar uma altura. Em vez disso, vou começar a adicionar algum conteúdo. Se eu ir em frente e se eu adicionar painel novamente e, em seguida, rolar para baixo até nossa barra de navegação, eu posso arrastar na barra de navegação. Na verdade, vou arrastá-lo direto para a seção de heróis. Neste caso, eu quero dar a nossa classe de barra de navegação, vamos chamá-la de nav, e vamos começar a estilizá-la. Primeiro eu quero adicionar um pouco de estofamento no interior. Eu também quero mudar a cor de fundo para esta cor clara e transparente para ser clara em vez desse cinza. Eu também quero que isso seja absolutamente posicionado no topo da página. Neste caso, eu posso escolher topo, e vamos notar que ele está no topo. Agora uma coisa que eu fiz foi adicionar um pouco de espaço extra no topo também, apenas para empurrá-lo um pouco para baixo. Agora temos a base da nossa navegação. Precisamos adicionar e estilizar alguns links adicionais, bem como adicionar nosso logotipo. Para o logotipo, tudo o que eu fiz foi simplesmente pegar um bloco de texto e arrastá-lo para esta marca, e então eu posso dar a este livro texto uma aula, vamos chamá-lo de nosso logotipo texto, e podemos começar a estilizá-lo. Vamos mudar a cor para branco. Vamos aumentar o tamanho, e vamos adicionar os nossos textos. Lá estamos nós. Eu posso adicionalmente estilo isso até que eu esteja feliz com ele. Vamos em frente e apenas aumentar o tamanho um pouco mais, também as alturas da linha. Agora o que eu fiz foi adicionar uma classe adicional em uma tag. Então eu posso simplesmente ousar. Lá vamos nós. Agora o que eu preciso fazer é centralizá-lo para que ele esteja em linha com os links que temos aqui. Mas talvez antes de fazermos isso, vamos seguir em frente e estilizar nossos links também. Vou clicar neste primeiro link e depois ir para uma aula. Vamos adicionar uma classe para cada um deles. Então temos link nav, e vamos ajustar a cor. Vamos fazer tudo em maiúsculas. Vou continuar com esta fonte, que é a fonte que temos em nosso corpo, e também vou aumentar um kerning no meio. Lá vamos nós. Então esse é o nosso elo. Mas observe que os outros links não seguiram. Isso é porque ainda precisamos adicionar a classe, então vamos em frente, digitar nossa classe e selecioná-la. Vamos notar que esses estilos vão ser transportados. Lá vamos nós. Vamos em frente e adicionar os links restantes que temos, e podemos começar a adicionar o texto. Então nós temos nossa casa, nós tivemos nosso portfólio, nós temos uma página Sobre, e nós temos nosso blog, e então nós temos um botão de contato, que vai ser uma classe um pouco diferente. Então, novamente, eu vou copiar isso, o que eu posso fazer no meu teclado, e então eu vou adicionar o texto para contato. Então aqui, eu vou adicionar uma classe adicional que vai nos ajudar adicionalmente estilizá-lo. Vamos em frente e digite contato. Então aqui, podemos fazer coisas como ajustar a cor de fundo. Eu quero fazer este branco com uma ligeira opacidade, e então eu também quero diminuir o preenchimento que temos lá que foi inadimplente. Vamos torná-lo 10, e nós também queremos que ele permaneça centrado em seus links, então eu vou adicionar alguma margem no topo. Lá vamos nós. Vou diminuir o tamanho da fonte, bem como diminuir a altura da linha um pouco. Lá vamos nós. Nós também tivemos alguns cantos arredondados, apenas ligeiramente. Então adicione um raio de quarto arredondado de dois pixels. Lá vamos nós. Eu acredito que havia também alguma margem adicional no lado esquerdo, então eu posso adicionar, vamos fazer 30 pixels. Ótima. Estamos chegando mais perto. Vamos em frente e ajustar esses links de navegação um pouco mais. Vou diminuir o tamanho. Novamente, esta é a beleza de usar uma ferramenta que já está na web. Nós podemos realmente visualizar isso tanto quanto quisermos por este link de visualização e realmente ver o que estamos construindo no ambiente real em que ele será publicado. Com nossos textos de logotipo, lembre-se, eu queria centralizá-lo apenas um pouco, então eu vou adicionar alguma margem no topo, e nós podemos ajustar isso até que pareça certo. Isso parece bom. Agora temos o nosso logotipo e a nossa barra de navegação no topo da página. Nós também precisamos adicionar nosso texto de herói, que eu posso simplesmente arrastar para dentro Vou arrastar um título, e este era o nosso H1. Quero fazer algumas mudanças adicionais. Todos os nossos H1s vão seguir o mesmo estilo e estão centrados. Vamos mudar a cor para branco. Eu também quero fazer isso tudo em maiúsculas. Isso diminuirá o tamanho apenas um pouco. O texto que estava aqui, eu posso ir em frente e digitar isso, e lá vamos nós. Agora posso fazer os ajustes que eu quiser. Usando o preenchimento, eu posso ajustar para adicionar algum espaço adicional. Observe que já temos algum preenchimento na parte inferior, ele está ajustando a altura deste recipiente à medida que avançamos. Vamos apenas adicionar um pouco mais porque nós realmente vamos estar adicionando nosso contêiner abaixo disso, e ele vai mover-se para cima nesta seção. Mas novamente, a beleza de fazer isso na web é que podemos iterar enquanto vamos. Vou deixar a seção de heróis assim por enquanto. Vamos em frente e passar para a próxima seção. 7. Tiles de Homea Dynamic: Vou arrastar uma nova seção, simplesmente arrastá-la para o nosso corpo. Mais uma vez, quero dar uma aula adicional. Vamos chamar isso de nossa aula de seção. Então aqui, eu posso adicionar um pouco de preenchimento, e esta vai ser a seção que usamos em nossos sites. Gosto de preparar isso primeiro. Então eu também vou adicionar uma classe adicional porque neste caso nós não queremos nenhum preenchimento no topo. Vamos em frente e saber. Vamos chamar isso de nossa seção superior. Então, neste caso, não queremos ter nenhum estofamento no topo. Vamos em frente e adicionar em nosso contêiner, então eu posso apenas clicar e nosso contêiner é adicionado, e se olharmos para trás para o nosso produto final, nós vamos, notar que o contêiner é movido para cima sobre esta seção de heróis. Vamos dar uma aula a este contêiner. Vamos chamar isso de nosso contêiner de herói, e vamos movê-lo para cima. Para fazer isso, precisamos posicioná-lo em relação para que possamos obter essas setas de posição aqui, e vamos em frente e escalá-lo para cima. Vamos tentar 70 pixels, e vamos ter certeza de dar-lhe uma cor de fundo. Lá vamos nós. Há também algum estofamento adicional no interior. Vamos fazer cinco pixels. Lá estamos nós. Agora temos esse contêiner que está se movendo para nossa seção de heróis. Agora precisamos adicionar o conteúdo que vai dentro dele. Se você se lembra, nós temos os cinco azulejos. Cada um deles tem um tamanho ligeiramente diferente, sendo os três inferiores três terços. Vamos em frente e adicionar o nosso primeiro. Mas a primeira coisa que eu quero fazer é realmente adicionar um bloco de div, que vai envolver todo esse conteúdo, e então eu quero adicionar no meu about widgets ou meu about mosaico. Agora que temos um bloco de Div, vamos dar uma aula a ele. O que eu vou fazer com essas classes, é realmente nomeá-los com base nos tamanhos que eles vão ocupar neste recipiente. neste caso, este é o nosso bloco 60, e ele vai ocupar uma largura de 60%, e a altura vai ser de 300 pixels. Lá vamos nós. Agora, dentro deste bloco é onde temos nossa imagem e o invólucro que vai ser usado em todos os nossos diferentes azulejos. Neste caso, vamos arrastar em um bloco Div adicional, que está batendo em casa o fato do modelo de caixa de caixas dentro de outras caixas, adicionando elementos dentro de outros elementos. Nesta classe, nós vamos dar é o nosso azulejo herói, e nós vamos ter certeza de que ele é relativo, e eu vou dizer-lhe por que em apenas um momento, e ele tem uma altura de 100 por cento. Reparem que vai encher aquele recipiente de 60 blocos em que o colocamos. Agora, dentro deste bloco de herói, temos nossa imagem, bem como o texto que está rotulando o bloco. Vou arrastar mais um bloco de Div para a imagem. Vamos chamar isso de nossa imagem de azulejo. Então aqui o que eu quero, é que eu quero que ele seja posicionado absolutos, é por isso que nós tivemos que ter o wrapper anterior é relativo, e eu quero que ele seja cheio com as alturas de 100 por cento. Agora percebendo novamente, está cobrindo toda a imagem, vamos em frente e pegar o fundo, e vamos selecionar esta imagem aqui. Lá vamos nós. Essa é a imagem que queríamos, e depois sobreposta no topo é onde temos nosso texto. Vou voltar mais uma vez ao nosso painel de adição e depois arrastar um bloco de texto, e quero que isto esteja no nosso bloco de herói. Vamos chamar isso de nosso texto de herói ou desculpe, vamos fazer texto de bloco. Vamos aumentar o tamanho primeiro, vamos mudar a cor da fonte, e eu quero aumentar o tamanho deste texto. Isso também vai ser posicionado absoluto. Queremos movê-lo para este canto inferior esquerdo. Repare que está traduzindo lá, mas agora está atrás da imagem. Vamos usar nosso índice z aqui, que vai movê-lo para a frente, então agora temos uma visão melhor. Vamos em frente e digite o texto final antes de começar a estilizá-lo. Neste caso, temos sobre mim é o que o texto vai ser. Vamos em frente e estilizá-lo para que ele se pareça com o que temos no final. O texto é um pouco maior. Vamos mudar a altura da linha. É um texto em negrito para que possamos ajustá-lo para ser ultra negrito. Então também temos como todas as tampas. Então podemos ajustar o tamanho agora que temos um pouco maior. Lá vamos nós. Outra coisa que precisamos fazer é ajustar a posição. Agora temos isso preso no canto inferior esquerdo, vamos em frente, movê-lo e movê-lo para cima. Vamos fazer na verdade 30 e 30. Lá vamos nós. Outra coisa que fizemos foi um estilo adicional neste texto foi adicionar uma sombra tecnológica, e podemos adicionar isso indo para a nossa sombra tecnológica, e podemos ajustar a opacidade apenas para que não seja tão negrito, e isso irá ajudá-lo a aparecer sobre o imagens que temos. Lá vamos nós. Esse é o nosso sobre azulejo. Agora, a beleza do que vou mostrar a vocês aqui também será duplicar o trabalho que já fizemos. Neste caso, eu quero duplicar este objeto inteiro ou bloco 60, e eu vou duplicá-lo mais uma vez. Eu vou usar copiar e colar, e ele vai ser colado abaixo aqui por enquanto, mas isso é porque isso está ocupando 60%, e se nós adicioná-los juntos, ele faria 120, isto é 100 por cento de largura. Vamos em frente e ajustar este bloco 60 aqui para uma classe completamente diferente. Neste caso, vamos usar 40 bloco, ea largura vai ser 40 por cento, e nós também queremos esta foto para a esquerda e posição relativa. Vamos em frente e também flutuar isso para a esquerda, certifique-se de que ambos estão flutuando para a esquerda, e eles são. Fantástico. Outra coisa que nos esquecemos de fazer é adicionar a altura. Reparem agora que não há alturas. Então aqui podemos fazer 300 pixels, e notar agora que estamos vendo o produto final. Eles parecem muito parecidos. Observe que o do lado direito ainda é apenas 40 por cento, o da esquerda é 60 por cento. Agora, em nosso produto final, nós realmente adicionamos um pouco de separação entre as diferentes imagens. Vamos em frente e adicionar um pouco de preenchimento. Se formos ao nosso painel aqui para a nossa telha de herói, vamos em frente e adicionar um pouco de preenchimento. Vamos realmente adicioná-lo em nossos blocos diferentes. O bloco 60 e 40, vamos em frente e ir para o nosso estilo e segurando o deslocamento no meu teclado, eu vou adicionar cinco pixels extras em cada lado. Quero fazer o mesmo aqui. Se eu clicar nesses elementos, eu posso usar esses atalhos aqui em baixo e ir para o meu bloco 40, e eu vou fazer a mesma coisa. Vamos em frente e adicionar cinco pixels de cada lado. Lá vamos nós. Esse é o lado de cima. Nós também temos os três elementos no fundo, e novamente, eu vou duplicar exatamente o mesmo processo. Eu vou tomar este bloco 40 e usar comandos teclado CMI e, em seguida, Command V, e eu vou colar mais um para que possamos ajustar a classe diferente aqui. Em vez do quarteirão 40, vou mudar isso se você ainda não adivinhou para um bloco 33. Neste caso, vamos dividi-lo em terços e vamos seguir o mesmo padrão. Queremos que flutue para a esquerda. Queremos alterar a largura para 33,33 por cento com uma altura de 300 pixels. Lá vamos nós. Agora precisamos duplicar isso mais duas vezes para um total de três. Vamos fazer o Comando C, Comando V. Ótimo. Assim como fizemos antes, vamos adicionar em nosso preenchimento cada lado para que tenhamos os cinco pixels. Lá vamos nós, então estamos chegando a algum lugar. Agora só precisamos atualizar todo o conteúdo para combinar e, em seguida, também, mudar esses ícones sociais aqui. Então, em vez da imagem, vamos adicionar quatro ícones sociais. Vamos em frente e começar mudando o texto. Neste caso, tenho os meus últimos projectos. Aqui em baixo, tenho os meus últimos posts. Então tenho que me contratar. Então aqui, vamos trocar isso, então vou apagar o texto por enquanto. Vamos trocar algumas das imagens que temos aqui. Lembre-se do que eu disse anteriormente, os projetos e postagens mais recentes estão realmente indo para extrair de nossas últimas postagens de blog e projetos mais recentes à medida que os adicionamos. Rapidamente, vamos apenas atualizar nossa imagem de azulejo aqui, que vai ser nossa contratação, então eu vou adicionar uma classe adicional e eu posso trocar essa foto de fundo. Lá vamos nós. Agora, para isso, vai ser um pouco diferente, o que precisamos fazer é adicionar em nossos dados dinâmicos para que ele saiba onde extrair e atualizar a imagem de fundo para nós. Neste caso, vamos em frente e ir para o nosso painel Adicionar novamente. Vou pegar nosso conteúdo dinâmico da lista e quero arrastá-lo para o nosso bloco de herói. Eu posso ligar isso, e neste caso, nós temos nossos projetos e ele está puxando nossos projetos aqui. Agora, o que eu quero fazer é mudar para que o texto do bloco e a imagem do bloco estejam dentro dessa lista dinâmica. Então vamos em frente e arrastá-los para o nosso item dinâmico. Lá vamos nós. Agora que eles estão dentro do nosso item dinâmico, eu posso realmente extrair e usar conteúdo de dentro dele. Neste caso, eu posso ir para a nossa imagem de mosaico e eu posso selecionar para obter imagem de fundo da nossa imagem principal. Observe que já está puxando nossa imagem de fundo do nosso projeto mais recente. Podemos verificar isso indo para o nosso painel de coleção no lado esquerdo, indo para nossos projetos, desenhos de esboços, e lá está a imagem. Essa é a imagem que está sendo puxada. Agora podemos fazer exatamente a mesma coisa para nossos posts mais recentes. Novamente, eu vou ir em frente e arrastar em uma lista dinâmica e eu quero arrastá-lo para o nosso bloco herói. Desta vez eu vou vinculá-lo aos nossos blogs, que é uma coleção que já criamos. Novamente, é por isso que é tão benéfico começar a projetar com conteúdo primeiro, você já tem esses ativos criados para você. Então aqui eu vou ir em frente e arrastar em nossos diferentes elementos, nossos textos de título, e nossa imagem de título. Mais uma vez, eu vou em frente e ir para o nosso painel de configurações. Eu preciso clicar em nossa imagem de título e painel de configurações e, em seguida, obter a imagem de fundo do nosso blog, e lá vamos nós. Agora temos um bloco atualizado para cada quatro postagens diferentes. Agora o que eu quero fazer é atualizar isso aqui, se formos para o nosso produto final para ser este sistema de ligação de quatro quadrantes aqui com essas diferentes contas de mídia social. Neste caso, vou apagar a imagem do meu título para que agora tudo o que tenho seja o título de herói. Agora, o que eu quero fazer é adicionar em quatro blocos, eu vou usar blocos de link, então vamos em frente e arrastar em um bloco de link. Neste caso, eu quero dar-lhe uma classe que vai permitir que ele se sente 1,5 da largura e 1,5 da altura. Vamos em frente e adicionar uma classe primeiro, bloco social, e eu quero que a largura seja 50% e eu quero que a altura seja metade do que a altura é para esses elementos, que era que 300 pixels, então neste caso, nós irá escolher 150 pixels. Só para termos uma idéia melhor do que está acontecendo, vamos em frente e escolher nossas cores. Guardei as cores para os ícones das redes sociais que vamos usar, começando pelo Twitter. Vamos adicionar nossa imagem de fundo, que neste caso, vai ser o ícone do Twitter que eu tenho aqui. A beleza das imagens de fundo é que você começa a posicioná-las bem no centro. Neste momento, está em mosaico, posso seleccionar Não Repetir. Então vamos aumentar o tamanho desse cara aqui para 50 pixels, e ele vai permanecer como não fixo. Lá vamos nós. Esse é o nosso bloco do Twitter. Vamos duplicar isso quatro vezes, então Comando C, Comando V novamente, estamos reutilizando os ativos que criamos. Neste caso, eu posso ir em frente e começar a ajustar as cores para estes. Também parece que vamos ter que ajustar um pouco o tamanho, tudo bem. Então bloco social, vamos digitar uma classe adicional para que possamos adicionar estilos adicionais, como alterar a cor de fundo e ajustar o ícone. Neste caso, queremos que ele seja 50 pixels novamente. Ótima. Temos o Pinterest aqui em baixo. Vamos adicionar nossa classe adicional. Vamos mudar a cor de fundo, atualizar o gráfico. Novamente, vamos mudar a largura para 50 pixels. Por último, temos nossa conta de drible, então vamos em frente e adicionar uma classe adicional. Troque o ícone. Novamente, 50 pixels. Em seguida, altere a cor de fundo aqui. Agora, estamos quase prontos. Uma coisa que vamos notar é que ainda temos algum preenchimento adicional. Eu posso simplesmente ajustar isso para que eles estejam todos flutuando para a esquerda. Na verdade, vamos usar nosso bloco social original para que ele o adicione a cada um desses elementos para que eu possa flutuá-lo para a esquerda. Lá vamos nós. Observe que ainda está um pouco mais alto. Vamos em frente e diminuir a altura até sentirmos que combina, 145, que parece bom. Lá vamos nós. Estamos muito bem com o nosso design aqui. A última peça que precisamos é adicionar nosso rodapé, que é o que vamos cobrir em nosso próximo vídeo. 8. Rodapé: A última peça que precisamos é adicionar nosso rodapé, que vai ficar bem aqui na parte inferior. Novamente, vamos em frente e adicionar uma nova seção, que eu posso simplesmente arrastar para o nosso corpo, que podemos adicionar aqui mesmo. Neste caso, eu quero adicioná-lo ao fundo. Deixe-me fechar alguns desses, e vamos movê-lo para baixo. Neste caso, vamos em frente e chamar isso de nosso Rodapé, nossa Seção de Rodapé, e podemos adicionar algum espaçamento adicional. Vamos mudar a cor de fundo aqui. Vamos usar um cinza escuro. Agora, precisamos do recipiente que vai conter o nosso conteúdo. Vamos em frente e ir para o nosso contêiner, e vamos arrastá-lo para a nossa seção. Agora, temos o contêiner para manter nossos elementos individuais. Nesse caso, o que eu quero fazer é arrastar em uma coluna. Vamos ajustá-lo para que tenhamos o logotipo do lado esquerdo aqui, e então nós vamos ter os links no lado direito. Na verdade, podemos subir e puxar parte do mesmo conteúdo. Neste caso, eu vou puxar esta marca, que se olharmos no painel Navegador, é apenas o bloco de links que rodeia esse logotipo, e role para baixo, eu vou adicioná-lo em nossa coluna. Também quero replicar o que vemos aqui com as nossas ligações de navegação. O que eu posso fazer é simplesmente ir para o nosso painel Adicionar novamente, e vamos arrastar em um link de texto, e neste caso, podemos usar o termo Nav Link para obter a classe semelhante, exceto que desta vez eu também vou adicionar um classe adicional de Rodapé Link para fazer algumas alterações adicionais. Por exemplo, queremos que eles flutuem para a direita, e podemos adicionar algum espaçamento adicional, e eu vou remover o sublinhado. Mais uma vez, temos os diferentes links. Nós temos 1, 2, 3, 4, e nosso botão Contato, então vamos em frente e adicionar isso. Temos um e ⌘+C, ⌘+V, obter todos os nossos links. Mais uma. Perfeito. Podemos fazer a mesma coisa aqui onde podemos adicionar a classe adicional para Contact, que veremos aqui mesmo. Vamos adicionar um link adicional ou estilo adicional para que possamos centralizar estes um pouco mais. Lá vamos nós. Vamos em frente e adicionar o texto. Temos Contato, Blog, Sobre, Portfólio e nosso link Home. Agora, uma coisa que não cobrimos mesmo com o link de navegação é como é fácil vincular seus sites. Neste momento, se formos ao nosso painel Páginas, notaremos que ainda não temos outras páginas criadas, mas o que será capaz de fazer é o nosso link inicial, porque isso existe, clicaremos no link e, em seguida, em Configurações, temos nossas Configurações de link, podemos colar em um link direto legítimo para nossos diferentes sites, também podemos usar uma página existente em nosso site, que vamos fazer, também podemos usar um link direto para uma seção em nossa página, que não temos nenhum nesta página, um e-mail ou número de telefone. Mas neste caso, vamos usar o nosso Lar. Observe que a cor mudou para azul. Isso é porque estamos agora em um estado ativo. Uma coisa que poderíamos fazer é ajustar o estilo deste link para esta página porque estamos na página inicial. Vamos mudar para talvez este azul aqui. Lá vamos nós. Isso parece bom. Agora é apenas uma chamada que estamos na página inicial, e a mesma coisa aconteceria com esses links se estivéssemos em suas páginas. Então essa é a nossa página inicial. Uma coisa que ainda precisamos fazer é garantir que ele funcione em todos os nossos dispositivos diferentes, que é o que faremos a seguir. 9. Tornando nosso site para dispositivos móveis: Então essa é a nossa página inicial. Uma coisa que ainda precisamos fazer é garantir que ele funcione em todos os nossos dispositivos diferentes. Agora, no fluxo da web, podemos fazer isso com esses painéis aqui em cima. Agora estamos na área de trabalho. Se formos para tablets, podemos ter uma idéia melhor de como o site começa a se parecer e o mesmo para os outros dispositivos também. Agora lembre-se em nossa conversa anterior, estilos que fazemos na área de trabalho estão indo em cascata para baixo para nossos outros dispositivos, é por isso que percebemos que o design e tudo é muito semelhante aqui como era na área de trabalho. Mas se fôssemos fazer alterações adicionais no tablet, como, por exemplo, mudar o tamanho do texto para que ele se encaixe em uma linha, ele não vai mudar o tamanho na página inicial. Também precisamos ter certeza de que construímos nossa barra de navegação móvel. Agora temos o botão do menu sem classe. Vamos dar uma aula para que possamos estilizá-lo. Neste caso, a cor está sendo retirada da tipografia. Vamos em frente e ajustar a cor lá e podemos visualizar o que parece quando abrimos este menu clicando no botão, indo para nossas configurações e pressionando, Abrir. Queremos adicionar alguns estilos adicionais para que possamos fazer isso parecer um pouco melhor. Vamos em frente e usar nossas opções de menu de navegação. Você pode selecionar isso indo para o nosso painel de estilo ou painel do navegador ou selecionando-o quando ele for suspenso e vamos dar-lhe uma classe. Chame-o de nosso menu de navegação e vamos ajustá-lo para que ele também tenha uma cor de fundo mais escura. Lá vamos nós. Vamos ajustar o botão do menu. Agora está aberto, que é uma classe adicional que podemos estilizar. Quando estiver aberta, talvez usemos o azul de novo. Também queremos fazer algumas alterações adicionais no comprimento de nossos contatos. Vamos em frente e remover essa cor de fundo. Vamos adicionar algum espaço adicional na parte inferior. Lá vamos nós. Agora temos todos os nossos links configurados. Podemos dar uma olhada e dar uma olhada em como isso ficaria em diferentes dispositivos. Vamos em frente e remover isso. Como você percebe aqui, temos 20 pixels em cada um deles. Vamos combinar com nossos contatos aqui. Lá vamos nós. Isso é deslocamento de espera, que vamos usá-lo para todos os lados e vamos remover a margem superior e inferior. Então agora ele combina com todos os outros links, e então, finalmente, temos o nosso dispositivo móvel. Lá vamos nós. Ajustamos esses dispositivos em todos os nossos dispositivos para garantir que o menu móvel funcione bem, e isso parece ótimo. Agora, por último, vamos ter certeza de que tudo o resto parece bom como esses azulejos e nosso rodapé. Aqui, isso parece muito bom ainda. Vamos em frente e remover alguns dos estofos extras que temos na parte inferior desta seção, trazê-lo mais perto do nosso rodapé inferior. Vamos realinhar estes apenas um pouco, para que os nossos links de rodapé estejam um pouco mais alinhados com o logotipo. Vamos ajustar o estofamento no topo aqui para que, que a seção de herói é um pouco mais em linhas. Estamos percebendo agora a quantidade de personalização que realmente obtemos com o uso desta ferramenta e sendo capaz de construir isso no navegador. Lá vamos nós. Vamos também ajustar o preenchimento nos lados para que o movamos mais perto do canto e ótimo. Vamos continuar indo para nossos diferentes dispositivos e tudo o que mudamos no dispositivo tablet vai passar para esses dispositivos. Você espera que, à medida que você chegar mais perto do fundo, ele começa a parecer tão bom. Vamos em frente e diminuir o tamanho destes novamente e movê-los para o lado um pouco mais. Lá vamos nós. Agora aqui estamos percebendo que isso está começando a quebrar um pouco. Tudo bem, vamos em frente e centralizar alguns desses. Neste caso, sempre que você tem uma classe para a nossa marca logotipo rodapé. Vamos chamar isso de nosso rodapé do logotipo e vamos posicioná-lo para que não seja à esquerda e vamos centralizar o texto no meio. Vamos fazer o mesmo aqui em baixo. Nesse caso, vamos dar nossa coluna à nossa coluna de link de rodapé, e vamos centralizar o texto no meio. Agora eles não estão centrando porque não estão flutuando. Vamos em frente e desboiá-los. Certifica-te de que estão todos desboiados. Lá vamos nós. Observe novamente que muito desse processo é iteração. Está indo e voltando e adicionando os ajustes necessários para garantir que tudo fique bem. Aqui em cima, vamos em frente e aumentar o tamanho deste texto. Novamente, ele vai quebrar para duas linhas independentemente. Vamos nos certificar de que parece bom e lá vamos nós. Neste caso, eu não preciso necessariamente da coluna para sair e voltar. Vamos em frente e remova isso de volta para o automático. Vamos apenas ajustar o tamanho da seção do herói para que ele se ajuste melhor com a página. Fantástico, então isso parece bom. O último dispositivo é nosso dispositivo móvel e vamos em frente e adicionar uma sombra a esta imagem aqui. Em cada um, irá para todos cada um e vamos adicionar uma sombra de texto que irá ajudar o texto a sair apenas um pouco sobre o fundo mais claro. Fantástico. Agora estamos ficando um pouco apertados aqui com esses azulejos. A beleza de usar a largura percentual que usamos anteriormente é que agora podemos ajustar essa largura para ocupar 100% da visão em vez de 60, 40 e 33. Podemos usar 100 por cento para cada um deles. Lá vamos nós. Agora estão tirando 100 por cento da largura. Vamos ajustar o texto do título aqui. Agora pode ser um pouco maior, já que temos um pouco mais de espaço. Vamos ajustar as alturas da linha e vamos movê-la de volta para que fique um pouco mais longe da esquina. Parece bons altos aqui em baixo, parece que temos um pouco de descanso. Vamos em frente e ajustar isso para que possamos diminuir o tamanho do texto e podemos diminuir o tamanho aqui. Esse foi o nosso contato, você precisa ter certeza de que fazemos isso para o nosso link de rodapé. Na verdade, vamos fazer 100 por cento e vamos empilhá-los um sobre o outro. Vamos fazer 13 pixels. Lá vamos nós. Agora temos nossa visão móvel, e se olharmos para cima para dispositivos diferentes mais uma vez, notaremos que todos eles ficam ótimos. Perfeito. Somos nós construindo esta página do zero. Vamos avançar no próximo vídeo e construir uma página de modelo de exemplo que, neste caso, será a nossa página de projetos. 10. Contato: Um dos principais objetivos para o nosso site é tornar mais fácil para um potencial cliente entrar em contato conosco se eles quisessem fazer algum trabalho. Para este projeto, vamos combinar o uso de design de interação eficaz com um bom design de interface do usuário e layout, para criar um processo eficaz para as pessoas entrarem em contato com você. Neste vídeo, vamos abordar o que fizemos aqui, adicionando e projetando uma página do zero. Neste caso, vamos criar um modelo para a coleção do nosso projeto aqui. Então ele vai ser puxar e usar dados e conteúdo da coleta de dados que já criamos. Neste caso, este item de projeto aqui. Então o que vamos fazer é começar indo para a nossa seção ou um modelo. Vamos notar que temos uma página em branco. O item é exibido para nós aqui, mas não temos nenhum conteúdo exibido aqui. Então vamos usar muitos dos ativos que já criamos, começando com esta seção de Herói. Então eu vou seguir em frente e usar o Comando C, ou eu posso usar o botão direito do mouse e Copiar, em seguida, voltar para meus modelos de projetos, e eu posso colar. Lá vamos nós. Eu vou em frente e pegar o nosso, para voltar para casa. eu vou pegar a próxima seção também, e eu posso usar o Command C novamente, e voltar para nossos modelos de projetos e colar. Eu vou apagar este conteúdo aqui, então novamente, eu tenho aquele bloco div que está embrulhando tudo. Agora, só tenho o meu contentor de herói. Eu vou ir em frente e arrastar em um novo bloco div. Então, neste caso, eu vou apenas adicionar em nossos campos de rich text, e uma imagem para nos ajudar a começar. Lá vamos nós. Então, por fim, antes de eu começar a adicionar qualquer um dos conteúdos, vamos em frente e voltar para casa e pegar nosso rodapé. Agora, a razão pela qual eu quero mostrar a vocês como fazemos o rodapé, é porque nós realmente vamos criar um símbolo a partir dele. Então, um símbolo permite que você pegue uma captura de uma imagem, ativo ou um grupo de elementos como este rodapé aqui, e depois salvá-los para serem usados em outro lugar. Então podemos duplicar isso ou criar um novo símbolo em torno dele, vamos chamar isso de nosso rodapé. Observe que agora é um encapsulado neste verde e adicionado aos nossos símbolos aqui. Então, se voltarmos para o nosso modelo, em vez de copiar e colar, desta vez, eu simplesmente vou adicionar em nosso rodapé do painel de símbolos para que eu possa arrastá-lo diretamente para a parte inferior da página, e se rolarmos aqui para baixo, nós vai vê-lo. Agora, a beleza de usar símbolos é que se alguma vez fizéssemos alterações como, por exemplo, adicionar um link ou atualizar um link, ele seria atualizado onde quer que este símbolo exista. Portanto, não há necessidade de saltar em torno de páginas diferentes para fazer a mesma mudança. Então agora estamos parecendo que temos todo o conteúdo no lugar, mas eu quero ajustar tudo o que vemos aqui para se adequar ao estilo que estamos procurando. Então, em um vídeo anterior, eu arrastei em uma lista dinâmica elementos e nós o vinculamos a uma coleção diferente para extrair esses dados. Bem, neste caso, este modelo inteiro, está pronto para extrair dados de nossos projetos. Então, neste caso, eu posso simplesmente clicar em um objeto como este título, e eu posso escolher para obter meus textos do nome do projeto, e nós podemos vê-lo bem ali. Eu vou fazer exatamente o mesmo para a imagem de fundo na seção Herói, e eu vou escolher a imagem principal. Eu vou fazer o mesmo por esta imagem, lá vamos nós. Então aqui embaixo, eu também escrevi uma descrição do projeto para cada um dos meus conteúdos. Por isso, posso simplesmente vincular este texto a isso. Assim, criamos um modelo muito básico, mas um modelo que está puxando dados da coleta que já temos. À medida que adicionamos conteúdo adicional ou projetos adicionais, eles criarão automaticamente este modelo que vemos aqui. 11. Editoração: Uma vez que você terminar de construir seu site e adicionar todo o seu conteúdo, agora podemos publicá-lo ao vivo para o resto do mundo ver. Podemos publicar nosso site em apenas dois cliques simples. Assim, podemos ver nosso site ao vivo em qualquer dispositivo. Você também pode adicionar um domínio personalizado para que você possa publicar diretamente em seu próprio site. Então você publicou um site, e agora? A melhor coisa que você pode fazer é compartilhá-lo com o resto do mundo. Você pode usar sua rede existente e enviar e-mail para clientes anteriores ou potenciais clientes, você também pode publicá-lo em contas sociais como Twitter, Facebook ou Dribble. Uma das coisas mais importantes que você pode fazer é entrar em contato clientes anteriores ou pessoas com quem você já trabalhou no passado. Noventa por cento ou mais dos clientes que você recebe no futuro serão baseados em referências, com base nas recomendações de pessoas com as quais você já trabalhou. Também é muito importante manter seu site atualizado e atualizá-lo constantemente com novas informações sobre você ou alguns novos projetos que você fez com novos clientes. Se você retornou visitantes são clientes que voltam ao seu site dias ou semanas depois e o conteúdo ainda é o mesmo, isso pode dar o sinal de que você não está mais trabalhando ou continuando a assumir um novo trabalho. Com o Webflow, é incrivelmente fácil passar pelo CMS visual, que acessamos diretamente através do próprio URL de publicação. Depois de efetuarmos login, podemos fazer as alterações que desejarmos diretamente na página, incluindo editar algum texto ou trocar imagens. Assim que terminarmos, podemos ver todas as nossas alterações e publicar o conteúdo instantaneamente. Se quisermos adicionar conteúdo adicional como uma nova postagem de blog, podemos fazer isso aqui também. Assim como fizemos nas etapas anteriores enquanto na ferramenta Webflow, atualizar conteúdo é tão fácil quanto preencher os campos necessários e adicionar o conteúdo necessário e, em seguida, publicar diretamente no site. O que está acontecendo é que todo o conteúdo que adicionamos está sendo colocado na formatação adequada que argumentamos projetado para o site. Lembre-se, atualizar seu site não é apenas benéfico para fins de SEO, mas também para incentivar novos usuários que você ainda está atualizando e assumindo novos trabalhos. 12. Resumo: É isso. Nós cobrimos muito hoje, incluindo alguns princípios básicos da Web e desenvolvimento, bem como como como você pode atualizar facilmente seu portfólio através do Webflow CMS. Os próximos passos são todos com você. Esperamos que este curso tenha ajudado você a começar com seus sites, mas continuar a atualizá-lo, compartilhá-lo e obter novos clientes está tudo à sua disposição. Esperamos que você possa compartilhar este curso, tanto conosco aqui nesta comunidade, mas também em qualquer outro lugar. Estamos ansiosos para ver quais outras coisas novas que você cria usando o Webflow ou qualquer outra ferramenta. Esperamos que este curso tenha sido um grande primeiro passo na criação de seus primeiros sites. Mas também esperamos que você continue fazendo isso usando o Webflow ou outras ferramentas de web design para continuar construindo seu portfólio on-line e além.