HTML + CSS — COMO CONSTRUIR UM SITE

1. Introdução: a todos, Muito obrigado por clicar neste curso. Meu nome é Verity e sou um desenvolvedor de front-end de Sydney, Austrália. Agora, estou aqui hoje para ensinar os fundamentos de HTML e CSS sobre. Para fazer isso, vamos trabalhar juntos na construção de um site de estilo portfólio que você pode personalizar acordo com suas habilidades e, claro, seu próprio estilo. Agora, você não precisa de nenhuma experiência prévia para ser capaz de fazer este curso. Vamos começar da estaca zero e vamos trabalhar juntos e construir todas as habilidades lentamente. No final deste curso, você terá construído um site pronto para a Internet, que é muito legal agora, a fim de tirar o máximo proveito disso, porque eu realmente encorajaria você a criar um projeto sob este vídeo no projeto onde você pode acompanhar seu progresso ao longo da classe, você pode conversar com outros alunos, você pode ver no que todos têm trabalhado. E, claro, se você ficar preso, você pode fazer qualquer pergunta na seção da comunidade e eu vou tentar e ajudá-lo o máximo que eu puder e espero que vocês colegas de classe tentem e ajudá-lo também. Então, se você está pronto para mergulhar neste projeto, vamos começar a nossa primeira lição. 2. Aula 1: Introdução: Se vocês forem bem-vindos à Lição 1, saibam o que vamos fazer nesta primeira lição é que vamos prepará-los com seus arquivos de curso. Vá para baixar um editor de texto. Nós vamos ter um olhar através da estrutura de pastas em apenas geralmente preso através tudo o que nós vamos estar cobrindo neste curso. Então nós estamos indo para a primeira coisa que vamos fazer é clicar no seu projeto toque abaixo deste vídeo, e você deve ver arquivos anexados e uma pequena pasta Zip dizendo projeto classe dot zip. Basta baixar essa pasta e extraí-la para o seu computador. Já fiz isso tão social agora. Então, uma vez que você abrir esse arquivo, você deve ver três projetos de subarquivos, arquivos de trabalho e concluir o projeto. Se cozinharmos no arquivo de design, você verá que eu forneci para PNG um para desktop um de Mobile. E esses são os projetos do que vamos construir neste curso. Mas vamos dar uma olhada nisso em um navegador em um momento. Então, se voltarmos a um nível, temos arquivos de trabalho que é literalmente como funcionam frascos. Aqui é onde vamos estar fazendo tudo sobre o trabalho ao longo do curso em um projeto acabado que vai cozinhar em agora você pode ver que eu tenho índice dot html e uma pasta de ativos onde vamos armazenar nosso CSS em tudo sobre imagens. Se você clicar duas vezes em seu arquivo html index dot, ele será aberto em um navegador, como você pode ver aqui. Então nós temos um espaço de navegação agradável para um logotipo. Algumas ligações agradáveis. Estamos à frente da imagem com um pouco de texto introdutório para que você possa se apresentar . Temos uma seção aqui para itens do portfólio. Eles obviamente têm fotos ou comida no momento, mas você pode mudá-los para ser o que você quiser. E se passarmos o mouse sobre essas imagens vai ver que temos um bom efeito CSS pouco mostrando o nome do item do portfólio em uma breve descrição, bem como sobre o que é. E se descermos, temos uma seção sobre mim com meu rosto à direita. Apenas um pouco de espaço para uma descrição sobre quem você é e o que você faz e, em seguida, na parte inferior. Temos uma seção de contato que também tem o título e a descrição, mas também todos os ícones de mídia social que você pode vincular às suas próprias contas pessoais . Então é isso que vamos construir. Acho que fica muito bonito. No final deste curso, este será um site pronto para a Internet. Então, antes de começarmos qualquer trabalho em nosso site, a primeira coisa que vamos precisar é de um editor de texto, que é o que você usou para escrever o código para seu site. Então eu usei alguns no meu tempo e honestamente, no nível iniciante, realmente não faz nenhuma diferença real qual você escolhe? Alguns dos que usei antes são Adam Dot Io. Eu tenho sublime. Tex no que estou usando no momento é o código visual do estúdio. Mas honestamente, isso realmente não importa. Então escolha o que quiser. Eu acho que hoje nós vamos estar usando para ele então você pode apenas clicar no download e seguir as instruções sobre Adam. Uh, abra isso. Eu já o tenho instalado no meu computador, então eu vou abrir isso agora eu vou abrir nossos arquivos de projeto, então esses são nossos arquivos de trabalho. Então você quer que você quer a pasta de arquivos de trabalho? Então você clica em abrir, você pode ver todos os índices e nossos ativos. Vou clicar no arquivo de índice. E lá vai você. Aqui é onde vamos trabalhar em nosso projeto para que você possa ver que eu já configurou o arquivo html feno para você. A estrutura básica. Então temos doc type html no topo, que é uma necessidade para todos os hedge de amount arquivo para que o navegador saiba que tipo de arquivo sua abertura. Quando você carregá-lo em seu navegador, temos uma tag hey html que envolve a totalidade do conteúdo em seu arquivo HTML novamente, que precisa ser. Esse é o navegador sabe o que você está dando. Temos a cabeça no corpo. Agora. A cabeça é onde você coloca todas as informações sobre sua página web que você não deseja necessariamente ser carregado em seu navegador. Então é aqui que você diz vincular seus arquivos CSS, seu arquivo javascript para que a navegação saiba onde encontrá-los. Aqui é onde você colocaria informações no Facebook, compartilhando quaisquer metadados, o título de sua página da Web e coisas assim. Há um monte de coisas que você poderia colocar lá, mas vamos cobrir isso mais tarde, então não se estresse muito sobre isso de vez em quando o corpo. É aqui que você escreve tudo o que deseja que fique visível em sua página da Web. Então, para demonstrar primeiro o que o corpo realmente faz, vamos começar com a criação de uma página web hello world, que é uma tradição no desenvolvimento da Web. Sempre que você iniciar um novo projeto, você cria uma página da Web hello world para se certificar de que todos os seus arquivos e tudo estão funcionando como você espera que eles vão. Então a primeira coisa que vamos fazer é conversar. Ei, Hum, odeio uma etiqueta. Agora isso significa apenas dirigir um e, em seguida, dentro do título, vamos escrever Olá, pequeno ponto de exclamação mundo e salvar esse arquivo. Agora, se entrarmos no cromo no caminho, abra nosso arquivo para que eu vá para os meus projetos de custo, os arquivos de trabalho e meu arquivo de índice. Lá vai você. Você pode ver “Olá”. Bem, acabei de imprimir no navegador. Então nós sabemos que nosso arquivo de índice está funcionando, Mas nós também queremos configurar nosso arquivo CSS para que possamos aprender CSS neste curso. Então, em sua pasta de ativos, se você voltar para ele e dar uma olhada na pasta Assets e nós temos a pasta Styles , que é onde o CSS fica armazenado e nessa pasta eu tenho o principal ponto CSS é onde Nós vamos armazenar todos os nossos arquivos e como você pode armazenar todos nós estilos Desculpe. E como podem ver, escrevi que o ódio deveria ter a cor roxa, mas no momento, o título não é roxo, então não está funcionando. Então, o que vamos precisar fazer para que esse estilo afete nosso arquivo de índice está em nossa cabeça do documento. Precisamos realmente vincular o arquivo CSS. Então aqui eu acabei de copiar. Nós temos uma tag link com RTL, que termina para relacionamento ou relação, que é assim que é o tipo de que é o arquivo É uma folha de estilo. Ei, Treff significa o local para que possamos ver se entramos no lado esquerdo aqui, podemos ver que o arquivo de índice fica no mesmo nível da pasta de ativos. Então, o que estamos dizendo aqui é que, no Índice, queremos que você entre na pasta Ativos, veja a pasta de ativos. Então queremos que você vá para a pasta Estilos. Então queremos que você vá para o principal ponto CSS. Então, se salvarmos esse arquivo e entrarmos em nossa página da Web e recarregarmos, você pode ver que ele é roxo. Lá vai você. Você acabou de colocar sua primeira página da Web. Agora, na segunda lição, vamos parar de construir na navegação para o nosso site, então vamos indo. 3. Aula 2 - parte 1: navegação: Então, antes de irmos mais longe, provavelmente deveríamos falar sobre o que e-mail e CSS estão realmente certos. É meio importante para este curso. Então hey, HTML fica enquanto linguagem de marcação de hipertexto onde um CSS significa folhas de estilo em cascata. Agora você pode pensar em HTML e CSS em termos de construção de uma casa tão precipitado ml é a estrutura da casa. São os lobos. É o telhado. É o chão. É o que seções Um pequeno quarto fora onde um CSS é, como você decora a casa, como você faz para casa. É a cor que você pinta as paredes. É a mobília que você escolhe. Escolha na sua lavanderia. É se você quer que a fotografia na parede fique à esquerda, à direita. Agora, a coisa importante a lembrar para folhas de estilo em cascata ou CSS é que a importância dos estilos que você escreve se torna cada vez maior e maior à medida que eles caem em cascata na folha de estilos. Então, o que quer que você esteja no fundo vai potencialmente substituir o que você escreveu no topo. Se você estiver usando a mesma seleção, não se preocupe muito com isso Agora. Vamos cobrir isso na próxima lição. Então a primeira parte da nossa página que vamos construir é a navegação. Para fazer isso, vamos precisar começar escrevendo ALH marcação html que vai definir o layout e o conteúdo para a nossa página. Agora, se olharmos para o layout em nosso projeto concluído aqui, você pode dividir o design em uma espécie de grade. Você pode ver que nós temos o contêiner externo que cria a forma da navegação. Temos um contêiner interno que está criando o máximo com que são conteúdo de contato pode expandir para Temos um pequeno contêiner para o nosso logotipo e um contêiner para nossos itens de navegação . Agora, cada uma dessas seções vai ser embrulhado em tags chamadas dibs on vai dar-lhes nomes de classe para que possamos selecioná-los em CSS quando estamos modelando-los mais tarde. Vamos para o nosso arquivo HTML e primeiro vamos excluir são Olá mundo porque não precisamos mais disso. Vamos começar por escrever. Odeio sua boca, então escreverei nossa primeira div com a navegação Kloss. Este vai ser o contentor para toda a nossa navegação. Agora, você pode escrever assim como uma div ou porque vai ser uma navegação. Há uma tag especial chamada tag naff. Achei que você poderia fazer de qualquer maneira. Agora é melhor para acessibilidade. E aí dentro vamos ter um contêiner. Kloss, que terá o recipiente que vai limitar a largura fora do conteúdo que está dentro da navegação. E, em seguida, mais uma camada abaixo terá um Kloss com cavaleiros Loga Uh, Dave no mesmo nível dentro do mesmo recipiente. Nós vamos ter uma classe para o nosso nunca uma classe e um fez para nossos itens de navegação. Este é o lugar onde vamos colocar todos os nossos links para diferentes seções em nosso fólio. Então nós estamos apenas aqui apenas por agora para que nós temos algo lá dentro, escrever logotipo e vai agora itens que eu gosto de fazer isso apenas para que eu possa ver na página onde tudo está. Entraremos em nossos arquivos de trabalho e atualizaremos e aí vai você. Então, para que o nosso logotipo apareça. Eu realmente o tenho definido como um arquivo de imagem, então vamos escrever uma tag de imagem com uma fonte em uma alternativa depois de você. Este atributo alternativo basicamente apenas descreve o que é a imagem. Então, se não carregar, o usuário sabe o que deveria estar lá. Então eu vou apenas imagem de perfil direito em que em. Nossa fonte diz ao navegador onde encontrar a imagem. Então, neste caso, estamos no arquivo de índice. Queríamos ir para a pasta Assets para a pasta Imagens e, em seguida, para baixo para o logotipo Verity dot p e G. Então eu vou escrever isso como imagens de ativos e, em seguida, verity logotipo ponto PNG. E então, bem, basta verificar se isso carregou ver este espaço em branco. O logotipo em si é branco não seria capaz de vê-lo para o momento. Mas o fato de não estar mostrando a tag alternativa significa que ela carregou a imagem . Então, em nossa seção de itens de navegação, vamos escrever nossos itens em uma lista, e neste caso vamos usar um nordeste, que significa que ele só mostrará marcadores em vez de números. Se você quiser mostrar números você pode escrever. Oh, o que significa lista ordenada. Mas vamos usar uma lista ordenada neste caso. Então, cada um dos nossos itens da lista vai encobrir um dos nossos sobre links para um ponto na página . Então vamos fazer três desses um Teoh três e dentro vão ter uma tag, que é como você cria um link. Vamos colocar uma libra nisso por enquanto. Assim, em uma tag permite que você vincule qualquer texto dentro de sua quantidade hachada. Então, nosso primeiro link será cópia da seção de portfólio superior. Este segundo link vai ser para a nossa seção sobre, e o terceiro link vai ser isca para a nossa seção de contato. Certo, agora estávamos frescos. Podemos ver este espaço em branco onde as imagens que temos cada um dos nossos links, mas não parece bem do jeito que queremos. Então agora nós estamos indo para o estilo rht quantidade. Então, para fazer isso, vamos entrar em nossos estilos de pasta de ativos e, em seguida, CSS principal vai se livrar do nosso ódio um roxo porque nós não precisamos mais disso. E bem, certo. Navegação porque lembre-se, nosso contêiner superior tem a navegação de classe, e vamos definir o plano de fundo para se cinco data 75 Agora isso é o que você chama de um valor hexadecimal. Então, se guardarmos isso fresco, lá vai você. Agora você pode ver nossa imagem. Mas você vê como há um estranho espaço em branco ao redor da navegação, que nós não temos. Não pedimos ao navegador para fazer isso. E o que é é um estilo padrão que o navegador está aplicando à nossa página da Web, e cada navegador aplicará esses padrões um pouco diferente. Então eu incluí em seus arquivos para você normalizar ponto CSS. Eu não vou entrar em muitos detalhes sobre o que é isso no momento, só por causa do tempo. Mas, essencialmente, o que isso faz é redefinir todos os seus estilos de navegação padrão. Então, se nós apenas ligar isso em nosso arquivo principal acima do arquivo CSS ponto principal e atualizar a página que você vai que vai embora, é importante que ele vem primeiro porque qualquer coisa que está em seu arquivo CSS principal irá substituir normalizar dot CSS porque é uma folha de estilo em cascata. Então, quanto mais você for, maior será a importância. As regras de estilo são tão agora que temos isso, o que queremos fazer agora é obter este logotipo estilizado e flutuar para o lado esquerdo. E queremos que nossos links sejam exibidos em linha e flutuem para a direita, então vamos começar sem logotipo, já que esse é o primeiro para que possamos direcionar nosso logotipo usando suas garras. Temos os panos, valete, Loga. Então nós estamos indo para o nosso CSS bem agora. Logotipo se. Vamos dar-lhe uma largura de 180 pixels, porque é um pouco intolerante no momento em que eu vou colocar uma borda em torno dele, só para que você possa ver onde tudo termina. E faremos isso para nossa navegação também. Então vamos fazer borda um pixel sólido leitura. Vamos guardar isso e dar uma olhada rápida. Oh, veja as imagens saindo do contêiner. É por isso que a fronteira é sempre boa, para que você possa ver onde tudo termina. Então a razão pela qual isso está acontecendo é porque o logotipo nunca é o contêiner. Mas a imagem em si é maior do que o recipiente, então ela está derramando para fora do lado. Então, para corrigir isso, vamos fazer outra camada para baixo e bem agora. Imagem do logotipo falando. É assim que você segmentar um elemento por apenas escrever imagem irá dizer div o l. l. Então, para segmentar a imagem que vamos escrever com 100% e com 100% neste caso significa 100% da largura fora de seu pai. Então, porque dissemos que os pais deveriam ter 180 pixels, isso significa que o logotipo do valete não pode ter mais de 180 pixels salvará isso e verificará novamente. E eles dizem, isso parece muito mais agradável. 4. Aula 2 - parte 2: navegação: Vamos dar uma olhada nesses links. Queremos que eles se sentem na fila em vez de um por baixo do outro. Então panos que temos de itens de nab. Lá vai você. E então nós temos o nosso U L L I. Então vamos entrar em um CSS em Nós vamos estilo não tem itens para o Kloss. Vamos colocar uma borda de um pixel sólido branco lá novamente para que possamos ver onde ele está. Mas para os nossos itens têm, vamos parar fazendo com que eles sejam exibidos em blocos de linha. Portanto, queremos ir até a lista ordenada da ONU e o item da lista quando queremos que cada item da lista se exiba de acordo com os outros. Então, no bloco de linha, eles vão lá velhos na fila. Agora vamos ver. Este recipiente está ocupando toda a largura da tela, que não queremos. E a razão pela qual isso está acontecendo é porque ele é um item de bloco de exibição. Então vamos voltar até agora itens, que é o contêiner, e vamos adicionar exibição no bloco de linha para isso é bem, eles vão agora. Veja este pequeno espaço aqui que ele está criando à esquerda do texto que tem a ver com preenchimento assim tapting Você vê que o espaço verde Então preenchimento é o que eu vou mostrar-lhe no se abrirmos as ferramentas de desenvolvedor ou para mostrar que desde o início Sophie, clique direito, clique, inspecionar e nós entramos nós clicamos neste pequeno porto coisa quando clicamos em nosso item que queremos olhar, que está fora em listas ordenadas, você pode ver este é o HTML que escrevemos pouco antes de abrirmos. Você pode ver seus itens da lista e agora, se formos até aqui para estilos e rolar para baixo, você pode ver que a seção verde é o que chamamos de tapinhas e tapinhas significa espaço dentro de um contêiner. Então não queremos esse espaço no contêiner. Nós realmente queremos que isso seja zero assim. Então, se entrarmos em todos ah CSS sobre os itens valete nunca itens no elemento lista ordenada e escrevemos preenchimento zero que vai embora ou ficar ido. Eles vão agora. Queremos esses links longe aqui sentados à direita. Então, se voltarmos ao nosso CSS e visarmos os itens do valete, podemos. O que podemos fazer é escrever, flutuar direito, e isso vai enviá-lo para a direita. Então vamos dar uma olhada. Flutua aí mesmo. Está à direita, mas veja como agora está sentado do lado de fora do contentor. Isso é porque quando você usou float, ele tira o ódio do macho xiita fora da ordem normal. Então agora é engraçado, então a maneira que nós vamos corrigir isso é colocando um flutuador à esquerda no logotipo. Você tem logotipo flutuador esquerda. Mas o que isso vai então ver agora que está sentado mesmo que você comprou o recipiente com o fundo realmente colapsou porque ele mudou a ordem do HTML. Então não há mais nada sentado lá dentro. Então corrigir para isso é ir para o recipiente fora desses dois elementos em. Vamos escrever água transbordante, que está essencialmente dizendo ao recipiente para conter tudo, mesmo que transborde a altura. Então vamos clicar, atualizar, atualizar, e eles vão que contido novamente. Então vamos nos livrar das fronteiras porque não precisamos mais delas. Nós vamos colocar um pouco de espaçamento entre Allah agora itens e também se livrar deste azul e sublinhado. Agora, os itens L. Quero espaçamento do lado de fora. Não queremos estofamento. Queremos espaçamento. Queremos margem do lado de fora, fora dos itens da lista, então vamos escrever zero no topo. Cinco à direita é zero na parte inferior cinco à esquerda. Isso é o que essa taquigrafia significa. Não mais. Troque o AIBA e veja se criou este espaço. E se eu for e se eu entrar em um dos nossos itens aqui e clicar nele no item da lista Veja , podemos ver a margem cinco em cada lado. Nada no topo, no fundo. Não, agora, para a cor você tem que segmentar especificamente a tag que temos dentro do item da lista. Então vamos valete. Eisen U L L I. Uma cor f f f f f f f f f, que significa branco, e queremos que a decoração do texto seja nenhuma. Não queremos esse sublinhado aí, então vamos nos refrescar. Eles vão adoráveis agora. Acho que quando você pairar, vamos querer um pouco de cor nele. Então vamos fazer a mesma regra novamente. Mas desta vez queremos usar uma pseudo-classe chamada Ha va, e vamos mudar a cor para, digamos, por enquanto, laranja. Esta é outra maneira que você pode definir cores em CSS apenas escrevendo o nome. Então clique em salvar fresco e pairar e você obter laranja. Agora, observe como o logotipo e os links estão indo para a borda da página, enquanto em nosso projeto final eles meio que se sentam um pouco para dentro. Então, para corrigir isso, vamos direcionar nosso contêiner, que temos envolvendo todo o nosso conteúdo. Vou escrever isso. Muito alto como um estilo geral, geral. Estes são todos estilos de navegação. Quando você embrulha algo nesta lama e estrela, ele vai comentar para que ele não vai realmente afetar os estilos do seu site. Então, para o contêiner, vamos escrever Max Wit 1200 pixels e uma margem off, zero na parte superior e inferior e auto na esquerda e direita, o que significa dividi-lo igualmente à esquerda e à direita, então ele vai sentar-se no centro. Guarde isso e atualizar anunciado fica no centro. Então, agora só queremos limpá-lo um pouco. Isto está parecendo muito bom. Vamos nos livrar disso. Borda mudará nossa frente para um fundo Sand Sarah porque ele tem esses pequenos pedaços de decoração no momento na frente, e nós vamos adicionar um pouco de estofamento no topo desta imagem para que ele fique mais para baixo. Então volte para uma onda CSS. Vamos nos livrar da fronteira. Vamos escrever no nosso general. Queremos tudo. Isso é o que este pequeno Asterix significa tudo para ter o formulário família família família fonte fora San Serif em. Então queremos adicionar um pouco de preenchimento do dedo do pé nosso logotipo. Então vamos descobrir logo aqui é assim que queremos Salem acariciar, digamos, 10 pixels, mas apenas no topo. Então esta é outra maneira que você pode escrever top preenchimento e, em seguida, vamos atualizar isso, e isso parece muito bom, mas ainda está terminado. Projeto é um pouco mais amplo, então, para o nosso contêiner , o contêiner de navegação, vamos adicionar algum preenchimento fora 10 pixels na parte superior, inferior esquerda e direita. Então em todos os lugares tem 10 pixels em vai salvar isso. Volte para o nosso arquivo de trabalho e atualize. E lá vai você. Ok. Na navegação está olhando muito bom. Vamos continuar trabalhando em uma cabeça erguida. 5. Aula 3: cabeçalho: Certo, então a navegação está boa. Então agora vamos passar para styling up e montar o html para o cabeçalho, que vai ser esta parte aqui com a imagem de grande recurso agradável e um pouco de uma introdução sobre quem somos agora, assim como antes, que vai ser esta parte aqui com a imagem de grande recurso agradável e um pouco de uma introdução sobre quem somos agora, assim como antes, vai dividi-lo em uma espécie de grade, como, uh, colapso. Então você pode pensar nisso como assim você tem este recipiente externo aqui onde esta imagem de fundo está sendo aplicada e, em seguida, temos um interno contém um para a nossa introdução e em seguida, a pequena seta que apenas fica abaixo disso. Então vamos dar uma olhada em como escreveríamos o e-mail de ódio para isso. Escrevi isso para você só para os cansados do tempo. Então vamos passar por algo muito parecido com a cabeça para fora. Temos o exterior até a navegação. Desculpe, temos o div exterior, que demos aos panos de cabeça. Então temos o recipiente interno para impedir que o conteúdo se espalhe muito longe e , em seguida, dentro do recipiente. Temos, uh, uh, feito para o nosso cabeçalho de texto com o nosso pequeno texto dentro dele e, em seguida, abaixo disso no mesmo nível. Temos a nossa flecha. Então, se dissermos isso, entrarei em nossos arquivos de trabalho só para checar. Lá está ele. Então vamos parar de modelar isso agora. A primeira coisa que vamos querer fazer é definir o fundo para o com o chefe de seção, então vamos apenas dizer fundo e dar-lhe o caminho para onde a imagem vai pagar. Então, neste caso, estamos indo do arquivo CSS e para a pasta de imagens de imagem. Então CSS se você tiver uma olhada aqui, CSS fica dentro da pasta Estilos, então nós realmente queremos saltar para o mesmo nível fora de estilos e pasta de imagens e, em seguida, saltar de volta para baixo novamente. Então voltar a um nível é o que este pequeno ponto aqui faz. Então salte para fora dessa pasta e, em seguida, de volta para imagens para encontrar espaço de trabalho. Tenho J peg. Então vou aplicar mais alguns estilos. Então nós temos a capa de tamanho de fundo para que ele sempre cobre a largura e a altura fora do cabeçalho. Temos centro de posição para que a imagem esteja sempre centrada. Neste caso, estamos definindo a altura para 80 portas vieux, por isso 80% de desconto na altura da porta de visualização ou o que quer que esteja a utilizar para ver o seu website. Vai ter 80% de desconto nessa altura. Então vamos guardar isso e dar uma olhada rápida que eles consideram. Podemos ver nossa imagem em sua sessão com cerca de 80% de desconto na altura fora da tela. Então, a próxima nós queremos estilizar este pequeno recipiente onde nós vamos ter o nosso cabeçalho de texto. Então vamos fazer a Hedda. E então Target tinha uma mensagem, mas senta-se dentro da cabeça em Andi. Eu só vou fazer um plano de fundo com um valor RGB A. Então essa é outra maneira que você pode definir uma cor em CSS. E então o 111 indica que isso deve ser preto, e então o Norte 0,8 no final é o um valor que dita qual o nível de opacidade deve ser. Então, não 0,8 80% uh, capacidade, nós temos a cor do texto, disse Toe White sobre. Vamos fazer desta pequena seção um bloco de elementos de nível para que possamos definir uma altura máxima e uma inteligência máxima para impedir que ela se expanda demais com o conteúdo. Temos margem, zero auto para que ele fique no centro e, em seguida, um pouco de tapinha para que haja algum espaço ao redor do texto e o texto não vá direto até a borda fora do contêiner. Então eu vou guardar isso no fresco eles vão. Isso parece um pouco com o nosso design. Então, agora, a fim de tê-lo sentado verticalmente enviado para fora, nós temos que usar uma propriedade chamada Posição Agora. A posição é um pouco complicada, então eu vou fornecer-lhe um link para esta página MDM aqui, que lhe dá uma boa explicação fora da posição. Propriedade. Agora este desenvolvedor ponto Mozilla dot organização MDM Qual Web docks. Isso tem tudo o que você precisa saber sobre quantidade do Haiti e CSS nele para que você possa simplesmente usar a barra de pesquisa para procurar qualquer propriedade que você precisa. Então, neste caso, estamos usando a propriedade position, e você pode ver aqui isso está dando exemplos do que cada um faz isso neste exemplo vamos usar absoluto e relativo assim como uma explicação. Se eu clicar nisso, você pode ver que se eu mudar isso para zero, ele volta para cima. Então isso é posicionar esta caixa amarela em relação ao seu recipiente, que é a caixinha filhinha aqui. Então, se eu não importa o quê, eu mudei isso para ele fazê-lo em relação àquela caixa. Considerando este exemplo Aqui é ver como a caixa azul se moveu daqui para cima para se sobrepor onde aquela caixa amarela anteriormente waas. Isso é porque absoluto tomou esta caixa fora do fluxo normal de hey html e está posicionando-o em relação a este recipiente, que seria como o corpo da nossa página web. Então, se eu disser top zero, ele vai direto para o topo. Então, como isso se aplica ao contêiner Allah Little aqui? Queremos que isto fique no centro, mas não queremos que voe até a navegação. Então, é um pequeno truque que você pode fazer então vamos usar a posição, absoluta para centrá-la, que você faria apenas assim, tendo a posição de propriedade absoluta, que eu vou apenas comentar isso. Bem, estes para fora por um segundo e vai dizer que para mostrar que a posição absoluta jogá-lo todo o caminho até aqui, tira-lo para fora do fluxo normal, que nós não queremos agora maneira que nós podemos corrigir isso é indo acima nível na cabeça e realmente definindo a cabeça como um parente posição. E isso impedirá sua criança de sair da cabeça do contêiner. Então lá vai você. Agora, para fazê-lo sentar-se verticalmente centro, bem como horizontalmente centro. Nós vamos fazer a posição na parte inferior esquerda, direita e falar tudo zero para que ele está puxando em todas as direções. Então, se eu disser que ele é puxado em todas as direções e acaba sentado no centro da página exatamente como nós queremos. Então isso parece muito bom, exceto que eu soletrar desenvolvedor errado, então bem, corrigir que desenvolvedor de desenvolvimento. Ok, então agora nós queremos cuidar da nossa flecha. Então a primeira coisa que vamos fazer é ir para imagens e obter seta porta spg que eu forneci para você, que você pode apenas destacar e copiar para o seu arquivo de índice. Um SPG é um formato de arquivo para quatro imagens, então vamos copiar isso em Andi. Vamos guardar isso e testar se foi lá. Ele está olhando adorável agora para obtê-lo sentado no centro, nós estamos indo para estilo. Eu tinha, uh oops, digamos de cabeça em frente e, em seguida, teve , uh, Avera, que nós temos dirigido Arrow. E então vamos salvar isso e vamos dizer Posição inferior absoluta. Digamos 40 pixels do fundo. Então isso vai fazê-lo sentado na parte inferior do recipiente em, em seguida, para fazê-lo sentado no centro. Na verdade, vamos Teoh, voltar para a nossa cabeça. Um contêiner ligado. Vamos definir o centro do alinhamento de texto. Este é um hack que você poderia usar em imagens dentro de contêineres que você vai e agora sentado no centro e, em seguida, você vai a parte superior de nossas páginas da Web já feito. Agora, eu adoraria ver seu trabalho em andamento na seção do projeto abaixo deste vídeo, então certifique-se de criar um projeto e enviar esses assentos capturas de tela do que você fez até agora. Adoraria vê-lo personalizá-lo. Feito com seu próprio logotipo. Seu próprio texto de introdução sua própria cabeça de imagem, o que você gosta é cabeça para baixo para os projetos. E, na verdade, você o mantém atualizado durante todo o tempo. Este curso é que todos podem ver no que você está trabalhando. E, claro que você tem alguma dúvida. Certifique-se de entrar em contato com a comunidade. 6. Aula 4: portfólio: Ah, cabeçalho de navegação está ótimo. Agora vamos passar para a seção de portfólio do nosso site. É aqui que vamos mostrar o trabalho que fizemos que poderia ser projetos de desenvolvimento Web . Pode ser a sua fotografia. Pode ser aulas de culinária. O que você quiser. Você poderia torná-lo seu próprio. Vamos dar uma olhada no nosso projeto de acabamento primeiro para que possamos ver o que vamos trabalhar. Esta é a seção em que estamos trabalhando agora. Nós vamos ter nossos quatro pequenos azulejos para cada um de nosso projeto com uma colheita oito com uma descrição sobre o que é o que o negócio é e o que fizemos para o projeto. Agora, se pensarmos sobre isso em termos da grade novamente, teremos nosso rapper externo nosso contêiner, para impedir que ele fique tão largo. Então nós também vamos ter um sub recipiente que vai dividi-lo em 50% de largura para cada uma das telhas. Mas como você pode ver, o bloco em si não tinha 50% de largura, então nós também vamos ter um outro pequeno Dave dentro desse contêiner para definir a largura fixa , então vamos passar pelo HTML agora. Então vamos para o nosso arquivo HTML. Ondas de costume. Nós temos um rapper e eu vou contêiner e então eu vou apenas criar um sub contêiner, contêiner itens frios, contêiner abreviado, certo, ativo e dentro deste contêiner. Eu só vou escrever outono por agora e vou criar quatro desses para que possamos ver como ele vai ser colocado para fora. Então vamos para um CSS e vamos definir Let's Go Portfolio. Vamos dar ao portfólio um pouco de preenchimento para que tenhamos um pouco de espaço a partir dos cabeçalhos. Digamos que 40 pixels parando o zero inferior no lado porque temos o nosso contêiner para fazer isso e, em seguida, outro nível para baixo contêiner item portfólio. Então vamos dizer, vamos dizer, preenchendo 40 pixels neste também. Mas então vamos definir a largura como sendo 49,7% e você verá por que eu fiz isso em um momento, porque quando você tem itens de bloco de exibição em linha sentados um ao lado do outro, eles realmente não sentam 50. Há um pouco de espaço no meio de agora. Basta definir uma borda para que possamos ver as bordas. Então vamos dar uma olhada em nossos arquivos de trabalho. Não funcionou porque eu soletrei “insensatez “eu errei. Bom em maio Port Folio Feche isso e dê outra olhada. Aqui vamos nós. Para que possam ver que esta é a nossa rede. Como vamos ter nossos itens configurados? Acho que vou mudar isto para uma margem para termos espaço no exterior em vez do interior. Lá vai você. Há um pouco de espaço. Então, mas como eu disse são item do portfólio doente não é realmente 50% sagacidade. Vai fixar largura e altura. Se descermos outro nível para portfólio Isom Container e, em seguida, vamos dizer leilão carteira irá criar o rígido. Agora você diz que dentro do nosso item recipiente Div Dave item portfólio classe em vai ficar. Eu vou texto dentro disso e, em seguida, vamos definir o nosso com 2 450 pixels e toda a altura para 450 pixels. E vamos definir um fundo também para que possamos ver onde vai acabar. Eu vou usar, uh em um p I de on splash dot com. On splash é um site onde você pode obter imagens realmente de alta qualidade que você pode usar em seu site gratuitamente. Vou deixar um link para o site na descrição. Vamos apenas dizer isso e dar uma olhada. Lindo. Ok, então vamos definir alguns estilos. Trouxe fundos que ele se senta sendo copo de tamanho e no centro. Então também queremos que este item do portfólio fique no centro do nosso contêiner. Então, digamos, digamos fundo tamanho da tampa do fundo centro de posição de fundo. Bem, eu não posso digitar hoje você vai, e nós também queremos nossos itens de portfólio de largura e altura fixos no centro. Então vamos dizer zero também você vai, que parece melhor. Então vamos agora começar a modelar nossa descrição. Todos os portfólio Adam descrição. Então, queremos primeiro para cima de alguma forma html para isso. Então vamos começar com diff com a classe. Mas eu descrevo totalmente. E, em seguida, dentro disso, nós vamos ter algum texto que é embrulhado em uma tag para que eu usaria pode clicar através dos projetos que você diz. E então eu vou usar tags de parágrafo para dizer qual é o nome do projeto e um pouco de uma descrição sobre o trabalho que fizemos no projeto. Então este projeto é chamado Harries Pizza para este projeto. Fizemos o Web design e desenvolvimento, então vou copiar os outros três só por tempo. Lá vamos nós. Temos a padaria do Joe, florista da Pam, na fotografia da Olivia. É só verificar se tudo isso está passando. Sim, legal. Isso parece bom. Então agora queremos colocar um fundo preto e estilizar este texto. Então, digamos Folio, um dia desses, eu vou soletrar direito, mas o item de falha contém, digamos , descrição do portfólio. Então você vai definir o plano de fundo com RGB a novamente ativado. Vamos configurá-lo para ser preto com 80% de capacidade. Queremos a cor fora do link. Temos que ir mais uma camada até o comprimento. Queremos que a cor seja o que Onda queríamos ter, digamos, preenchendo 20 pixels na parte superior e inferior e 10 pixels na esquerda e na direita. Na verdade, vamos fazer do outro jeito em torno de 10 pixels. Stilton inferior 20 pixels esquerda e direita, é atualizar ir. Então, só queremos nos livrar do subjacente rapidamente. O que se livra da decoração Sublinhado Ex? Nenhum. Ok, então agora queremos criar efeitos de pairar. Então, queremos que esta descrição seja até aqui, sentado abaixo do Al Container. Então vamos usar a posição Absolute para isso, assim como fizemos antes. Vamos precisar colocar a posição relativa no contêiner do item. Então vamos escrever isso aqui em cima. Posicione parentes para que todos, exceto totalmente item, a descrição do nosso portfólio de descrição não vai derramar e ir até o topo da página. Digamos que o fundo. Queríamos sentar-nos abaixo do fundo do contentor. Então vamos dizer menos 130 só para ver legal. Isso é um pouco longe demais, então vamos dizer 110 e vai definir a largura para 100% para que ele fique fresco. O chicote parece que a largura foi longe demais. E a razão é porque eu coloquei posição relativa aqui em cima no contêiner do item por acidente, o que deveria ter sido na verdade nos itens do portfólio. Portanto, 100% para a descrição do portfólio está sendo definido como 50% da página. Isso vai movê-lo para baixo de um nível. Vamos colocá-lo aqui em baixo. E isso deve resolver o nosso problema. - Sim. Bom. Ok, então agora vamos fazer a colheita. Oito. Então, o que queremos alcançar é quando passarmos o mouse sobre o item do portfólio, as descrições do portfólio devem avançar para uma entrevista. Então vamos dizer que vá até aqui e vamos direito. Descrição do portfólio, hein? Então, em pairar aplicar este estilo para colocar descrição mais completa. Então, para movê-lo para cima da página, vamos usar um fantoche. Ele chamou ah, transformação de tendência, que tem muitos valores diferentes, incluindo escala de rotação, perspectiva. Vamos usar traduzir, traduzir movimentos, mover seu elemento em torno de um eixo X e y. Então, neste caso, vamos subir e descer o eixo Y, e queríamos mover menos 110 pixels. Acho que deve ser bom. Então, qual set? Vamos refrescar o porto. Certo, talvez não esperanças. Fiz de novo para o corredor deles. Mais fresco, ele diz, então isso salta para cima na entrevista agora. Na verdade, não queremos ser visíveis quando não está sendo pairado. Então, no item do portfólio aqui em cima, vamos escrever Overflow Hidden, que significa que qualquer coisa que esteja derramando fora desse contêiner será escondido fresco. Lá vai você. Ele se foi e parece lindo. Agora é um pouco culpado ligar e desligar assim. Então vamos colocar uma transição sobre ele para que Ah, efeito pairar é um pouco mais suave. Ups vai dizer transição. Eu queria me inscrever para traduzir. Eu queria tomar não 0.4 segundos para completar, e nós vamos usar e aliviar o efeito que eu vou fazer. Isto vai acontecer quando vier à vista, mas também queríamos ocorrer quando sair de vocês. Então vamos colocá-lo na descrição normal do portfólio também. O que é fresco realmente quer que isso seja transformado porque esse é o nome Transformar. O desenvolvimento é besteira sobre cometer erros e resolver problemas. Ok, então isso está aplicando na saída. Não, a caminho. E isso é porque não nos transformamos. Aqui vamos nós. Isso parece muito melhor. Ok, então vamos tirar borda fora de nossos contêineres Nós não precisamos mais disso, e nós queremos configurá-lo para que possamos ter uma imagem diferente para cada bloco para cada um de nossos projetos. Então vamos encontrar a fronteira. Lá está ele. Vamos nos livrar disso. E aqui em itens de portfólio onde estamos definindo o fundo, vamos escrever algumas causas específicas, mas cada uma sobre negócios. Então, primeiro, vamos para HTML e vai realmente definir essas classes no item de portfólio. Def. Digamos pizza. Harry's Bakery for Boots Bakery for Jurors Bakery, uh , floristas, florista da Pam em E, claro, foto. Fotografia de Will Olivia. Eu só vou copiar essas aulas só por causa da velocidade. Agora você vai notar no nível do item foliar. Não há espaço entre as cláusulas específicas. E isso é porque não queremos isso. Não queremos descer outro nível. Queremos ficar nos itens do portfólio, mas só queremos selecionar o item do portfólio que tem esse Kloss específico. Então vamos dizer isso e vamos verificar. Funcionou bem. Funcionou três de quatro, então é provavelmente outro tipo de maio. Parece que a padaria está no nível errado. É por isso que temos um duplo “whammy “onde nos falta um espaço. Então isso estava mirando na coisa errada. Eles vão, só isso. Imagem de padaria. Agora, isso é tanto quanto frustrante. Este é o desenvolvimento da Web. A maioria dos seus problemas virão. A maioria dos seus problemas virá de erros tolos e erros bobos. Então, apenas certifique-se de que você vá adiante com um pente fino antes de desistir e dizer, oh, isso é tudo muito difícil porque, como vimos hoje, eu estou tendo um daqueles dias em que eu simplesmente não consigo soletrar nada ao custo é certo. E às vezes você terá dias como esse, assim como May. O que acontece com o melhor de nós? Ok, então isso está parecendo muito bom. Acho que já terminamos. Você pode estar pensando, o Mobile House vai funcionar em um celular ou tablet? Não se estresse muito. Nós vamos ter uma lição dedicada no final deste curso, onde nós vamos entrar em consultas de mídia e missão fora responsivo. Eu só não quero sobrecarregá-lo com muitas informações diferentes no início deste curso. Mas, quero dizer, estamos a meio caminho. Nós só temos que sair da seção Contato seção esquerda para ir. Então vamos continuar a seguir em frente. E, claro, certifique-se de fazer quaisquer perguntas abaixo. 7. Aula 5: sobre: nós também perto de terminar um projeto Super bom trabalho. Se você ainda está aqui trabalhando junto comigo, o último par de seções realmente deve ser um refogado com todas as suas novas habilidades de hash e-mail e CSS que você está recebendo ao longo deste curso. Mas, é claro, se você estiver preso, certifique-se de entrar em contato com a comunidade e atualizar seu projeto. Mostre-nos no que você tem trabalhado. Então, para a seção sobre, é aqui que vamos contar toda a história um pouco e mostrar quem todos nós. Então temos um layout de duas colunas acontecendo sem imagem à esquerda e algum texto à direita. E assim, você sabe, bater Shia Mel, nós vamos começar com ah, Rapa Kloss padrão com o reparador com o sobre Kloss, nosso contêiner para manter tudo contido. E então vamos criar dois dá para separar todas as colunas. Assim, o 1º 1 vai ser chamado de recipiente de imagem de perfil. É para lá que a nossa pequena imagem dos nossos rostos irá, Andi. Então, por baixo disso, vamos ter um feito para o recipiente de texto do perfil. Você fez isso em Ah, contêiner de imagem Nós vamos incluir uma tag de imagem assim como nós temos anteriormente com uma tag antiga dizendo que esta é ah, imagem de perfil. Sim, e depois a fonte. Porque estamos no arquivo de índice, como antes. Vamos passar imagens. Então, se cozinharmos em imagens, podemos ver que temos perfil. P e J substituíram isso com uma foto do seu próprio rosto. Uh, eu vou dizer que no nosso recipiente de texto nós vamos escrever indo para com o título da seção. Mas é claro, você pode colocar o que você está faltando aqui e então eu vou ter um pouco fora Laura MSM , que eu vou copiar, e agora isso vai apenas preencher o espaço para nós por enquanto. Então vamos dar uma olhada em um arquivo de trabalho. Atualize a página. A consideração como nossa seção sobre imagem não está muito carregando, e provavelmente vamos dar uma olhada no que está acontecendo aqui. Então, onde no arquivo de índice queremos ir para imagens e então eu tenho perfil, não PNG. Vamos dar uma olhada, mas nosso logotipo é o mesmo patrimônio. Esqueci de ir para a pasta de ativos. Veja, eu tenho feito isso por um longo tempo, e eu ainda faço esses seis. Certo, isso deve consertar. Vamos dar uma olhada. Fresco é o rosto. Ok, então a primeira coisa que vamos fazer é separar nosso conteúdo para fora nas duas colunas, então vamos para um arquivo CSS e vamos segmentar recipiente de imagem no recipiente de texto. Então, vamos. Acabei de criar uma seção para o nosso sobre estilos. Vamos lá, vou ficar e dar tapinhas lá dentro. Então vamos espaçamento de ah, seção perdida e também uma cor de fundo, que vai ser um valor hexadecimal novamente. Você vai. E, em seguida, vamos destino recipiente de imagem de perfil. Queremos a largura disto para a baía. Isso é um 30% queria baía exibição em bloco de linha. Vou colocar uma fronteira em torno dele para que possamos ver onde termina por um minuto. Assim como sempre. E lembre-se que muitas vezes nossa imagem vai ficar fora do lado do contêiner se nós realmente não , uh, uh, restringido. Então eu vou criar através da imagem do perfil, que nós vamos usar no nosso imposto de imagem, tudo isso aqui para imagens vis em que vamos economizar. Vou fazer o máximo com essa imagem como sendo uma 250 pixels. Mas se a tela é menor que George e 50 pixels vai querer que ele para preencher o espaço para, digamos, 100% Ok, vamos dar uma olhada. Agora curso. Também queremos segmentar a coluna de texto. Então, digamos recipiente de texto roxo. Queremos que isso ocupe o resto do espaço. Então vamos fazer isso 39% na verdade para que seja quase 60 40. Lembrando que a exibição na linha Bloco precisa de um pouco de espaço extra entre os dois contêineres, e nós vamos fazer ambos em elementos de bloco de linha em bloco de linha em que um. Coloque uma borda para que possamos ver. Ok, vamos dar uma olhada em como isso parece legal. Isso parece muito bom. Ok, agora, essas imagens meio que bloqueiam o texto por algum motivo. Correção rápida para isso é entrar em nosso contêiner de texto, e nós vamos apenas aplicar float right, que vai tirá-lo da ordem usual e ele vai empurrá-lo até o topo que você vai agora, em nosso projetos acabados, esta imagem é redonda e está sentado mais para a direita. Então, para conseguir isso, vamos para uma classe de imagem de perfil e vamos escrever Border Radius. Vamos dar um valor de 50% no recipiente da imagem. Vamos usar todos os textos sozinhos, certo? Ele também funciona em imagens. Eles vão agora, imagens sentadas à direita. Eu acho que a etiqueta de golfe de poder parece um pouco grande demais, embora eu esteja um pouco perto demais da imagem. Então eu vou colocar um chicote máximo no parágrafo, e eu também vou colocar um pouco de estofamento neste lado. Então, digamos, uh, cabeçalho, direção esquerda os 40 pixels no contêiner, em seguida, dentro do contêiner. Senhor. 12 arquivo. Ops, recipiente de texto Gro Arquivo. A tag P, eu vou dizer, e largura máxima de 500 pixels pincel que parece melhor. Certo, vamos nos livrar dessas fronteiras e depois pensar que será feito. Salve-o vai sair. Vamos apenas compará-lo rapidamente com o nosso projeto acabado olhando muito estrondo em 2 de maio. Então vamos passar para ah seção perdida, que é a seção de contato, e estamos tão perto de ser feito, vamos continuar. 8. Aula 6: contato: Estamos na seção perdida. Heck, sim. Agora esta seção, quero dizer, olhe para ela. Comparado com tudo o resto que construiu até agora, isto vai ser uma cinta. Então vamos direto ao assunto. Então vamos começar com isso. Ah, de costume. Vamos colocar um título nisso para que você possa fazer uma saudação, colocar o que quiser. Eu só vou manter contato lá um pouco de parágrafo para que possamos dizer Ok , Ho, Ho, venha e fale com May. Vou enfiar um pouco de Laura ipsum no Who, e por baixo disso, vamos ter um veado para conter todos os nossos ícones sociais. Agora, eu vou trapacear um pouco aqui, e eu vou fazer você ir para os arquivos do projeto acabado. Nós vamos para o nosso projeto finalizado e clicar no índice, e nós vamos rolar nosso caminho para baixo para ícones sociais. Eles estão cheios de SPG es que você usará para seus ícones sociais, e eles são apenas embrulhados em um link que tem seus identificadores sociais. Então você pode substituí-los por seus próprios links. Então vamos descer e copiar. Vou colocar alguns links com o seu projeto de onde você pode encontrar ícones sociais e apenas spg es gerais que você pode usar em seus projetos porque você tem que ter muito cuidado com direitos autorais. Você não quer acabar se metendo em problemas por usar ícones sociais que você não tem permissão para fazer. Então eu tenho o meu “se” para ícones sociais. Temos um link com um link para o perfil. Temos uma aula para ícone social no alvo com um espaço em branco na escola. Agora, isso só vai significar que quando você clicar em seu link, ele vai abrir em uma nova aba em vez do topo em que você está. Digamos que entrar em um arquivo de trabalho e atualizar como nosso contato parece muito bom. Nós só queremos manter este velho centrado. Queremos o dedo do pé, reduzir um pouco a largura, ter uma bagunça com esses ícones, ver se podemos nos livrar dessa linha preta aqui. Ok, então vamos para o nosso CSS criar uma nova seção de contatos. Vamos começar com a adição de algumas carícias como maneiras de separá-lo do acima vai dizer, 80 pixels zero Assim como antes. Não há antecedentes nem nada disso. Então vamos descer para Bem, vamos nos candidatar. Na verdade, você sabe que, mas suprimento de texto align aparecer leva cente lang. Nós realmente queremos ser capazes de reduzir a largura fora disso. Então, na verdade, vou adicionar aqui para embrulhar o nosso texto. Na verdade, vou adicionar outro. Na verdade, eu vou adicionar outra div com o recipiente de texto de contato classe eliminar Looks. Lá vai você. Fechem isso e copiem o fundo até aqui, rapazes. Qual é a da minha ortografia hoje? Consegue ver o erro? Verificado? O que? O que há de errado comigo? Ok, então usando o contêiner de texto de contato, nós vamos, hum, reduzir o vento máximo. Então vamos carro que aqui táticas recipiente vai dizer uma largura máxima de 700 pixels. Nós vamos dizer Ma jin, Então você sabe também disse que ele fica no centro, então vamos dar uma olhada rápida em como isso está olhando. Tudo bem, isso parece muito bom. Certo? Então vamos dar uma olhada no que está causando essas pequenas linhas. Vamos entrar em nossas ferramentas de desenvolvimento para clicar em cima de spg. Você vê o que é? O que temos andado a fazer sem etiquetas durante todo o caminho através da decoração de texto? Nenhum. Porque nós temos uma tag envolvendo rs PGS. Então, se aplicarmos isso a todas as oito etiquetas dentro do, uh, social que eu contiver nos dizer, hey, nós vamos dizer decoração de texto nenhum que deve desaparecer e nós ficamos lindos. Vamos colocar um pouco de espaçamento, no entanto, entre estes SPJ porque eu olho em um pouco confortável o momento. Então, para fazer isso, eu vou fazer ícones sociais. Mas eu só vou mirar o social, este ícone social singular, e eu vou colocar uma margem fora. São 10 pixels de cada lado. Desculpe. Vamos fazer zero na parte superior da parte inferior 10 pixels em. Você decide e vai atualizar. Aqui vamos nós. Vamos compará-lo. Teoh terminou o projeto. Acho que precisamos de um pouco de espaçamento no topo dos ícones sociais, mas é isso. Então, vamos. Ícones sociais. Vamos colocar um pouco de “whoops”. É colocar um pouco de, um, AJ em, digamos 20 pixels de margem no topo da parte inferior e salvar isso, eu acho que um pouco mais. Digamos que 40 20 é melhor. Sim, Cool. Pessoal, olha, nós fizemos um site. Quão bom é que isso se sente? Sim, 9. Aula 7 - parte 1: tornar nosso site responsivo: agora a última coisa que a última coisa que vamos lidar neste site é levar sobre consultas de mídia e como fazer seu site responsivo em olhar bom em. Todos os diferentes tipos de dispositivos também estavam indo para fazer apenas um pouco de limpeza de código para garantir que da próxima vez que você vir e trabalhar neste site ou outro desenvolvimento, trabalhos constantes neste site. Está parecendo bom. Está limpo. É fácil de entender. Então vamos primeiro dar uma olhada nas ferramentas do desenvolvedor do crime em “Estamos indo Teoh”. Use o movimento de arrastar, que você pode acessar definindo sua fala como sendo da esquerda ou da direita. Você verá que, se você rolar para a esquerda ou para a direita, você receberá um pouco de um pixel, uma pequena caixa dizendo a proporção de pixels do seu site. Agora, uma consulta de mídia é uma maneira que você pode dizer ao navegador quais estilos você deseja carregar em qual ponto de interrupção? Ah, ponto de ruptura é uma palavra literalmente, para descrever onde você foi projetado quebras. Então, se eu reduzir ah, ponto de quebra para baixo para o que seria em torno de um tamanho de tablet, você pode ver que eu vou colocar seção Folio. O design quebra porque nossas imagens têm uma largura fixa e alturas de 450 pixels, mas isso é maior do que a largura do nosso dispositivo. Então eles estão começando a se sobrepor. Então este é um lugar perfeito onde nós criaríamos um ponto de interrupção ou em media query para descrever para o navegador que nós não descrevemos para o navegador que nós não queremos que ele se sente assim. Nós realmente queremos aplicar alguns estilos diferentes. Agora. Tenho certeza que você está ciente que hoje em dia a maioria dos usuários está acessando Ah, a Internet via dispositivos móveis. Portanto, precisamos ter certeza de que nossos estilos estão sendo escritos em um celular primeiro caminho. Então, a maneira que vamos fazer isso é que já temos todos os nossos estilos que escrevemos , e nós realmente construímos isso em um tamanho de desktop. Então vamos supor que todos esses estilos funcionam em dispositivos móveis, e se eles não funcionarem, vamos fazer ajustes para que eles funcionem em Mobile primeiro e, em seguida, na parte inferior da seção, vamos criar e media query para e digamos mínimo com 768 pixels, que seria aproximadamente um iPad no modo retrato ligado. Então, qualquer coisa que não queiramos acontecer na minha bola, vamos colocar aqui embaixo. Então, digamos, por exemplo, que queremos que o plano de fundo o indique como está no celular. Então queríamos ser roxo, mas queremos que o fundo de navegação seja amarelo. Então vamos voltar para arquivos de trabalho e atualizar, e você vê que a navegação fica amarela porque fora é tem uma sagacidade Gracia do que todos os pontos de interrupção. Mas se formos para o que chamamos de site móvel ou um dispositivo menor, ele volta a ser roxo, então não queremos que a navegação seja amarela, então vamos nos livrar disso. Mas queremos fazer algumas mudanças. Então vamos descer para o que seria um padrão bonito, minha bola tipo de tamanho, digamos 375 pixels. Você pode ver que o logotipo nos itens de navegação não se encaixa todos na mesma linha. Então, se selecionarmos nosso logotipo em nossas ferramentas de desenvolvedor. Então, no logotipo de navegação, podemos ter um jogo por aí e ver o que podemos fazer com este logotipo. Talvez seja pequeno para fora. Vamos ver se isso ajuda a ver se começa a ligar para a próxima linha. Então eu acho que 1 50 parece muito bom em Maio será vai aumentar o preenchimento bem assim que ele fica no mesmo nível que os itens de navegação. Então vamos copiar esses estilos sobre, e vamos filmar ir até um logotipo de navegação. Nossa regra sobre isso é o que queremos para o desktop. Então nós vamos colar em estilos lowball em, e nós estamos realmente indo para cortar os estilos de desktop e colocá-los em uma notícia agora classe logotipo aqui em baixo. Então isso será aplicado em tudo maior que um dispositivo de 768 pixels de largura. Então vamos atualizar, e isso deve permanecer o mesmo. Mas quando vamos para cima, cima, para cima, cima, para cima, todo o caminho para 700 na 68, você viu? Ele fica maior e menor em torno desse ponto de ruptura Agora, eu vi antes de um pouco de um problema com esta era Eu acho que o design geral da cabeça de funciona bem na minha bola, mas esta flecha não realmente sentado perfeitamente no centro. Então vamos voltar para toda a flecha. O Kloss. Andi, lembre-se, eu defino o texto alinhar no centro da imagem para, ou ele está no cabeçalho do contêiner, mas isso afeta a imagem. Mas isso obviamente não está funcionando. Então vamos salvar e nos livrar do texto do centro da linha. E vamos usar a regra A 50% esquerda para enviá-la para o centro. Mas isso vai empurrá-lo um pouco longe demais. Então nós estamos realmente indo para o pé. Use também uma margem negativa à esquerda de 25 pixels para trazê-la de volta ao centro. Então vamos verificar isso. Isso parece muito melhor bem no centro. Ok. Agora são item do portfólio. Quero dizer, não parece tão ruim no momento, não é? Mas se realmente entrarmos em nossas ferramentas surdas aqui, você pode ver que o contêiner de itens ainda tem que saber quase 50%, mas nossa imagem está derramando fora dele. Então tampa são imagens derramando fora dela, que obviamente não queremos Mas nós também não queremos conter a imagem em Dê-lhe um vamos, digamos, digamos, uma largura de 100% porque então ele se torna muito pequeno em um em um celular dispositivo. Então o que nós realmente vamos fazer é vamos Teoh, fazer cada um dos contêineres de itens ter uma largura de 100% em um dispositivo móvel. Então vamos para a nossa seção de portfólio. Andi, temos 49,7% em navegadores antigos no momento, mas vamos cortar isso e colocar 100% de largura. Então, em todos nós pequenos dispositivos , será 100%. E, em seguida, na parte inferior, vamos criar uma consulta de mídia em tela cheia e homens com oh, combina com homens com off 768 pixels. Vamos tapar a nossa regra. Qual era o nome da nossa classe, de itens de portfólio, contêiner de ison. E vamos colocar o tamanho dos nossos navegadores de alojamento com eles, então vamos dar uma olhada em como isso está parecendo. Então o contêiner do item é grande o suficiente agora, mas se descermos para nossos três 3 75 pontos de quebra, ele realmente a imagem ainda é muito grande, então nós vamos realmente ter que reduzir o máximo de imagem com e quente também. Então essa altura e largura vão precisar descer. Então vamos dizer que vamos encontrar a classe que temos nossa altura e largura definida. Nós temos totalmente item Ausubel café isso e nós vamos voltar para baixo. E assim nossa largura e altura atuais é para 50, como se lembra. Então, 50 pixels colocam altura para 50 pixels. Mas em todos nós pequenos dispositivos, vamos fazer 250. Ok, você vai. Isso parece muito melhor. Certificar, aumentar meu ponto de pausa até onde ele se encaixa na versão maior. Então eu acho que nós realmente queremos que você veja como, neste ponto aqui, ainda está se sobrepondo. Então vamos realmente dividi-lo porque queremos encaixar em ser 100% com um pouco mais cedo. Mas nós realmente queremos que ele reduza em altura e largura um pouco mais tarde, porque neste momento, neste ponto de ruptura, isso parece muito pequeno. Então vamos dar uma olhada no nosso ponto de ruptura. Então eu acho que, para a altura e a largura, nós realmente queríamos quebrar em torno de 950 pixels muito mais alto. Mas, na verdade, vou tirar a largura e a altura desta consulta de mídia, e vou criar uma nova para baixo. Então, com uma largura baixa Então . Então eu vou dizer e os homens inteligente 550 pixels. E eu coloquei isso lá e vamos ver se isso ajuda. Então, a partir de 550 pixels, queremos que o tamanho mude. E então vamos continuar subindo, subindo , subindo. E então ele vai encaixar em 50% chicote em 950 pixels. Então, onde estamos agora? Estamos em torno de 650 então vamos fresco para que possamos ver que nossa imagem é uma boa sagacidade até 5 50 que eu acho que parece muito bom. Agora vamos verificar onde nossa grade se encaixa em duas colunas, então vamos continuar Amega. Ele se encaixa em ser duas colunas 10. Aula 7 - parte 2: tornando nosso site responsivo: Agora, a última coisa que eu quero fazer no portfólio é na verdade todo o caminho de volta para o Mobile. Você pode ver como ah pequeno efeito pairar é tipo de cutucando para fora do fundo? Então eu só vou mudar o no mesmo que todos oi e todos com. Eu vou apenas ajustar este fundo para que ele fique um pouco mais baixo. Então vamos fazer uma cópia da regra. Vamos fazer com que assente 115 pixels em vez de 110. E então dentro desta consulta de mídia, vamos colocar a morte parar de volta para o que ele está tão baixo menos 110 pixels. Então 115 não parece muito lento o suficiente. E que tal 100? Digamos 1 25 só por segurança. Isto vai ficar aqui em cima 125 Ok, então agora isso parece muito bom. Então vamos para a seção e você pode ver que isso é apenas uma bagunça. Isto não é bom. Então, queremos definir 100% de inteligência em ambas as colunas, e queremos ter tudo agradável e perfumado. Então vamos fazer isso. Agora vamos para a seção sobre e temos nosso UIT sendo definido no contêiner de imagem de perfil e também o contêiner de texto. Então vamos criar outras consultas de mídia na tela de mídia e homens com, digamos, 768 pixels. Vamos colocar a nossa turma lá dentro. Vou dizer 100% agora porque queremos que o recipiente de imagem e também o conteúdo de texto para ambos. Seja 100%. Você pode realmente mudá-los assim colocando um coma e, em seguida, colocando os outros panos na próxima linha. E se você salvar esse curso de grupos, isso não funcionou porque este é o estilo de desktop. Então vamos ter esta regra aqui em cima. Vamos escrever “diff”. Ok, então aqui em cima, nós não queremos que eles mudem, então nós vamos fazer 100% 100%. E então, em nossa consulta imediata, em vez de encadeá-los, vamos realmente separá-los novamente porque queremos que eles sejam diferentes. Então vamos dizer 39% sagacidade que este e 100% sagacidade para aquele. É fresco. Legal. Agora, lembre-se, isso está parecendo um pouco estranho porque nossa imagem é tem texto, alinhado à direita e isso é flutuado. É por isso que está saindo do nosso contêiner. Então vamos mudar isso. Então, queremos no meu intestino. Queremos enviar mensagem para o centro da linha. Imagem bruta na área de trabalho. Queríamos manter o texto alinhado diretamente e para o nosso contêiner de texto. Não queremos que seja flutuada na minha bola, mas queremos que ela flutue em Yesto. Então vamos dizer flutuar direito e nós também temos esta largura máxima aqui. Eu não quero que isso ocorra na minha bola, então nós vamos realmente apenas cortá-la completamente fora da minha bola e vamos colocá-la em uma seção de desktop . Então vamos dar uma olhada que parece melhor. Vamos mandar todas as mensagens. Então vamos dizer que queríamos ficar linha de texto à direita na área de trabalho como ele está agora fora tipo de esquerda como é agora. E, claro, o ter deixado precisa ficar assim, digamos 40 pixels como ele é. Mas vamos reduzir isso nas cervejarias, dizer que mandei a linha da minha bílis. Vamos dar uma olhada que pareça melhor, então o que acontece quando subirmos. Para cima, para cima. Bem, e nós surtamos. Isso parece muito bom. , Mas lembre-se, chegamos a um ponto em que estabelecemos uma largura máxima em nosso parágrafo. Ah, mas agora isso está quebrado, e não está mais flutuando, então não fizemos nada, certo? Então eu sou um completo. Escrevi 100% aqui quando deveria ser 60. Tenho certeza que vocês viram isso, e eu não fiz um bom trabalho gritando com seus computadores. Está bem, fixe. Isso parece muito, muito melhor. Então vamos verificar se ele se encaixa e parece bom, ok? E eu entrarei em contato. Quero dizer, eu vou entrar em contato é um layout bem simples. Então, em nosso site agora é responsivo. Agora, é claro, há muitas outras maneiras de usar consultas de mídia. Você pode fazer coisas como definir um máximo de inteligência. Você pode criar estilo especificamente para quando um usuário quiser imprimir seu site. Então eu vou, é claro, deixar um link para você para a documentação mdn para consultas de mídia em há muito lá. Você pode ter uma leitura em seu próprio tempo. E como você está construindo seus próprios projetos, é claro, se você pensar em um caso de uso. Leia esses documentos e veja se você consegue descobrir o que é que você precisa . É o último toque final que eu quero fazer para o nosso site é ligar todas as seções . Então nós temos nossa pequena navegação aqui, mas no momento, se você clicar neles, eles não vão a lugar nenhum. Então vamos usar o I DS para ligá-los ao resto da página. Então eu vou para o nosso arquivo de índice e nós temos aqui Ah, listar itens para o portfólio sobre em contato. Então eu vou fazer o caminho onde este é onde você normalmente colocar um link. Mas se você quiser um link interno, você pode usar uma libra e, em seguida, o que será o i D. Então para a nossa seção de portfólio. Se eu rolar para baixo dois portfólio e eu colocar no portfólio rapper I D equivale a carteira. Então, quando eu salvei que Andi atualizar minha página. Se eu clicar no portfólio, se eu clicar no portfólio, ele vai saltar para a nossa seção de portfólio, então eu vou fazer isso para o resto deles. Agora, ao longo deste curso, temos usado classes em nosso CSS para selecionar quais elementos queremos absorver meu trabalho. Isso não precisa ir lá agora. Ao longo deste curso, temos usado cláusulas que apenas dois fazem toda a seleção fora de quais elementos queremos ser styling . Você pode realmente usar I DS também. Há um monte de maneiras diferentes de selecionar, uh, pedaços de OGM cobertos, então eu vou colocar todos os nossos corpos dentro por um momento, e eu vou mostrar um pouco apenas rapidamente sobre como idéias podem funcionar para você em CSS também . Então, digamos contato. Voltaremos a uma navegação e adicionaremos o nosso IDS aqui. Contacto. Legal. Nós já fizemos portfólio, então vamos verificar se ainda funciona. A Andi. Contacto. Perfeito. Ele só rola até a parte inferior da página. Agora vamos dar uma olhada rápida no I DS. Agora você se lembra dentro do CSS. Sabemos que é uma folha de estilo em cascata, então basicamente a ordem dos estilos é muito importante, então tudo o que está mais baixo na folha de estilo vai receber uma quantidade maior de importância. Agora vamos dar uma olhada em nossa seção sobre para que eu possa demonstrar a vocês como as classes e I DS diferem em termos de importância. Então nós temos a nossa aula sobre aqui e com a definição do nosso fundo para esse tipo de cor bege . Agora, se eu fosse o alvo de novo e eu fosse dar a ele o fundo azul, obviamente, porque ele é mais baixo, ele vai mudar o fundo para ser azul. Se estivéssemos frescos, você pode ver que é azul. No entanto, se eu fosse fazer isso aqui em I d. Mesmo que azul é mais baixo para baixo na folha de estilo CSS e I D é dado um nível maior de importância do que um pano, então você vai ver se eu salvá-lo e atualizar, ele volta a ser página Agora. Eu recomendaria que você use as aulas o máximo possível ao longo de suas folhas de estilo, porque se você parar de jogar I DS no realmente só vai confundir você. Quando você tem problemas com seu código, você não vai ser capaz de dizer o que tem maior ou menor valor. E se você quiser aprender mais sobre seletores novamente, basta verificar a documentação mdn e você vai encontrar muita coisa lá. Então, se tivermos uma olhada nesta página aqui, podemos ver que temos o seletor de tipo, que é o que temos usado para nossos elementos. Então, como nossas imagens, você tem aulas que temos usado I ds ah, seletor universal, que é o Asterix, que usamos para nossos estilos gerais. E então você pode até chegar aos atributos. Eleitores, Combinador, seus irmãos, todo o tipo de coisas. Isto é um Isto é uma classe inteira em si mesmo. Então não vamos falar disso hoje. Mas absolutamente. Se você quiser aprender mais, este é um ótimo recurso. 11. Nós fizemos isso!: Eu fui feito. Muito obrigado por levar as escolas comigo. Pessoal, ouvi dizer que as pessoas se divertiram e vocês aprenderam um monte de novas habilidades. Certifique-se de atualizar seus projetos abaixo para que eu possa ver o que você tem trabalhado e como você os torna seus próprios projetos. Vou fazer muitas mais aulas sobre Scotia, então, por favor, certifique-se de me seguir para que você receba uma notificação quando eu lançar minhas novas aulas. Claro, se você gosta de se conectar comigo nas mídias sociais, eu vou atrasar os velhos comprimentos. O Fuller. Muito obrigado por se juntar. Talvez tenha um dia brilhante, não.