Como criar seu portfólio online com o Gatsby

1. Introdução: Ei, o que se passa? Meu nome é Sandra Endo, e bem-vindos ao copo. Ajudou a construir seus artistas de honra do zero que temos. Agora vamos cobrir informação suficiente desta turma. Mas não se preocupe. Eu a quebrei em algumas partes. Esse Duncan dura para o primeiro bar. Vamos começar a aprender sobre os conceitos básicos de um portfólio de sites e como planejar seu conteúdo na segunda parte. Vamos começar a projetar um site desde quadros de vida até o design final. E então, no terceiro parque, vamos começar a implementar ou desprezar Peter Coat. Agora, se você não tem experiência com codificação, não se preocupe com isso. Eu quero tornar muito fácil para você entender os conceitos e implementou este hack no. No final, vou ensinar-te a polir o teu website online e que vou pedir-te que transfiras teu website na galeria de produtos da turma. Agora, se você estiver pronto, vamos passar para a próxima ação para que possamos continuar com a classe 2. Entender seu público: Ei, bem-vindo de volta. - Nada. Decidiu continuar com a aula comigo. Vamos falar sobre alguns aspectos importantes da construção de um desempenho de site. Quando eu era adolescente, eu comecei a construir sites para lucro, mas para ser honesto com você, mas então um site era apenas um requisito não algo para confiar em ter um negócio. Só alguns anos mais tarde, quando entendi que, para ter um site de sucesso , você precisava considerar muitas outras coisas além das ferramentas de design que tanto estávamos usando para construir um site. Então, se você quiser ter um site de sucesso, ele não tem algumas coisas que você precisa saber o para apenas começou a construir um. Qual é o meu público? O que é que eu tenho que o meu público pode encontrar valor nele. Qual é a mensagem que eu quero compartilhar? Qual é o objetivo ou o objetivo deste site? Queremos criar um marrom para mim? Queremos cadeira ou vender minha arte. Deseja aumentar o meu seguimento? Talvez você só queira ter uma presença online e tudo bem. Mas uma vez que você entender por que você precisa do seu site ou por que você está construindo seu site. Então você pode realmente começar a trabalhar com seu contato. E uma vez que você entenda, o que é que seu público precisa de você? Em seguida, você pode começar a pensar sobre as maneiras de envolver seu público quando você estiver em contato. Não, na próxima seção da turma, vamos começar a olhar para a anatomia fora do nosso site, executar você e então vamos começar a trabalhar com o conteúdo que vamos criar para ter um site. 3. A anatomia de um site de portfólio: Ei, o que se passa agora? Vamos falar sobre a anatomia do site do portfólio dela. Você é perfeita. Website é basicamente sobre três coisas principais. Quem você é, o que poderia fazer. E o que você quer do seu público? Estes itens combinaram desafio. O tipo de prisioneiros que tiram desaparecidos. Não. Lembre-se que seu site precisa ter um roxo sabendo exatamente o que é seu ouro com mensagens é crucial para ter um site de sucesso. Cada seção do seu site deve servir os roxos gerais tendo um propósito e, em seguida, declará-lo como sua missão vai torná-lo mais interessante. Sua personalidade. Negócios sobre pessoas. Isto é importante saber. Você deve entender que há uma pessoa do outro lado da tela que pode estar considerando demais Você. O que um estranho total sentirá por você quando você chegar ao seu site? Não apenas alugado seus títulos em credenciais, Crianças, Crianças, passatempos, paixões e spiels. Suas capacidades. O que você pode fazer por seus clientes. Além de mostrar suas habilidades incríveis com seu portfólio ritual criança quem você é, como você reage aos desafios seu processo de design e habilidades de raciocínio técnico seus serviços. Se você quiser ficar mais alto, o que tornará mais fácil entender o que você pode fazer por seus visitantes. Em seguida, apenas alugou um monte de ferramentas que você usa. Diga aos seus visitantes o que você pode fazer por eles em inglês simples. Você desenha Birchers? Você faz fotografia. Você faz cartões de visita com o layout do site? Provavelmente assinado. Seja lá o que for lançado, diga em inglês que é importante. Execute você vai. Seu pro folio não é sobre sua fantasia. Os sinais. Trata-se do tipo de valor que você fornece aos seus clientes para o seu trabalho. Além disso, você não precisa camisar todos os projetos que você trabalhou na igreja. Seus mais impressionantes. Um apelo à ação. Não se esqueça que o nosso site Custom Purples. Queremos que os nossos visitantes façam alguma coisa. Depois de digitalizar seu site, tenha medo de oferecer uma chamada à ação se você quiser aumentar o seu seguimento. Só pedi para ele te seguir, se quiser. Oh, você quer o dedo do pé. Você está? Apenas faça isso. Um apelo à ação As crianças estão empurrando, mas encorajam um blog. Seu conteúdo funcionará para você no futuro quando alguém procurar algumas de suas habilidades . É aí que seu conteúdo entra em ação. Conteúdo da carta. Orientar seus potenciais clientes até você. O recurso está livre. Sábios são livres. Branco é como um outdoor gigante. Basta deixar você bloquear conteúdo. Justin para guiar seus clientes através de você. Você já viu que a maioria dos melhores designers para recursos é improvisar? Eles não estão dando seu trabalho. Eles estão usando uma conta ou para sua marca, use o mesmo no e-mail. Menos. Vamos ser honestos. Esperemos que o site não seja nada. Seu negócio virá em uma base diária. Uma boa maneira de manter sob a mente dos visitantes é construir no meu rosto. Mas agora você deve ter uma razão convincente para seus visitantes cantarem. É aqui que seu preconceito gratuito e conteúdo chama à ação. Não se esqueça de fornecer valor em sua mensagem. É assim que sua fita mental menos saudável. Agora vamos fazer uma recapitulação. Seu site deve ter um propósito. Mais personalidade carregador, seu copo de belezas, seus serviços e seu trabalho anterior. Seu maior número de atos por inação do seu PC e algumas maneiras que você tem um site mais bonito é compartilhar conteúdo regular fora do que você faz quaisquer artigos interessantes sobre o seu recurso de trabalho da indústria é compras gratuitas para que eles possam trabalhar para você no futuro e construir um útil lançado para que você possa manter seus visitantes e clientes atualizados com seu negócio. Não, vamos passar para a próxima seção para que possamos continuar com o design do site. 4. Criando nossos wireframes: Ei, o que se passa? Bem-vindos de volta ao vidro. Agora estamos prontos para começar a trabalhar com os amigos que costumávamos manter. Faz tudo soar mais. Não se preocupe. Você só se usa caneta e papel assim. Não, lembre-se que vamos querer fazer é cadeira de personalidade. Qual é o nosso propósito? Fora do site. E qual é a ação cultural que queremos tomar com os visitantes para que você possa brincar com o campus em branco e começar a trabalhar com o “Mas eles “querem me enquadrar no site e outras coisas. Nick, digamos que você quer ter, tipo, tipo, um tiro curado. Ok, então ele vai ser manual, então eu não estou apenas me decidindo aqui. Basta ter em mente o que temos visto. Temos visto um pendurado nas seções anteriores do vidro que fazer o meu vai querer cadeira com o seu é seu. Você está observando personalidade. Não se trata apenas de fazer a comunidade projetada lá. É mais sobre quem você é uma pessoa, porque lembre-se que as pessoas vão trabalhar com você em um produto eventualmente. Então eles querem saber quem estão escondendo e então como é trabalhar com você nisso . Então, basta começar ou completar o seu portfólio, então provavelmente terá algumas cartas de lá. Tipo, você sabe, um pequeno horário aqui provavelmente terá, tipo, algum tipo de ilustração lá. Eu não sei. Eu só estou fazendo isso te apresentar cedo uma foto dele mesmo, você sabe, qualquer número que eu faça, assim como este é um site 19. Então eu normalmente gosto de ter, tipo, uma seção de voluntários, provavelmente algo parecido, então eu acho que eu acredito e se ele fosse um monstro? Tipo, eu acredito que produtos realmente centrados no cliente é uma chave para queimar, fazer um produto sucesso ou algo assim. Então isso é algo que eu normalmente usei meu desempenho. Normalmente coloco uma noite aqui. Não, isso não é algo como uma faca ou algo assim. Desabilitar de você. Vá. Então. Descrevo os meus serviços aqui como não. Então provavelmente você tem, tipo, um pequeno grande eles são como e é assim que você descreve tarde. Você está servindo cidadão para parar com isso, certo? Então? Então, basicamente, o que queremos fazer é continuar trabalhando em um onde amigos e começar a fazer direções diferentes fora de quadros para cima, nos fazer sentir confortáveis, e então o quê? Estamos prontos com os eram amigos. Podemos começar a implementar seu design projetado para bem, como você. Algo que precisamos fazer de você. Esse plano está funcionando? Basicamente, um site Thio. Aquele estojo de conchas. Lembre-se que a personalidade pessoa compreendendo os roxos fora do site. Você quer mostrar seus serviços quando eu tiver que fazer um contato ou uma eleição oculta. Então, basicamente, se você quer ter, uh, semana, meu amigo, é como se fosse você muitos lá. E você tem mantra aqui. Eu chamo os serviços, sabe? Então, provavelmente, você terá uma pequena nota fora do seu portfólio. Então continue aqui. Você tem uma pequena cultura de contato. Veja, informações senadoras e o medo antes do que você quiser, certo? Então é basicamente assim que você quer um construtor? Seu site? Dissidentes. Normalmente cientista aqui. Não sei o que quer que mostre. Usa a tua imaginação e começa a cortejar com os meus amigos para o teu assassino lá fora. Tudo bem, então vamos passar para a próxima seção onde podemos manter o design Remember 5. Crie seu site: Ei, o que se passa? Bem-vindo de volta. Agora, Senhor, comece a trabalhar com o design do site. Eu não estou usado relatório da Comissão para esta seção, mas livre para usar outros dois que você está confortável com. Então , se puder me dar o meu de lado, estou repetindo. Isto para desenhar todo o elenco é que você quer torná-lo um C para seus clientes para saber quem você é, o que você pode fazer por eles e depois deles para o que eles têm a ver com o seu site. Faça sobre sua cultura. Ação é parceiro pronto para você. Portanto, não se esqueça de adicionar esses detalhes ao design do seu site. Além disso, outra coisa que eles vão lembrar é que antes de começar a trabalhar com seu design, é muito importante que você já tenha seu conteúdo alinhado. Então você não usa medicamentos do norte e coisas assim porque seu design funcionará melhor se você realmente tiver que se contentar porque, você sabe que projetar para o seu conteúdo é melhor do que adaptar seu conteúdo para este sinal que será personalizado antes ruim. Depois disso, sinto muito. Portanto, não se esqueça de ter o seu conteúdo muito antes de começar a trabalhar com o seu design, então você pode seguir sozinho este pendurado seu site. Como podem ver, estou construindo os elementos de um site. São elementos muito simples e básicos. Existem bibliotecas na Internet que podem mostrar-lhe os estilos de amigos fora de componentes como diferentes layouts, a ciência que você poderia usar. Estou usando cuidados científicos básicos, um ótimo para os serviços. Esqueça o portfólio e o formulário de contato para permitir que os visitantes me contatem anos e me enviem uma mensagem. A criança heroína que estou usando. É bem simples. Estou usando fundo preto aqui, mas você conduz uma necessidade. Meu show. Você pode fazer o que quiser. Este é o seu projeto. Coloque sua personalidade nele, apenas suas habilidades de design para destacá-lo do resto do mundo. E certifique-se de que você sempre entender ou você sempre tem em mente o que você quer de seus clientes e mostrar quem você é e boom, Não dizendo para o seu site. Continue trabalhando no seu projeto e tenha paciência comigo para a próxima seção da turma. Tudo bem, divirta-se 6. Criando seu site: Ei, o que se passa? Bem-vinda de volta. Não, seria assinar ou site. E estamos prontos para trabalhar. Implementar em artistas pendurar com frio. Então, para esta classe, o que eu decidi usar é o ser de Deus, que é uma estrutura de gerador lateral estática. Isso é fácil para você começar. O que eu fiz para a aula, como eu disse antes, é que eu criei, uh, pequeno modelo para você começar e que lhe dará uma vantagem para começar a construir seu site. Ok. Café da linha dele ali. E você acabou de mudar o nome do seu site, que é Fuller, que Deus estava indo bem por aqui. E você acabou de mudar o nome do seu site, que é Fuller, Então eu vou para o seu nome agora e depois Basta manter. E você só tem que esperar até que o projeto seja clonado em seu carro drive. E então Deus Bean faz É coisa para criar seu site. Ok, então isso é feito aqui eu quero fazer é ir para o site de fotos que acabamos de criar. E então, se você quiser ver o site depois de correr, nós só temos que fazer isso, executar este cartão, então que ser estrela real, seu motor estripador, nossos sites para que ele possa estar pronto no navegador. Então temos que navegar aqui e vamos para hoste local ao longo 1000. Então boom, isso é tão fora que acabamos de criar basicamente os soldados do site prontos porque ele só precisa mudar pequenos detalhes sobre seu conteúdo e coisas assim. Vamos mergulhar para decodificar um pouco de dívida e ver o que acontece aqui. Still Chair, que é a pasta que acabamos de criar com que tem algumas pastas. Você só pode trabalhar como modelos, dinheiro aqui e os contos realmente do site. Está nestas lojas. Pasta, que terá um ativo em pacientes em nosso set, terá imagens, espectro de estilo e todas as informações de estilo dos pacientes terão índice tema, que é o arquivo que compositor casa, página ou índice de fora. Então, Então, aqui estamos transmitindo os componentes que criei para você, os serviços de toque da barra de navegação fizeram contato, então seriam desejos baseados em reagir? Só temos que criar componentes a partir de cada elemento do site. Então aqui, por exemplo, o apenas os detalhes do título como, por exemplo, ele diz aqui agenda, mas basicamente dizer para aquele estúdio Assange ou o que eu assistiria ele muda dramaticamente. Então, sério, você é o que eu acabei de mudar para o seu nome ou seja lá o que for. Os principais estudos que têm é o futuro competente título A C C, que é Olá, eu sou Jane Doe, que é este. E depois o subtítulo. Estes excedem os produtos e serviços de sensação. Nós só temos que, você sabe, mudar Chain cuidou de mim aqui, e então ele vai mudar no site. Então, Então, aqui está o Houston em uma pequena empresa de desejos embrulhando. As empresas temem os serviços de linha de ataque e no final da comida, ou quais são eles? Qual é? Esta é a seção ali. Você pode mudar o rodapé se quiser. Em alguns nós fontes Ling. Mas seja qual for o líder social que se inclina e coisas assim. Então eles estão tentando torná-lo simples para estes. Uh, se você quiser ir para os detalhes lá, então a linguagem de ataque vai ser aqui. Estamos importando arquivos. Desejos em US inspetores símbolo positivo. Isto está arquivado. Se você quiser alterá-lo, você pode apenas alterar os três lugares que ele tem arquivo ou alterar o nome do arquivo. Faça isso, o que vai mudar. Então assassinos fizeram. Meu tentou que eu tenho para você, que é um slogan. Aqui. Você pode mudar isso. Há o símbolo, os símbolos reais. Você quer mudar isso? Lembre-se, você tem que substituir essas linhas. Em seguida, dois serviços, que é o arquivo TSX de serviços. Uh uh. O que eu faço, por exemplo, então você muda isso então nós só temos que mudar esse sexo e eles são como, quando nós temos, são os serviços que nós fazemos aquela consultoria, coisas de branding que ciclos de sua aqui de eu comprei um claro também. Então, após concessões para branding de burro inspetores branding BG novamente Se você quiser mudar três ícones, você só tem que substituir o arquivo ou mudar o nome do fogo aqui. Ok, então isso é para status. Eles querem o portfólio aqui está portfólio são, por exemplo, andar incrível e então quem muda o título? Você pode alterar o conteúdo aqui e, em seguida, você alterar o projeto. O nome está aí, Jim. Brad, este sinal, por exemplo, de história e depois boom. A mudança de título. Você pode alterar o conteúdo fora do líder do projeto da perna e arquivo do lado da Web, que na verdade é o mesmo. Então este é um muito confiante e os serviços de madeira pop, então você pode ver que eu estou importando de eu disse, minhas ações. Você pode mudar o nome dos componentes aqui, e vai funcionar tão bem quanto você pode ver. Funciona bem que se você quiser ter mais dentro, que é você só tem que começar a trabalhar em frente. Você está arquivado aqui e só tome chá. Crie mais desses elementos, se quiser. Então nós temos um contato que é basicamente nós estamos importando mais competente chamado formulário de contato aqui, que é esta confiante que estamos usando basicamente o formulário de contato uma empresa que cria isso que cria o formulário para nós, que é este formulário aqui. Se você quiser torná-lo útil, nós só temos que substituir sobre este método aqui, o A p I, ou a parte de trás e eu recebi os valores e envia o e-mail para você. Então, basicamente, isso dizia quatro ou 40 sites frios. Vamos para a próxima seção para que possamos ver esses arquivos e ele deve ter algumas coisas assim . Ok, 7. Como adicionar estilos ao seu site: Ei, o que se passa? Então, uh, com você viu na seção de produtos caminho entrou nos detalhes da gravação. Onde você muda seus dados? O conteúdo e o site de repórter estão prontos? Então vamos passar para o estilo que, como eu disse antes, é sobre ativos. Então vamos para estilos aqui e os estilos é preparado em diferentes pastas No layout temos a base da informação base. Aqui estão os fundos que estamos usando. Quer mudar isso? Você só tem que fazer como, por exemplo, off sons abertos aqui então nós onde ele toca o nome das deformas aqui e então aqui ele muda o formulário automaticamente. Segundo, temos a parte da cor do medo. Você pode mudar seu 1º 2º 3º 4º e 5º e eles basicamente mudarão a chamada ou algo fora do site para você. Ok. Por exemplo, se você quiser usar vamos ver 69 ele definitivamente vai mudar é e, em seguida, coisas assim. Ok, então esses detalhes você provavelmente pode Norden olhar para eles para ver o que está acontecendo aqui. Isso tem os estilos básicos fora do corpo, que vai replicar os componentes internos fora se você não mudar nada disso. Como, por exemplo, estou usando para família para um que basicamente é a correção dessas vitaminas aqui, uh, as cores, você vê, é texto. Você pode alterar isso nos elementos de cabeçalhos. A cor é a primeira. Quer mudar isso? Você pode simplesmente fazer isso. Se você quiser mudar a tomada nove aqui, eu recomendo que olhar para o que está acontecendo com CS diz são, que é basicamente foi o que estamos usando aqui. Ok, então vamos passar para o rodapé aqui, que é basicamente estilo para 1/4. Que é esse que vai para o federal, por exemplo, por exemplo, que é basicamente a barra de navegação onde temos o nível aqui e depois o homem que você está lá. Ok, então o que é fazer substituir o nível aqui barra de medicação íntima por esses detalhes . Se você quiser ver a animação de sua é basicamente estas linhas lá. Então, basicamente, o que estamos tendo aqui é que temos uma pequena fama em com um segundo para cada letra do Lego do andar baixo. Basicamente, se você quer ter o seu tipo de nível, mel fez isso. Você só tem que verificar em cada letra de cada elemento do seu tipo de amante e tentar colocar lá dentro. Isto não vai mudar se o seu imposto local tiver elementos diferentes. Você só tem que fazer isso como, por exemplo, o elemento temp ou 11 elementos e coisas assim. Ok, então eu tenho uma animação diferente para você. Por exemplo, esta é a fé em que está em animações mexicanos. Mas eu não posso. É como luz de baixo, como passeios como a esquerda. Se você quiser mudar de animação de roupas, por exemplo , estes, é como baixo nível. Vai cair em vez de apenas negociar. Ok, então essas animações são para você. Você pode fazê-las o quanto quiser. E eles são muito simples de usar, por exemplo, de polígonos Deite-se. Esta está OK. Então, Então, é só isso. O Ok, Então, os elementos do SPD arquivado como você pode ver em fatores para tem cada elemento, é uma carta de modo que é assim que nós usá-lo. Certo, isso é para a barra de navegação. Vamos passar para o herói que atirou no assassino Chuck aqui, por exemplo. Está fazendo o fundo preto. Se você quiser fazê-lo como para um templo Branco. Podemos fazer isso também. Não vai fazer nada aqui. Por exemplo, queremos alterar os gravadores nas configurações em público. Nós apenas para um templo 40 preto, e então você vai mudar de preto. E então ele está chegando até você como torná-lo preto também. E isso vai mudar isso. Ok, então, segundo para a barra de navegação se você era Otto e nós mudamos a barra de navegação de, por exemplo, brancos aqui e nós vamos mudar de vôo se você quiser. Teoh que, uh, você gosta de fazer esta bola fundo eu mesmo lá depois da vista? Estes direita. Por isso, se quiseres acrescentar, minhas instituições de caridade têm de fazer isso. Não se esqueça de usar o cachorro aqui e então cortou meu peito era o sobrenome do arquivo. E então você só tem que provar os cinco jogos em casa aqui. Ele vai olhar para isso, como assim que você vê, é bastante simples, e é fácil para você começar a trabalhar com a assinatura fora do seu site. Tudo bem, então eu o encorajo a continuar trabalhando no site da próxima seção. Queremos ver como podemos juntos site pronto para permitir. 8. Publicar seu site: Ei, o que é isso? Bem-vindos de volta à aula. Não que tenhamos sido projetados prontos para a faculdade. Vamos dar uma olhada no que precisamos saber para polir sites on-line. E então nós vamos chegar para algumas conclusões sobre decisões e estamos prontos para ir agora para a publicação dentro quando para rastejar são o site de Deus para o público. Então o que precisamos fazer é executar o seguinte Deus comum ser construído. Então ele entra. Ok, então Deus precisa se preparar para o nosso site para construir em pasta tudo o que precisamos fazer a fim de publicar um site. Então, agora a pasta e o site estão prontos para publicarmos a si mesmos. Vamos ampliar, que está hospedando uma plataforma que vai usar, a fim de polir sua aplicação, você vai para o número cinco ponto com uma conta. Então por que você tinha uma conta? Você verá algo como, Ok, então temos duas opções para o site público. O 1º 1 É muito primitivo usá-lo de um grande balde. Sai fora! Seja qual for. Obter provedor de custos que queremos usar se você não apenas obter no momento. Não se preocupe com isso. Temos uma queda de jaqueta ideal para nós também. Então, o que precisamos fazer? É para ir ao site de pastas, distorcê-la aqui, e então nós vamos apenas metade da pasta pública e aqueles que estão caindo aqui. Ok, então vamos esperar até que ele se prepare para nós. Então, agora, o que o membro Devices está fazendo, ele está criando a política de hospedagem para nós. OK, então como você pode ver aqui, decida que já está publicado. Então, o que você era, Capitão? Agora é Do clique aqui, então. Seu site. Está bem, como podem ver, está tudo aí dentro. Mamãe tentou o que eu faço. Contato de trabalho. E é isso. Certo, então estamos prontos com um site. Se quisermos usar nosso formulário de contato para ser, quero prepará-lo. Todo capaz de trabalhar agora. E se eu tiver que ter algumas funções que poderíamos usar informa dessa forma poderia apenas usá-las a fim de fazê-lo funcionar para nós. Há uma recomendação aqui ou trechos de código de exemplo ali. Então eu recomendo que você, Teoh, vá para a documentação e veja o que você tem que fazer para tornar o seu mundo de contato firme. Certo, então agora, o que você faria? Você site? É fazer a demanda pronta e coisas assim. Então nós temos que citar configuração aqui, por exemplo, nós podemos mudar o nome ao lado para futuro talvez. E então eles o assunto de Mayflower Abu, vai mudar um pouco. Então carro futuro, podemos contar com domínios também aqui. Agora, se eu puder ter algumas documentações que você pode ler para que isso aconteça. Como, por exemplo, que a minha gestão você pode adicionar um personalizado vindo aqui e, em seguida, você apenas seguir a documentação e coisas assim. Ok, então, uh, nós já estávamos no site. O que precisamos fazer agora e isso encoraja é manter a guerra sob conteúdo em seu projeto e compreensão. Faça roxas o que você quer de seu site, e, em seguida, prepará-lo para puxar cada um. E não se esqueça de site político para a galeria de projetos fora da classe e continuar trabalhando em seu design. Muito obrigado por me seguirem nesta aula. Espero que goste. Isso fez Você pensa sobre como você constrói sites e que a classe e as coisas que eu disse durante a aula são úteis para você. Muito obrigado novamente e divirta-se.