Aprenda a construir um site: uma introdução ao desenvolvimento web front-end

1. Boas-vindas: Bem-vindos à minha aula de escultura. Se você é como eu e está curioso sobre como a tecnologia que você usa todos os dias funciona, então deixe-me mostrar como é simples construir a sua própria. Mas primeiro, um pouco sobre mim. Aprendi a construir 13 anos e continua a ser uma grande paixão minha. Eu adoro código construído prêmio e compartilhar o que eu aprendi com os outros. Eu também transformei o desenvolvimento em uma carreira porque isso trabalhou com diferentes starups, grandes corporações e também construir alguns projetos meus ao lado. Minha maneira preferida de aprender é fazendo isso, eu estruturei meus vídeos de uma maneira que você pode acompanhar construindo seu próprio projeto. Eu recomendo que você construa um site pessoal, mas você pode construir o que quiser. Espero que você também compartilhe seus sites na galeria do projeto, e eu estarei postando mais aulas no futuro, então certifique-se de seguir meu programa. Tudo bem, vamos em frente e construir um cofre 2. Como os sites funcionam o: Tudo bem. Bem-vindo e um muito feliz que você decidiu se juntar à classe neste primeiro vídeo. Quer fazer a pergunta? Como funcionam os sites? Eu acho que é importante antes de escrevermos nossa primeira linha de código para entender como todas as diferentes peças se unem para construir um site totalmente funcional. Primeiro, vamos falar sobre servidores. Se você tentar visualizar o conceito de um servidor em sua cabeça, você provavelmente pensa nessas máquinas complexas com um monte de cabos e luzes. Provavelmente não é um hamster tentando alimentá-los como você vê aqui. Mas você entendeu a ideia. Você pensa em algo muito complicado, algo que você não pode realmente embrulhar sua cabeça, o que eu quero fazer. Simplifica esse processo de pensamento de como sites e servidores trabalham juntos. Então a coisa mais importante a entender é que os sites são apenas arquivos em um computador. A maneira como você acessa esses arquivos ou esse servidor é por um endereço I P. Um endereço I P parece um monte de números separados por pontos. Tenha um exemplo quando aqui 172.217 ponto 9.78 realmente não importa. E a maioria das pessoas não memorizaria esses endereços. Na verdade, você provavelmente já sabe que você digita em um domínio ou você é l para acessar um site, não um endereço I P. Então eu vou falar sobre isso no próximo slide. Então, sim, se tivéssemos que memorizar todos esses endereços para acessar sites, provavelmente ficaríamos loucos. Felizmente, temos domínios como uma espécie de atalhos para acessar esses sites que eu p endereços são difíceis memorizar, e assim os domínios servem como atalhos para esses endereços I p. Eu tenho um exemplo. Um aqui que eu mostrei antes, e na verdade é um endereço I p para um servidor do Google. Podemos realmente tentar inserir isso em um navegador e ver o que acontece. Eu vou copiar este I p e simplesmente inseri-lo na barra de endereço tinha entrar e ir direto para o Google. Então isso é muito legal. Você pode tentar isso por si mesmo. Você pode ver como nós temos I p endereços que realmente funcionam. Eles vão para diferentes servidores Web, mas na maioria das vezes você usaria apenas o domínio. Então, se eu abrir uma nova guia e entrar google dot com e vai para a página inicial do Google. Os navegadores são a última peça do quebra-cabeça e nos ajudam a entender como os sites funcionam lá , o que ela usou para acessar sites e eles se comunicam com servidores da Web. Explicarei o que essa comunicação significa em um segundo. A grande coisa sobre os navegadores é que eles evoluíram constantemente para suportar sites complexos . Isso basicamente significa que eles apenas ganham novos recursos de vez em quando e que permite que sites aproveitem esses recursos. Isso torna onde os sites agora pode se tornar mais como totalmente de pleno direito APS semelhante Tuapse em seu telefone ou em seu computador. Navegadores e servidores se comunicam entre si, o que significa que algumas coisas acontecem aqui. Então, primeiro você digita de domínio, diga google dot com em seu navegador. Em seguida, o domínio localiza o endereço I P do servidor Web no qual os arquivos do site estão localizados . O servidor responderá com o conteúdo do arquivo e outros dados. Neste caso, ele acaba sendo código e outras informações necessárias para processar que página o que corretamente. Então, o navegador finalmente interpreta essa resposta do servidor e é capaz de exibir o site. O código que o navegador interpreta no conteúdo do arquivo é, na verdade, o que será escrito . Isso é html, CSS e JavaScript, e eu vou falar sobre isso no próximo vídeo. A última coisa que eu quero mencionar sobre navegadores aqui é que eles realmente são realmente grandes ferramentas de desenvolvedor. Eles incluem a capacidade de visualizar o elemento fonte ou inspecionar em qualquer site. Você pode fazer isso no Google, Chrome ou Firefox e em outros navegadores. Talvez seja necessário habilitar uma opção de desenvolvedor. Vamos tentar isso no navegador dela agora. Então escolha qualquer site neste caso. Estou no compartilhamento de habilidade ponto com, e eu estou no Google Chrome segundo clique com o botão direito do mouse e clique na fonte da página de exibição. Agora, não deixe que isso o intimide, mas este é o código necessário para exibir este site. E embora muito disso não pareça muito para você, vamos dar uma olhada em um desses. Imposto aqui pode ver que é como título e diz compartilhamento de habilidade traço em casa. Então este é realmente o título do site aqui. Você pode ver nesta aba que diz compartilhamento de habilidades em casa. E então esses são alguns dos dados com os quais o servidor responde. E à medida que você aprender mais sobre esse código, você será capaz de entender enquanto navega por isso e vê, olha e vê todas essas diferentes dibs e links diferentes aqui. Ah, você será capaz de ter uma compreensão muito melhor disso. Você também pode clicar com o botão direito do mouse e clicar em inspecionar ou inspecionar elemento, dependendo do navegador que você está usando. Isso abrirá este pequeno painel de ferramentas de desenvolvedor aqui. Isso se parece com o código-fonte de exibição, mas está organizado um pouco melhor. Você pode realmente clicar em alguns desses para expandi-los, e há muitos toques diferentes aqui, que eu realmente não vou entrar em. Mas estas são realmente ótimas ferramentas de desenvolvedor que são incorporadas em navegadores que ajudam você a desenvolver sites. Ok, então é isso para este vídeo. Espero que você consiga entender melhor como os sites funcionam, e se você quiser aprender um pouco mais, eu tenho um Lincoln aqui que vai para a rede de desenvolvedores da Mozilla. Ah, é um artigo aqui, e faz um ótimo trabalho de explicar mais detalhadamente algumas das coisas que eu falei. Então confira este artigo se você quiser aprender um pouco mais e eu vou vê-lo no próximo vídeo. 3. Linguagens de extremidade: html. CSS e JavaScript são os três frontais e linguagens que estarão aprendendo. Cada um tem um propósito diferente na construção de um site. HTML, que significa linguagem de marcação de hipertexto, é usado para criar conteúdo, texto, imagens e links que você pode querer em seu site. Você usará diferentes tags HTML dentro de um arquivo html dot para que você possa ver um exemplo aqui para Ah página inicial. , Você pode criar um arquivo html de ponto de índice, e dentro dele você pode ter algum texto que está rodeado por uma tag B. Esta é uma tag HTML que basicamente tornará o texto em negrito. Em seguida é CSS, que significa folhas de estilo em cascata. Ele é usado para estilizar o conteúdo, que inclui mudar as cores, aplicar de forma diferente mudar o posicionamento, diferentes textos e fontes e coisas assim. Tenha um exemplo aqui onde eu estou selecionando uma tag HTML na minha página com um I d do meu texto e , em seguida, eu posso fornecer propriedades diferentes que fazem coisas diferentes. Eu só quero deixar o texto azul. E então eu digo que eu quero que a cor seja azul. Por último, temos Js, que significa JavaScript. Vou me referir a ele pelo seu nome completo. Mas eu quero dar um pequeno aviso aqui que se você está tentando procurar informações sobre JavaScript on-line, certifique-se de não confundi-lo com Java, que é uma linguagem de programação completamente diferente. O que estamos falando aqui é script Java ou J s para abreviar. JavaScript é usado para adicionar funcionalidade, como quando você clica em um botão, você quer que algo aconteça como uma imagem aparece em tela cheia ou outros recursos interativos . Tenha um exemplo aqui, que simplesmente mostra uma mensagem de alerta que diz Olá. Há uma tonelada de coisas diferentes que você pode fazer com JavaScript fazendo a linguagem mais poderosa fora das três Front e as línguas não estavam indo para mergulhar muito profundamente nele. Mas ainda é um aspecto muito fundamental da construção de sites. HTML, CSS e JavaScript são as três linguagens que são entendidas pelos navegadores, é por isso que eles também são chamados de linguagens front-end ou do lado do cliente. Você pode clicar com o botão direito do mouse em qualquer site e exibir fonte, que mostra todo o código HTML que é enviado do servidor para o navegador. Lembre-se de que os arquivos HTML são páginas da Web, que fazem referência a CSS e JavaScript para adicionar estilo e funcionalidade. Tenha outro artigo aqui da rede Mozilla Developer que você pode conferir se quiser aprender mais detalhadamente sobre esses três idiomas e outros tópicos em que desenvolvimento No próximo vídeo, vamos nos preparar para escrever alguns e falar sobre os diferentes editores que você pode usar para escrever html, CSS e JavaScript, então eu vou vê-lo no próximo vídeo. 4. Como instalar um editor de código: Ok, vamos falar sobre editores de texto ou editores de código que usarão para escrever HTML, CSS e JavaScript. Primeiro, você pode realmente usar o editor de texto que já está no seu computador. Se você estiver usando um Mac, você pode usar o texto nele. Se você estiver no Windows, poderá usar nenhum pad. Isso funciona perfeitamente bem para escrever código. A única coisa que você terá que ter certeza é que você salvar o arquivo como um arquivo html index dot ou o que estiver criando no momento. A única coisa que você realmente não consegue com os editores nativos em seu computador é o realce de sintaxe , que irá ajudá-lo a obter um visual melhor do seu código com cores diferentes e uma estrutura diferente que outros editores de texto mostrar a você. Existem muitas opções diferentes para editores que você pode baixar. O primeiro 1 aqui é chamado Visual Studio Code, ou V S Code. É o que vou usar em meus vídeos, então eu recomendo que você baixe este. No entanto, existem outras opções. Aqui está Adam, que é um editor muito simples e outro chamado texto sublime. Todos estes que você pode usar gratuitamente, mas texto sublime irá importuná-lo sobre a compra da licença. Outra opção sobre a qual eu quero falar rapidamente é chamada Coat Pen. Na verdade, é um site que permite que você escreva código diretamente no seu navegador. Se eu criar uma nova caneta aqui, ela vai me deixar escrever código HTML e me dar uma boa visualização. Aqui em baixo. Você também pode escrever um CSS e JavaScript. Isso é ótimo se você quiser começar a funcionar muito rapidamente. Mas se você quiser que os arquivos do seu site sejam locais em seu computador, eu recomendo que você instale um editor e edite esses arquivos localmente. Como eu disse, usarei algum código V. Uma vez que você baixá-lo ou escolher, um editor diferente será capaz de entrar diretamente no código, então eu vou vê-lo no próximo vídeo. 5. Como criar o conteúdo: HTML: Tudo bem, agora estamos prontos para criar nosso site. A primeira coisa que você deseja fazer é criar uma nova pasta. Isto pode estar na sua área de trabalho, nos seus documentos? Isso realmente não importa. Mas todos chamaram isso de meu site. E é aqui que ele estará armazenando nossos arquivos HTML CSS e JavaScript. Agora vamos para o nosso editor de código neste caso, código V s divertido. Vamos em frente e abrir a pasta que acabamos de criar. Isso é abrir meu site, e é aqui que ele vai começar a criar novos arquivos para um site. Vamos clicar no novo arquivo e salvar esse arquivo imediatamente. Vamos nomear este índice de ponto html. Agora vamos colocar algum texto dentro deste arquivo. É típico dizer olá mundo pode para o primeiro programa de qualquer um que eles estão certos. Mas você pode colocar qualquer coisa aqui no meu primeiro site. O que se passa? Você sabe de alguma coisa, certifique-se de salvar este arquivo e agora o que faremos é voltar para a pasta em que este arquivo está e clicaremos com o botão direito e abriremos isso no Google Chrome ou seja qual for o seu navegador padrão. Você pode ver agora que diz “Olá mundo”. É um texto com colocado dentro desse arquivo. E embora isso seja muito simples, este é o seu primeiro site. Vamos fazer algo um pouco mais interessante aqui em HTML. Podemos usar tags diferentes, e eu mostrei alguns exemplos disso nos slides onde você pode usar algo como a tag B para tornar este texto em negrito. Então, a maneira que você tem direito essas tags é você começar com a tag de abertura. É este aqui com um símbolo menor, o nome da etiqueta e, em seguida, um símbolo maior que. E, do outro lado, temos a etiqueta de fechamento que diz que basicamente, você sabe, começamos a construir texto aqui, e então, no final deste texto, paramos de segurar o texto. Então temos primeiro menos do que assinar uma barra para mostrar que esta é uma tag de fechamento, o nome da tag e um símbolo maior que. Vamos salvar este arquivo, voltar ao nosso navegador e recarregar a página. Boom. Você pode ver que é uma pequena diferença, mas você pode definitivamente ver que o texto está agora em negrito. Deixe-me mostrar-lhe algumas outras etiquetas que você pode usar. Há um caminho para um texto de tamanho tele com a etiqueta I. Digamos que este navegador de fotos de arquivo e recarregue a página, mas você pode ver o teletexto ao lado do texto completo. Oops. Há também uma maneira de criar títulos diferentes. Então, se eu fizer em cada um, isso significa dirigir um e fechar a etiqueta. Você pode ver que há, ah, maneira consistente de abrir e fechar etiquetas. A única coisa que está mudando aqui é o nome da etiqueta. Salve este arquivo. Volte novamente e recarregue. Agora temos um texto muito grande. Isso é comumente usado para criar títulos diferentes dentro da página. Imagine como um documento de palavras. Você pode ter formatação muito semelhante lá, e a lista tipo de continua. Isto é como textos menores. Está indo para o nível dois. Você pode ver que é um pouco menor. Ok, vamos fazer uma tag um pouco mais complicada, então há uma maneira de ligar para outras páginas ou outros sites. Em geral, o nome da etiqueta é um que significa Angkor. É da mesma forma que você vai fazer uma etiqueta de abertura. O texto dentro deste será o texto que será clicável. Na verdade, chama-se algo um pouco mais longo, Slink. E depois, é claro, uma etiqueta de encerramento. Agora, se você apenas salvar isso agora, volte e atualize. Você pode ver que na verdade é apenas parece um texto normal. Nada realmente aconteceu aqui, então as tags âncora exigem atributos para fazê-las realmente funcionar. O que você faz é em um atributo aqui chamado Patron, e então depois de A aqui fazer um tipo de espaço H R G F que significa sinal de igual referência de hipertexto e, em seguida, duas aspas dentro. Essas citações aqui entrarão na U. R L em uma página da Web. Vou datilografar aqui. Este é o google dot com, mas você provavelmente vai querer apenas copiar e colar do seu navegador. Então vamos salvar isso e ver o que acontece. Ok, agora você pode ver que este link agora é roxo. Normalmente, os links são azuis, mas é roxo porque eu visitei esta página antes e também está sublinhado. Este é o estilo padrão. E assim que chegarmos a ver avaliar, você será capaz de ver como você pode personalizar o estilo, mas por enquanto obteria o estilo padrão aqui. Se eu clicar neste link boom. Você pode ver que vai para o Google Dot com. Então agora sabemos o conceito desses atributos, e vamos usá-los um pouco. Vamos em frente e adicionar outros atributos a esta tag âncora porque digamos que queremos abrir este link em uma nova guia. Você vê isso muito comum em determinados sites, e isso também mostrará que você pode adicionar vários atributos Teoh a uma tag HTML. Portanto, há outros atributos que você pode adicionar chamados Target. Você pode ver esses atributos são todos separados por um espaço aqui, e todos eles existem após o nome da tag, mas antes do colchete angular. Então definimos o alvo para sublinhar em branco. Isso indica a um navegador para abrir esta página da Web em uma nova guia. Vamos ver isso nas costas do navegador. E agora, se eu clicar neste link, você notará que ele abre em uma nova guia. Nós ainda temos nosso site esperando aqui e ir abrir em outra guia. Agora você conhece os conceitos básicos de HTML, e no próximo vídeo vou mergulhar na estrutura de página correta que você deve usar para suas páginas HTML. bem como os ataques mais complexos que você pode usar para adicionar coisas como imagens. Este é um bom momento para praticar a escrita de tags para que se torne muito natural e você seja capaz de escrever impostos muito rapidamente. 6. Como criar páginas em HTML: no vídeo anterior aprenderia a escrever tags HTML básicas para que pudéssemos obter conteúdo em sua página. Agora vamos falar sobre a estrutura da página porque o navegador espera duas coisas diferentes para vir de sua página. Um deles é o conteúdo visual que você pode ver em seu navegador e, em seguida, metadados que ela não seria capaz de ver, mas é muito importante para os navegadores. É aqui que você incluiria certas informações sobre o seu site, o CSS e o JavaScript que desassociaram, bem como coisas como o título e a descrição . Ok, vamos adicionar uma estrutura de página ao nosso HTML atual. Vamos ao topo do arquivo e adicionar algo chamado médico. Isso dirá ao navegador para usar o mecanismo de renderização mais recente para exibir o site. Houve diferentes no passado. Isso basicamente significa que queremos HTML cinco, a última versão abaixo disso. Vamos criar na tag HTML, e isso vai realmente envolver sua página inteira. Vamos para a parte inferior aqui e em uma tag HTML de fechamento. Também é uma boa idéia para adicionar um atributo de linguagem neste oops atributos de linguagem realmente apenas colocando e fazer isso igual a E n Isto, é claro, significa Inglês. Ok, agora vamos adicionar uma etiqueta de corpo, e isso vai embrulhar o conteúdo que tínhamos antes. Esta é a parte visual da página. Depois de chegarmos ao corpo, o que acrescenta uma etiqueta federal? Você pode vê-lo espaçando isso para que eu possa visualizar isso um pouco melhor, mas nós estaremos adicionando certos metadados aqui na cabeça. O que é “press tab “aqui? E adicione uma etiqueta de título e o título pode ser qualquer coisa. Vou colocar meu site, então vamos fazer uma pausa por um segundo aqui. A maneira que eu gosto de pensar sobre esta estrutura é que a cabeça é como o cérebro do seu site. Ele inclui dados como o título descrição CSS coisas que você não vai realmente ver, mas é importante, e são apenas dados. Então nós temos o corpo, e este é o conteúdo real que real o que você vê em seu navegador. E então essas duas etiquetas diferentes, elas têm diferentes marcas dentro da cabeça e do corpo. Vamos dar uma olhada nesse arquivo em nosso navegador novamente para ver o que mudou. Então, se você recarregar e obter a versão mais recente deste arquivo, vemos que o conteúdo ainda é o mesmo. Mas algo realmente mudou e que é a guia estão aqui. Você pode realmente vê-lo, diz o meu site. E este é o título agora. De onde vem isso? Bem, nós adicionamos esses dados aqui na cabeça. Então ele está vindo desta tag título, mesmo que você não realmente vê-lo em qualquer lugar na página em si, ele está sendo exibido na guia enquanto nós tememos no navegador. Vamos em frente e olhar para ferramentas de definição. Isso é algo que está incluído no Google. O Chrome e o Firefox e outros navegadores também podem incluí-los, embora seja necessário editar as configurações para habilitar as opções do desenvolvedor. Tudo o que fiz aqui foi clicar com o botão direito e você estava na página e clicou. Inspecione ou inspecione elemento. O que você verá aqui é a estrutura do seu HTML. Este é o código que você adicionou à sua página pode ver. Aqui temos o tipo doc HTML. Marque a cabeça com o título e você pode ver que isso está no código-fonte aqui. Não é algo que você pode ver na página, mas está fazendo algo no corpo com todas as tags aqui. Esta é uma ótima maneira de ver se algo não está funcionando. Você pode inspecioná-lo e ver o que ele realmente está exibindo no navegador no código aqui. Outro benefício desta ferramenta aqui é que você pode passar o mouse sobre cada aderente para ver o layout e o estilo, bem como, que você possa ver lá algum espaçamento neste H uma tag aqui. E uma vez que chegar à parte CSS vai ver que o ar do, as diferentes propriedades que são aplicadas por padrão será adicionar o nosso próprio para adicionar nossos próprios estilos personalizados. Algumas dessas tags também estão em linha, que significa que colocá-las ao lado das outras irá mostrá-las na mesma linha. Podemos ver este H um e H para marcar estão em linhas separadas nós porque thes elementos de nível de bloco de ar , a âncora é uma linha, mas porque o que antes era um elemento de bloco ou uma tag, esses ar sinônimo pela maneira html tag um elemento são a mesma coisa. Mas como esta era uma etiqueta de bloqueio, ele realmente acaba levando o todo com. Então você pode passar o mouse sobre isso para ver que ele ocupa 100% do com. No entanto, essas tags B e I não. Então, se eu colocasse essa etiqueta âncora ao lado da etiqueta I, ela apareceria na mesma linha ao lado dela. Quero mencionar rapidamente um ótimo guia de referência para todos os diferentes elementos HTML ou tags que você pode usar. Este é outro recurso da rede Mozilla Developer, e ele vai e ele lista todos os impostos diferentes aqui. Ele também os categoriza, por exemplo. Aqui estão todos os elementos de conteúdo de texto. Você pode ter coisas diferentes aqui. Você pode ter citações, você pode ter listas e vai usar o's em nossa própria página web. Você também pode clicar sobre o imposto em si, então clique em um destes, bem despoil os diferentes atributos para manter que você pode usar, bem como exemplos. O que eu quero fazer agora é limpar este conteúdo que nós adicionamos anteriormente e fazer algo que se assemelhe mais a um site. Então, primeiro, vamos adicionar um H uma tag. Este será o tipo de título da página atual. É tudo. Dê o nome de meu site. Você pode colocar seu próprio nome aqui ou algo do tipo pessoal de Sonny. Diga algo assim. Agora vamos adicionar uma tag de imagem. Isso pode ser algo como, Ah, logotipo ou talvez uma foto sua. Então, digamos que não sabíamos como fazer isso. Podemos ver qual seria a tag de imagem do Mitzel, uma rede de desenvolvedores. Assim, a imagem incorporar elemento ver permite incorporar uma imagem no documento. E eu poderia apenas rolar para o exemplo que eles têm. Você pode ver usando algo assim mostrará esta imagem aqui. Vamos em frente e copiar em paz isso para que você possa ver que há, hum eu sou i m g tag e tem dois atributos diferentes. Portanto, há um são atributos SRC ou atributos de origem e um aponta para um arquivo de imagem. Na verdade, vou colocar uma das minhas imagens na pasta do nosso site, e depois vamos fazer referência aqui. Então há também este Alt atributos significa texto alternativo. Isso é útil por muitas razões diferentes. Digamos que a imagem não carregue nem um motor de busca. Ele está olhando através desta página para mostrar algo para resultados de pesquisa. Ou talvez o usuário seja um usuário cego. E assim eles não conseguem ver visualmente o que é essa imagem. E assim fomos capazes de fornecer texto alternativo. Isso descreve o que é essa imagem. Eu posso dizer que esta é uma foto minha, e então você não precisa realmente ver a imagem para saber o que ela é. Algo interessante aqui é que esta etiqueta realmente não tem uma etiqueta de fechamento. Você sabe, normalmente você faria algo assim, mas como nós não estamos realmente exibindo nenhum texto no meio aqui, você realmente não precisa dessa etiqueta de fechamento por causa da sanidade realmente gostaria de incluir uma barra em o fim aqui para mostrar que esta é uma tag auto fechamento. Mas isso é completamente opcional. Então, duas imagens incorporadas em nosso site. Precisamos ter uma imagem dentro da pasta do nosso site. Então incluiu uma imagem de mim mesmo aqui, bem ao lado do arquivo html index dot. Eles vivem na mesma pasta, e assim podemos fazer isso. A fonte deste será apenas o nome do arquivo. Isso é um J. Peg. Sim, Sonny. Peg Dodgy. Uh, nós podemos fornecer passagem diferente aqui desde a mesma pasta, mas podemos fazer isso. Mas se ele existia em outra pasta, digamos que eu tenha uma pasta Imagens arrastando essa imagem para sua agora para referenciar a imagem dessa maneira. Isso é bom para organizar. Vamos salvar isso e abri-lo em seu navegador. Recarregar e você pode ver que você tem uma imagem de mim aqui e o título aqui. Acho que esta imagem é realmente um pouco grande demais, então podemos realmente redimensionar isso. Vamos em frente e adicionar um com um tributo aqui. Agora podemos agora o que pode passar em um valor de pixel. Digamos que eu faça 100. Guarde isso agora. Pode-se dizer que é muito menor. Talvez eu quisesse ser um pouco maior. Apenas faça 200. Ok, eu acho que é um bom tamanho lá. Podemos adicionar mais algumas coisas aqui. Quero incluir um texto. O que está na etiqueta de parágrafo é apenas uma pitak aqui com algum texto dentro. Vamos apenas dizer que isto é apenas para jogar o meu Há algo assim, certo? Hum, e agora nós podemos adicionar uma navegação para que possamos ligar para outras páginas do nosso site. Vamos em frente e apenas incluído na parte inferior aqui. Agora aqui. Todos incluem uma lista de comprimentos. Então vamos fazer uma lista ordenada. Esta é uma tag U L e poderia procurar informações sobre essas tags para aprender um pouco mais dentro terá itens de lista. É uma boa idéia apenas ter estes em novas linhas e guia tudo o que está dentro quando você tem apenas as tags aninhadas como este, seu curso para fazer links, nós adicionamos tags âncora. Sinta-se livre para positividade de Isto está indo muito rápido para que possamos vincular a diferentes páginas que eles querem adicionar um sobre página que está ligado a sobre isso. HTML. Isso ainda não existe, mas será em um momento e terá que ler sobre esse link. E talvez tenhamos outras páginas também. Foi só uma cópia que talvez vamos incluir um discurso de cópia aqui. Certo, então temos nossa lista de navegação aqui. Vamos salvar isso. Entre em um navegador em nosso navegador. Recarregar. Agora você pode ver que temos um pequeno parágrafo descrição aqui em links diferentes, mas clique sobre isso agora diz que seu arquivo não foi encontrado. Então vamos corrigir esse código invejoso. Você pode realmente criar arquivos diretamente aqui. Clique neste ícone aqui. Ou faça isso clique com o botão direito e clique no novo arquivo. Vamos digitar sobre dot html. Fechou esta árvore de novo e estes arquivos de ar são apenas manuais. Então tenha em mente, você sabe, agora temos sobre isso cada pequeno arquivo aqui. Pasta Insider. Vamos em frente e copiar tudo isso. Então copie isso em cerca de dot html. E vamos mudar isso que eu tenho que dizer com um pouco sobre Sonny. Vamos manter a imagem lá. Isso é bom. É uma boa ideia manter a navegação aqui. No entanto, já que já estamos na página sobre neste momento, é em uma página Dois estão vinculados para voltar para a página inicial, então ele vai voltar para indexar esse html e eles vão dizer home. Ok, então agora nós temos na página sobre, ir para o nosso navegador, e se eu recarregar, este boom agora terá uma página sobre. Veja, o título aqui também nos mudou. É a descrição do nível de cabeçalho, texto e agora conflito entre esta página inicial e sobre a página. Faremos o mesmo com passatempos rapidinho. Vamos copiar a página sobre e fazer o seu pai. É óbvio que HTML é que passatempos. São para um vigia ou algo assim. E vamos mudar esse link de passatempos para cerca de praia. Ok, isso está bom. É fresco. Uma página de passatempos. Agora temos este pêssego aqui. Então agora aprendemos como criar links aqui que vão para nossas diferentes páginas em nosso site. Você pode ver que só vai para esses arquivos. Poppy, iniciar html índice dot html. Também rapidamente quero mencionar que você pode ter se perguntado sobre isso. Estamos apenas exibindo esses arquivos em nosso navegador. Estes ar apenas local. Se partilhares isto com mais alguém, eles não vão conseguir aceder a isto. Mas no final desta aula, ele será capaz de carregar seu site para que você possa realmente compartilhar isso com outras pessoas. Acho que é isso para esta parte. No próximo vídeo, mostrarei como utilizar CSS para estilizar seu site 7. Conteúdo de estilização: CSS: Felizmente, você ficou mais confortável em usar HTML. Agora vamos passar a estilizar nosso site com CSS. Espero que isso faça isso parecer um pouco mais agradável. Vamos em frente e fazer um novo arquivo. Este será chamado estilo dot CSS pode ver que temos um arquivo CSS ponto estilo dentro da nossa pasta ao lado ou pasta Imagens e nossos arquivos HTML dentro. Aqui. Este é o lugar onde estará escrevendo nosso CSS e será segmentando nossas tags insider HTML e adicionando propriedades diferentes para alterar uma cor, espaçamento fonds e coisas diferentes como essa. O que precisamos fazer primeiro é vincular nosso arquivo com cada equipe. Lembra-te que fizemos esta etiqueta de cabeça mais cedo. Podemos adicionar dados aqui que dirão ao navegador para usar seus novos estilos. Então é em uma tag link dentro aqui vai dizer que o estilo da relação s ela e apontar para o nosso novo arquivo CSS estilo semelhante à tag imagem. Esta é outra dessas tags auto fechamento. Vamos salvar nosso arquivo HTML e voltar para o nosso arquivo CSS dot estilo. O que é isso? Algum estilo básico para mostrar que isso está realmente funcionando. Primeiro, vamos começar com um seletor. Este é o lugar onde você segmenta uma de suas tags HTML. Vou começar com o corpo e depois espaço e depois adicionar chaves. Então código óbvio é bom o suficiente para adicionar a graça de fechamento automaticamente. Certifique-se de que você tem uma chave de abertura no meio. Teremos nossas propriedades diferentes e depois uma cinta de fechamento. Por isso, dentro daqui, vou fazer uma conta para que isto pareça um pouco mais agradável. Visualmente, assim pode ver a diferença entre os seletores e as propriedades. Ok, vamos mudar a cor do texto, espaço de cor do tipo de célula e, em seguida, um nome de uma cor básica como azul verde. Você também pode usar cores hexadecimais aqui vai fazer isso em um momento. Vamos salvar este arquivo. Navegador Insider. Vamos recarregar a página. Você pode ver a cor do texto alterado, e isso realmente afetou toda a nossa página. Se você se lembrar, CSS significa folhas de estilo em cascata, e este é o aspecto em cascata disso. Mesmo que tenhamos como alvo a tag body, o estilo da cor do texto, ela cai em cascata. Você pode ver que as cores do link ainda são uma cor diferente porque eles definem suas próprias cores e assim podemos substituir a cor que foi definida anteriormente. Digamos que queremos que a tag de parágrafo seja de uma cor diferente. Então vamos mirar essas etiquetas agora mesmo abaixo do corpo. Digamos que espaço P, chaves encaracoladas. Quero que a cor destes seja verde. Certo, vamos salvar essa recarga. E eu posso ver que os parágrafos estão agora verdes. Uma coisa interessante a observar aqui é que ambos os parágrafos ou verde e isso é porque ambos estão usando sua tag de parágrafo. Se você acertar, clique e inspecionar, use ferramentas surdas aqui para ver isso. Ok, com selecionado essa tag de parágrafo e neste painel direito aqui está mostrando os diferentes estilos. Em segundo lugar, veja na tag de parágrafo. Temos a cor verde, entanto, no cabeçalho que cada um aqui eu poderia ver que não há cor no H um, mas diz aqui herdado do corpo. Então escolheu aqui que na verdade a cor azul está sendo herdada da tag body que declaramos em nosso CSS. E se quiséssemos ser um pouco mais criativos com as cores que usamos? Podemos usar algo chamado código de cor hexadecimal, que começa com um sinal numérico seguido de seis letras ou dígitos. Só vou usar o site chamado Color Picker Dot com. Isso nos permite escolher uma cor específica arrastando dentro deste seletor de cores e, em seguida, nos dando este código hexadecimal. Agora, em vez de usar um nome de cor poderia apenas acelerar esse código hexadecimal. Mas certifique-se de manter o sinal de número lá no início. Salve o arquivo, recarregue a página e agora temos um tom ligeiramente diferente de azul aqui. Vamos dar uma olhada em algumas outras maneiras que enfraquecem o texto Styler. Você pode adicionar um tamanho de fonte diferente fornecendo um vale de pixel aqui. PX Permanente para pixels pode alterar a família de fontes. Vamos com Ariel pode. Você também pode deixar o texto em negrito. Há muitos diferentes, mas vamos deixar assim. Em um navegador podemos recarregar e ver que agora temos esse texto diferente aqui. É ousado, é um pouco maior e está no fundo aéreo. Deixe-me mostrar-lhe como você pode adicionar espaçamento com margem. Vamos eu quero que esta imagem seja um pouco para a direita. Vamos selecionado imagem dentro de nosso CSS na adição margem traço esquerda propriedade. Digamos que 50 pixels recarreguem a página e você pode ver que ela foi movida um pouco para a direita. Isso é tudo por isso. O vídeo, claro, é sempre um link. Outro recurso que você pode usar para aprender um pouco mais sobre CSS que as diferentes maneiras que você pode estilizar caixas de texto criam um layout e coisas assim. 8. Como adicionar layout do site: Tudo bem, as coisas estão indo bem agora. Usamos HTML e CSS para fazer o que parece ser uma página de aparência decente, mas acho que podemos fazer ainda melhor. Vamos transformar isso em um layout de site tradicional com um cabeçalho na parte superior, um menu de navegação e, em seguida, talvez algumas colunas aqui também. Vamos começar criando as diferentes seções de sua página e movendo nossas tags lá dentro . Em HTML cinco, há uma tag de cabeçalho que podemos usar. Este será o cabeçalho sobre um site. Vamos copiar esta etiqueta cada uma lá dentro. Está bem, Legal. Também dentro do cabeçalho, provavelmente queremos um menu de navegação. Podemos copiar isso, UL aqui. Essa é uma lista de links aqui dentro. Conserte a tabulação aqui e há uma etiqueta de valete que podemos usar aqui. E é uma boa ideia mostrar que esta é a nossa navegação principal da nossa página com esta tag. Agora vamos também adicionar um rodapé. E, claro, essa é a liderança. Nossa navegação era para tê-lo aqui, então é sobre o fundo. Podemos ter uma etiqueta de rodapé e vamos dizer direitos autorais como colocar seu nome aqui. Então 2018 pode nosso conteúdo vai aqui. Está bem, Legal. Então agora vamos para o nosso arquivo CSS e começar a estilizar esses impostos para um Feder realmente queria ter uma espécie de barra. Olhe onde parece uma barra no topo da página. Então vamos fazer a cor aqui para ser branco na cor de fundo para ser cinza. Vamos verificar isso até agora, como isso parece, ok, nós provavelmente podemos consertar isso um pouco. Agora vamos inspecionar e ver o porquê. Há muito espaço aqui no topo. Então parece que o corpo tem algumas margens no topo à esquerda aqui, e cada um aqui tem margens. Bem, vamos consertar isso. Você pode dizer a margem. Quero que todas as margens do corpo sejam zero. E para o H, é removido. A margem aqui é bem, ok, é muito melhor, mas eu realmente não gosto desta grande cor na cor seletor ponto com Vamos com o meu azul favorito para fazer isso um pouco. Talvez um escuro como este. O sinal numérico com a cor hexadecimal. Eu posso relacionar a página olhando um pouco melhor, e nós também poderia centralizar. Isso é bom, então vamos inserir o texto dentro de cada momento. Ok? Doce. Provavelmente poderia usar algum espaçamento no topo. Uma ondulação. Você também pode usar algo chamado preenchimento. E isso irá simplesmente adicionar espaçamento dentro do texto essencialmente em vez de no lado de fora. Digamos que talvez 20 pixels. Está bem, doce. Vamos também mudar o fundo no título aqui. Então o que eu vou fazer é adicionar uma família de fontes no corpo. Ok, parece um pouco melhor se você não gosta desses fundos. By the way, você pode usar o site chamado Google Fonts que fornecem um monte de fontes diferentes aqui que você pode importar e usar dentro do seu site. Eu gosto muito deste, então eu vou clicar no sinal de mais. Você pode copiar este código aqui, arquivo html fronteira dentro de sua tag head. Simplesmente copie e cole isso aí. Em seguida, você pode ver a família de fontes poderia copiar isso. Guarde esses três lascivos. E agora a fonte em todo o site dela mudou. Em seguida, vamos em frente e corrigir este menu de navegação. Vamos adicionar um seletor na tag UL e centralizar o texto aqui dentro, que centralizará os links. E também devemos adicionar algum espaçamento na parte inferior dele também. É recarga que ver os links ar agora centrado. Mas também quero fazer esses itens da lista no Beacon. Olhe para o táxi diferente tendo aqui a qualquer momento. Então, o item da lista. Eu realmente quero isso para uma linha ao lado do outro. Eu não tenho certeza se você se lembra quando eu falei sobre um bloco e em tags de linha e como eles exibem um pouco diferente. Então, se eu fizer isso na fila pode ver, eles aparecem bem ao lado do outro. Agora vamos personalizar a cor desses links. Selecione todas as tags âncora, faça com que esses links sejam reproduzidos. Está bem, Sweet. Um problema para essa abordagem é que se você adicionar um link dentro de seu conteúdo aqui, esses links também serão brancos. Então o que você quer fazer é antes do seletor de âncora que você deseja em outra tag aqui. Então isto irá dizer que você só deseja selecionar links dentro da navegação. Isso funcionará da mesma forma. Mas agora os links dentro do conteúdo, eles não serão Espere. Ok, vamos também centralizar o texto do rodapé aqui. Então é como o texto da etiqueta de rodapé no centro da linha. Ok, agora o rodapé está alinhado no centro também. Agora, o conteúdo aqui. Nós provavelmente podemos apenas centralizar isso, mas eu mencionei como você pode adicionar colunas. Então vamos tentar fazer isso. Dentro de seu HTML terá que fazer novos impostos aqui para manter o nosso conteúdo da barra lateral e nosso conteúdo principal . Essas serão as nossas duas colunas. Então vamos usar o ataque chamado div, e então teremos mais dois dibs dentro de lá. Cópia e paz. Agora estes ar apenas tags genéricas que você pode usar e por isso precisamos dar-lhes nomes. Poderia fazer isso, dando uma classe na classe Nome vai dizer recipiente. Esta será uma barra lateral. E, finalmente, o conteúdo pode nomeá-los como você quiser. Cabe a você. E então vamos em frente e cortar e colar essas etiquetas aqui. A imagem irá para a barra lateral no parágrafo, tags fora do curso, indo para o conteúdo dentro do nosso CSS. Precisamos agora selecionar nosso novo elemento de contêiner, que é este dia aqui. Classes que podemos selecionar com um ponto e, em seguida, o nome, o recipiente de ponto. E para criar colunas, usamos algo chamado layout flexível. Então vamos dizer display flex, recarregue a página e boom. Temos duas colunas diferentes aqui. A imagem à esquerda e o texto no ataque. Vamos consertar um pouco do espaçamento. Eu já sei que as tags de parágrafo têm um máximo de margem. Vamos definir isso para zero. Ok, isso parece um pouco melhor. E para o conteúdo, vamos adicionar algum preenchimento à esquerda e ter esse igual. Digamos 20 pixels. Ok, é agora que temos algum espaçamento à esquerda aqui e finalmente, talvez algum estofamento no topo do contêiner. Tudo bem, isso parece muito bom. Agora, talvez algumas rebatidas no fundo. É bom para o rodapé lá. E então, sim, isso parece muito bom agora. Também é responsivo. Você poderia dizer que eu posso redimensionar e tudo o tipo de tamanho apenas está para baixo também. Tudo bem. Este site chegou muito longe. Agora temos um layout bonito aqui com um cabeçalho. Temos o título e a Barra de Nap, uma área de conteúdo de duas colunas e um rodapé na parte inferior. E no próximo vídeo, vamos chegar ao JavaScript para adicionar um pouco de interação em nosso site. 9. Como adicionar funcionalidade: JavaScript: até este ponto, usamos HTML para adicionar conteúdo e CSS para adicionar algum estilo. Agora vamos adicionar um pouco de interação adicionando um botão no qual alguém pode clicar para exibir uma mensagem secreta. Precisaremos fazer um novo arquivo de novo. Chama-se este script dot Js Inside. Aqui vamos escrever algum código para selecionar um botão na página, então vamos dizer documento ponto get elemento por ID IDcódigo ID ID invejoso oferecerá sugestões aqui. Não se preocupe muito com o código aqui. JavaScript é uma linguagem de programação completa, por isso não é muito simples como HTML ou CSS Cento X. Então vamos dizer botão. Em seguida, adicione um ouvinte de eventos. Então, quando eles clicam no botão irá executar uma função. E eu deveria ter este casaco nas notas se você quiser copiar e colar no caso de você não conseguir fazer exatamente o mesmo. E agora vamos mostrar uma mensagem secreta usando a função de alerta aqui. Minha mensagem secreta. Ok, isso deve funcionar, mas primeiro precisamos adicionar esse script onde cada equipe L Page pode ver já tê-lo aqui, usando a tag script com a fonte apontando para o script. Arquivo RGs. Nós realmente temos que ter uma tag de fechamento para a tag script. Em seguida, precisamos adicionar este botão em algum lugar para que vamos usar a tag botão mostrar mensagem secreta. Isto será o que o botão diz. E porque nós selecionamos um comprado e com um i d de botão que você precisa em que eu d. aqui. Provavelmente podemos dar um nome melhor a isto. Isso é uma mensagem de show. Uma atualização, nosso script de trabalho aqui para dizer mostrar mensagem. Ok, tão rápido. Uma pequena recapitulação. Fizemos um novo arquivo aqui. Ponto de script Js Nós adicionamos isso em nossa página com a tag script. A propósito, certifique-se de que isto está no final da página. Desta forma, todo o html estará pronto antes do script, Terance. E finalmente nós adicionamos um botão inter html para que quando eles clicarem, eles vão mostrar essa mensagem secreta. Vamos recarregar nosso site. Você pode ver que o botão está aqui agora. Se eu clicar neste boom, ele diz a mensagem secreta nesta pequena caixa de alerta aqui. Essa foi uma introdução rápida ao JavaScript. Como eu disse antes, é uma linguagem de programação que pode fazer um monte de coisas e assim vincular este recurso aqui. Se você quiser aprender o script Java mais em profundidade e fazer muitas coisas legais com ele, crie algumas pequenas aplicações legais. 10. Como fazer o upload do seu site: Agora vamos fazer upload do nosso site on-line para que possamos compartilhá-lo com outras pessoas. Existem muitos serviços diferentes para isso. Este chama-se urtiga. Se eu Há também outro chamado obter páginas de ajuda e surtar. Pessoalmente, eu acho que metal, se eu for o mais fácil para você. Hum, logado aqui. Então, uma vez que você fizer uma conta, você e você entrar, você vai parar nesta página aqui, ir em frente e abrir a pasta que nós armazenamos todos os nossos arquivos em e nos arrastou para a urtiga Se eu guia Ok, então depois de alguns segundos, dependendo de quão rápido é você obter isso. Você está bem aqui. Se você clicar nisso e boom pode ver o nosso site está agora on-line e funcionando. E aqui está a barra de domínio. Vocês estão todos aqui. Você pode realmente começar a compartilhar com as pessoas. Outra pessoa será capaz de ir a isso e ver tudo o que você adicionou aqui. Se você quiser atualizar seu site, você pode ir em frente para as implantações toque aqui e, em seguida, arrastou sua pasta novamente com arquivos atualizados . Tudo bem, enorme. Parabéns por colocar seu primeiro site on-line. Espero que você compartilhe isso na galeria do Projeto na minha classe de compartilhamento de habilidades. Certifique-se de que também é seguir o meu perfil de escultura e olhar para fora para outras aulas que eu posou em. Que desenvolvimento? Mas, por enquanto, certifique-se de continuar melhorando seu HTML e CSS e suas habilidades de script de trabalho. Desta forma, você pode continuar adicionando mais coisas ao seu site, que eu acho que é onde a diversão neste realmente reside. Eu já mencionei a Mozilla Developer Network. Eles têm realmente grande documentação sobre essas três tecnologias diferentes na Web , bem como muitas outras coisas diferentes. Então, definitivamente, veja isso. Continue aprendendo e te vejo no vídeo final. 11. Considerações finais: Certo, então isso conclui a aula. Mas antes de ir, definitivamente deixe-me saber com a revisão em termos do que você aprendeu como esta classe tem ajudado você. Ou talvez não prefira nada construtivo. E se você construir algo realmente legal poder site pessoal, você sabe, algo super simples ou levou mais longe. Definitivamente adoro vê-lo. Eu tenho meus pés de volta nisso, assim como qualquer outra pessoa que está nesta classe. E assim certifique-se projeto cartaz na galeria do projeto e eu vou postar mais aulas em desenvolvimentos futuros. Se você quer fitas mais longe, eu definitivamente vou te mostrar como fazer isso. Então certifique-se de seguir o meu perfil dessa forma. Você sabe alguma coisa. E mais uma vez, muito obrigado por assistir os vídeos de fazer parte da turma.