Crie um portfólio de sites do zero usando HTML, CSS, jQuery, PHP

1. O que você vai aprender neste curso?: Ei, pessoal, aqui em baixo. De volta com outro curso para você, este aqui. Vamos construir um modelo de perfil freelancer simples de uma página. Então deixe-me mostrar algumas coisas sobre isso que podem estar interessadas. Você pode interessá-lo em fazer este curso, então comece logo no topo. Eu tenho, ah, um desses pequenos tipos de voar para fora menus como este usando algumas transições CSS aqui. Então isso é algo que vamos passar. Ah, neste nós rolamos para baixo através deste curso, nós apenas temos o tipo geral de HTML e CSS design e aparência e assim força, vamos falar sobre isso e algumas das coisas. Ah, que eu ouvi dizer que eu acho que fez isso parecer muito melhor. Nós também temos uma seção de portfólio com pop-up. Você vai ver aqui que nós podemos realmente passar e tipo de percorrer estes. Tão certo que você tinha que fazer isso e, em seguida, vai descer para o fundo. Na verdade, temos um formulário de contato comigo. E se preenchermos isso e eu colocarei um texano idiota aqui, pegue a citação. Isto vai realmente enviar este formulário via Ajax e, em seguida, dar-nos um responsável irá exibir uma mensagem. Sucesso ou fracasso baseado no que recebemos de volta. Então, apenas para saltar para o código um pouco, isso é uma espécie de front-end. Claro que você vai aprender uma tonelada de HTML. Também vamos construir um sistema de grade que você pode arrastar e soltar em diferentes projetos. E isso está usando grade CSS. Então vamos passar por esse multi vou te mostrar como eu construí esse menu. Ah, usando a transição CSS. Então nós temos isso. Nós também vamos entrar em alguns do JavaScript para lidar com algumas coisas diferentes com o menu . Além disso, você mostra algumas opções para diferentes maneiras que você pode lidar com o menu também. Claro, temos o manipulador de formulários Ah, para a forma que estamos construindo via Ajax. E então temos nosso script PHP aqui, a fim de lidar com essa solicitação. Ah, envie o e-mail e assim por diante e nos dê nossa resposta de volta. Então, novamente, um monte de html ah, muito CSS algum script ah Java decente e algum PHP, bem como todos os tipos de se juntar neste curso baseado em projeto para construir este modelo freelancer. Então, se isso é algo que você está interessado em se inscrever no curso, e eu estou ansioso para vê-lo na aula. 2. Como aproveitar ao máximo este curso: Ei, tão rápido antes de mergulharmos nas porcas e parafusos deste curso, eu só quero fazer algo bem rápido sobre como tirar o máximo proveito deste curso antes de eu entrar tão rápido quanto você passar pelo curso. Se você gosta do curso, eu realmente apreciaria se você me deixasse, Ah, revisão do curso. Isso ajuda uma tonelada. Então, se você pudesse fazer isso, eu realmente agradeceria. Além disso, não se esqueça de verificar meu perfil e me siga até lá se você quiser ser notificado por compartilhamento de habilidades. Quando faço upload de novos cursos, tento fazer upload regularmente. Então, se você quiser ser notificado quando novos cursos forem carregados, apenas certifique-se de me acompanhar no meu perfil. No entanto, isso fora do caminho, vamos falar sobre como tirar o máximo proveito deste curso. Então, uma coisa que eu quero deixar claro sobre isso é que este é um curso baseado em projeto, então neste curso, nós vamos mover muito quente e pesado através de como construir este site, e nós não vamos gastar muito tempo em uma espécie de indo para explicar como uma linguagem como HTML CSS ou PHP ou JavaScript funciona. Ok, então eu sou realmente esse tipo de suposições. Ah, um pouco de uma base de conhecimento, de familiaridade, pelo menos com essas línguas. E então eu vou te mostrar como fazer essas coisas. E então eu só quero fazer essa distinção disso. É mostrar-lhe como fazer algo específico com a língua, não necessariamente ensinar-lhe essa língua em profundidade. Se você é algo que você quer fazer. Se isso é mais o que você está procurando, então você realmente quer conferir Ah, curso específico de linguagem onde eles onde alguém vai fundo para explicar quais idiomas . Então, um exemplo. Posso ir ao meu perfil bem rápido. Eu tenho este guia para iniciantes PHP que é um em profundidade. São oito horas apenas indo para o PHP e tentando explicar tudo o que você gostaria saber sobre o PHP. Guia para iniciantes do PHP. São cerca de 3,5 horas. Faz html uh, 3.5 horas que faz exatamente o mesmo tipo de coisa. Mesmo esses cursos de programação orientados a objetos estão indo especificamente para apenas programação orientada a objetos , que é uma maneira de fazer código PHP e assim por diante. Então eu só quero ter certeza e fazer essa distinção entre um curso baseado em projeto e um curso específico de linguagem, porque um curso baseado em projeto como este vai se mover meio quente e pesado, e é meio que em você preencher o lacunas. Ah, que você pode ter com uma linguagem particular enquanto você vai junto. Então, se você está descobrindo que você está correndo em lacunas, essa é uma espécie de maneira de resolver isso. Ah, e novamente, este curso é apenas para mostrar como juntar certas coisas de uma certa maneira. Então é assim que tirar o máximo proveito deste curso. Minha sugestão. Se você encontrar uma grande lacuna, eu iria e preencheria essa lacuna antes de você seguir em frente, porque é que realmente vai ser. Tudo se baseia na coisa antes dela. Então vai ser difícil para você continuar com o curso se você tem essa grande lacuna de conhecimento lá dentro. E isso também é uma das coisas boas sobre cursos baseados em projetos. É que eles meio que ajudaram a expor esse tipo de coisa. Isso pode parecer negativo, mas na verdade é positivo. Ajuda a expor onde você pode ter seguranças porque estamos reunindo HTML, CSS, JavaScript e PHP. Você sabe, você pode nunca ter feito todas essas coisas juntos antes, e nós estamos fazendo, você sabe, Ajax e nós estamos fazendo transições CSS e traduzindo e algumas coisas que você pode não ter feito antes. E mais uma vez, ajuda a expor esses buracos. Então agora você sabe, e então você pode ir e preencher essas lacunas. Ok, então esse é o valor de um curso como este. Isso não se afaste disso. Não se preocupe com isso. Justo quando você acertar aqueles buracos indo tentando e preencher essas lacunas como você vai junto. Então, novamente, é assim que tirar o máximo proveito deste curso. Esperemos que isso o ajude como você passar por isso 3. Crie o sistema de grade responsivo usando a CSS Grid: A primeira coisa que eu quero fazer aqui é realmente construir o sistema de grade porque nós realmente precisamos disso antes que pudéssemos fazer qualquer outra coisa com o site deles. Mas eu tenho que assinar, meio que preparar o projeto aqui. Então eu vou entrar na minha estrutura de pastas aqui. E sob este modelo um, eu vou apenas criar uma nova pasta chamada Trabalhando o Fold of That. Eu sou eu construí isso em Anteriormente é Freelancer Ah, 001 é o que eu estou chamando para agora. Mas eu vou usar esta pasta de trabalho para o que vamos fazer aqui, e então eu vou dentro deste criar um novo arquivo chamado index dot html e porque estamos usando Ajax, onde estamos enviando para um script PHP, mas porque estamos fazendo isso por Ajax, não precisamos fazer isso em arquivo html. Algumas pessoas muitas vezes me perguntam sobre isso, então eu vou fazer isso. Um é um arquivo HTML, só para que você possa ver isso. E depois vamos abrir este ficheiro e fecharei isto por enquanto. E eu quero fazer uma pré-visualização do arquivo de vida e então nós não temos nada nele, então nós não estamos mostrando nada aqui, mas agora nós podemos realmente abrir esse arquivo de volta e vamos em frente e criar uma nova pasta chamada CSS e dentro que vamos em frente e criar um novo arquivo chamado grade dot CSS. Agora, estou colocando essa grade. Vou colocar a grade e o menu em seus próprios arquivos CSS. A razão pela qual estou fazendo isso é porque estes são feitos para ser uma espécie de arrastar e soltar arquivos que você não tem que reescrever constantemente para cada projeto você pode simplesmente arrastá-lo para um novo projeto. E ele está lá pronto para você entrar em seu bom sistema que você deseja construir. Uma vez que você construí-lo, como você quiser, você pode novamente. Você só vai usar isso. Então se torna uma espécie de como o seu próprio bootstrap muitos nesse sentido. Ok, então vamos em frente e abrir que este ponto grade CSS up. E agora podemos fechar isto. E então nós vamos estar usando grade CSS. Aqui, deixe-me ir em frente e apenas ah comentário. Isto são marcados este título corretamente este e é assim que eu tendem a fazê-lo. Quero dizer, você pode fazer como quiser, mas Ok, então há essencialmente três coisas principais que precisamos aqui. Se você está familiarizado com grades, precisamos de um contêiner. Precisamos de uma fileira, e precisamos de colunas. Certo, então vamos começar com o contêiner. É bem simples. E tudo o que vamos fazer aqui é fazer margem esquerda, automática e margem, direita, auto. E, essencialmente, o que isso vai fazer é apenas centralizar para nós. E então eu fiz batendo à esquerda de 15 pixels. Eu só gosto do jeito que isso parece. Você pode brincar com isso, mas isso depende de você. Mas isso é essencialmente o recipiente. Tudo o que realmente fazer é apenas uma espécie de centralização. Ah, o elemento do recipiente. Eu vou te mostrar aqui em um minuto, isso vai parecer em um segundo, mas ah, e depois dar um pouco de estofamento. Então, parece que isso não tem realmente nada para um graduado CSS. Isso é apenas colocar nosso contêiner funcionando aqui. Tudo bem. E então nós vamos fazer Ah, nós vamos fazer a nossa fileira. E é aqui que começamos com o CSS. Coisas boas. Então, para grade CSS, precisamos fazer grade de exibição. Então, isso diz essencialmente, “ Ei, vamos usar o crédito CSS”. E, em seguida, para isso, há muitas maneiras diferentes que você pode usar CSS grande. E você pode obter um layouts realmente complexos e assim por diante, mas um sistema de grade realmente bastante simples. Então vamos fazer modelo de grade, uh, uh, colunas de modelo. E então vamos usar a função de repetição aqui, e vamos fazer 12 e depois um fr. Ok, então, essencialmente, o que isso está dizendo é que este é o nosso modelo para nossas colunas. E então o que estamos dizendo é que queremos ter 12 1 fr. Coluna. Então o fr é uma espécie de esta flexível, uh, esta unidade flexível que vai preencher o espaço restante essencialmente, o que isso nos dá é que nos dá 12 colunas como você está acostumado em um sistema de grade de bootstrap ou qualquer coisa, e então eu vou fazer Grid Gap 20 pixels como este. Então essa é apenas a lacuna. Ah, isso vai ser entre as diferentes colunas. Agora que temos isso,é tudo o que precisamos fazer. Agora que temos isso, para uma fileira. Você vai ver o quê? Grade CSS. Isto é muito simples. Agora nós só precisamos fazer nossa coluna, então eu vou mostrar um exemplo de uma, e então nós vamos apenas tipo de cair no resto. Então ligue para um. E então esta vai ser uma coluna com coluna, e nós vamos fazer grade. Ligue para ele e depois passe um. Ok, agora você está vendo todos esses ares aqui, porque parece que meu i d aqui não reconhece todas essas coisas novas e chiques CSS boas. Mas este ano é bastante simples para uma coluna com “Chame-o”. Nós apenas definimos a coluna da grade para abranger um. E como você deve ter adivinhado para um dois, ligue para ele com coluna. Então definimos a chamada da grelha, hum, para se estender para assim. Ok, então é bem simples. Eu vou, em vez de ter você tipo de me ver digitar o resto disso, eu vou apenas deixar cair no resto disso. Então, de três a 12 aqui. Então você pode ver novamente Coluna Juan span coluna Juan para abranger para acalmar três vão três. Exceto que você está na linha para 12. Então isso nos dá nossa inteligência de 12 colunas. Isto é tipo outra vez. Tipo o que você usou para Bootstrap. Estamos fazendo isso agora, uh, uh, com a grade CSS. Em seguida, eu vou criar um tipo de classe de utilidade aqui, que não é sarjeta. Então isto é, se quisermos não ter uma sarjeta, vamos usar isso na seção de portfólio. Então nós vamos fazer grade, chamá-lo de gap, e vamos definir isso para zero, que se livrar do espaço é o espaço entre as colunas e então nós só precisamos fazer nossa consulta de mídia. Então nós temos três muito fáceis que estavam indo para fazer na mídia e vamos fazer homens com 999 ou 92 pixels. Nós vamos atingir esse ponto de ruptura, e nós vamos ah, apenas mudar o tamanho do nosso contêiner e nós vamos fazer com nove centenas, 70 pixels. Então isso é apenas encolher o recipiente. Esta é uma espécie de grade fixa padrão. Ah, aproxima-te. Quando estamos em 992, encolhemos o contentor. Então, tudo dentro dele encolhe com ele, ok? E vamos fazer a mesma coisa para acima de 1200. Então, na mídia e nós vamos fazer homens com 1200 pixels como este e, em seguida, contêiner, e vamos definir isso para uma largura de 1140 pixels como essa. Certo, Certo, dependendo do tamanho da tela, vamos encolher ou expandir nosso contêiner. Coisas bem diretas lá. Este é um pouco mais longo. Isto é para eu só vou largar este, e este é um pouco mais longo, mas isto é para as colunas. Então, se ficarmos abaixo de sete ou 786 768 pixels ou abaixarmos todas as colunas, vamos mudar a grade 2 12 Então o que isso faz é essencialmente torná-los abaixo 768 pixels. Vai ser qualquer coisa desse lado a lado, então você tem três caixas. Eu decido que vai espremer aqueles para estar em cima um do outro, que é o que você espera de, ah, responsivo. Ótimo aqui. De modo que é isso. Esse é o nosso sistema de rede. Com CSS grid, você pode ver que é muito mais fácil e muito mais simples por causa das ferramentas que agora temos em CSS cred. Então, vamos até aqui pegar o Doc e vamos fazer isso. E então vamos em frente e vamos incluir nosso arquivo CSS por um segundo aqui para que possamos dar uma olhada nisso. Então nós vamos fazer vazamento vai limpar isso aqui em um segundo, mas vamos fazer folha de estilo como este, e então nós vamos fazer um treff e nós vamos fazer iguais e, em seguida, nós podemos usar para CSS barra grade dot CSS como este. Ok, então isso deve cair em nosso sistema de grade e, em seguida, podemos fazer um monte de vezes a maneira que isso é feito como você vai fazer seção e, em seguida, dentro de que você vai fazer recipiente. Classe div é igual a contêiner. Dia das aulas deve parecer familiar de já trabalhou com linha bootstrap e, em seguida, dizer div um , classe é igual e vai fazer chamada. Vamos ligar para três assim e dizer um e então vamos cair em alguns desses como este. OK, então esta é uma espécie de coisa padrão que você vai ver. Hum, deixe-me fazer um pouco de estilo rápido para que possamos ver isso. Ah estilo. Eu vou fazer seção que vai fazer números de fundo é zero. Está bem. E vamos apenas fazer o número de cor f e, em seguida, para nossas colunas Produtivo chamada três. Vamos manter isso fácil como isso vai fazer cor. Vamos ler algo assim. Oh, e vamos fazer fundo, não cor. Está bem. Tudo bem. Então você pode ter alguma idéia aqui do que está acontecendo. Nós temos o nosso são uma espécie de, um nós temos o nosso contentor. Temos a nossa fileira. Temos nossas colunas dentro disso. Na verdade, só somam nove. Vamos fazer por pouco te dar uma idéia melhor. Ok, então, uh, na verdade muda para a chamada quatro. Está bem. Então você pode ver nossa grade meio que se estende por aqui. Tem a lacuna da coluna da grade entre aqui, como estabelecemos. E então você tem um bom sistema de grade com o qual podemos trabalhar, e eu não sei para sim, então você pode ver aqui. Uma vez que estamos abaixo de 780 68 pixels, ele cai no topo da parte inferior lá. Então, novamente, apenas começou uma espécie de grade responsiva padrão que você esperaria ver feito com grade CSS . E isso é algo que você pode pegar isso aqui e você pode tipo de ajustá-lo, como você quer e, em seguida, criar e manter esse arquivo CSS para que você possa soltá-lo em projetos. Claro, se você quiser alterar, se eu e tudo isso, em algum momento você pode combinar todos os arquivos assim por diante. Mas ele oferece um arquivo que você pode manter constantemente em uso para projetos. Ah, como você vai para a frente. Então esse é o sistema de grade. Precisamos fazer isso primeiro antes de começarmos a construir o site aqui. 4. Crie o menu de cabeçalho: Agora o que eu quero fazer é construir nosso cabeçalho e nosso menu. Mas ainda há um pouco de configuração que eu preciso fazer aqui, alguns tentando tipo de trabalhar isso como nós ah como nós vamos aqui. Então eu vou fazer um pouco disso agora, a primeira coisa, e eu vou tentar fazer isso rápido, então eu vou fazer um pouco de cair aqui. Mas, ah, a primeira coisa que queremos fazer é queremos nossas fontes. Então vamos usar Ah, várias fontes e ícones diferentes. Vou largar os “'s”. Você provavelmente está familiarizado com esse tipo de coisa. Se você não é essencialmente o que isso é, estas são fontes do Google. Então, se você vai ficar bem, apenas fontes do Google como esta, eu acho que é divertido. Comece o google dot com, mas faça o Google cair fontes e clique em que, você pode procurar todas essas fontes diferentes e assim por diante. E vamos apenas tipo de ir em frente e adicionar este aqui e então, Ah, quando você quiser usar um, então você vai ver que ele vai te dar um link como este, OK? E você pode, então, pegar isso aqui e deixar que eu encolher isso um pouco por um segundo para que você possa deixar isso aqui e ver que foi isso que eu fiz. Eu tenho essa fonte Roboto e eu tenho todos os diferentes pesos que ele tem, e eu deixei cair isso em como um link. Comprei Yellowtail, que só tem um peso. E depois a outra coisa que eu trouxe nesta fonte incrível. Então, se você vai para, se você olhar para fonte impressionante, então você pode ver que nós nos divertimos incrível aqui e realmente como usar. E, novamente, dá-lhe um link que você pode inserir. Então esse é o terceiro link que eu deixei cair aqui. Então eu só para economizar um pouco de tempo digitando todas essas coisas. Isso é essencialmente onde você conseguiu isso. Eu nem vou digitar a quantia. Agarro-o daqueles lugares e deixo-os lá dentro. Então essa é a primeira coisa que fazemos. Temos outras coisas que vamos precisar adicionar mais tarde, mas vamos nos preocupar com isso. Naquele ponto. E então eu só vou tipo de limpar isso e marcar isso como “thes”. Eles vão ser uma espécie de nossas folhas de estilo personalizado vai apenas acalmar folhas de estilo. Pensa nesse caso. Temos a nossa rede. Ah, e então nós vamos criar um para o nosso menu, como eu falei sobre isso novamente vai criar nosso link aqui, e vamos criar isso aqui em apenas um segundo. Mas já que estou aqui, quero o Adam. Então nós vamos colocá-lo em nosso arquivo CSS terá um menu chamado como este, e então nós vamos ter um que é ele vai ser uma espécie de nosso ah geral, folha de estilo do site. Então, novamente, eu estou fazendo isso porque eu vou o menu e a grade vai ser uma espécie de dragão jogado diferentes projetos. Esta folha de estilo aqui vai ser específica apenas para este projeto. E novamente, você provavelmente para a produção. Vocês iriam em frente, homens, se eu esses e assim por diante. Ah, e isso faria com que tivesse um desempenho melhor e assim por diante. Mas tudo bem, então vamos em frente e, em seguida, mover isso para trás. Desde agora, nós meio que sabemos o que são e vamos mudar nosso título para Joe Freelancer. Vamos nos livrar dessa seção de estilo. Não precisamos mais disso. E vamos nos livrar desta seção aqui. Eu só queria te mostrar essas coisas. Ok, então agora que nós temos um tipo de coisas configuradas, nós não vamos criar esses arquivos CSS ainda. Na verdade, vamos fazer o nosso HTML primeiro. E então nós vamos tomar criar um elemento chamado Header e vai dar a este uma classe de cabeçalho visão como este. E estamos usando isso no lugar de uma seção, você sabe, em outras partes do site usará seção, mas porque este é um cabeçalho estavam usando cabeçalho. E então vamos usar nossa grade aqui. Então vamos div Class é igual a contêiner. Uh, e então classe Div é igual a linha, e então classe div é igual e nós vamos fazer chamada quatro, e isso vai ser para um logotipo. Então, nós queremos que essa classe que nós podemos atingir ela fuja especificamente se nós quisermos. E, dentro disto, vamos ter cada classe igual a marca. Você pode nomear essas coisas o que quiser. Eu só, você sabe que eu usei bootstrap um pouco, e é assim que eles fazem isso. Então é familiar para mim. Então, vamos a um rascunho é igual a nada por enquanto. E vamos dizer Joe Freelancer, então isso vai criar. Ah, isso vai criar uma espécie de nosso pequeno título de site, por assim dizer. Certo, então essa é a seção da marca. E então a outra seção que precisamos fazer aqui é para o nosso menu, então, uh, uh, classe div é igual a chamada oito. Então, nós pedimos antes. Precisamos sempre somar até 12. Vamos fazer a chamada oito e depois dentro disso. É aqui que vamos começar a colocar o nosso cardápio. Então a primeira coisa que precisamos é das nossas crianças. Nós vamos fazer div classe igual menu alternar como este é dar-me são botão de alternância, e então nós estamos indo para dentro que Do I classe é igual a f um f menos. Então isso é da fonte Awesome e nada dentro disso. E então nós só precisamos essencialmente de três desses, então eu vou apenas ir em frente e copiar isso, e ok, para que você veja que isso nos dá três linhas aqui. Ainda não desenhamos nada disto, por isso vai parecer muito estranho. Hum, então esse é o nosso menu de alternância. Mas também precisamos do nosso menu. Então vamos fazer, classe Valete igual último igual menu, e nós vamos dar isso e eu d. Porque você poderia ter vários menus no mesmo site. Então temos uma classe de menu que vai fazer a maior parte do nosso estilo. Nós também vamos dar uma idéia para o caso de querermos atingir este alvo especificamente. Então parte foi chamado de curso Menu Primário. Chame o que quiser. Hum, e então nós vamos fazer em um nem lista classe é igual menu naff. Então esta é a navegação real, hum, menu. E, dentro disso, deixa-me deixar cair o “'s”. Não adianta esse ar. Bastante direto. Sem marcação. Veja-me escrever um monte destes fora. Então estes são itens de lista, e por isso temos item de lista. Damos a cada um uma classe de homens. Você valete item que estamos usando. Eu estava usando âncoras porque tudo isso vai se conectar dentro do mesmo site. Hum, sobre habilidades, clientes de portfólio e contato. Essas seriam as seções diferentes. E então, quando criamos uma nova seção apenas para explicar isso aqui, bem, fazer algo como isso vai fazer seção e vamos fazer classe igual seção. Vamos falar sobre isso. Mas então nós vamos fazer I d igual a sobre como este. Bem, isso agora cria para esta âncora. Quando você clica neste link, ele vai ligado à seção Quando você dá algo um I D. Você pode então criar uma âncora Tony para que eu d. Então é isso que estamos fazendo aqui. Eu vou. Não deixei aquela seção lá porque vamos usar isso em algum momento . Certo, então esse é o HTML. Ah, isso é bem simples. A próxima coisa que precisamos fazer é entrar no C.S . E há algumas coisas aqui que precisamos fazer. Como eu disse, ainda tenho um pouco de configuração aqui. Vamos em frente e criar um arquivo e vamos chamar este menu de ponto CSS e, em seguida, vamos criar outro e vamos chamar isso de zeros freelancer Há realmente um respostas de zero. Há um caso CSS Ruanda desses são novamente os dois arquivos que incluímos aqui, e eu acho que você começa tudo certo. Ok, então esses dois arquivos devem ser incluídos agora. E, na verdade, o 1º 1 que vamos entrar é este freelancer. Vou abrir os dois. Então nós temos. Mas então eu vou entrar neste freelancer aqui porque precisamos fazer algumas coisas com o corpo, apenas o dedo do pé. Meio que tire isso do caminho. Então vamos fazer o corpo fazer a nossa marcação aqui. Não, eu não vou ficar muito exigente sobre isso para o vídeo. Certo, então vamos para o corpo HTML, e vamos nos livrar da margem do preenchimento do navegador. Isso é. Normalmente eles são tão margem zero estofamento zero. Hum, nós vamos fazer o fundo. Eu faço isso porque você vai notar no meu. Tem uma cor acinzentada, e eu não gosto de olhar para ela quando você vai. Na verdade, quando eu vou colocar isso no local, não vai fazer isso. Mas para o meu bem, eu só não gosto de olhar para ele assim e então nós vamos definir a fonte geralmente para o corpo para esta cor. Ok, então isso nos dá se livrar de algumas dessas coisas. Hum, qual é o ar aqui? Agora? Coloquei um cólon semi cólon. Certo, então a seguir vamos fazer Ah, família da fonte. Então vamos fazer o corpo. Vamos fazer P o marcador P na área de texto de seleção de entrada. Provavelmente há outros aqui. Isto é tudo coisa. Hum, qualquer coisa que não é Você quer segmentar para mudar a fonte porque você não tem em termos de apenas tags básicas e assim por diante, corpo deve pegar a maioria das coisas, mas algumas coisas, como tags de parágrafo e entradas e assim por diante que não vai que nem sempre vai pegar. Então estes são os que usamos, e vamos usar neste particular, hum, neste site em particular. Então, esses são os que estou mirando. Então vamos para a família de fontes, e vamos definir isso para Roboto e, em seguida, um backup de Sand Saref assim. Ok, hum , novamente, isso é apenas uma espécie de configurar coisas que precisamos fazer para sair do lixo. Vamos fazer a imagem de Maxwell 100% para que as imagens encolham. Isso é uma espécie de resposta geral de imagem que enfraquece Dio. Ah. Então vamos fazer corpo P H um H dois H três h para H cinco h seis, entrada, entrada, seleção e área de texto novamente. E vamos definir a fonte de espera para 300. Ok. E quase terminei aqui. Vamos fazer ponto texto e ponto área de texto. Vamos definir a caixa dimensionando a caixa de borda e bem, com 100% borda, um pixel sólido. E então C C C é a cor dos pixels de Paddington. 15 pixels. Ah, vamos fazer o tamanho da fonte 16 pixels. O que? Tamanho um round. Ok. E eu faço isso, então provavelmente não precisa mais fazer isso. O tamanho da fonte dupla aqui. A ideia por trás disso é que algum navegador não suporta carneiros. Será padrão para trás o tamanho do pixel. Aqui. Isso é algum hábito que eu meio que entrei que eu provavelmente preciso quebrar, mas, uh, uh, é por isso que eu faço isso. Então, altura eu virei 40 pixels. Certo, então esse ar, como eu disse, eram algumas coisas que precisávamos sair do caminho. E, em seguida, também precisamos fazer a nossa seção de cabeçalho do site. Então isso se aplica ao nosso menu. Então nós criamos aqui. Ah, cabeçalho com classe de cabeçalho do site. Agora precisamos dar um estilo a isso um pouco. Então vamos fazer, uh, cabeçalho. E você meio que lembra, você pode não ter notado isso, mas se nós voltarmos e é Oh, olhe, na verdade aqui está bem aqui. Isso poderia nos trazer até aqui se você se lembrar dos cabeçalhos do site realmente corrigidos com. E tem essa transparência para ele. Então isso é um pouco do que vamos fazer aqui. Ok, então é por isso que temos que mexer um pouco com isso antes de entrarmos no menu em si. Tudo bem, então nós vamos fazer nós vamos atingir essa classe, uh, uh, cabeçalho do site. E nós vamos fazer posição fixa. Isso é o que faz com que fique no topo mesmo quando você rola. Quando fazer borda inferior um pixel sólido, e nós estamos indo para fazer e para assim, e então nós vamos fazer com de 100% e vamos fazer fundo. Isto vai dar-lhe a sua transparência. Então, vamos ao fundo. Mas em vez de uma cor hexadecimal, vamos fazer RGB A, então é vermelho, verde, azul e então o herói da opacidade Pacenti. Então, 2 55 55 2 55 Isso dá a cor, então vai ser branco, e então nós estamos vai dar-lhe um passatempo A de 0,9. Então isso vai fazer com que quando você rolar para baixo, ele tenha aquele pouco de uma passagem e lá. Então vamos apenas atualizar isso e ver se certifique-se de arquivos CSS e assim por diante. Então, estamos conseguindo algo aqui. Hum, você sabe, nós temos algumas mudanças aqui, então nossos arquivos CSS parecem estar chutando por aqui, então isso é bom. Agora vamos até aqui e vamos dar um ponto no Brand. Eu vou fazer a altura da linha e nós vamos definir esse dedo um e tamanho da fonte 28 pixels. Tamanho da fonte 1.75 Ram assim. Ok. E você pode ver o tamanho da fonte mudando lá em cima e assim por diante. Então, de novo, isso é um bom sinal. E então vamos fazer marca a e vamos nos livrar da decoração de texto disse que a nenhum. Uh, e então vamos definir a cor para 333 Ok, então você pode ver que estamos começando a obter um pouco de alguma coisa aqui. Temos uma espécie de seção de marca aqui que foi atualizada. E isso é tudo o que precisamos fazer agora. Ah, em nosso arquivo freelancer. Agora podemos entrar no arquivo do menu e começar a mexer com isso. Então, há uma quantia decente nisso. Precisamos fazer ambos o alternar, e então precisamos fazer o menu em si. Então vamos começar com Ah, não, vamos começar com o botão. Então vamos em frente e fazer agora. Ah, fazer menu traço, alternar. E nós vamos posicionar este absoluto posicioná-lo absoluto principalmente porque é ah, é um inferno de muito mais simples. Vai colocá-lo em cima, certo? Uh, e você vai vê-lo aqui. Mova-se em apenas um segundo, mas vai colocá-lo em cima, certo? Não importa onde você rolar ou qualquer coisa e com o fixo, hum, com o menu fixo e todas essas coisas apenas muito mais fácil de posicioná-lo desta maneira porque estamos fazendo um menu móvel desde o início em vez de ter um menu horizontal que para um menu móvel. Então vamos fazer Z Index vai definir que para três ponteiro do cursor, e então nós vamos fazer com e vamos definir que dedo do pé auto. Certo, então isso vai se posicionar. Você vê, ele está no topo agora, e então fazer menu alternar e, em seguida, ponto FAA Isto vai realmente apontar para o ícone. Então fazer bloco de exibição, e você vê, agora eles estão em cima um do outro quarto, devido linha, altura, zero, hum, margem 008 pixels e você só tem que tipo de jogo sem um pouco para ver o que você gosta com isso, e vamos fazer o tamanho da fonte 28 pixels. Ok, então você pode ver agora quando você olha para isso, é semelhante, ou é idêntico ao que temos aqui. Ok, então estamos começando a chegar um pouco em algum lugar com isso. Nós também vamos adicionar nesta transição. Então, para CSS transições estavam indo para fazer todos os 800 milissegundos e facilitar. Então isso vai nos preparar para sermos capazes de fazer as transições que queremos dilatar . Certo, então precisamos adicionar isso ao ícone aqui. Ah, a fim de fazer isso. Então eu vou voltar e fazer todas essas transições aqui. Eu não vou fazer isso tudo. Ah, neste momento ainda. Então eu quero ir para o menu e fazer isso primeiro antes de eu entrar nisso. Então nós vamos pular para baixo, e nós vamos para o menu e realmente vamos adicionar um pouco de espaço aqui. Vamos precisar adicionar esses estilos de volta aqui, mas vamos fazer o menu. Vamos fazer posição fixa. Então isso é Ah, nós vamos consertar isso aqui. Vamos fazer o Top Zero, e vamos fazer, certo? Zero. Ok, então isso vai posicionar nosso menu aqui, porque se você se lembra, nosso menu desliza para fora do lado assim. Certo, então é isso que estamos montando aqui. Tudo bem, então eu vou fazer uma largura nisso de 30%. Você vê esse tipo de pau aqui e, por padrão, ele vai ser escondido. Eu não vou fazer isso ainda? Porque eu quero olhar para ele, mas nós vamos voltar e nós vamos fazer visibilidade e nós vamos fazer escondido. Hum, eu vou apenas fazer visível por agora para que possamos vê-lo, mas eu quero isso como um espaço reservado. Ok, então nós vamos fazer fundo de novo, e nós vamos fazer Ah, transparência sobre isso. Então vamos fazer RGB A e para 35 para 2 55 2 55 e então novamente, 0,9 assim. E depois queremos que isto estique toda a altura. Então vamos para a altura e vamos fazer 100 VH. Hum, VH é uma espécie de coisa nova que você pode usar e isso faz coisas como esta realmente fácil. Então, se você quer algo para ser, ah 100% de altura vertical Ah, isso é o que você faz, então batendo 50 pixels sobre isso. Então eu queria um bom estofamento nele. Dimensionamento da caixa Indu. Ah, caixa de fronteira. E quando a borda deixou um pixel sólido e quer fazer ele força, e então vamos voltar e vamos fazer as transições. Não vou fazer as transições. Ah, neste momento ainda. Ok, então nós temos que, uh, nós precisamos adicionar em. Tudo adicionado aqui ponto menu ponto ponto mostrar. Ainda não fizemos isso. Então, Então, novo, vou voltar e fazer essa parte. Mas por agora, eu só gostaria de fazer o estilo para que possamos vê-lo antes de começar a escondê-lo em todas essas coisas. Caso contrário, fica um pouco difícil de trabalhar. Então agora você quer fazer cardápio traço valete como este, e nós vamos fazer preenchimento de margem zero, zero no tipo de estilo de lista nenhum. Ok. E parece que tenho dois dois pontos de ligação para cá. Certo? Então isso nos deixa preparado para o estilo do dedo do pé. O cardápio um pouco. Sim. Livre-se disso. Tudo bem. Como vamos fazer o menu de pontos, traço, nab a, e podemos apontar os links reais dentro daqui. Então vamos exibir bloco, e vamos fazer preenchimento de sete pixels. 08 pixels. Zero. Então isso é apenas o que eu descobri. Você pode bagunçar sem um pouco. Quero que a decoração do texto não seja nenhuma. Tentando rolar um pouco para baixo e vamos fazer o tamanho da fonte. Estou fazendo 28 pixels aqui. Gosto de ser boa e grande assim. Eu só, tipo, do jeito que isso parece. OK, então agora você pode ver aqui. Nós temos muito, muito semelhante ao que temos com nossa caixa aqui tipo de pergaminhos como este. Hum, vamos falar sobre a largura aqui em apenas um segundo, mas, você sabe, mais uma vez, temos um estilo muito parecido com o que tínhamos aqui antes. Então, esta vai ser uma longa lição. Uh, nós temos o menu construído, nós temos ele estilizado, que tipo de tem a conta de cabeçalho e assim por diante. E nós só precisamos voltar e precisamos fazer algumas das transições e assim por diante, e isso vai exigir algum javascript e tal. Então eu não quero que isso se transforme em ah, 40 ou 50 minutos aulas, então eu vou cortar este aqui, e então nós vamos voltar na próxima lição e vamos fazer todo o engate em termos do script Java e do girando e todo esse tipo de coisa. 5. Animar o menu de cabeçalho: Ok, então vamos continuar com este menu. A primeira coisa que vou fazer aqui tirar isso do caminho é entrar nesta pasta de trabalho que eu sou e criar um novo arquivo, uma nova pasta chamada Js para o nosso script Java. Vou arrastar isto para aparecer e depois vamos mudar o nome para Estou a ligar para este freelancer. Oh, Wanda é assim. Então, a mesma ideia. Vá em frente e abra isso. Então ele está aberto, e então nós precisamos voltar para o nosso índice dot html e nós precisamos incluir isso aqui agora. Ah, com o JavaScript o máximo que puder. Você quer tentar e colocar essas coisas no seu pé ou nós não necessariamente temos um pé ou ainda , mas nós vamos em frente e nós apenas vamos tipo de adicionar essas coisas aqui em baixo. Eso fará roteiros, e vamos usar Jake cansado. Então precisamos incluir consulta J. Exatamente como eu disse antes. Ah, com o com as fontes e o outono incrível e assim por diante, você pode literalmente apenas Google J consulta Cdn e você vai obter ah link como este essencialmente e você apenas colar isso aqui que vai incluir Ah J. consulta. Então você provavelmente é familiar. Provavelmente fez isso de uma vez ou duas. Assim, a origem do script é igual a. E agora vamos fazer nosso arquivo JavaScript de nossos sites. Vamos para freelancer. 01 ponto Js como este. E isso vai incluir o arquivo Js que acabamos de criar. Então agora temos consulta G, que vamos usar. Então nós temos, hum, nós temos o nosso, uh, arquivo javascript que vamos usar aqui? Ok, Então, para o nosso menu, o que estamos essencialmente indo fazer é, a fim de fazer esta alternância, vamos usar script Java toe, adicionar algum anúncio e tirar algumas classes. Mas então nós vamos realmente usar CSS para, hum, para hum, lidar com a animação e o esconderijo e mostrar e assim por diante. Então o JavaScript que você quer usar uma espécie de sua luz de toque possível? Não necessariamente Faça tudo em Ah, o javascript aqui. Então é isso que vamos fazer aqui. Então nós vamos fazer Jake cansado, e nós vamos fazer documentos ensinados, prontos, prontos, e nós vamos fazer a função, e então dentro isso vai colocar nossos cifrões para que possamos usar isso. E então esse tipo de envolve isso em, Ah, essa função anônima para que ele mantenha tudo fora do espaço global e impede-o de ficar confuso e conflitante e assim por diante. Então a primeira coisa que vamos fazer é alternar temos várias coisas que vamos fazer aqui. Vamos fazer isso em etapas, mas vamos alternar o menu NAFTA no botão Clique. Certo, agora vou definir algumas variáveis. O 1º 1 é o Rex raiz. Vou usar isso mais tarde. Mas vou configurá-lo agora porque sei que precisamos dele. E a rota vai ser apenas HTML e corpo assim. Então isso vai ser algo que vai precisar um pouco mais tarde. Mas vamos definir isso para agora, e então vamos alternar menu. Esta vai ser a criança que vamos atacar, e vamos definir isso para o nosso menu de aulas de Taco. Então, essencialmente, o que nós fizemos é que criamos uma variável que as referências são classe de alternância de menu, que é nossa criança aqui que nós criamos de modo que isso é realmente apenas uma coisa de desempenho . Se você vai usar essas várias vezes, você quer tentar e fazer isso para que você não seja constante voltando para o dom, o que prejudica o desempenho. Ok, então uma vez que nós temos que configurar, então nós podemos fazer referência a essa alternância de menu variável, e nós vamos usar o método on então ponto em, ah, menu alternar ponto em e então nós vamos fazer clique. Então isso é no Click. Vamos executar esta função, e esta é uma função anônima que estamos criando aqui e o que vamos fazer. A primeira coisa que vamos fazer é criar uma variável chamada isto. Então, o que foi clicado agora será definido para este elemento, uh, novamente, este é um fazer definir essas variáveis ou coisa de desempenho, certo? Então isso vai ter como alvo o que foi clicado. Então, ah, é com isso que queremos mexer primeiro. E então nós vamos fazer essa classe de alternância de pontos. Então, este é um método de consulta J e enfraquecer classes de alternância. Então, quando é clicado, ele adicionará a classe quando for clicada novamente para removê-la. Quando ele clicou novamente, Will adicionou apenas alterna que para trás e para frente com base em cliques. Então nós vamos adicionar e remover a classe chamada Close Game vai usar isso em nosso CSS aqui em apenas um minuto. E então nós vamos para o nosso Dom e nós vamos para encontrar o menu. Ah, cardápio valete. Ah, homens do cardápio, você tem um item que você se lembra. Estas são todas as aulas que usamos quando estamos construindo nossa aula, certo? E vamos alternar a classe chamada Show assim. Ok, então esta é a principal coisa que vamos fazer para a alternância disto e da ideia. Aqui, deixe-me encostar isso. Na verdade, deixa-me subir aqui e mostrar-te neste caso. É um pouco mais fácil, mas a idéia aqui é se inspecionarmos isso e olharmos para a caixa do menu, temos nosso menu alternar. É abrir o nosso menu aqui. E homens, vocês têm que ver os itens da lista aqui quando eu clicar nisso. Você vê, agora tudo isso recebe o item que recebe a classe de show e assim que nos permite segmentar isso com CSS. E, em seguida, o nosso menu de alternância recebe a classe de roupas. Ok, então isso é importante. Isso é o que vamos usar em nosso CSS para ser capaz de alternar Onda alvo todas essas coisas. Ok, então é um pouco difícil para mim fazer o inspetor dentro de Ah, o eu d a nuvem. Eu gostava disto. É por isso que estou usando esse outro exemplo aqui. Mas é o ST. É exatamente a mesma coisa que estamos fazendo aqui. Ok, então o que deve acontecer é quando clicarmos nisso, ele deve mudar essas aulas como esperávamos. Deixe-me ver se posso. Na verdade, eu provavelmente vou precisar ver a fonte do quadro. Deixe-me ver se consigo fazer com que isto apareça para que possamos verificar novamente. Não era o que eu procurava. O melhor que podemos fazer é inspecioná-lo, e não nos deu o que procuramos aqui. O melhor que podemos fazer é inspecioná-lo, Ok, então você pode ver que chegamos perto aqui. E se viermos aqui, menu tem show. Ah, cardápio valete tem show e todos os itens têm show aqui. Certo, então estamos conseguindo o que precisávamos. O JavaScript está adicionando a classe Ele está adicionando perto da alternância, e ele está adicionando show reboque o menu e todos os seus itens. Então isso nos dá o que precisamos fazer então para CSS para que possamos voltar para o menu para o nosso CSS aqui e agora podemos começar Ah, mexendo com algumas dessas coisas e escondendo e mostrando e assim por diante. Então, para o show, o que queremos na verdade, agora o que podemos fazer é ir para o menu, lembras-te que isto é visibilidade visível? Podemos mudar isso para escondido assim. E agora o ah, o menu está escondido. Deixe-me refrescar está tudo bem. Vamos consertar isso aqui em um segundo. Na verdade, não importa, porque quando fizermos atransição, transição, vai ficar tudo bem. Então, de qualquer maneira, podemos ir para o menu, depois mostrar e podemos fazer visibilidade e podemos fazer visível. Então este é o tipo básico de alternância aqui, certo? Então está escondido. E então quando clicamos nele e adicionamos a classe show, ele volta assim. Então essa é a ideia básica aqui. Ah, é que isso é eu acho que a sombra foi de mim mirando este menu assim. Isso é o que era. Isso é o que está me irritando de qualquer maneira. Ah, isso é uma espécie de esconderijo básico e exibição do menu. Ok, então essa é a idéia básica. E então, essencialmente, o que fazemos é adicionar algumas transições para fazê-lo funcionar um pouco melhor. Então aqui em cima no menu, então o que vamos fazer é quando você começar e nós vamos, hum, transformar assim e nós vamos fazer traduzir três d e nós vamos fazer ah, 100 por cento e vamos fazer 00 Então, Essencialmente, o que isso faz é tirá-lo da tela, certo? Esta é uma tradução de três d. Então, se você olhar uma tradução três d como este e nós vamos aqui para a extremidade vazia Não, ele mostra que é um tipo de um modelo três D aqui. E a coisa boa aqui é que você pode brincar com esses números para que você possa fazer, tipo , 20 e eu vou te mostrar o que ele faz, certo? Então, para o 1º 1 são as saídas, o movimento lado a lado. Ok, então nós estamos configurando isso para 100% de modo que é essencialmente tirá-lo de sua fora da tela e, em seguida, os outros dois para cima e para baixo e para dentro e para fora, nós estamos apenas definindo zero. Não estamos mexendo com eles. Nós não nos importamos com isso. Ok, então isso é o que a transformação faz é tirar esse menu da tela para começar, e então vamos criar uma transição aqui. Então vamos fazer a transição, e vamos fazer todos os 600 m e ele está fora. Certo, então isso tira da tela. E então quando nós viemos aqui para mostrar, nós vamos fazer transformar e nós vamos fazer traduzir três D e foram 2000 Ok, então o que isso faz é quando a classe show não está em sua vai usar esta transformação, ok, e isso vai tirá-lo da página. Mas quando adicionamos a classe show a ela, ela agora vai definir em vez de 100%. Vai definir os 20 que são trazê-lo de volta para a página. Então é assim que obtemos esse efeito de slide dentro e deslize para fora deste e, novamente, estamos apenas usando transições CSS tratar. Você pode ver a transição. Nós especificamos aqui. 600 milissegundos facilitam. Certo, então é assim que ficamos específicos. Ah, transição para lá. Também temos o cardápio. O caso de alternância virá aqui. Vamos fazer o menu alternar as coisas aqui embaixo. Então nós vamos fazer o menu de discussão alternar, e nós fazemos f ah dot f Desculpe, roupas doc e então ponto f a. Então, este é o momento em que as aulas próximas se aplicaram a isso. Então vamos nos transformar, e vamos fazer girar e 180 graus. Ok, e então Ah, nós vamos Isso vai causar uma rotação. Certo, então receba. Ele gruda aqui. Você pode ver como todos eles se transformam assim. Certo, então esse é o começo. Nós queremos que eles para todo o prazo, mas nós queremos que todos eles para então aterrissar em uma posição específica. Porque se você se lembra, o que nós acabamos com este X Ok, então todos eles se transformam, mas nós acabamos com este X então nós temos a parte de virar. Temos a parte rotativa agora. Precisamos, hum Agora precisamos pegar a construção, o X essencialmente. Então vamos fazer alternância de menu. Vamos fechar agora. Vamos atacar a FAA, mas agora vamos fazer qualquer criança, e vamos fazer uma. Então, vamos ter como alvo esse topo no primeiro filho. E então nós vamos fazer a transformação, e nós vamos fazer girar, e nós vamos fazer 45 graus e nós vamos traduzir, e nós vamos fazer cinco pixels. Cinco pixels. Ok, então o que isso vai fazer, e agora é em vez de este girar 180 graus vai estrada tomar 45 graus e então ele vai traduzir vai tipo de ele vai mudar a sua direção em vez disso, apenas virando todo o caminho. Você pode ver agora. Ele cai em um certo ângulo como este. Está bem. E novamente, você pode ir para o MGM e olhar para traduzir novamente e tipo de ter uma idéia de como isso funciona. Você realmente só tem que jogar com isso jogando com isso para chegar exatamente onde você quer. Certo, então esse é o primeiro dia. É a mesma ideia para os outros dois. Então, basta copiar e colar isso aqui e assim para a criança final para este é o meio. Lembre-se, vamos para um próximo. Este vai mesmo embora. O 2º 1, o do meio. Então, na verdade, o que vamos fazer com este aqui é definir a opacidade para zero que vai fazê-lo desaparecer. Então, se olharmos para aqui, clique fora disso. Você vê, agora que o do meio se foi e eu tenho esses dois tipo de lado a lado assim, e então, para o último, nós só precisamos mudar sua direção. Então é tipo cruza o outro e parece um S X então vamos fazer 45 graus negativos. Então agora começamos a ter o começo de um machado, e então você meio que tem ah ah, você tem que movê-lo para lá até que pareça sobre direitos. Vamos para sete pixels e seis pixels negativos. Está bem. E isso é apenas de um monte de testes e ar, imaginando que como ah, você apenas meio que tem uma bagunça com isso. até que aterre onde você quer. Certo, então agora temos um machado, clicamos no X, e ele gira de volta para o nosso “ta go”. Nós clicamos novamente. Agora temos nosso tipo de efeito de alternância aqui que estávamos atrás. É tudo feito com transições CSS. Então esta não é uma classe de transições CSS, então eu estou passando por isso rápido. Se você quiser aprender mais sobre isso, eu recomendo começar a procurar uma classe de transições CSS ou tutoriais ou algo que realmente pode cavar nisso. Mas isso mostra como fizemos isso aqui. A última coisa que depois vamos fazer é fazer um pouco de capacidade de resposta. Porque se encolhermos isso, é que configuramos 30% agora. E você vê , começa a ficar todo confuso aqui. Nós realmente queremos Mawr de Queremos ver mais quando temos tanto espaço. Então nós vamos apenas fazer alguma consulta de mídia para mídia e vamos fazer Max com 1200 pixels, e aqui vamos definir o menu para uma largura de 40 por cento. Ok, então isso faz com que seja um pouco mais branco. E então nós chegamos aqui, na verdade, modo que essa é a idéia básica. Deixe-me mostrar-lhe os diferentes aqui. Acho que não há sentido e ver-me a escrever isto tudo. Então, então nós atingimos 992 e dissemos isso para 50%. É isso que estamos aqui. Então você pode ver que ele ocupa metade da tela e, em seguida, ah, em 768 ele vai ficar cheio com. Então, se ficarmos super, não sei se conseguiremos. Super largo, você vê que ele se move de volta. Você vê isso porque nós adicionamos essa transição, lembre-se, aparece no menu. Temos essa transição aqui que adicionamos. É por isso que desliza assim em vez de apenas estalar. Ok, isso é o que cria esse efeito de modo que se nós rolarmos para baixo em um ponto, ele desliza para 50% e, eventualmente, ele vai para 100% assim. Certo, então é assim que se faz. É assim que o menu meio que a mosca para fora da rotação deste material e tudo mais. Esse é o tipo de muitas coisas, exceto por algumas coisas quando começamos a adicionar seções e você realmente começa a clicar nessas , hum vamos fazer uma rolagem suave. Precisamos lidar com esse cardápio em particular. Ah, você tem a escolha de se você pode se esconder automaticamente e assim por diante. Então, há um pouco mais do que fazer aqui. Mas muito disso vai ser eu acho que tudo isso realmente vai estar no script Java . Então vamos cruzar a ponte quando chegarmos a ela. Temos um monte, outras seções que temos que criar aqui. Então esse é o cardápio. Essas são as transições, etcetera, , e como fizemos tudo isso. 6. Crie a seção de SOBRE: Agora que temos o menu, temos nosso sistema de grade construído. Podemos começar a construir algumas das seções do site aqui. Então nós tínhamos começado a construir isso sobre a seção aqui. Pelo menos construímos a seção aqui, então vamos em frente e acabamos com isso. Então eu tenho nossa seção aqui. Vamos falar sobre por que fazemos isso em um segundo. Então vamos fazer div classes iguais e vamos fazer o nosso contêiner. E, em seguida, dentro disso, é claro, vai fazer uma fileira. E então nós vamos fazer ah div classe iguais estavam indo para fazer duas colunas chamada seis e como você apenas fazer dois desses. Então, classe ativa igual a chamada seis. Tudo bem. E é nisso que estamos trabalhando aqui só para arrastar isso até aqui. Isto é mesmo aqui? Então ele vai ter ah, a imagem à esquerda e então este texto à direita e ligado para obter uma citação aqui. Agora, uma das razões pelas quais fazemos esta seção e, em seguida, colocamos o recipiente dentro da seção. Se você se lembra de nossa grade CSS nosso contêiner muda esse tamanho com base na largura da tela. Então, quando queremos fazer um tipo desses cheios com fundos como você vê, como, dizer isso aqui como isso estende toda a largura do navegador aqui, não importa o quão grande nós vamos aqui. Mas queremos que essas coisas dentro dela sejam um pouco centradas e não cheias com isso. A seção que realmente dar a cor de fundo também. E então colocamos nosso contêiner dentro dele para criar onde ele está meio centrado aqui. Certo, então é por isso que temos a seção assim. Hum é ser capaz de fazer isso. Então, envolvemos tudo dentro de uma seção e, em seguida, não enfraquecer estilo o fundo da seção para ir cheio com. Ok, então o que vamos fazer aqui é realmente precisamos vir até aqui em nossa pasta de trabalho , e precisamos criar uma nova pasta, e precisamos chamar isso de imagens. Então, vamos fazer imagens, e eu vou até aqui. Ah, deste aqui e pegue essa imagem. Então, Então, vamos ver Joe aqui e Kim ou se fizermos Zhou ou Zhou Developers Joe Developer. Então vamos copiar isso e vamos descer aqui e vamos rebocar isso aqui. Falaremos sobre o portfólio dos depoimentos e tudo isso um pouco mais tarde. Certo, então isso nos dá nossa foto agora. Ah, essa foto acredita que é na verdade quadrado. Vamos ver sendo uma abertura e olhar para ela. E então, na verdade, é uma imagem quadrada. Mas se você se lembra em nosso site aqui temos uma imagem circular. Então nós vamos realmente fazer isso via CSS. Então é claro que você não precisa fazer isso. Se você não quer Teoh, eu meio que recomendo que em vez de fazer a imagem circular ah, no real como loja de fotos ou o que está fazendo em CSS. Então, se você quiser mudar mais tarde, é algo que é fácil de mudar. Então aqui vamos cair nessa imagem. Vamos para a nossa imagem, e vamos fazer classes iguais. Estou cercado por G. Fale sobre isso. Em um segundo, eu d igual avatar, e então nós vamos fazer fontes iguais e nós vamos fazer imagens e então Joe Dash, desenvolvedor ah dot e J Peg. E vamos em frente e acabar com tudo isso só um segundo e vamos fazer. Ault é igual a Joe. Ah, eu acho que freelancers realmente o que é, você sabe, misturando e combinando esses. Ok, então isso nos dá a nossa imagem lá. Se encostarmos isto, podemos ver. Agora temos essa imagem. É um tipo de centro lá e assim por diante. Certo, vamos fechar. Isto para que nos dê isso. E então aqui, nós vamos criar Ah, nós vamos fazer o texto real. Então esta é uma das coisas com HTML, especialmente Samantha marcação semântica que vamos realmente fazer quando você cria uma seção, Você sabe, Você sabe, o mdn diz que você realmente deve sempre ter um cabeçalho dentro de cada seção que tem o título para essa seção. Então é isso que vamos realmente fazer aqui. Nós vamos criar uma tag de cabeçalho e nós vamos dar a isso uma classe de cabeçalho de seção, ok? E isso nos permitirá atingir esses cabeçalhos de seção. E então dentro disso, nós temos nosso h um, e na verdade, nós vamos dar a essa classe de título de seção, e então nós estamos adicionando um pouco de Ah, nós estamos adicionando algumas outras classes aqui. Vamos citar o título porque é um título de seção. Mas também é o título do site e vamos para a esquerda. Muitas dessas aulas ainda não existem, então vamos fazer isso. Mas então vamos fazer o máximo. Eu sou a parte do Joe aqui, ok? E então vamos parar isso, e então vamos fazer o texto do parágrafo real, então eu vou deixar isso aqui. É um pouco mais fácil. Há algumas linhas aqui, , não necessariamente vale a pena digitar tudo isso. Mas deixa-me deixar cair isto. E a grande coisa aqui é que estamos colocando-os em uma tag de parágrafo que tem uma classe de liderança. Então, você sabe, aqui diz que eu tenho sido um performer freelance há 14 anos. Você tem que ter alguns lugares onde eu faço ênfase aqui. Mas na verdade são apenas etiquetas de parágrafo com a classe de chumbo, ok? Mas na verdade são apenas etiquetas de parágrafo com a classe de chumbo, E, em seguida, a última coisa que colocamos aqui é que vamos colocar em nosso botão get citação, então vamos fazer uma classe igual a e foram para ser tiene e então vamos fazer tiene primária e então vamos fazer um rascunho igual e vamos vincular a contato que ainda não criamos. Mas nós vamos, o homem vai conseguir uma citação como essa. Ok, então esse é o HTML. Você notará que temos contra vários Ah diferentes, várias classes CSS diferentes que ainda não criamos. Então nós vamos ter que passar e criar alguns desses e, em seguida, ah, lidar com alguns dos estilos específicos desta seção Ah também. Então, uma das coisas que eu faço se formos para o nosso arquivo CSS aqui, você percebeu que eu comecei com o corpo e, em seguida, meio que aqui em baixo eu tenho a seção de cabeçalho , mas na verdade depois do corpo porque eu meio que penso no corpo é uma espécie de um reset. Então eu faço o que eu chamo de estilos globais e estilos globais não são algo que é relegado para uma seção particular há coisas que podem ser usadas em qualquer seção e assim, como nossa imagem arredondado nosso riso texto. Esse tipo de coisas é o que eu consideraria estilos globais. E então, ah, essas são as coisas com que vamos trabalhar aqui. Então o 1º 1 é uma seção. Então criamos a seção. Agora queremos dar a seção Ah, um pouco de estilo. Aqui, deixe-me puxar, tentar puxar isso sobre o dedo do pé. Então, lá temos isso um pouco. Ok, então nós vamos fazer esta seção, e então nós queremos ter preenchimento e nós vamos fazer 60 pixels. 20 pixels como este. Eu meio que você pode brincar com isso. Essa é a maneira que eu gostei. E isto vai adicionar isto a todas as secções. Ok, então não só este, porque nós vamos dar a cada seção uma classe de seção sólida e fazer F um F um f um tempo. Ok, então há isso e então nós vamos fazer Ah, o título da seção. Então título da seção e vamos fazer o tamanho da fonte. E nós vamos fazer 48 pixels, fazer a altura da linha de um e texto o centro da linha e, em seguida, a margem. Agora o centro da linha de texto. Nós vamos realmente substituir nesta seção, e parece que algo está errado aqui. Talvez eu tenha perdido algo aqui com isso porque o h um tag me atualizar isso. Ok, então há o nosso hum tack. Nós realmente vamos mudar isso de volta, porque você vai ver aqui em cima. Isso não é realmente centrado aqui, mas para a maioria de nossas seções são títulos de seção vai para o topo aqui, e nós vamos querer isso centralizado. Então, novamente, este é o estilo global que estamos fazendo aqui vai voltar e substituir isso Ah, quando chegarmos à seção real aqui. Ok, então agora nós temos nossos leads estavam indo para ponto chumbo e nós vamos fazer uma altura de linha de 1,25 e nós vamos fazer o tamanho da fonte, e nós vamos fazer 1.3 ram, e nós vamos fazer texto no centro da linha, e novamente, vamos substituir isso nesta seção em particular. Mas para todas as outras seções, vamos mantê-la. Envie a margem inferior 35 pixels. Ok, então isso nos dá a seção o título da seção, a tag principal que adicionamos. Então nós temos ah, esses três tipos de modificadores bem aqui e tudo mais. Só vou largar os porque eles são muito simples de entender. Então o Centro Técnico vai definir a linha de texto para Senador. Texto à esquerda. Não é texturização do centro esquerdo, senador. Certo. Então isso é coisa bem direta. Outro que tínhamos era a imagem ao redor dele. E temos mais que vou deixar aqui porque ainda não os estamos a usar . À medida que os usamos, vamos adicioná-los, mas a imagem é arredondada. E a maneira como obtemos isso é, vamos definir o raio da borda para 100% para que nos dê a nossa imagem arredondada. E depois tivemos os nossos botões. Então nós vamos ter primeiro fora da nossa classe de botões como este, e nós vamos, uh este é o lugar onde nós vamos fazer tipo de forma e cor padrão e assim por diante. Então vamos fazer o tamanho das caixas. Nós estamos indo para a caixa de fronteira e, em seguida, disse a decoração do texto para não exibir na linha. Queremos que seja um bloco oops, bloco. E então bem, por padrão vai fazer um fundo de C c, C assim, e vamos fazer uma cor de preto assim. Então isso é tipo de vai ser as cores padrão do botão. E então vamos fazer um tapinha de 15 pixels e 20 pixels para que você possa ver o botão tipo de mudança ali. Não faça fronteira nenhuma. E vamos fazer uma fonte de espera de negrito. Ok, então isso é outra vez. Esse é o padrão. Procure os botões. E então, hum, nós vamos fazer o botão primário. Ok, então isso vai nos dar a nossa cor. Lembre-se, nós adicionamos isso a este botão, então indo para o botão primário, e nós vamos fazer uma cor de fundo, e esta é apenas uma que eu meio que escolhi. Você pode escolher o que quiser, mas é uma espécie de cor púrpura. Então 890 b d d acontece a ser a cor. E então definimos a cor da fonte para branco. Ok, então isso nos faz parecer um pouco perto do que estamos lidando aqui. Você pode ver aqui. Ainda há algumas coisas que estão um pouco fora daqui. Ah, nós precisamos mexer com isso. E então muitas dessas coisas vão descer para a seção sobre aqui. Então, depois de termos, temos uma espécie de nosso corpo tipo de reset ish tipo coisa. Temos nossos estilos globais. Então entramos em nossa seção de coisas específicas. Então temos cabeçalho. Agora estamos na seção sobre, então vamos fazer sobre eu vou deixar isso lá. Não vou me preocupar muito com isso. Podemos limpar tudo isso. Ah, mais tarde. Então, para a seção sobre, então estamos lembrando que dissemos que um I d para a seção sobre estava direcionando especificamente. Então vamos usar que eu d. Estamos fazendo preenchimento top de 120 pixels principalmente para nos afastar desse menu. Porque esse cardápio é fixo. É cardápio fixo. Está posicionado fixo. Está bem. Para o título do site, lembre-se, O título da seção para esta seção também é o título do site. Então vamos fazer algum título de visão, e estamos fazendo o tamanho da fonte para RAM. Então nós tínhamos estilizado os tamanhos normais de seção. Mas este é diferente, único. É por isso que estamos anulando isso. Vamos fazer cor, fazer aquela cor roxa de novo. 890 b d. D. Assim. E depois vamos fazer uma família lutada e vamos fazer Yellowtail. Lembre-se, nós adicionamos Yellowtail de antes. É por isso que adicionamos Yellowtail. E então faremos um backup de San Serif cursivo. Qualquer que seja certo. Então é isso que nos dá o nosso texto. Parece que isso está mudando para isso. Ah, que Yellowtail gosta agora nós vamos especificamente estilizar os parágrafos principais em nossa seção sobre. Então faça sobre I d lead class, onde em vez disso, o tamanho da fonte a 1.35 ram Quando eu definir a altura da linha, vamos definir isso para 1.3 e então vamos estilizar o próprio avatar. Lembre-se, nós demos isso Ah! Ah. Uh, esta foto aqui idéia de Avatar. Então vamos estilizar isso especificamente e vamos dar a isso uma largura de 400 pixels como esta. Isso meio que o traz de volta à linha com o que queremos. Altura, Auto. Embora isso não deva importar. Vamos exibir bloco para que possamos centralizar e, em seguida, vamos para a margem zero auto , esse tipo de centros em um pouco. E então podemos fazer posição relativa, e podemos fazer top e podemos fazer 50 por cento. Isso vai começar a centralizá-lo verticalmente, e então nos transformamos. Lembra-te que a Fran se transformou de antes. Este é um pequeno truque para obter centralização vertical, mas traduzir por quê? E nós vamos fazer 50% negativos e isso nos deixa centrados no meio. Então, se você fizer aqueles juntos posição relativa top 50% transformado traduzir. Branco negativo. 50%. Isso te dá de novo um pequeno truque para ter esses, uh, centrados aqui, então Ah. Parece uma última coisa que preciso fazer aqui. Ah, é voltar para Ah, aqui. Todos estes que têm Vamos ver. Isso é bem aqui. Eu acho que, Ah, eu acho que eu posso apenas ser capaz de ser capaz de ao invés de adicionar texto deixado todos estes, ele deve ser apenas capaz de ir para aqui e fazer texto deixado agora. Pensei que não estava funcionando aqui. Deixe-me. Ah, nós apenas refrescamos minha memória exatamente o que eu fiz aqui. Ok, bem, vamos manter isso simples aqui, e nós vamos apenas voltar para o CSS aqui sobre ponto lead, e nós vamos apenas fazer uma linha esquerda como essa. Ok, então isso nos dá o nosso texto de alinhamento esquerdo. Ah, aqui. E então nós vamos vir e tipo de expandir isso um pouco e clicar fora daqui. Você pode ver, mas isso nos dá se voltarmos. Traga isso para baixo. Temos parece praticamente idêntico ao que tivemos seu OK, então é assim que fazemos a seção sobre e novamente o botão aqui, apenas tipo de quando você clica neste pequeno clique para baixo para a seção de impostos de contato. Há mais uma das coisas que faço também aqui é que comecei a fazer isto. Já vi outros fazerem isso comigo. Eu gosto para consultas de mídia. O que eu costumava fazer era colocar toda a mania da mídia no fundo. O problema é que, você sabe, as consultas de mídia referenciaram seções diferentes. Se você colocá-los todos no fundo, então você meio que tem um salto para frente e para trás. E então achei um pouco mais fácil organizá-lo. Apenas fazendo minhas consultas de mídia para uma seção específica. Ah, bem aqui na seção em si. Então eu sei que esta consulta de mídia, estes quatro, esta seção em particular então nós vamos fazer sobre e, em seguida, nós estamos em ponto Ah, título do site e nós vamos fazer texto o centro de linha como este. Certo, e isso vai acontecer quando isso finalmente acabar como se fosse conseguir. Então este centro do Texas, em vez de ser deixado, alinhado, certo? E agora podemos fazer se você quiser, podemos fazer o mesmo para o botão e assim por diante. Ah, em alguns dos maricas, algumas dessas coisas, vamos entrar em algumas consultas de mídia e outros lugares. Hum, e na verdade, sim, isso. Então, se voltarmos para nossos estilos globais e formos para o nosso botão, nós realmente temos um aqui, também. Então mídia e meu ex sagacidade, 760 pixels e nós vamos fazer botão ponto como este, e nós vamos fazer com 100% como isso e margem zero auto e texto align center. Ok, então isso faz o nosso botão ficar assim. Se você quisesse centralizar este texto aqui, você certamente poderia adicionar essa consulta também. Você sabe, isso não é algo que ah, você sabe, neste momento que eu queria que eu preferisse deixar uma linha como essa. Hum, e então ah, você pode fazer isso. Então, qualquer maneira, eu gosto de colocar essas consultas de mídia aqui, então eu sei que essa consulta de mídia vai com isso. O algo nesta seção das classes nesta seção. Você sabe, esta consulta de mídia vem com os vai com as classes ou I ds nesta seção particular, e eu não estou tendo que encontrá-los no material inferior. Então, Então, isso é outra vez, isso é algo que eu gosto de fazer lá. Mas esta é a seção sobre Ah, tem que estilizado. Continuaremos aqui. Eu vejo. Talvez haja alguma coisa com o estofamento aqui, e quando rolarmos aqui assim, vamos em frente e consertar algumas dessas coisas. Mas vou em frente e terminar este vídeo aqui, e vamos passar por algumas dessas coisas à medida que avançamos aqui. 7. Crie a seção de habilidades: Ok. Esta lição. Vamos entrar nesta seção de minhas habilidades aqui. Você vai realmente ser capaz de ver um exemplo de estilo do fundo aqui e assim, força. Nós vamos fazer isso. Fale sobre uma lista de recursos antes de eu fazer isso. Embora, eu deixei de fora a última lição falando sobre limpar este espaço aqui em baixo e, em seguida, esta foto vindo para cima daqui. Então a primeira coisa é, Ah, eu só perdi uma parte da declaração CSS aqui no cabeçalho set. Uma das coisas que queremos fazer é definir o índice Z aqui 23 e isso vai realmente torná-lo de modo que quando nós rolamos para baixo o resto vai por baixo dele. Então, temos isso. Ah, o espaço aqui. Interessante bastante. Eu não tinha notado isso quando eu tinha construído isso antes, mas isso está realmente lá no responsivo você. Ah, e o que eu construí até agora, na verdade, precisava adicionar algumas coisas que não estavam no original. Então o que vamos fazer é ir para grade que CSS e nós temos esta sarjeta sem. Agora vamos adicionar este aplicativo chamado sem lacuna porque nenhuma calha é as lacunas entre colunas e você pode ver que estamos definindo lacuna da coluna da grade e nós novamente queremos que para o nosso Nós queremos que para a nossa seção de portfólio, mas há também o a parte abaixo quando você tem uma Siri quando você tem uma linha em particular. Neste caso, também há espaçamento que pode ser adicionado abaixo disso. E por isso podemos querer que não quereríamos ter isso. Talvez queiramos nos livrar disso. Então eu decidi criar uma nova declaração CSS chamada No Gap and Set the Grid gap 20 E então, então, a fim de corrigir isso, o que fazemos é chegar. Uma vez que temos essa declaração CSS, então chegamos ao nosso cabeçalho do site aqui e chegamos à nossa linha porque se você se lembrar na grade, definimos a lacuna da grade para 20 pixels na linha aqui. Então, hum e nós provavelmente poderíamos fazer isso como lacuna de coluna de grade em vez de lacuna de grade. Hum, e isso pode ter sido realmente tentado isso. Deixe-me ver aqui. Sim, veja, então isso iria consertar isso também. Você pode ver que isso se foi porque agora não estamos adicionando a lacuna abaixo, então essa é uma maneira de você corrigir isso. Hum, mas eu também posso ver você dizendo, bem, eu quero isso. Eles são, só não quero isso lá para este em particular, certo? Eu quero um pouco de espaço quando eu estiver fazendo Rose. Eu só não quero isso para aquele em particular. Então, novamente, nós adicionamos isso. Sem lacuna. Ah, não há aula de Gap aqui. Então, só viemos aqui. Chegamos à nossa linha para o nosso cabeçalho aqui, e adicionamos este caso de classe sem lacuna foi duas maneiras diferentes que você pode fazer isso. Isso realmente é com você. O que? Suas preferências. Mas isso recebe a palavra dessa lacuna e lá que aquele extra e nós rolamos isso para fora. Então vemos que ainda é a mesma coisa. Faça o nosso cardápio aqui. Tudo ainda funciona da mesma forma. Selecione que limpa que essas coisas em seguida. Então nós vamos descer e vamos para nossa próxima seção, que vai ser nossa seção de habilidades. Então, vai vir aqui para baixo, vai criar nova seção e vai dar a classe igual seção como essa e deixe-me rolar para baixo aqui apenas um pouco. Então seção clássica. E depois vamos dar a isto uma identificação de habilidades. Lembre-se, todos eles precisam ter eu fiz i ds porque estamos ligando a eles no nosso menu. Ok, então não é apenas para segmentação CSS. É também para fins de ligação e, em seguida, tipo do que você usou para div classe é igual a contêiner , e nós vamos fazer uma div de Roe como este inimigo Rhone até então nós vamos ter ah Div classe com uma coluna de 12 12 calma. Então vamos fazer classe igual e isso vai ser tipo nosso cabeçalho, lembra? Ah, ligue para 12. Ah, da MDN. Ele diz que cada seção realmente deve ter um cabeçalho com um h uma tag para que as máquinas saibam que para esta seção este é o cabeçalho. Você pode colocá-lo em qualquer lugar lá, mas quando ele vai olhar para essa tag cabeçalho e por isso estamos indo para classe igual cabeçalho seção . E agora estamos começando a confiar em alguns desses estilos globais que criamos antes do cabeçalho da Seção para H uma classe equivale ao título da seção, ouvi dizer e então faremos minhas habilidades. Ok, então agora nós estamos recebendo um pouco desse estilo. Estamos recebendo o estofamento em torno da seção. Estamos recebendo o tamanho da fonte nos pesos da fonte e todas as coisas que fizemos, hum, para nos dar este tipo de estilo automático aqui. Muito bem, seguir vamos fazer classe P igual e vamos liderar. E então eu vou dizer que tenho as habilidades para fazer o seu trabalho. Certo? Aqui estão eu especializei-me em algo assim. Claro que você pode colocar o que quiser aqui, mas é isso que eu estou colocando aqui, e esse é o nosso cabeçalho. Então nós temos o nosso cabeçalho temos um título para e temos uma descrição para ele. Essa é a coisa padrão que você quer tentar e fazer com cada seção que você criar. Quando você criar uma seção como esta, certifique-se de que você tem uma cabeça ou ah, e uma descrição. Agora vamos realmente fazer a lista de recursos novamente. Lembre-se, ele se parece com isso, então nós vamos apenas fazer algo simples assim e vamos criar uma lista de recursos , e nós não vamos fazer ah, lista de ordem. Na verdade, só vamos fazer, hum, vamos fazer um direito por isso. OK, então nós vamos fazer Ah, na verdade, nós precisamos ir para fora desta estrada porque nós vamos fazer uma nova linha realmente vai fazer toda uma nova linha dentro daqui, então Div Class é igual a linha e nós estamos vai dar-lhe uma classe extra chamada lista de recursos. Tudo bem, então nós vamos fazer. Vamos fazer três desses. Vai para DIV. Classe é igual à força de chamada. Vamos fazer quatro perspicácia de coluna. Nós vamos fazer o item de recurso, então haverá para cada item, e então nós vamos fazer o centro de texto assim, ok? E dentro disso, nós vamos ter um ícones que estavam usando fonte. Incrível. Então eu classe é igual a f A e F A Este aqui nós vamos fazer I e então vamos chamar este recurso Icahn para que possamos mirar se quisermos. Certo. Então esse é o ícone. E então dentro disso, vamos ter um h três tag que vamos dar a essa classe é igual ao título da característica. E eu gosto do Teoh. Eu gosto de fazer isso assim Onde eu dou cada tipo de coisa Ah, classe para que eu possa eu posso mirar isso muito, muito facilmente. E quando entramos nos C, acho que não temos como alvo cada coisa, mas temos uma boa quantidade, e em algum momento, você pode querer. Então nós vamos um parágrafo de, hum, descrição em destaque como esta, e deixe-me apenas uma espécie de cópia sobre isso. É só um pouco mais fácil copiar o texto. É apenas o texto para este em particular. Ok, então o que temos aqui, então, é que temos este item, e está em uma linha de coluna tudo isso. Temos uma Nikon, temos um título, e temos uma descrição para cada um. Ah, uma das minhas habilidades aqui. Ok, então o que eu vou fazer é apenas uma espécie de disse que redigitando os últimos três. Vou colar os últimos dois ou o que quer que seja aqui. Então temos mais dois. Assim como ele. Ícone diferente, tipo de nome diferente. , Ninguém, na verdade. Aqui, deixe-me corrigir isso. Uma espécie de cópia dupla aqui. Atrasar-me. Então temos novamente um ícone, um título e uma descrição para cada um deles. Você pode, é claro, mudá-los para o que quiser. Ok, então esse é o HTML para a seção novamente. Bastante simples. Mas agora eu quero começar a realmente estilizar, uh, tudo isso. Então o que vamos fazer é voltar para lá. Deixe-me ir em frente e guardar isso e ver isso parece ensinar para Mountain Save, e nós vamos voltar para o nosso freelancer. 01 arquivo CSS. Aqui e de novo, estamos. Há algumas coisas aqui. Então uma lista de recursos como essa é algo que podemos usar em vários lugares, é por isso que eu escrevi do jeito que cada um cheira como eu fiz. Então eu vou realmente colocar a maior parte do estilo para ele. Alguns dos estilos básicos sob estilos globais. E então nós vamos eu acho que temos um pouco para a seção de habilidades. Na verdade, não muito para a seção de habilidades. Então, a maior parte disso vai vir da lista de recursos porque uma vez que você tem o CSS escrito, você pode cair em uma lista como este tipo de qualquer lugar usando esse sage, mesmo HTML e que faz tudo Ah, inferno de um muito mais fácil torna mais reutilizável e assim por diante. Então definitivamente o que eu recomendo fazer com isso. Nós vamos entrar aqui sob o botão primário e vamos fazer recurso. Eu não me lembro que este era uma espécie de recipiente de cada item, e então nós vamos fazer preenchimento e nós estamos fazendo 20 pixels para dar-lhe um pouco de preenchimento . E depois vamos fazer o filme Icahn. Então vamos mirar no ícone. E vamos dar a isso um tamanho de fonte de 24 24 pixels ou 1.5 rim Ramsar baseado fora do qualquer coisa . Ah, o tamanho da fonte foi selecionado pelo dispositivo. Então, se eles estão em um telefone ou um computador, que navegador em particular. Geralmente são 16 pixels, então 1,5 RAM seria o mesmo que 24 pixels seriam 16 mais 8 a 24 pixels. Então é para isso que servem as jantes. Geralmente, você deve realmente usar os reinos. Eu só tenho o hábito de fazer as recusas como estou fazendo aqui. Certo, então vamos fazer um fundo sobre esses ícones. Vamos usar essas cores roxas que vamos fazer 890 b d d. Isso lhes dá um pouco de fundo. Vamos deixar os ícones brancos assim. E então vamos fazer o preenchimento de 15 pixels. Você pode meio que brincar com um pouco disso, e então vamos fazer nosso raio de fronteira de 100% e isso vai ficar bom e redondo para nós . Ok, então isso nos dá os ícones redondos agradáveis lá. Depois disso é o recurso e vamos fazer o título. Então estilize os títulos aqui. Vamos fazer o tamanho da fonte e fazer 28 pixels. Hum, em e nós estamos em preenchimento inferior de 10 pixels e, em seguida, borda inferior um pixel sólido a cada 40 44. OK, então eu nos dá um pouco de estilo como este nos dá a nossa fronteira e assim por diante. Então essa é a seção do título. Agora a seção de descrição que você vê, porque nós estamos fazendo isso Ah, porque nós demos a eles todas essas classes descritivas que torna realmente fácil de segmentar. Estes recursos assim descrição vai fazer tamanho da fonte 20 pixels e tamanho da fonte em 0,25 sala. Não se envolva no fato de que eu não fiz isso aqui em cima. Eu não fiz isso quando escrevi. Provavelmente esqueceu-se. E depois a matemática para 20 oitos um pouco. O que está em 1,75? É isso mesmo, tamanho da fonte 1,75 ao redor. Eu só não queria fazer matemática agora, mas acho que está certo. Tudo bem. E, em seguida, para a descrição vai fazer linha alta. Só não se envolva muito nessas coisas. Isso sou só eu sendo inconsistente. Tudo bem, então isso nos dá, então são minhas habilidades seção Ah, nossa lista de recursos que podemos usar e estamos usando nesta seção minhas habilidades aqui. Agora, a última coisa que vamos fazer aqui é descer e vamos criar uma nova seção aqui chamada Skills. Então não temos uma tonelada de estilo para fazer aqui, mas temos um pouco. Então vamos fazer habilidades e, em seguida, criar nossa seção tipo de título aqui. E tudo o que precisamos fazer é realmente estilizar esta seção em si. E é disso que estou falando. Nós vamos fazer fundo, e nós vamos fazer o número F A f a f a e isso dá um pouco desse fundo acinzentado . Então deixe-me puxar isso aqui um pouco para que você possa ver que isso é branco aqui em cima . Agora, temos um pouco desse fundo acinzentado estende todo o tipo de largura do navegador, assim como o que tínhamos aqui do nosso original. Então essa é a minha seção de habilidades. Ele também está construindo uma lista de recursos. Colocamos na seção de estilo global para que possamos reutilizá-lo se quisermos criar outra lista de recursos como esta. Temos um estilo básico. Hum e, em seguida, se você quiser substituí-la, você iria descer para a seção específica quatro onde quer que você está adicionando essa lista de recursos , e você iria substituí-la. Então, é assim que eu tentei organizar meus olhos CSS, ter estilos globais, e então como você tem suas seções individuais e assim por diante e você começa com o estilo mais global. Então começamos notopo com, topo com você sabe, mirando o corpo e todos os parágrafos e impostos de importação como muito, muito amplo. Então entramos em títulos globais, que são classes de estilo que vamos usar Ah, em várias seções e várias páginas e assim por diante. E então acabamos em diferentes tipos de componentes, realmente como uma lista de recursos e assim por diante. E então você entra em suas seções individuais e, em seguida, se você quiser, se você tiver várias páginas, você abaixo disso, você entraria em ah ah, styling para páginas específicas no site, que você pode fazê-lo. Começa a partir dos movimentos mais gerais todo o caminho até o mais específico. E, geralmente, é assim que você deve fazer seu CSS com a forma como as folhas de estilo em cascata funcionam e a cascata para baixo. Ah, isso é o que você quer fazer. 8. Crie a seção de portfólio: esta lição. Vamos construir esta minha seção de portfólio aqui vamos usar o script de consulta Ah J chamado Fancy Box para fazer isso. Se você olhar para ele aqui, ele meio que aparece aliviar-se. E depois tem uma coisa. Poderíamos clicar em todos os diferentes projetos aqui. Então é isso que vamos construir essa seção nesta lição, antes de entrarmos nisso, eu tenho notado que essa imagem continua se sobrepondo. Você pode ter visto que isso está bem, enquanto estamos passando, e eu meio que estou passando pelo curso e eu estava indo no fundo da minha mente. Como o quê? Porque eu sabia que tinha definido esta imagem aqui e o Mac Max com fixo aqui. Mas você vai notar que eu tenho um erro de digitação aqui. Então, se você tem notado que se nós mudamos isso para Max dentro, isso faz o que é suposto fazer isso ah, muitas vezes, é assim que as coisas acontecem. Quando, quando você está codificando. Então eu só queria consertar isso rápido. Ah, e então podemos seguir em frente aqui. Então, a fim de construir esta seção de portfólio, a primeira coisa que há algumas coisas que precisamos fazer para configurar isso. Então, primeiro, eu vou vir aqui na estrutura de pastas aqui e em nossa pasta de trabalho e sob nossas imagens aqui, eu vou criar uma nova pasta e eu vou chamar este portfólio. Então vamos colocar todas as fotos do nosso portfólio aqui e depois me deixar arrastar isso bem rápido. Ah, essas são as imagens que vamos usar. E quero dizer, este ar acabou de ser editado na loja de fotos. Essencialmente, você verá aqui temos um 1920 por 10 80, então temos uma versão menor, que é 300 por 169. E isso é apenas o que eu descobri de novo, apenas meio que mexendo com isso um pouco e recebendo as dimensões que eu achei que parecia certo e que eu queria que você pudesse meio que brincar com isso. Talvez você queira atravessar três, ou talvez você queira atravessar ou seis cruzar o que quiser, mas você pode meio que brincar com isso. Mas você quer imagens. Você quer que a imagem menor aqui e você quer que a imagem maior aqui toe exibir isso assim para que quando as pessoas clicam nessa imagem pequena, ela apareça. Tudo bem, então o que eu vou fazer e estes são, quero dizer, eu só tenho estes de, ah, eu acho que eu acabei de receber estes de, tipo, pixels ou um dos tipos livres de royalties que é lá fora para imagens. Claro, para você, se este é o seu portfólio, você vai estar usando fotos de seus itens de portfólio ou se é para um cliente ou qualquer coisa, então você vai estar usando as fotos deles que eles provavelmente vai precisar fornecer-lhe. Mas conseguir esse ar apenas um tipo de espaço reservado para esta demonstração então eu vou fazer é eu vou pegar tudo isso e nós vamos fazer o upload deles para a pasta de portfólio que eu acabei criar. Então estávamos todos lá dentro, então essa é a primeira coisa que precisamos fazer. A próxima coisa que precisamos fazer é ter ah, caixa chique instalada e então estão meio carregadas aqui. E assim, se você não está familiarizado com caixa extravagante vai apenas vir e nós podemos apenas Google caixa extravagante e você vai vê-lo bem no topo. Aqui. Este é, na verdade, o site antigo que você quer usar o que é chique aps dot com bem aqui. E isso vai então, ou na verdade, acho que você tem que clicar por aqui. - Sim. Então, caixa chique três. Então, basta chegar à versão mais recente. Eles fazem um bom trabalho ligando a ele. então Eentãovocê pode ver isso aqui, você pode ver o início rápido aqui. E este início rápido é essencialmente o que vamos fazer, porque eles têm estes hospedados em Ah, eles têm um anfitrião no Cloudflare e outras coisas. Então nós vamos apenas usar esse CDN para isso e você pode ver que há uma folha de estilo aqui, e então você pode ver que há também ah, script, script, e você vai precisar Jake se preocupar junto com isso. Então eu vou ir em frente e apenas pegar o link aqui, e isso é o que nós vamos precisar para a folha de estilo e vamos voltar para o nosso eu vou fechar isso e voltar para o índice dela dot html e vamos chegar ao topo e deixar Eu só mova isso por um segundo aqui. E eu meio que tentei manter tudo junto. Agora. Ah, eu gosto de separar estes de todo o resto. Então eu vou fazer ah, comentar aqui. Eu vou apenas fazer CSS componente porque isso é o que isso é essencialmente um componente. Vamos acelerar isso. Então, se tivéssemos outros componentes, poderíamos acompanhá-los lá. Ah, também. Mas por enquanto, só temos uma caixa chique. Certo, então isso vai nos dar o CSS. E então agora precisamos do script Java também para ir com isso. Então vamos mesmo descer e colocar isso na foto aqui embaixo? Vês, já temos o Jake, estamos aqui, por isso não temos de nos preocupar com isso. E nós só vamos pegar o roteiro para a caixa chique aqui, a decoração do roteiro, e nós vamos pegar isso e então nós vamos voltar e vamos descer até o nosso pé e apenas certifique-se de colá-lo depois da consulta G A aqui. Assim, Jaques carregou e depois caixas extravagantes carregadas. E então o nosso Js freelancer está carregado. Hum, porque no caso de precisarmos fazer um caso, você quer fazer qualquer tipo de, você sabe, há um monte de personalização é que você pode fazer com isso. Há um monte de maneiras diferentes que você pode configurar isso e assim por diante. E muitas vezes para fazer isso, você precisará fazer isso em uma escritura Java e em outro JavaScript para que você possa fazer isso em seu freelancer. Ah Js arquivo aqui. Então este é geralmente o melhor lugar para colocá-los. Tudo bem, então isso nos dá nosso CSS e nosso javascript que precisamos em ordem para o trabalho chique do dedo do pé da caixa. Agora nós precisamos tipo de apenas construir isso dentro do nosso índice dot html. Então nós vamos descer e, você sabe, nós temos nossa última seção que fizemos nossa seção de habilidades aqui, e isso termina bem aqui. Então agora vamos criar nossa nova seção aqui, e isso vai ser para nossos itens de portfólio. Então vamos fazer seção e classe é igual a seção e eu d é igual bem, portfólio e, em seguida, criar nossa seção. E então, é claro, como nós meio que fizemos aqui. Classe é igual a contêiner, classe ativa é igual a linha. E então vamos fazer o nosso cabeçalho aqui. Então vamos fazer classes div iguais e vamos chamar 12. E eles estavam indo para classe de cabeçalho é igual cabeçalho de seção. E então, vamos fazer o nosso “H “no título da nossa seção e aqui vamos colocar o meu portfólio. Obviamente, você não poderia fazer isso o que você quiser e, em seguida, abaixo que vai fazer a nossa descrição. Então classe P é igual e vai fazer centro de texto lead, e então vamos fazer. Aqui estão todas as coisas legais que construí para meus clientes incríveis ou o que quer que você queira colocar lá. Então fique à vontade para colocar o que quiser. Mas isso meio que nos dá nosso cabeçalho de seção e você pode ver que temos nossa marca minha seção de portfólio aqui em baixo. Tudo bem, então essa era a nossa, ah, nossa coluna 12 com Chame-os lá. Agora queremos realmente construir as seções de portfólio e há um copo. Apenas algumas coisas que precisamos adicionar Para que isso funcione com caixa chique, é um script javascript r j crace e há também o CSS. Então vai cuidar da maior parte de tudo, Force. Nós só precisamos escrever nosso HTML corretamente. Então nós vamos fazer é nós vamos fazer classe div igual e nós vamos fazer linha e, em seguida, nós vamos fazer nenhuma sarjeta e nós vamos fazer portfólio. Ok, então todos os nossos portfólios, eles vão itens vão entrar dentro deste dentro destas diferentes linhas e então nós vamos fazer div classes iguais e nós vamos fazer chamada três agora. Você pode mudar isso, dependendo de como. Por que você quer que sejam anos? Você sabe, você poderia fazer quatro calmas com como eu estou fazendo três colunas, etc. Vamos para o item do portfólio e, em seguida, aqui. É aqui que entramos nas coisas específicas da caixa chique. Então nós vamos fazer um link ou ir para um e nós estamos indo para data dash caixa fantasia e nós vamos definir que igual a galeria. Isso é o que vai nos permitir quando aparecermos um dos itens do portfólio, o Ford e os herdeiros de volta para clicar nele. Isto é o que permite que isso diz caixa chique. Isso é o que queremos. Houve fonte de dados foram definidos que igual a libra 001 Então isso é basicamente especificando um I d. Este é o i d. Onde este é o quando clicamos nisso, um aqui é onde queremos obter o conteúdo do i d que queremos obter o contato . Vou mostrar-lhe esse conteúdo de Tenho certeza que em um segundo, um tráfego als em branco porque nós não estamos realmente ligando para nada aqui, certo? E dentro disto, vamos fazer a nossa imagem. Então nós vamos fazer fonte de imagem igual, e nós vamos ser imagem pequena. Então nós vamos fazer imagens indo para cortar portfólio porque nós o colocamos naquela pasta de portfólio e então nós queremos a versão pequena. Então 001 pequeno ponto j peg e eu vou fazer todos iguais. Zero. Existe um? Obviamente, o seu perfil, os itens vão fazer referência. Eles vão fazer referência a projetos diferentes, nomes de clientes ou qualquer outra coisa. Então sua etiqueta antiga provavelmente seria algo relacionado a isso. Certo, então isso nos dá nossa imagem. Aqui, deixe-me ir em frente e salvar isso e pode não estar carregando a imagem só porque temos que recarregar isso e eles vêem aqui. E, na verdade, é. A imagem está realmente carregada. Apenas muito pequeno vai estragar isso em um segundo. Eu só quero que todo o cheiro de idade escrito aqui. Ok, então agora que nós temos que isso é uma tag feita, então nós vamos criar a coisa que realmente aparece quando isso é clicado. Então nós vamos fazer div classe igual e ou realmente vamos fazer div estilo igual exibição. Freiras estavam apenas configurando isso para não mostrar nada. E eles estavam indo para a classe é igual a Port Folio Pop. Então este é o pop-up, e então nós vamos dizer que eu d igual a 001 Então essa é a referência aqui. Ok, então quando dizemos fonte de dados aqui e colocamos um I d. Este é o i d que colocamos aqui. Então, o que quer que você defina isso, você também tem que ter certeza ah, e definir a fonte de dados aqui também, também . Ok, então é assim que você combina com estes quando eu clicar nisso. Isto é o que aparece. Ok, isso é importante saber. Agora com caixa chique aqui. Ok, então agora dentro que nós vamos fazer outra fileira, uh, e então dentro que nós vamos fazer nós vamos fazer uma coluna 88 sagacidade. Então eu vou ligar para oito e então, ah, vamos deixar eu ir em frente e fazer este outro aqui. Então nós vamos fazer classe div igual chamada por agora. Novamente, você pode construir. Isto é tudo isto vai aparecer quando isto for clicado. Então, novamente, para a caixa chique. Você só precisa disso aqui. Quando isso é clique isso aparece. Você pode construir o que quiser dentro daqui. Acontece que isso é o que eu construí. Você pode tipo de colocar isso para fora como você quiser. Certo, então apenas tenha isso em mente enquanto está construindo isso. Tudo bem? Então, a coisa que eu vou colocar aqui nesta calmaria oito de que lado está a imagem? Então eu vou fazer fonte de imagem, e nós fazemos iguais e nós vamos imagens cortar portfólio, e então nós vamos fazer 001 ponto j pick. Então esse é o total de 1920 por 10. 80 com aqui. E eu vou fazer todos os iguais. Lá está outra vez. Certo, então essa é a imagem completa. Isso é o que vai estar lá quando estourarmos. Pop isso para cima. Clique aqui. Você vê, nós temos isso daquele lado ali. Certo, então esse é o lado. Bastante direto. E depois do outro lado, vamos colocar o nosso título e descrição. Então vamos fazer H três e vamos para a classe é igual ao título do projeto. E depois vamos fazer o projecto. Só estou colocando no lugar. Então, nome do projeto. - Obviamente. Você colocaria o nome de qualquer projeto que fosse então eu estou fazendo classe div igual a chumbo e descrição do projeto. Está bem. E, em seguida, aqui estavam apenas você iria colocar a descrição do seu produto. Vou colocar uma mensagem falsa. Não vou escrever tudo aqui, porque isso é meio inútil. Então eu vou deixar uma Lauren Ipsum aqui que podemos usar para nos dar uma idéia como isso vai ficar em mim. Limpe isso. Tudo bem, então agora quando clicamos no nosso item do portfólio, agora temos algo parecido com isso. Agora, esta não é necessariamente a coisa mais bonita aqui. Seja qual for. Mas você sabe se nós meio que nos puxamos para cá. Isto dá-te uma ideia melhor do que é suposto ser. Ok, então, não, isso é um começo. E então você pode tipo de estilo para cima. você quiser, você pode alterá-lo com base em, você sabe, os diferentes tamanhos de você sabe, tela e assim por diante. Novamente. Nossa rede já tem um pouco disso embutido. Você pode meio que mexer com isso como quiser. Tudo bem, então isso nos dá uma espécie de base aqui. Ah. Agora o que queremos fazer é que eu vou em frente e que este é o tipo básico de modelo para criar um item de portfólio. Certo, então você precisa fazer isso para cada um desses. Então esta parte essencialmente, esta aqui, tudo isso, você apenas copia e cola tudo isso, e então você entraria e mudaria. Está bem. Eu vou usar esta imagem Eu vou mudar este dedo para Eu vou mudar isso. Vou mudar todas as imagens, a descrição do projeto, e assim por diante. Mas o layout real do HTML é o mesmo, então eu vou ir em frente e pegar o resto desses itens do portfólio que eu tenho ah, pré feito aqui para que possamos passar por isso bem rápido em vez de digitar todas essas coisas e Há muitos deles aqui, leva um segundo. Tudo bem, então nós vamos apenas deixar o's aqui e assim você pode ver que isso nos dá. Agora temos uma espécie de fileira, imagens diferentes aqui e assim por diante. Agora, uma das coisas que você verá aqui é depois do número quatro aqui. Nós realmente fechar nossa linha e, em seguida, nós criamos uma nova linha aqui, então dedo do pé, a fim de nos dar duas linhas, nós queremos rosa diferente sobre isso aqui. Então, basta ter isso em mente com isso para as diferentes estradas que você quer fechar a estrada e, em seguida, criar um novo assado. Estamos fazendo filas de quatro. Ok, então isso nos dá uma espécie de nossa estrutura HTML básica. Você pode ver isso aqui em baixo. Quero dizer, tem algumas coisas acontecendo aqui em baixo que precisamos consertar. Você pode ver que eu posso clicar em todos estes aqui. Temos a funcionalidade básica. Ah, no lugar aqui. Então, a próxima coisa que precisamos fazer é entrar, ah, no ah, CSS real. E nós vamos tipo de costa algumas dessas coisas aqui em cima. Então vamos descer abaixo de nossas seções de habilidades ou rolar para baixo sobre habilidades e vamos criar uma nova seção. Eu vou pegar isso e, bem, acelerar isso, e então vamos chamar este portfólio. Ah, e em seguida, abaixo que nós vamos fazer um pouco de estilo aqui. Então a primeira coisa que fazemos é o título do projeto, e isso é para o pop-up real aqui. Ok, então eu só queria que nós vamos fazer isso um pouco maior. Então eu vou fazer o tamanho da fonte, e eu vou fazer três bordas aqui, e então nós vamos fazer a margem zero. Então é uma altura de linha um pouco mais próxima. Faremos um. E eu vou fazer a família de fontes como Yellowtail apenas para dar um pouco fora, você sabe, projetado para ele vai fazer cursivo. Essa é uma resposta assim. E depois vou fazer a nossa cor roxa. Então libra e, em seguida, 890 b d d c dá-nos a nossa cor roxa aqui. Esqueci-me de uma vírgula depois disto, por isso devolve-nos o nosso Rabo Amarelo. Esqueci-me de uma vírgula depois disto, Certo, então isso nos dá o título do projeto. E a próxima coisa que vamos fazer aqui é fazer a nossa capacidade de resposta. Nós vamos adicionar mídia, e eu vou fazer Max Max com eu vou fazer 768 pixels aqui. Então, estamos mirando em qualquer coisa. São 760 pixels. A não ser que nós vamos fazer portfólio de pontos Portfólios vamos ter como alvo nossa turma de portfólio, e então nós vamos apontar nossas três colunas aqui são chamadas três. Está bem. E o que vamos fazer aqui vai mudar isso para mudar nossa coluna de grade, e vamos mudá-la para abranger seis. Então, essencialmente, como estes Ah, à medida que ficarmos menores aqui, estes vão mudar, também. E assim, vão três vão seis. Ah, então isso é essencialmente o que isso está fazendo. O ar aqui é porque, verdade, na verdade, isso é por causa de um aparelho. Mas também este editor, talvez tenha sido atualizado, mas geralmente não foi reconhecendo esta grade CSS. Então essa é uma das razões pelas quais algumas dessas coisas têm esses pequenos ares nele no meu I D. O próximo que vamos fazer é fazer, então, o próximo tamanho de tela para baixo que vamos mirar. Então, vamos fazer a mídia. Fazemos Max com, e vamos fazer 480 pixels e estamos aqui. Vamos mudar a coluna da grade, e vamos mudar isso para abranger 12. Então, ele vai estar cheio, e então vamos definir o texto para alinhar no centro e que isso é o nosso e, na verdade, novamente , uh, precisamos mirar. Precisamos mirar algo aqui. Comecei a escrever. Sempre faço isso um pouco quando mexo com as coisas responsivas. Às vezes eu esqueço de digitar a declaração real aqui. Como o quê? Estamos mirando o elemento aqui. Então vamos mirar que essa carteira chamar três elementos novamente aqui. E então nós vamos dizer isso para abranger 12 e linhas de texto lá. Certo, isso nos dá nossa capacidade de resposta. Agora, nós ainda temos este pouco aqui em baixo, e na verdade o que eu percebi é que isso não tem nada a ver com o CSS. Se voltarmos aqui, , tenho uma estrada que está aberta aqui, e nunca a fechei. E precisamos ter certeza e voltar. E precisamos fechar essa fila assim e depois aquilo. Então basicamente estávamos aninhando dentro de outra fileira, e isso estava causando nossos problemas. Então agora você vê aqui que este ar todo o caminho, que eles devem ser do tamanho que eles deveriam ser, então nós realmente não temos que dimensioná-los. Se apertarmos isso para baixo, então você vê que ele se transforma em isso é onde nós mudamos da extensão três para a extensão seis. E se continuarmos, eventualmente, chegaremos onde é Ah, é uma coluna com largura ou o que for. Então, está cheio com. Então é isso que a parte da capacidade de resposta faz por nós. Ajuda esse dedo do pé. Ah, faça isso. E então, é claro, nós ainda temos aqui em cima nosso projeto aqui. Podemos entrar, se quiser. Você pode entrar aqui. Deixarei isso como algo para você. Talvez um pequeno desafio para você descobrir é, você sabe, entre isso assim e então quando chegar ao máximo com isso, talvez você queira fazer. Talvez queiras apontar algo no meio daqui, aqui para que isto pareça um pouco melhor. Então eu vou embora. Isso é um desafio para você, para descobrir como seguir em frente e fazer isso. Então, na verdade, é isso. A seção de portfólio parece que pode ser um pouco mais complicada, mas na verdade extravagante. Mas Box faz todo o trabalho para nós. Uma vez que você começa este primeiro item configurado aqui, você realmente pode apenas tipo de copiar e colar o seu caminho através do resto dele. E lembrem-se, quando chegarem a isso, quando quiserem criar uma nova linha, não se esqueçam de fechar a linha e depois adicionem uma nova linha aqui. Hum, e como eu disse de novo, caixa chique faz, faz todo o trabalho duro aqui. E a outra coisa é, apenas certifique-se de que esta fonte de dados está direcionando a div ou o que você quer aparecer. Ah, essa caixa de conteúdo quando aparece aqui e uma vez que você faz isso, é realmente muito simples. 9. Crie a seção de clientes: esta lição. Vamos criar esta seção de meus clientes aqui. Então, é bem simples. Apenas dá ah, testemunhos diferentes ou assim por diante novamente. Claro, você vai querer usar os que você tem de seus clientes ou de seus clientes . E de novo, vamos precisar fazer upload de algumas imagens. Então eu vou entrar neste, clientes um aqui que eu tenho, e então nós vamos para o nosso espaço de trabalho ou sua estrutura de pastas, e vamos criar uma nova pasta sob imagens novamente, e vamos chamar este de clientes. E eu só estou fazendo isso para ter um pouco de organização que realmente poderia colocá-los portfólios. Deixe-me arrastar isso até aqui só para criar um pouco de organização aqui. Nada muito louco. E então eu vou arrastar estes até aqui, e estes são voltar aqui, estes ar 300 por 300. Então, essas imagens de ar realmente quadradas. Então, se você está procurando o tamanho que você precisa para o uso, é isso que você tem, certo? Então, essas são todas carregadas. Ele admite que há um Ruanda Stree 100 etcetera é como eles são nomeados você pode, claro. Nomee-os como quiser. Ah, para este. Vou agilizar um pouco aqui só porque já fizemos o cabeçalho da seção um pouco agora. Então eu sinto que provavelmente tem isso para baixo, então eu vou apenas cair no cabeçalho da seção. É exatamente idêntico ao que fizemos antes. Então idéias de seção, clientes, uma chamada de linha de contêiner, título de seção de cabeçalho de 12 seção e o texto principal aqui. Então não, isso é muito simples. Deixa-me ir em frente e fechar esta secção para não me esquecer assim. Deixa-me ir em frente e fechar esta secção para não me esquecer assim. E também vamos fechar o contentor aqui para não nos esquecermos disso também. Certo? De modo que isso essencialmente nos dá o nosso começo aqui. Então agora nós temos apenas começar Rose que nós temos um local de construção disso, e então nós vamos apenas construir são uma espécie de fileira de depoimentos. Então, começando aqui, depois do cabeçalho da seção, vamos para a aula de div, e vamos fazer fila e vamos fazer depoimentos tipo de. Apenas seguindo o padrão do que fizemos antes. Em termos de nomeação havia duas classes div e nós vamos chamar quatro porque estamos fazendo três depoimentos de largura. Então vamos fazer um item de depoimento. Eu acho que e dentro disso, nós vamos ter a primeira coisa. Nós vamos ter um monte da imagem, e nós vamos fazer classe igual, indo para imagem arredondada assim. E então vamos fazer um avatar de depoimento do caso de querermos atingir isto especificamente. E então nossa fonte será onde colocamos nossas imagens. Então nós estamos indo para imagens clientes e, em seguida, corta orelhas Erawan traço 300 ponto J peg, deixe-me rolar isso para que você possa ver que Então por diante. E eu realmente tenho um zero extra lá dentro. Certo? Então deixe-me arrastar isso. Ok, então é aí que nossas imagens de ah estão localizadas, e eu estou apenas fazendo o em todos como o nome. Esta é Jenny Nups. Jenny Dough. Está bem. E, em seguida, feche nossas tags de imagem. Então essa é a primeira coisa que vamos colocar aqui. E depois disso, então vamos criar uma div, e vamos fazer div e vamos para a aula é igual a depoimento, e vamos fazer o centro de texto. Eu acho que e, em seguida, dentro disso, nós vamos fazer 83 e deixe-me rolar para baixo CNC enquanto estamos fazendo isso, nós vamos para um H três e, uh, dentro disso, nossas aulas para isso vão ser classe é igual. Um título de testemunho como este. Mais uma vez, estamos apenas seguindo o que fizemos antes em outras áreas sobre como estamos nomeando isso . Nós vamos fazer estupendo ou o que você quer destacar aqui é o que essa pessoa disse. Ah, e então nós vamos fazer classe P igual, e nós vamos fazer conteúdo de testemunho. Então este é o conteúdo. Hum, deixe-me apenas pegar este texto aqui, tipo de tudo isso fora e depois, o que nós vamos fazer é apenas nós vamos apenas fazer nosso testemunho, autores quando nós deixamos isso dentro, então esse é o nosso texto para um testemunho. E depois vamos fazer a aula P é igual a depoimento. Autor , autor de depoimentos e redes, claro, como fizemos com a nossa velha bolsa de Jenny. Certo, isso nos dá uma estrutura básica para nossos depoimentos. Hum, isso é na verdade, quero dizer, é isso. Essa é a estrutura básica aqui é esta pequena seção aqui. Então, para os outros depoimentos, então nós vamos apenas ir em frente e copiar e colá-los dentro Você só copia e cola. Isso e esta seção aqui e depois Mudeo que precisar mudar. Isso e esta seção aqui e depois Mude Vou deixar cair no que já tenho. Então estas são as outras imagens que temos aqui? Na verdade, eu meio que estraguei o título. Eu estava olhando. Este é, na verdade, quero dizer, fazemos eu acertar, porque é fantabuloso. É ainda melhor. Ok, então isso nos dá o nosso tipo de estrutura básica ou html Ah, estrutura. Aqui está em nossas estradas e nosso lado do contêiner dentro de nossa seção. Então, nós somos muito bons para ir sobre isso na estrutura html. Vá e guarde isso. E então eu vou para o nosso CSS, e nós vamos editar nosso CSS aqui. Então, novamente, vamos pegar o cabeçalho da seção CSS, e então nós vamos descer aqui e eu realmente vou nos dar um pouco de espaço aqui e voltar para cima. Torna um pouco mais fácil trabalhar. Ok, então agora vamos fazer nossos depoimentos e para nossos depoimentos. Na verdade, há um pouco mais que vamos fazer aqui. Então a primeira coisa que vamos fazer olhos não faria clientes. Então essa era a idéia de toda a seção, e nós faríamos o fundo novamente, e nós vamos mudar isso para o nosso f a f a f um como aquele assim. Então eu nos dá que um pouco grande fundo e então nós vamos atrás nós vamos atrás de nós vamos atingir cada item de depoimento. Você se lembra se você olhar para este ah, o que temos aqui, você vê, que tipo de tem um quadrado em torno dele. Então essa é uma das coisas que queremos fazer anos. Queremos criar esse item de depoimento. Ah, e então nós vamos para o fundo, e nós vamos configurá-lo para então nós apenas fizemos o fundo da seção para Gray. Agora vamos fazer o fundo deste Dedo Dedo Branco Teoh. Dê para que ele se destaque. Em seguida, fazemos preenchimento e faremos 30 pixels, 25 pixels, 20 pixels e 25 pixels. E isso meio que vem de brincar com isso um pouco, um, para chegar onde isso parecia meio centrado para mim. Tem a ver com, Por exemplo, esta tag parágrafo provavelmente tem uma margem sobre ele. Assim, o preenchimento na parte superior e na parte inferior é 10 pixels diferente. Então isso é 30 pixels, e isso é 20 pixels. Isso tem a ver com esse carinho. Você poderia apagar esse estofamento. Você poderia se livrar desse estofamento. Você poderia fazer dessa maneira, ou você poderia fazer dessa maneira. Depende de como você quer. Ei, quer tuitar isso? E então nós vamos fazer borda um pixel sólido, e nós vamos fazer ah f um tem para uma maçã em Fum. Ok, então isso vai dar a ele um pouco de uma fronteira. Então agora você pode ver que está começando a se parecer um pouco mais com o que tínhamos em nosso exemplo . Isso servirá de testemunho, e faremos avatar. Então vamos direcionar o avatar real aqui para exibir bloco para que possamos realmente direcioná-lo com regras CSS para a margem zero auto. Então ele vai centralizar a imagem, hum, e então nós vamos fazer com ah 100 pixels. como se isso fosse nós vamos torná-lo menor. Então agora ele está tipo de sentado dentro daquela caixa não é apenas ocupado todo o espaço. Ok, então eu acho que parece melhor. Pegue um monte dessas coisas que você perdoa. Você pode mudá-lo. No entanto, você sabe, o que você acha que parece bom, mas isso é apenas o que eu fiz com X. Nós vamos fazer o título de testemunho. Ah, e para isso, vamos fazer o tamanho da fonte. Faremos 1,75 ram. Tem cerca de 28 pixels. E então, para conteúdo de depoimento, vamos fazer uma altura de linha de 1,3. Basta dar Ah ah, tem um pouco melhor. Olha, hum, e então nós vamos fazer, na verdade, é isso. O que é que vamos fazer sobre isso? E lá embaixo, vamos fazer um depoimento. Nós vamos fazer, autor. Então este é o autor e deixe-me rolar para cima. Então, testemunho, autor, vamos apenas definir um tamanho de fonte. Na verdade, vamos fazer isso menor do que 0,8 ou sou assim para fazer um pouco menor. Ok, então se nós meio que expandirmos isso um pouco aqui para que possamos olhar para ele. Veja, nós temos isso aqui, e se você olhar para o nosso exemplo do que estamos construindo, isso é o que temos lá, então parece muito o mesmo. E é isso, na verdade, é isso. Então esse é o metal H. Esse é o CSS. E é assim que se constrói. Ah, a seção de clientes aqui, muito simples. 10. Crie o formulário de contato: esta lição. Vamos construir esta seção inferior aqui que tem o tipo de início do nosso pé e tem o contato quatro minutos nele. Se você se lembrar, este é apenas um tipo de formulário de contato Ajax alimentado, mas ele apenas apertou Get quote. Se o e-mail enviado com sucesso, ele vai dizer com sucesso vai colocar em um e-mail beliche aqui e clique Obter citação e você pode ver se não, ele vai retornar na mensagem aérea aqui. Então é isso que vamos entrar no prédio. Mas vamos apenas fazer o h dois melas e CSS neste vídeo ou nesta lição, e então vamos entrar no PHP e depois no script Java que precisamos escrever para tudo isso. Dito isso, vamos tirar isso do caminho e vamos entrar em nosso h A maioria vai voltar para o fundo. Ah, novo , você sabe, eu vou meio que avançar um pouco com essa seção de cabeçalho ah porque esta é na verdade esta é um pouco diferente, então por que eu não vou em frente e apenas digite este para fora então vamos apenas ir seção e vamos fazer classe igual seção sobre. Na verdade, eu era igual a contato. Uh, certo. E então vamos fazer nossa classe ativa igual a contêiner. Classe ativa é igual a linha e, em seguida, aqui vamos dividi-lo Normalmente ser. Faça coluna 12. Vamos continuar com isso, mas na verdade aqui, vamos dividi-lo. Então vamos para Div. Classe é igual a chamada seis, porque nós vamos ter o Nós vamos ter a seção à esquerda aqui. E então temos a parte de contato aqui à direita. Então vamos dividir isso em seis. Está aqui. Seis colunas. Certo, então vamos fazer essa. E então vamos em frente e fazer o outro aqui, então temos nossa estrutura básica no lugar. Tudo bem, isso nos dá 26 de calma com colunas. Ah, e agora quando aqui vai fazer o cabeçalho vai fazer melhor. Vamos fazer classe igual seção, cabeçalho e dentro que vai fazer o nosso H uma classe é igual ao título da seção. E então nós também vamos adicionar texto deixado aqui e então aqui vai fazer isso. Contrate-me como este pergaminho aqui em baixo. Então nós estamos começando a obter um pouco de algo aqui e então nós vamos fazer P palmas tag parágrafo igual chumbo. E então temos um pouco de ipsum quente aqui contra Deixe-me cair nesta Lauren ipsum aqui . Certo? Então esse é o nosso texto falso. Ah, e depois abaixo disso vamos criar. Na verdade, isso está fora dos cabeçalhos. Isso é o que está na nossa cabeça. Você tenta manter a cabeça ou limpo para o título e descrição e, em seguida, para baixo. É aí que vamos fazer a nossa lista com o nosso endereço, número de telefone e endereço de e-mail . Então nós vamos fazer uma lista de freiras ordenadas, vamos dar-lhe uma lista de classes iguais em linha, e então nós vamos fazer. Classe Ally é igual a, uh, lista em linha item como esse, e ele vai ser nossos itens de linha. E depois vamos dar isto. Vamos dar esses ícones. Vou fazer I classe igual vai usar o nosso telefone. Incrível. Uma espécie de um mapa de traço, marcador de traço como esse. E isso nos dará nosso ícone rolar um pouco para baixo aqui. Então ele nos dá nosso ícone aqui, e então vamos fazer eu acho, em uma pista freelancer e então 55 80 algo assim. Ok, então vamos o nosso primeiro Ah, na linha de item. Aqui, Sra. Vá em frente e faça a classe Ally lista igual no item de linha aqui. Vamos em frente e criar nossa 3ª 1 bem rápido. Então classe Ally é igual a lista no item de linha. Tudo bem, então esses são os nossos três itens da lista, e então dentro deste vai servir. Ah, bem, eu tenho classe igual e vou fazer f a f um telefone para o número de telefone. E estou de novo. Você não pode usar essas coisas exatas. Talvez você não queira incluir um número de telefone. Quero dizer, que seja. O que funcionar para a sua situação. Mais um, eu vou dio 88 e vamos fazer 555-1 para um tipo de número de telefone falso. Muito bem, isso dá-nos o nosso segundo item da lista. E então o 3º 1 vai ser classe I igual a f a f a. Ah, traço envelope ligado. Então faremos. Faremos um e-mail no Domain Dot com. Você poderia ligar estes para que seus clicáveis e assim por diante. Só estou me mantendo simples agora porque acho que a principal coisa com que estamos preocupados aqui é a forma, certo? Então isso nos dá novamente uma espécie de estrutura básica até este ponto. Agora podemos descer para a nossa segunda coluna aqui. Podemos construir nosso formulário, então vamos formar ação, e vamos definir isso igual para processar o PHP dot. Ah, nós vamos realmente executar isso em última análise via JavaScript. Mas nosso script de processamento PHP está no processo dot PHP. Então nós estamos apontando para que nós estamos indo para método igual post, e nós estamos indo para fazer classe igual escuro e formulário de contato. Certo? Então isso nos dá a nossa forma lhe dará um título. Então h três h três e, em seguida, classe é igual ao título do formulário e vai fazer contactar-me. Tudo bem. E depois embrulho isto no campo informativo. Então eu faço div classe igual campo de formulário como este apenas para o tipo de fins de segmentação vai fazer classe de entrada igual tipo de texto igual nome de texto é igual ao nome deste formulário. Campo é nome porque queremos Este é o nome da pessoa fará um espaço reservado igual a e fará nome e dirá que isso é necessário. Ok, então vamos fechar isso, então isso cria o nosso primeiro campo de formulário. Você pode ver lá. Uh e então eu vou apenas copiar e colar isso porque nós vamos ter um par aqui, então nós vamos ter, ah, e-mail, e-mail, e então nós vamos ter uma área de texto. Acho que podemos ir em frente e colocar esse aqui assim. Tudo bem, então para o 2º 1, então a classe vai ser de texto, mas também vai ser e-mail porque vai haver uma entrada de e-mail. Vamos mudar o tipo para e-mail. Isso permitirá a validação no lado do navegador, o nome que vamos definir para e-mail e, em seguida, o espaço reservado Nós também estamos indo para definir como e-mail e vai fazer que um necessário também. Ok, então agora nós temos o nome de e-mail, e em seguida, no próximo, nós realmente vamos mudar isso para área de texto. E quando fizermos isso, precisamos vir até aqui. Precisamos fechar isso. Isso requer um fechamento. Acho que é isso que nos dá uma área de texto. Ah, e então a classe vai ser texto um tipo de área de texto. Não precisamos do tipo porque não é. É Nós definimos isso quando dizemos que é uma área de texto. Então não é um nome de texto vai, uh, vai ser espaço reservado mensagem vai ser. Fala-me do teu projecto, está bem? E vamos deixar esse necessário também. Ok, então deixe-me ir em frente e salvar isso rapidinho e atualizar isso. Tudo bem? Então agora temos e-mail de nome e nossa caixa de mensagem aqui. A última coisa que precisamos colocar aqui é o nosso botão. Então nós vamos colocar isso fora de todas essas dibs, dispostos a entrada, e nós estamos indo para classe igual botões enviar, e nós vamos fazer tipo igual a enviar. E estamos fazendo valor igual a obter citação como esta, e então precisamos adicionar uma div aqui. Div I d é igual a mensagens de status. Então é aqui que vamos jogar mensagens de status ao ar. Você já viu isso antes. Este é apenas um nem PDI div. Só nos dá algo para mirar em um lugar para colocarmos nossas mensagens de status . Então esse é o HTML. Quero dizer, é uma forma bem básica, listas e assim por diante. Muito do que é feito com isso vai ser feito dentro do C s. Ok, então nós temos um monte de formulário de contato CSS, e então nós também temos e nós temos alguns tipos de estilos globais que nós precisamos classificar de bagunça com aqui um pouco. Então, Então, vamos em frente e fazer os estilos globais primeiro. Já que essas técnicas, você sabe, apenas para manter a linha de como devemos construir isso. Então a lista na linha é colocada logo abaixo deste texto, certo? Bem aqui. E então vamos fazer a lista de pontos e a razão pela qual estamos fazendo isso assim para que você possa usá-lo em outros lugares, não apenas aqui. Então lista na linha e vamos fazer display flex, e vamos fazer flex flex. Rap está definido para quebrar, e uma linha pode rolar para baixo para que você possa ver o que está acontecendo aqui. Conteúdo da linha. Uh, nós vamos fazer Flex Start. Certo, isso só tem a ver com o jeito que queremos essa linha de reboque e assim por diante. Ah, você sabe como tudo o que queremos que seja colocado para fora. Então estamos usando caixa flexível para esse preenchimento. Zero Ah, vamos fazer o tipo de lista? Nenhum. Então eu fico com todos os marcadores de tamanho de fonte 14 pixels e são realmente vamos fazer, uh, 0.85 ram. Certo, então isso é cerca de 14 pixels e depois cor. Nós vamos para o número 999 Ok, então agora, porque nós temos esse aperto baixo, ele não necessariamente se parece com qualquer coisa que você possa ver. Nós fomos de ah, lista de cima para baixo com balas para agora nós temos tudo tipo de lado a lado e assim por diante . Então isso nos dá um pouco basicamente fora e nós vamos fazer lista. Agora vamos segmentar os itens dentro desta lista no item de linha, e vamos fazer flexão crescer. Deixe-me rolar para baixo aqui, Flex crescer, e vamos definir isso para um. Então isso é essencialmente bom. Você percebe agora, em vez de todos eles terem deixado uma linha ao lado do outro, ele diz para crescer e preencher o espaço restante aqui. Isso é essencialmente o que estamos fazendo aqui. Então, novamente, isso é algumas coisas de caixa flexível, hum, mas funciona muito bem para esse tipo de coisa. E então nós vamos fazer margem inferior cinco pixels. Então quando isso acontece, quando chegamos aos tamanhos de tela menores e ele vai para uma nova linha, ele tem um pouco de espaço. Na verdade, parece nosso e-mail. Deixe-me voltar para cada amanhã. Rápido. Parece o nosso e-mail. Uh oh, sim, porque eu tenho um traço aqui E-mail, como no seu show up. Muito bem, aí está o nosso ícone de e-mail. Você vê isso? Então volte para cá. Tudo bem, então vamos listar no item de linha. Agora, nós vamos fazer os ícones, então nós vamos fazer lista em linha item, e então nós vamos fazer ponto f a e nós vamos apontar esses ícones. Então o que nós vamos fazer aqui é nós vamos, hum, sair. Deixa-me dar-te isto. Vamos dar a estas cores um pouco diferentes. Então nós vamos fazer nossa cor roxa 890 b d. d. Então ele dá isso um pouco de cor, e então nós vamos colocar um pouco de margem para a direita porque eles estão bem ao lado desse texto ou fazer sete pixels. Ok, então isso é meio que move-os um pouco aqui de novo. Se mostrarmos isso, vamos começar a parecer um pouco mais como o que tínhamos. Ok, então tem isso. Então esse é o ah, em linha de itens lá. Isso é o que é isso aqui em baixo. Aquela pequena área de itens de lista ali. Hum, deixe-me ver. Parece que precisamos fazer para o campo real rápido porque nós adicionamos campo estrangeiro também. Vamos fazer o campo de formulário. Então isto é para o lado certo. E vamos fazer margem inferior 10 pixels. Isso nos dá um pouco de espaço aqui. Assim como nós. Veja, nós temos um pouco de espaçamento lá. Acho que isso serve para o nosso ah, para os nossos estilos globais. Agora precisamos entrar no tipo real de estilo específico para o formulário de contato. Então só fizemos depoimentos lá. Deixe-me fazer isso. Vou pegar minha divisória aqui de novo em um pedaço que aqui dentro. Certo, então isso é para o nosso formulário de contato. Ok, então para esta área de contato, primeira coisa que vamos fazer é fazer a cor de fundo. Então vamos fazer fundo, e vamos mudar que 2222 foi o que eu escolhi. Eu meio que gosto que Color faz com que tudo tipo de se destacar cor borda e nós vamos fazer o número 333 assim. Acho que há uma fronteira do outro lado do topo, que afeta um pouco esse tipo de coisa. Nada de importante com isso, mas ajuda um pouco. Em seguida, vamos fazer contato e, em seguida, ponto seção cabeçalho. Então, estamos mirando. Estavam mirando o que um estilo global. Mas estamos mirando um específico para esta seção. Então cabeçalho Seção está em cada um destes, mas foram apenas mirando o interior do contato aqui. Então é isso que estamos fazendo com esta declaração. Então cabeçalho da seção. E então nós vamos fazer borda inferior e vamos fazer Ah, um pixel pontilhado e vai fazer o número 444 assim. Certo? Então isso é outra vez. Esse é o cabeçalho da seção bem aqui. Então ele dá um pouco de lembrar do nosso exemplo aqui nós temos esta coisa ponto ponto ponto pouco aqui, modo que dá um pouco de divisão lá. Então é isso. E então vamos para o título da seção. Então, contate o título da seção e o título da seção. Vamos mudar a família da fonte para Yellowtail. Então cauda amarela cursiva sem serif. Tudo bem. Ah, e então vamos mudar a cor de novo. Os dedos são roxos. 890 foi um d b b d d. Tudo bem, então isso é que, hum, então isso é que essa seção, hum, hum, pensando em ir em frente e olhar para esta seção principal aqui, Deixe-me ir e apenas adicionar texto deixado assim. Tenho certeza que foi deixado texto nisso. Então isso é Ah, isso faz isso. Tudo bem, então vamos voltar aqui. Então, há o título da seção. Acho que precisamos mudar a cor do texto também, porque não é muito. Não está a aparecer muito bem lá em baixo. Então deixe-me entrar e fazer. Eu alvejei isso? Eu vejo. Bem, vamos apenas fazer contato principal e vamos fazer isso. Chumbo de contato. Vamos fazer a cor. Vamos fazer. Vamos tentar isto para começar. Vês? Vês? Veja, é um pouco demais é devido 555 Sim, talvez 666 Uh, vamos evitar essa. Certo. Ok. 777 Isso parece bom para mim. Isso parece onde estamos. Ok, então isso nos dá a nossa cor para isso. E parece que o nosso lado esquerdo está quase pronto. É muito bom ir lá. Talvez ter algumas coisas voltariam para, mas isso parece muito bem estilizado para nós. Meu próximo é o título do formulário. Então vai ser aquela mensagem de contato ou passar para o lado direito. Quando fazer cor 999 Um, e vamos fazer tamanho da fonte 2.25 grama e margem 000 10 pixels zero. Certo, então nos dá um ótimo título de contato e agora vamos mirar isso. Então esta forma é uma escuridão onde nos lembramos que demos a classe escura porque é uma forma escura . Nem todas as formas do lado dela serão assim. Então nós estamos apenas direcionando este especificamente, então nós vamos fazer escuro, e então nós vamos fazer nossos campos de texto e, em seguida, escuro e nossos campos de área de texto. Agora, isso é todos os nossos campos. Exceto para o nosso botão enviar, se você se lembrar porque demos nome a classe de texto, demos e-mail a classe de texto e e-mail e, em seguida, demos a este a classe de área de texto. Então, basicamente, apenas visamos todos esses campos. E agora podemos, podemos, uh, uh, estilizá-los. Então nós vamos para cor ou 999 Isso vai ser a cor do texto e, em seguida, cor da borda. Consulte cor da borda. E vamos fazer Ah, 222222 Vamos fazer a cor de fundo. Nós vamos fazer RGB a aqui, e nós vamos fazer preto, que é 255255 255 No entanto, nós vamos dar-lhe uma cidade sem pagamento, então vamos fazer 0,1. Então isso nos dá que esse tipo de cor acinzentada você poderia encontrar uma ótima cor e apenas fazer um feitiço se você quiser. Mas eu estava tipo, bem, deixe-me apenas mexer com Theo Pasty porque então você pode vir aqui e dizer, bem, bem, dois agora eu não gosto que você pode tipo de brincar com isso até você conseguir o que você gosta, para que seja um pouco mais fácil trabalhar com. Então, há isso e depois vamos fazer uma sombra de caixa, e vamos fazê-lo no set. Então isso vai fazer uma sombra, uma espécie de dentro do campo de formulário. Então é inserida 02 pixels, três pixels em, então RG rgb a e fará 000 e, em seguida, 0,6. Então isso é branco. E então temos um tipo de ah pacenti nele. Então você pode ver que isso cria aquela pequena sombra lá dentro. E você poderia brincar com esses números. Vamos deixar isto óbvio. Vamos fazer 20. Veja, isso traz tudo para baixo. Se fizermos 30 aqui, você sabe, isso meio que desaparece um pouco, etc. Ensopado 20. Aqui. Você pode brincar com isso com esses números até conseguir. Olha como queres que pareça. Então, este ar é apenas um tipo de números que eu mexi com aqui, ok? E acho que para mim, gosto da forma como essa sombra se parece. Ah, bem, também foi só copiar isso. Não me lembro do topo da cabeça onde o Box Shadow estava com o suporte do navegador. Mas vou em frente e fazer isso. Que garoto? Sombra de caixa. Assim no caso de precisarmos disso, se não for necessário, não vai doer nada. Então vamos em frente e jogar isso lá dentro. Tudo bem, então essas são as pequenas áreas de texto aqui que você pode ver de novo. Esses parecem muito parecidos com o que tivemos em nosso exemplo Aqui. Hum, agora nós precisamos ir em frente e mergulhar no botão então vamos fazer ponto escuro novamente Will fazer botão enviar, e nós vamos fazer cor vai fazer branco f f f f e nós vamos fazer cor de fundo, cor de fundo faria RGB um outra vez. Então, se você não está familiarizado, este é apenas o RGB RGB verde vermelho, cores azuis e, em seguida, um é para o A pass ity. Então isso é essencialmente o que rgb A é. Então as primeiras 3 letras ar o RGB e, em seguida, a última é a opacidade no entanto você diz que 000 novamente é branco e, em seguida, vamos fazer 0.2. Então isso nos dá e você sabe que pode ir para o outro lado. Se você quiser certo, você pode fazer o 5555 e então eu quero dizer, você pode tipo de fazer isso como quiser, mas isso nos dá uma bela aparência de cor preta. Eu vou fazer borda, hum, com um pixel sólido e vou fazer RGB a novamente e vai fazer zero 00 e 0.1. Então as fronteiras um pouco mais escuras. CNC agora tem uma borda um pouco mais escura lá. E então nós vamos fazer fonte esperar 300 porque eu não gosto daquele olhar ousado Ah, texto sobre isso. Certo, então esse é o botão. E então precisamos fazer o pairar para o botão. Então fazer escuro e vai fazer ponto botão, uh, enviar, enviar e, em seguida, passar o mouse e eles vão dio botão ponto escuro Enviar, enviar e vamos fazer foco Se alguém acontecer dedo do pé, use seu botão guia para tipo de através destes. Você pode mudar o foco aqui então vamos fazer o foco e vamos fazer, Ah, cor de fundo e nós vamos fazer. Nós vamos mudar a cor de fundo rgb A e vai fazer 0000 0.35 Ok, e então vamos fazer a cor da borda. Nós estamos apenas mudando as cores do fundo nas bordas essencialmente sobre o foco e sobre foco. Assim, a cor da borda faria rgb um novamente 000 zero. Ah, aponte para e depois vamos fazer ponteiro do cursor. Ok, então? Bem, isso nos dá que este é realmente o botão aqui. Então, novamente, guia guia guia, guia em foco aqui ou em pairar. Você pode ver que o botão muda um pouco. Certo, então isso nos dá esse estilo. Ah, e então temos nossas mensagens de status, então vamos em frente. Vamos em frente. Estilo. Esses altos farão o status. Mensagens de status. E isso vai ser uma espécie de layout geral ao estilizar as mensagens de status . Então, margem Ah, topo. E faremos 0,7 carneiros. Isso vai nos dar uma pequena margem entre isso e nosso botão, e então vamos fazer estofamento, e vamos fazer uma borda. Então ele dá um pouco de preenchimento em torno da mensagem de status. E agora, agora precisamos fazer por erro. Queremos o vermelho e para o sucesso. Queremos o verde. Então vamos fazer mensagens de status e vamos fazer ponto, ponto ar, e vamos mudar isso. Então vamos fazer isso, e vamos fazer uma caneta naquela aula. Lembre-se, se voltarmos ao HTML, tudo o que fizemos foi uma div com mensagem de status. Não tivemos sucesso aéreo. Vamos escrever isso com RJ Query. Certo, então não temos que nos preocupar com isso em HTML, mas precisamos ter o estilo. Ok, então por diante, claro, claro, claro que você faz isso. Então, quando fazer fundo e acaba sendo D.C 3545 e eu seria capaz de ver qualquer coisa disso agora, mas vamos assim que tivermos tudo ligado. Então vai ser a cor de fundo e que vai ser aquela cor avermelhada, e eles vão fazer cor. Eu quero esperar e, em seguida, aqui em baixo, fazer mensagens de status e vou fazer ponto de sucesso. E, na verdade, podemos pegar essa cor aqui deve ser capaz de aguentar isso. Eu estava fazendo tanto no ar e sucesso, mas nós realmente devemos construir colocar isso lá em cima assim, e então nós não temos que re reescrever código. Tudo bem, então vamos fazer fundo, e esta vai ser aquela cor verde. Então isso acaba sendo para oito um 745 e aqueles foram apenas uma espécie de brincadeira com aqueles para obter a cor certa. , Mais uma vez, você pode fazer isso o quê? O que você quer. Certo, então essa é a seção do rodapé. Essa é a parte HTML e CSS de pensar que estamos Nós estamos praticamente onde precisamos estar se há algo que precisamos ajustar à medida que avançamos aqui porque estamos realmente testando isso ainda. Hum, então vamos em frente e twittar isso aqui. Mas isso deve ser o HTML e CSS Ah, para essa seção. 11. Crie o contato com o Script de processamento no PHP: esta lição. Nós vamos escrever nosso script de processamento PHP, Lembre-se, do nosso para mim disse a ação para processar dot PHP. Nós vamos hackle isso via script Java para consulta BOJ. Mas ainda assim, você sabe, se nós enviarmos para lá, o que eu não fiz muito em termos de saída que você recebe de volta. Mas ainda assim, você sabe, se este formulário for enviado para esta página, ele ainda deve processá-lo, mesmo que não estivéssemos seqüestrando via JavaScript. Então, no caso de alguém ter o Javascript desligado Ah, o e-mail ainda é enviado a mensagem de que a resposta que eles recebem não será necessariamente a mais, , você sabe, a mais bonita, Mas ainda assim, isto vai, hum, tudo ainda deve funcionar. Então, é por isso que vamos colocar esse script de processamento nisso. Que você ainda está bem. Quero dizer, as pessoas hoje em dia de pessoas não têm o javascript ligado. Há um monte de web que eles não podem sequer usar um monte de sites e desenvolvedores hoje em dia apenas uma espécie de assumido que javascript está ativado. E então eu não acho que estamos fora dos limites em fazer a mesma coisa de qualquer maneira. Vamos em frente e criar este novo a partir do arquivo vai chamar processo dot PHP. E é apenas no tipo raiz desta pasta de trabalho que temos aqui. Então é bem ao lado de indexar ponto cada melão em Uma pergunta que eu sei provavelmente poderia vir acima com isso é, Bem, nós não temos página html, mas estamos sentando e estamos enviando para esta página PHP. Isso não precisa ser PHP? Uma resposta é, na verdade , não, porque não há nenhum código PHP na verdade nesta página. Então não há nada para processar, mesmo que o formulário ah envie dados para um script de processamento PHP, esse script é um arquivo separado, ah, ah,aqui para que você possa realmente fazer uma página html index dot e enviá-la para um processo stop página PHP. E funciona muito bem. Então, basta responder a essa pergunta, certo? Então, com isso dito, vamos em frente e abertura e vamos em frente e escrever nosso script PHP. Então a primeira coisa que fazemos, é claro, tags PHP abridor e então vamos configurar são uma espécie de nosso con figo. Agora vou ficar com isto. Há scripts inteiros que são scripts enormes para fazer formulários de contato e assim por diante. Eu estou mantendo isso realmente simples porque eu não queria fazer este um enorme curso PHP. Ok, então se você quiser mergulhar no PHP, eu tenho um monte de cursos de pessoas de pêssego, você sabe que estão disponíveis que você transmitiu acesso para você ir armazenado fora John Morris on-line ponto com. Ou, se você estiver no compartilhamento de habilidades, basta ir para a minha página de perfil, e você verá todos eles lá. Mas estou tentando manter o PHP o mais limitado possível. Então a primeira coisa que vamos fazer é fazer o envio para. Então, para quem vamos enviar isto? E isso vai ser Lembre-se, esta é uma página de citação ou uma ação que vai mais perto. Este é um pedido de orçamento pago. Então este vai ser o teu endereço de e-mail. Ok, então eu só vou definir isso para nenhum burro em John Morris on-line ponto com ou o que quer que isso seja isso foi isso vai ser um endereço de e-mail falso aqui para mim, mas você obviamente gostaria de colocar no seu endereço de e-mail de seus clientes e-mail endereço e , em seguida, o assunto. Você faz a linha de assunto o que quiser. Esta é a linha de assunto que o e-mail tem quando chega. Vou colocar um novo pedido de orçamento e, na verdade, deixe-me voltar aqui. Bem, na verdade, é só fazê-lo aqui. Geralmente fazer aspas simples. Às vezes, eu desligo. Então, de qualquer maneira, então vamos fazer que aspas simples apenas consistência. Então vamos verificar e ver se há algum post fora mesmo quando este é enviado via Ajax. Ele ainda é reconhecido como sendo enviado como um tipo de post de envio. Então, queremos ver se o Post Data foi enviado e vamos verificar se o Post está vazio ou não. Se está vazio, então não vamos fazer nada. Você poderia, claro, colocar uma outra declaração aqui e dizer algo como, você sabe, ecoar nenhum dado ou algo assim. Então, se você quiser fazer isso, você pode fazer isso. Pelo que tenho, estou deixando em branco. Pelo que tenho, Então você pode decidir o que quer fazer lá. Tudo bem. Próxima coisa, reduza. Indo para criar uma lista branca. Então esta é uma lista branca de campos de forma de pés. Bem, só que vamos fazer nomes iguais. Ah, Post e nós vamos fazer o nome. E novamente, há maneiras muito chiques e concisas de você fazer isso sem escrever tudo isso para ambos assim. Mas novamente, para aqueles de vocês que não sabem necessariamente uma tonelada de PHP, eu não quero tornar isso muito complicado. Então, tudo o que estamos fazendo é pegar os dados do formulário enviado. Então, quando o primeiro submetido, ele irá essencialmente enviar ah pedido com estes dados neste post super global aqui. Então ele se parece com uma variável PHP. Como o que nós aparecemos. Mas é estruturado um pouco diferente. Este basicamente o nome que foi enviado, o e-mail que foi enviado na forma como Isso é realmente tudo que você precisa saber para entender isso, e eu vou fazer mensagem ele faz mensagem igual a. E isso é uh uh uh uh post e mensagem. E então nós vamos fazer honeypot igual e vai dio post e sua URL. E isso realmente me faz eu não acho que nós adicionamos o pote de mel à nossa forma. Perdemos o pote de mel quando fizemos a nossa forma. Então, na verdade, vamos voltar para o índice html. Está tudo bem. Não é um grande negócio para acrescentar. Então vamos adicioná-lo aqui logo abaixo da nossa área de texto. E então nós vamos fazer div classe igual campo de formulário. Então vai olhar o que é um pote de mel. É um campo que, quando um baht passa, um baht sente que tem o dedo do pé muitas vezes em robôs. Eles vão preencher algo em todos os campos aqui, certo? E então ah, querida, erva é basicamente como se um urso não resistisse ao mel. É como se um corpo não resistisse a preencher este campo. Então vamos criar um campo que o Baht preencheria, mas um humano não. E a razão pela qual o humano é porque vamos definir isto para não mostrar nada. Ok, então isso não vai realmente mostrar para um humano, mas uma leitura bott isso vai ver este campo e eles vão preenchê-lo. Onde está o humano não faria. E é assim que podemos dizer se temos uma garrafa, não o tipo de entrada é igual a oculto. Essa é uma maneira muito rudimentar de lidar com spam. Essa é uma maneira muito rudimentar de lidar com spam. Mas se você fizer isso direito, realmente pode funcionar. Então você faz Nome é igual a U R L e então faremos. Espaço reservado é igual a você, Earl, certo? Nada disso importa porque não vai aparecer. Mas o objetivo de um pote de mel é que os spammers descobriram que as pessoas fazem isso. Então, se você apenas nomear este tipo de entrada é igual a pote de mel, bem, os robôs provavelmente terão algo nele para reconhecer isso e não preenchê-lo. Ok, então você precisa fazer com que pareça um campo de formulário real. E você é l é como, quando você usa o termo pote de mel, Teoh isca o pote para preenchê-lo. A maioria dos robôs. A coisa que eles absolutamente querem colocar em seu site é lá você está l É por isso que eles estão spam. Então, quando você usa um U.R.L U.R.L como um pote de mel, pode ser bem eficaz porque as pessoas vão querer preencher isso . Então é por isso que eu uso isso aqui. Ok, então este é um campo de formulário. Percebe que não aparece aqui. Se eu me livrei da exibição de estilo ah Nenhum, então Ah , na verdade , não é Bem , é um campo escondido, então não importa, mas não está mostrando mais. Aqui está o ponto. E assim os humanos não vão preenchê-lo, mas o Baht vai. E então, quando o chamamos para o nosso script PHP, podemos pegar isso e podemos testar. E se foi preenchido que provavelmente foi um comprado que enviou este formulário, ok? E então não podemos processá-lo. Então essa é a primeira coisa que fazemos. Vamos verificar o pote de mel, porque se for, ah, se for um pote de mel, é um spam, um spam. Mas nem vamos mexer com nada. Então vamos fazer se não, vazio, vazio, e vamos fazer o pote de mel. Então, se isso não está vazio, significa que foi preenchido. Havia dados enviados para ele. Então vamos fazer Echo J. Sohn Ah, na verdade codificar codificação e vamos criar um ah Air Ray. Agora, a razão pela qual estou fazendo isso é porque quando chegarmos à parte JavaScript, vamos pegar essas mensagens e analisar a quantidade na exibição delas. Este é o lugar onde eu digo que se você se alguém realmente envia este formulário com javascript desligado seu processo formal. Mas o que vai ecoar no dedo do pé? Esta matriz codificada é codificada pelo Jason ou eu não fiz nada para fazer isso parecer mais bonito. Qualquer coisa? Porque eu estou realmente focado no processamento de um jack dele. Eu realmente não estava muito preocupado com Se alguém visita diretamente com PHP para você, você pode querer que você saiba, isso pode ser uma coisa que você quer explicar. E então você faria Ah, você sabe, você teria certeza de fazer isso em seu roteiro particular da maneira que você escreve isso. De qualquer forma, houve um problema. Está bem? E novamente, com esta mensagem em particular, você percebe que eu não estou dando um monte de informações porque isso é se os macacos estavam assumindo que um baht de spam preencheu isso, nós não vamos dizer Oh ha ha ha ha. Conhecemos o seu corpo de spam ou o que quer que seja, certo? Não vamos fazer isso porque não queremos dar a eles essa informação, talvez tentar contornar ou o que seja. Vamos simplesmente dizer que houve um problema e, em seguida, espero que eles se afastem de nós . Está bem? Então, de novo, apenas tenha isso em mente. São quatro lidando com spam. Tudo bem, então agora vamos verificar se há valores vazios novamente. Este é um lugar onde você poderia fazer algum script PHP extravagante. Vamos manter as coisas muito simples. Então, se e então vamos fazer vazio e vamos fazer o nome. Então, se os nomes vazios ou vazios e vai fazer, uh de e nós definir o de igual para o endereço de e-mail que foi enviado, que foi apenas uma escolha que eu fiz sobre como eu nomeei as variáveis E então ou assim se esse e-mail que este basicamente este e-mail aqui está vazio e essa é esta condição será significada ou ah, mensagem vazia. Então, se a mensagem está vazia agora, colocamos uma coisa necessária para ter em mente com isso é que colocamos exigido naqueles na boca H dois. Então, se tentarmos enviar este formulário, o navegador vai nos dizer que está vazio. Então nós já estamos fazendo isso na frente, e nós já temos frente e validação, mas nós também vamos verificar no back-end, apenas para o caso. Quero dizer, alguém pode estar vindo de um navegador muito antigo que não faz isso ou algo assim. Então, novamente, nós estamos apenas você sempre verificar o front-end e o back-end. Então é isso que estamos fazendo aqui. Então, se qualquer um desses ar ou declaração Então, se o nome está vazio ou de seu vazio ou mensagens vazias de qualquer um deles está vazio. Então, novamente, vamos ecoar e bem fazer Jason. Ah, e código. E vamos fazer uma matriz e vamos fazer status zero e mensagem e vamos dizer, um campo A que é fazer campo obrigatório está faltando. Ok, então nós estamos dando um pouco mais porque nós assumimos que isso é um humano. Agora, neste momento, estamos dando a ele um pouco mais de informação do que demos para Ah, o baht. E de novo, vamos morrer. Ok, então isso vai acabar com o script depois disso. Então, se essa condição for atendida, irá ecoar que Jason codificou Ah, aquele array codificado de Jason. E então ele vai morrer. E novamente, a razão é a única razão pela qual estamos codificando Jason. Isso é porque nós vamos, finalmente, pegar via Ajax. E assim ele irá imprimir uma mensagem que pegamos via Ajax. E então usamos isso deste lado nesta página para exibir a mensagem correta, e você verá tudo isso aqui em breve. Certo? Em seguida, vamos verificar se há um e-mail válido. Ok, então nós vamos definir de igual a e nós vamos fazer barra de filtro, que é uma função PHP, e nós vamos fazer a partir de Então nós vamos passar em nosso de e-mail. O e-mail. Era um endereço de e-mail. Foi enviado, e vamos rodar o filtro de filtro. Valide e mail. Ok, então basicamente qual barra de filtro vai pegar essa variável e executá-la através deste filtro. E o que este filtro faz é verificar se é um endereço de e-mail válido. Então, você sabe, há um padrão lá fora para a aparência de um endereço de e-mail válido. E o PHP tem esses filtros que podem executar o endereço de e-mail do enviado contra isso. Então isso é o que isso vai fazer é verificar isso e, em seguida, aqui em baixo, nós dio se não de. Então, se basicamente, se esse filtro do nosso retorna um significado falso, isso não é um endereço de e-mail válido. E novamente, vamos ecoar Nissan, uh, e código. E nós vamos fazer uma mensagem de status zero na matriz vai dizer, hum, não ah, e-mail válido. Ok, então essa será a nossa mensagem. Notei aqui em cima isso naquelas mensagens de novo. Faça isso, eu e então morreremos aqui em baixo. Ok, então isso verifica se temos o e-mail válido. Então, estamos apenas passando por uma série de cheques. Verificamos o pote de mel, verificamos os valores e, em seguida, verificamos se há um e-mail válido. Então nós estamos meio que nocauteando todas as coisas que poderiam impedir isso de processar. E então, uma vez que passamos por todos esses, então podemos entrar em OK, agora, nós tínhamos certeza de que temos dados válidos e assim por diante. Agora, vamos enviar o e-mail. Então nós vamos enviar um e-mail HTML, então nós vamos obter cabeçalhos definidos iguais a, e eu vou fazer sprint f e eu vou fazer de e vamos fazer porcentagem eso sprint f essencialmente permite que você pop em espaços reservados. Então de onde fazer e então vamos fazer o de como este e então ponto Uh, traseiro são barra traseira e assim. Ok, então isso é basicamente configuração são de em vez de ser apenas, hum os endereços de e-mail, que o que seria padrão para. E nós recebemos uma, ah, algo do endereço de e-mail. Podemos fazer parecer melhor se quisermos. Agora, o que estou fazendo aqui é que estou definindo isso de para o endereço de e-mail, então eu não estou fazendo nada aqui. Mas eu escrevi isso para que, se você quiser, você pode mudar isso e fazer como alguns como de, e então você poderia fazer o nome e depois o endereço de e-mail e assim por diante. Enfim, Enfim, por isso que estamos fazendo isso aqui. Então, cabeçalhos. E mais uma vez, tenho um curso inteiro sobre envio de e-mails. Então, se você quiser realmente mergulhar nisso, eu recomendo verificar isso. Um di é igual. Então isso vai acrescentar à primeira linha superior. Então sprint f e nós vamos fazer resposta para e vamos fazer porcentagem s novamente, e vamos fazer de novo. Então isso é definir a resposta para novamente. Ele será padrão para o endereço de e-mail. Mas estamos só de novo. Vamos definir explicitamente para que se você quiser mudar isso, você pode mudar isso. Então você pode definir a resposta para outra coisa que não seja o quê? O endereço de e-mail real que foi enviado de, neste caso, eu não sei necessário Por que você gostaria de fazer isso. Mas, de novo, estou jogando essas coisas aqui para mostrar a vocês como fazer esses 80 milhões de milhas. Tudo bem, então isso vai adicionar novamente. Então nós vamos espalhar f e então nós vamos fazer X ex mailer, e nós vamos dio PHP slash percentage s. E isso vai apenas definir qual versão PHP. Isto está a ser enviado daqui. Tudo bem, então isso pega nossos cabeçalhos. E então agora nós e o ponto equivale basicamente ao que isso significa é que é um pendente. Então, ele vai, em última análise, o que cabeçalhos vai ser igual a é de e o de endereço de e-mail e, em seguida, uma resposta de quebra de linha para o de e-mail apenas em uma quebra de linha, e, em seguida, x mailer e a versão PHP, certo? Então é o DI igual é apenas dependendo da linha antes dele em vez de substituí-lo. Que é o que você faria se não fizesse o ponto igual ao certo. Então, se e então vamos fazer vai executar o comando masculino. Então masculino e vamos definir Ah, a primeira variável são os dois. Então isso é o enviado para Isso é o que nós configuramos no conflito que vai ser enviado para você ou seu cliente, qualquer que seja o assunto do e-mail, que nós também definimos no condenado, e então nós vamos fazer a mensagem, e depois vamos fazer os cabeçalhos. Ok, então isso vai ser o que envia nosso e-mail, e nós estamos verificando executando isso em um condicional como este. Se o macho retorna verdadeiro do que o condicional ser atendido. Se ele retornar falso, não será atendido. Então, se ele retorna true, então vamos ecoar Jason e código, e vamos fazer uma matriz. E desta vez o status vai ser igual a um porque foi bem sucedido e a mensagem será e-mail enviado com sucesso assim. Tudo bem, vá. O Papa. Ainda vamos acabar com o script depois disso porque não precisamos. Não há mais processamento que precisamos fazer. Só precisamos ecoar isso e é isso. E então a última coisa que vamos fazer e eu não vou fazer isso dentro de outra declaração é que vamos apenas ecoar J. Sohn Ah, em código. E nós temos apenas isso é apenas uma espécie de ah ah, mensagem de status padrão. Então, status da matriz. Vamos definir para zero, e então vamos definir mensagem igual a ele. E-mail não enviado com sucesso. Por favor, tente novamente. Está bem. E esse é o fim dos roteiros que não vamos mergulhar aqui. Então, essencialmente, o que está acontecendo aqui é se nós temos todas essas verificações que nós executamos se você sabe disso, se um desses falhar, se este que esta condição é atendida, o que significa basicamente que temos uma falha, vamos retornar uma mensagem negativa, retornar uma mensagem negativa, retornar uma mensagem negativa, e então vamos tentar enviar o e-mail. E se o e-mail envia retorna uma mensagem positiva e, em seguida, aqui em baixo, por algum motivo, alguém fica louco e ele faz isso através dos cheques, mas não envia o e-mail ou qualquer outra coisa. Basicamente, vamos voltar. E uma mensagem negativa que diz que o e-mail não foi definido com sucesso. Ok, esse é o script PHP. E mais uma vez, nós vamos finalmente, nós não vamos enviar pessoas lá diretamente para isso. Vamos usar script Java exortar uma consulta para enviar em solicitação Ajax e essas mensagens de status que estão recebendo Jason codificado. Nós vamos pegar esses no RJ Query, e então nós vamos processar aqueles no RJ Query. E é isso que vai mostrar a mensagem aqui em baixo. Então, quando alguém Smith está neste formulário, nunca sairá desta página. 12. Crie o contato no AJAX de Script: Eu anunciei tempo para criar script de consulta RJ que vai processar são formados aqui. Então vamos chegar ao nosso arquivo que já temos freelancers há um ponto Js e vamos entrar na função ready que já criamos aqui só porque não realmente nenhum uso na criação de outro. Tudo isto. Jake, Jake, corrimão. Basta carregar quando o documento estiver pronto. Então, uh, nós vamos apenas ir e colocá-lo aqui dentro, e nós estamos indo agora. Você poderia analisar isso. Acho que já mencionei isso antes. Isto é para o cardápio. Agora estou fazendo o formulário. Você poderia criar dois arquivos JavaScript diferentes, modo que seria um pouco mais portátil. Sinta-se livre para fazer isso, se quiser. Hum, então eu vou dizer que vamos anexar um manipulador de submissão ao formulário. Seja qual for. No entanto, isso faz sentido. Tudo bem. Então, novamente, se você não está familiarizado com Jay Career, eu recomendo , tipo, que eu não vou fazer. Ah, Jake Ray 101 aqui. Então, mas se você quiser aprender mais sobre Jake, recomendo encontrar curso e tomar que eu atualmente não tenho nenhum. Hum, mas talvez para baixo na linha de qualquer maneira, vai chamar J query e nós estamos indo para procurar nós estamos indo para selecionar ou formulário de contato. Demos ao nosso formulário de contato uma classe de formulário de contato, e então vamos selecionar isso, e então vamos fazer ponto enviar. Então esse é um método de consulta J. Então, ao enviar o formulário, então nós vamos criar uma função anônima e digitar no evento para que possamos segmentar o evento, e então nós vamos fazer coisas dentro desta função anônima. Tudo bem, então vamos ver o quê? Os nossos erros. Ficha inesperada. Está bem. Sim, então nós colocamos o símbolo aqui em cima, hum, e então nós estamos invocando aqui em baixo. Assim por diante. Na verdade, parte disso vai ser porque este só deve ter um que deveria estar aqui em baixo. Exactamente. - Claro. O que? Eu digitei errado lá, mas isso realmente fechou os parênteses do que os parênteses. Ali. Ok, Amy, é assim que deve parecer. Então, temos a nossa submissão. Agora, estamos criando uma função anônima dentro desses colchetes, e é aqui que vamos lidar com nosso formulário. Então a primeira coisa que precisamos fazer é parar o formulário, realmente dar um pouco de espaço aqui. Precisamos parar o formulário de enviar normalmente. Certo? Então nós queremos mantê-lo de enviar e realmente ir para aquela página PHP criar porque nós vamos fazê-lo via Ajax. Nós estamos indo para o evento dot previne default. Então, de novo, este é um tipo de método jaqui que só vai levar este evento que passamos dentro Então, o botão clicou no formulário enviar. Ele vai tomar isso e vai impedir a ação padrão que está enviando o formulário para o U. R L no script de ação. Então vai impedir que isso aconteça, então é a primeira coisa que precisamos fazer. Em seguida, vamos serializar os dados do formulário enviado e obter a ação, que é essencialmente a URL. Ok, então primeiro vamos criar um formulário de mira variável, e vamos defini-lo igual a este, que é isto neste caso, desde que enviamos que fizemos isso. Estamos fazendo isso na apresentação. É o formulário. Então nós vamos, hum é por isso que estamos definindo igual a forma isso vai nos dar o elemento formulário de nossa página. Está bem. E então nós vamos começar se você está em outro lugar em si. Você é l igual a, ah forma. Estamos entrando em uma variável de forma que acabamos de criar ponto adder. Então atributos e ação. Hum ok. Então, essencialmente, o que isso está fazendo é dizer que vamos entrar no formulário que foi submetido, certo? Porque fizemos isso em cimento. Nós vamos entrar no formulário que foi enviado, e nós vamos entrar nesse elemento formulário, e nós vamos obter a ação, o valor do bloco de ação, que é o processo dot PHP. Então é para isso que esta variável deve ser definida. Então a razão pela qual fazemos isso é para que possamos pegar, você sabe, pode haver várias formas que são processadas por este script de consulta J, e então nós vamos pegar a forma real ou o U R l real dessa forma particular, Qualquer que tenha sido submetido. Então isso só torna isso um pouco mais modular. Tudo bem. Em seguida, vamos para Ah, eu estou fazendo isso muito berbere tigelas, mas nós vamos enviar os dados usando post. Então nós estamos indo para variável e nós vamos fazer postagem igual, e nós vamos definir que igual a ponto post. Então este é um método Cory novamente ferido. Você é l Então vamos euro. Nós só temos Então nós vamos O método post essencialmente é uma abreviação para o uso do Ajax dentro da consulta J. Então isso vai criar indo para postar esses dados dois. Vamos postar algo nessa U.R. L. e depois temos que dizer o que postar. Então nós estamos indo para fazer forma são formados a partir de acima variável de forma Chazal, toda a nossa forma ponto serializar. Então o que serialize vai fazer é essencialmente tomar todos os dados na forma. Então, todos os campos de ah que foram preenchidos aqui vai levar esses e serializá-los que eles possam ser É mais fácil passar como dados postais. Certo, então é isso que está fazendo. E então agora precisamos para que isso realmente é o que eu quero dizer. Essa linha ali é o que realmente envia os dados postais. Então, como você pode ver, é bem simples e direto assim, Jake se preocupa. Quero dizer, eu sei que muitas pessoas seguiram em frente desde algumas outras coisas, e eu tenho certeza que eles fazem coisas semelhantes, mas ainda são muito úteis agora. Vamos colocar os resultados. Div. Certo, então vamos fazer postagem. É por isso que fizemos postando variável acima. Então agora podemos fazer referência a esse ponto Don. Então, quando terminar, quando? Quando isto acabar aqui , vamos executar isto. E então nós vamos funcionar e vamos fazer dados como este. E agora nós vamos essencialmente dentro disso quando a apresentação estiver concluída e nós temos uma resposta de volta do Ajax. Agora vamos executar esta função anônima, e o que recebemos de volta são os dados que recebemos de nosso pedido. E então nós vamos fazer resposta variável e disse que igual a ponto e vamos analisar Jason porque você se lembra, nós o que nós submetemos. O que vamos mandar de volta é o Jason. Quando criamos o script PHP, mantivemos Jason e codificando todas as nossas respostas. É por isso que é mais fácil trabalhar com dentro de Ajay Kori nós vamos separar isso e então nós vamos fazer alvos iguais e vamos fazer mensagens de status. Ok, então nós fizemos algumas coisas lá. Analisamos nossos dados e ajustamos como resposta aqui. E depois temos o nosso alvo. Lembre-se div com mensagens de status. Então, definimos isso muito bem. Isto é apenas definir variáveis. Ainda não fizemos nada, então temos a estrela Jason e colocamos isso igual a resposta. E agora definimos nosso alvo para onde queremos inverter esses dados. E agora vamos fazer o sucesso do anúncio e as aulas de ar. Certo, então vamos adicionar os alunos. Então, vamos fazer isso. de DentrodeJ. Corey. Então o que vamos fazer é fazer se o status do ponto de resposta. Lembre-se, a resposta tem o que temos de volta. E lembre-se, nós enviamos de volta um array com status e mensagem. Então, agora estamos verificando o status que criamos em nossa matriz quando e então que Jason codificou em nosso script PHP. Então, se o status do ponto de resposta e nós vamos dizer se isso é igual a um, certo. Lembrem-se, tínhamos um como um deles e zero como o resto deles. Então isso é igual a um. Houve erro de classe de remoção de ponto alvo apenas no caso de, uh, a mensagem aérea já estava lá. Certo? Talvez eles enviem o formulário, receberam uma mensagem aérea, e então agora eles enviaram novamente e eles recebem uma mensagem de sucesso. Queremos ter certeza de remover essa mensagem aérea. Caso contrário, é que a mensagem de estatísticas Dave vai ter as duas aulas. Ok, então nós temos que remover a mensagem aérea, e lá foi para alvo ponto adicionar classe e nós vamos fazer sucesso. Então vamos adicionar a mensagem de sucesso. Está bem? Então, basicamente, se o que temos de volta de um script PHP, é uma resposta bem sucedida que vamos remover a classe aérea da mensagem da equipe , Div. E vamos adicionar a classe de sucesso. Ok, senão se o status do ponto de resposta e você provavelmente poderia apenas fazer o outro. Mas estou sendo muito explícito aqui. Status do ponto de resposta. Estamos verificando que a mesma coisa é igual a zero noite então. Então, se um é igual a zero, então nós vamos fazer alvo ponto remover classe e sucesso. Desta vez, vamos mudar a classe de sucesso porque desta vez falhou e vamos alvejar ponto adicionar classe ar. Ok, então isso é adicionar nossas mensagens aéreas lá. Então é apenas adicionar e remover uma classe. Nós já criamos essas classes em nosso CSS. E a última coisa que vamos fazer é mudar a mensagem. Então vamos fazer o alvo. Lembre-se, isto é, nós definimos alvo igual a mensagens de status são o nosso bloco aqui, então alvo vazio anexar ponto. Então é basicamente vazio é removê-lo qualquer coisa. Se houver alguma coisa lá antes que o remova agora vamos escrever, responderemos à mensagem. Então, a mensagem que criamos em nosso script PHP para o nosso Ray e eles iam fazer “hide and dot fade” e então isso é apenas um defeito. Quero fazer 400. Está bem. Então, basicamente, o que isso faz é que vai acrescentar. Vai mover todas as mensagens lá dentro. Vai mudar a nova mensagem que acabamos de receber. Está escondendo e depois desvanecendo. OK, então é z basicamente que permite que ele se desvaneça na direita para que ele crie esse efeito. E então é isso que quando temos tudo isso, não, então é isso que temos. Quando chegarmos aqui e dissermos não, John Lhasa vai preencher algumas coisas e nós agora é Red diz que não sobre e-mail. Nós dissemos: “ Receba a citação agora, mudou. Ele desapareceu de volta e tudo isso, se nós viemos aqui e fazer como, G não um e-mail válido e, em seguida, não recebemos um e-mail válido. Então isso é o que permite que todo esse efeito toe acontecer é, É esta consulta j aqui e o esconderijo e o desvanecimento na resposta e assim por diante. Então é isso. Isso é tudo para a consulta J aqui. Então, mais uma vez, bastante simples. Se você não está familiarizado, Jake Ray, talvez um pouco difícil de seguir. Ah, eu recomendo, você sabe, encontrar curso, Andrzej Career ou algo assim, ou apenas talvez voltar atrás por isso ou referenciar o código-fonte. Tudo o que você precisa fazer para fazer isso para você 13. Crie a animação de rolagem suave: O que eu quero fazer agora é a rolagem suave. Então, se olharmos para isso aqui Ah, e clicarmos em um desses links aqui se clicarmos em você notar que eles apenas tipo de flash para cada seção e nosso original Nós tivemos alguns. Tivemos um pergaminho suave. Então eu quero acrescentar que aqui, há algumas partes diferentes para isso. Então a primeira coisa que vamos fazer é o alvo são eventos reais. E então temos que começar com nossos seletores. Nós vamos fazer menu mav item, e então nós estamos indo para a etiqueta âncora para ah, isso é tão lembre-se em nosso menu, cada um desses itens da lista nesta lista ordenada é dado o item naff menu classe, e então nós somos apenas referenciando o link âncora, a tag da âncora nisso. Então nós fazemos isso e, em seguida, vamos continuar no evento em que depois é clique. Então, quando qualquer um desses links no ar clicou, então nós vamos fazer algo, e o que vamos fazer é criar uma função não anônima que vai fazer as coisas que queremos fazer. Certo, então precisamos nos livrar disso. Temos de pôr isso aqui em baixo. Tudo bem. Certo, então esse é o nosso seletor. E nosso manipulador de eventos está direcionando nosso evento. E agora precisamos fazer algumas coisas com isso. Então, primeiro, vamos definir algumas variáveis que vamos definir isso igual a são este objeto que apenas possamos referenciá-lo várias vezes e J Coury não tem que voltar para o dom. É só uma performance. E então nós estamos indo. Precisamos pegar nosso árbitro. Então são uma armadilha para estes são o Vai ser libra sobre habilidades libra, libra carteira. Se você se lembra quando a seção de liquidez nós demos um eu d. Ah, isso combina com o que está no nosso menu aqui. É por isso que quando clicamos neles, ele funciona para ir para cada um agora. Então, ah, mas precisamos para nossos propósitos. Precisamos pegar isso. Então nós vamos fazer, uh, uh, eu vou falar sobre o porquê aqui em apenas um segundo, nós estamos indo para um rascunho igual e eles vão fazer referência É esta Ah, variável e então nós vamos fazer Adder, e nós vamos Faça um treff. Ok, então o que isso faz é basicamente pegar aquela libra sobre ou habilidades de libra agarrando que uma viagem, uh, atributos de qualquer um desses foi cliques. Quando você clica sobre o que h isso um rascunho é definido para bater sobre quando você clica habilidades para se definir para habilidades libra e assim por diante. Ok, então isso disse algumas variáveis que vão precisar. E, em seguida, a primeira coisa que vamos fazer isso realmente opcional. Então vamos alternar o menu do valete. Então, agora, quando clicamos em um link, este menu de valetes aqui fica. Ok, então eu escrevi isso, e eu diria que provavelmente o comportamento pretendido que eu prefiro é que quando você clica em um desses , é rolagem para a seção no menu fecha. Porque eu na minha mente, eu meio que presumi que quando alguém clica em uma seção, eles realmente vão querer lê-la. E então, se eles tiverem que clicar no X novamente, é como se fosse um clique extra. Então vamos em frente e fechamos para ele. Você pode discordar de mim sobre isso. Isso é bom. se você não quiser fazer isso, Se você não quiser fechar o menu em um item é clicado, em seguida, apenas não incluir esta pequena seção aqui sob alternar menu valete antes da próxima seção de rolagem suave . Mas eu queria te mostrar como fazer, caso você queira fazer isso. Então o que precisamos fazer aqui é essencialmente imitar o que fizemos aqui com a nossa alternância, nosso menu e o nosso menu alternar, mas apenas fazer a parte de remover. Ok, então nós vamos fazer é fazer alternar menu, e então nós vamos fazer ponto remover classe perto. Ok, então quando este menu está aberto, a alternância fica. Tem a classe próxima adicionado a ele e que temos alguma animação que vai junto com isso. E então, quando removermos essa classe, então isso vai remover isso. Que alternar, e então nós vamos descer aqui. Vamos fazer este ponto Os pais disto novamente referem-se à etiqueta âncora do item de menu que foi clicada. Então, quando os pais não são pais, mas pais? E depois vamos fazer o menu. Vamos fazer Ah, item valete e vamos fazer cardápio e vamos fazer cardápio. Ok, então estes imitam aqui em cima quando aparecemos os elementos que adicionamos o show classe dois. Quando alteramos isso, agora somos apenas os mesmos. Mas agora o que vamos fazer é remover a classe, e vamos fazer o show, então vamos remover essa classe, e isso vai fazer com que o menu feche. OK, então novamente, isso é apenas criar este efeito que quando clicarmos em um desses itens aqui, ele vai fechar o menu. Então você vê, agora o menu fecha como se tivéssemos apertado o botão X. Quando clicarmos em um desses itens aqui novamente, se você não quiser esse comportamento, remova essas linhas aqui. Tudo bem? Então a última coisa, então, é a rolagem suave e a rolagem suave é realmente bastante simples. Então vamos referenciar nossa variável de rota que criamos antes de lembrar, aparecer rota. Um corpo de sorriso. Então vamos fazer referência a isso e vamos fazer uma animação, então vamos fazer animação e, dentro disso, teremos algumas opções para nossa animação. Então a primeira coisa que queremos fazer é especificar qual é a nossa animação. Vamos fazer “scroll top”. Então isso vai ser o que nossa animação é, e precisamos dizer onde vamos rolar. Então vamos referenciar H ref, que criamos aqui em cima, que lembra libra sobre habilidades de libra e são seções. Tome estes I ds. Então isso é essencialmente Emily emular o que você aconteceria se você não tivesse nenhum javascript fora disso e você iria clicar nele, exceto que ele está animando o processo. Então vamos adicionar offset. Então queremos adicionar offset, e vamos fazer top menos 100. Então, essencialmente, o que isso vai fazer é quando um desses, uh, uh, linxes clicar, nós vamos animar o pergaminho, certo? E nós vamos rolar. Ainda no topo disso, seja lá o que for. Oito. árbitro estava na escola de culinária no topo dessa seção, mas vamos adicionar um deslocamento ao topo de menos 100 pixels. Então, basicamente, quando você clica nele em vez da seção aqui, rolando direto para o topo do navegador, assim vai te dar cerca de 100 pixels. Ok, então é isso que isso faz de novo. Você pode ficar bem com isso indo direto para o topo. Ou você pode querer 400 fotos do que quer que seja para sua situação, mas ah, isso é exatamente o que eu escolhi aqui. Ok, então isso é que tipo de configurar a animação. Agora precisamos dizer quanto tempo vai demorar. Então vamos fazer 500 milissegundos. Ela tem cerca de meio segundo, e então nós vamos fazer anexar outra função anônima, e novamente, isso é meio opcional. Mas acho que faz sentido nesta situação. Isso funcionará sem essa função anônima aqui. Mas o que isso faz se fizermos janela ponto localização ponto hash é igual a respiração. Hum, então o que? O que acontece? Eu faço isso bem rápido e bem, eu preciso adicionar algo aqui, mas eu vou falar sobre esse segundo. Então, se não adicionássemos isso aqui, o que aconteceria quando clicássemos em um desses links é que iríamos rolar até ele e tudo funcionaria. Encontre esse caminho. Mas não upend a tag ah hash ou o hash até o final da URL. E assim, fazendo isso O que acontece é que depende quando você clica sobre ele coloca libra sobre no final do portfólio de porta URL Libra habilidades libra, etc. Então é uma espécie de imita o comportamento padrão porque isso é o que aconteceria por padrão se você não tivesse trabalho um script anexado a qualquer um desses. Então eu acho que nesse sentido faz sentido imitar o comportamento padrão dessa maneira. Dependendo se você estiver usando isso para outro aplicativo do que você pode ou não querer fazer isso, então você depende do que você está fazendo. Você pode ou não adicionar esta parte aqui, e então a última coisa que precisamos fazer aqui é retornar false, e isso vai garantir que o comportamento padrão quando você clica em um desses links não aconteça. Ok, então se entrarmos aqui agora, clicamos em habilidades que você pode ver, temos aquele pergaminho suave. Temos nossos 100 pixels aqui, e se formos para o portfólio, o mesmo menu fecha. Contato, etcetera vai voltar para cerca de e assim que nos dá a nossa escola suave. Agora, se você não está familiarizado com Jake Query. Se este tipo de sua primeira introdução ao Jake Ray, isso é provavelmente poderia ser um pouco esmagador novamente. Eu recomendaria, você sabe, ter aulas de E J Corey ou passar por isso porque uma vez que você sabe, um pouco de Jake onde isso é realmente muito simples. Isso é um pouco bonito Ah, eu não quero dizer básico, mas é algumas coisas bem padrão quando se trata de Jake Preocupa-se So. Mas espero que isso mostre como fazer isso. E você pode fazer isso funcionar para qualquer situação em que esteja. 14. Crie o rodapé de site: Tudo bem, você conseguiu. Estamos na última seção aqui. Eu sei que um pouco disso é provavelmente muito grosso para passar. Eu só recomendo talvez voltar e trabalhar com um pouco daqui, tendo um pouco de dificuldade em cair por muito tempo. Mas estamos na seção de rodapé. Este é realmente muito simples e direto. Então vamos fazer o Rodapé. E assim como o cabeçalho, nós estamos indo para classe igual rodapé do site como este e vamos fazer como sempre, Div Class é igual a contêiner. Será que classe Div é igual a linha E então nós vamos fazer div classe igual e nós vamos fazer uma chamada 12 e nós estamos indo para o centro de texto. Tudo bem, e então dentro isso serve. Só estou fazendo um tipo de direitos autorais aqui. Claro, Mude isso para o ano. Seu site fará e copiará. Isso nos dá os direitos autorais. Marque-me. Desça aqui para ver que estamos em baixo. Esvazie aqui embaixo e copie. E eu vou fazer 2018 no 18 Joe Freelancer. Oh, tudo bem. Reservado assim. E é basicamente isso. Esse é o rodapé. Só precisamos estilizá-lo neste momento. Então nós vamos. Eu vou dizer isso. E então vamos para o nosso CSS aqui e deixa-me pegar o meu divisor aqui. Então há o nosso divisor e nós estamos indo apenas para fazer rodapé do site e nós vamos fazer preenchimento 20 pixels. Escola para baixo para que você possa ver isso Então batendo 20 pixels vai fazer fundo e nós vamos dio dois d dois d dois d d, apenas um pouco diferente cinza. E então vamos fazer o número de cor 999 Certo, então isso nos dá praticamente são o nosso rodapé final lá. Ops, vá e guarde isso. Tudo bem, então isso nos dá uma espécie de nosso rodapé final lá. Ah, e isso. Quero dizer, isso está tudo aí. Há para ele. Então bem rápido um aqui tudo Ah, pulando para uma lição de encerramento depois disso e nós poderíamos falar sobre algumas coisas para ter em mente em frente a partir daqui 15. Projeto do curso e encerramento: Tudo bem. Então, espero que vocês tenham gostado do curso. Se soubesse, agradeceria se me deixasse uma crítica sobre o curso. Eu realmente me ajuda. Além disso, não se esqueça de me acompanhar no meu perfil para que você possa ver quando eu lançar novos cursos e também verificar qualquer um dos cursos que eu tenho lá. Você sabe, eu tenho Guia de Iniciantes para PHP tem objeto de curso HTML. Faz alguma programação? Uma série de cursos de desenvolvimento Web. Ah, um dos meus cursos mais populares é isso como autônomo em cursos de trabalho? Então, se você quiser entrar nisso e assim por diante, então novamente, sinta-se à vontade para conferir e mergulhar qualquer um daqueles que você ah, quer aprender tão bem quanto para isso, você sabe, uma das coisas que Eu posso imaginar que passar por isso é você sabe, algumas dessas coisas se você muitas vezes as pessoas entram em desenvolvimento web assim por diante, eles podem aprender CSS muito bem. Mas talvez não. Sabes, Jake, somos guião Java ou o que for. Na verdade, estou em um barco semelhante, sabe. Eu sei. J query bom o suficiente, mas javascript realmente não é algo que eu mergulhei pesado em uma espécie de mais desceu o caminho PHP . Ah, e então quando você tem algo assim, eu acho que a coisa para manter sua mente é combiná-lo de forma justa. Não diga avanço, mas necessariamente é um agressivo, você sabe, html, CSS, JavaScript e PHP. E então quando você está trazendo todas essas diferentes línguas juntas, Ah, você pode não conhecer cada uma delas tão bem quanto você pensou ou é se você quer ou o que quer. E assim, é claro, como isso pode talvez se sentir um pouco esmagador. E há algumas coisas que eu só quero repetir aqui que eu disse, mas uma é, você sabe, você sabe, se esse é o caso, apenas tipo de continuar passando e continuar trabalhando com isso e assim por diante, e acho que vou começar a fazer mais sentido. A segunda coisa, porém, é uma espécie de. O motivo de eu querer fazer este vídeo é que é muito importante. Cursos baseados em projetos como este são legais porque você tem que aprender a construir algo que você sabe, real, e eles são divertidos e assim por diante. Mas se você realmente quer dominar o desenvolvimento da Web, você quer ser muito bom nisso, e você realmente quer dominar especificamente uma linguagem específica. Você realmente precisa mergulhar em um tipo específico de linguagem de curso específico de conceito. Então algo como meu Guia para Iniciantes para Ph. Pierre, meu Guia para Iniciantes para HTML, esses tipos de cursos. Eles não são necessariamente tão divertido ou tão sexy como um curso baseado em projeto como este . Mas é assim que você entra e realmente domina essas línguas. E são aquelas coisas que as pessoas tomam para chegar ao ponto em que podem fazer um projeto como este sem ter um dedo do pé, você sabe, sem uma besta ser super esmagadora e assim por diante. Quero dizer, quando eu me sentei e fiz isso, claro, eu sempre tenho que fazer algumas pesquisas e procurar as coisas. Mas eu tenho a essência geral em todas as línguas do que eu queria fazer. E isso é porque eu fiz ah cursos específicos de linguagem em todas essas coisas, e eu aprendi as línguas individuais reais em profundidade eles mesmos assim e usá-los em uma base dia a dia. Então eu tinha uma boa idéia do que eu ia fazer. Então, novamente, eu só quero encorajá-lo a não ser pego em Onley fazendo cursos baseados em projetos como este novamente. Eles são divertidos. Eles são ótimos. Eu acho que uma vez que você passar por alguns dos cursos específicos de linguagem do que cursos de porta baseados em projeto como este são realmente bons próximo passo a dar. Porque agora ele permite que você pegue todo esse tipo de conhecimento que você reuniu e junte tudo em algo. Mas, uh, novamente, você sabe, se você realmente quer dominar a linguagem, realmente quer dominar o desenvolvimento da Web, entrar nesses cursos específicos de idiomas. Tudo bem, então isso é tudo o que eles realmente têm a dizer neste embrulho aqui de novo. Espero que tenha gostado do curso que fizemos novamente. Agradeço se deixasse uma crítica de novo. Além disso, siga-me no meu perfil. Se você quiser ser notificado de quaisquer outros cursos e eu vou fazer isso, deixe-me saber se você tiver alguma dúvida na discussão abaixo. Obrigado 16. Próximos passos: Sou honesto que não há mais. Então online.com, tão pouca limpeza para terminar este curso. Se ainda não o fez, certifique-se de ir para a área de aula. Há uma seção de classe para alguns, alguns passos para você percorrer para este curso. Portanto, certifique-se de que está sob a discussão na guia Projetos que você verá no curso. Além disso, se você entrar no meu perfil, certifique-se de me dar um acompanhamento no meu perfil aqui para que você seja notificado quando eu lançar novos cursos. E também tenho um curso de estilo podcast semanal chamado “Let's Talk freelance”. Então, se você gostaria de ter um tipo de acesso a treinamento contínuo sobre freelancing e negócios on-line e assim por diante. Certifique-se de verificar isso. Vamos falar de curso freelance também. E, finalmente, eu tenho um boletim diário de dicas no meu site em John Morris online.com. Se fores para lá, podes inscrever-te na lista de discussão. Você também será colocado no meu próprio, meu próprio aplicativo móvel, ou você terá acesso a mais de 78 horas de conteúdo gratuito no momento desta gravação relacionada ao freelance e assim por diante também. Então, se você está interessado nisso, BD certeza de verificar isso também. Novamente, esse é John Morris Online.com. Tudo bem. Obrigado por ter assistido à aula. Se gostou, agradeço-lhe por si. Deixe uma crítica e nos vemos no próximo curso.