Como criar um Site Responsivo com HTML e CSS pt. 1 - Header (menu) - pt.1

Olá programer seja bem-vindo a mais um vídeo do intelia meu nome é Bruno Rodrigues e nesse vídeo aqui a gente vai começar a meter mão em nosso projeto do Website responsivo né nessa primeira parte a gente vai começar montando essa estrutura aqui do menu né ou seja o HTML do menu a gente vai colocar logo vamos personalizar as fontes né fazer todo aquele processo inicial para que a gente possa começar a desenvolver o nosso projeto então eu vou pedir que você preste muita atenção a partir de agora porque se você errar qualquer detalhe pode ser

que não vá funcionar para você né porque às vezes eu recebo muitos comentários Ah eu fiz exatamente igual ao vídeo mas não funcionou aqui para mim então fica aquela regrinha na sua cabeça tá se você fez igual ao meu e o meu funcionou e o seu não é porque você fez alguma coisa incorreta às vezes é uma vírgula um ponto fora do lugar que aí pode fazer com que o seu projeto não funcione então preste muita atenção a partir de agora tá então vamos lá primeira coisa que eu preciso fazer é criar a pasta aonde

vai ficar guardada o meu projeto né Ou seja a estrutura de pastas vamos fazer isso daqui agora então aqui na minha área de trabalho né no caso a pasta área de trabalho e aqui mesmo eu vou criar a pasta onde vai ficar guardado o meu projeto no caso vou clicar com o botão direito aqui na área vazia como eu estou no Windows 11 basta posicionar aqui no botão novo e depois vou clicar aqui em pasta porque ele vai criar uma pasta para mim depois disso O que eu preciso fazer é dar um nome para o

meu projeto tá no caso eu vou colocar apenas website responsivo um detalhe importante é que você não deve estar utilizando espaços pontuações nos nomes dos arquivos que você vai dar para o seu projeto tá então sempre opte por utilizar letras minúsculas sem pontuações e sem espaçamento no lugar de espaço coloque um tracinho como eu fiz aqui beleza aí agora que eu fiz isso eu vou entrar aqui na pasta né vou dar duplo clique que aí ela vai entrar aqui na pasta para mim e aqui dentro dessa pasta eu vou criar as subpastas onde vão ficar

guardados os arquivos secundários do meu projeto no caso vou criar aqui uma pasta para guardar os arquivos de CSS então crio uma nova pasta e dou o nome de CSS depois vou criar uma outra pasta com o nome de JS que seria para guardar os arquivos de JavaScript e por fim vou criar mais uma pasta e o nome dessa pasta vai ser images que é onde vão ficar guardadas as imagens que eu vou utilizar aqui no projeto fechou bom com isso aqui feito eu já tenho uma estrutura de pastas montadas Eu só preciso agora utilizar

um editor de código para começar a codar o meu projeto você pode utilizar qualquer editor de código pode ser o vs code que é o que eu vou estar utilizando aqui agora que inclusive se você quiser aprender a instalar o vs code aí na sua máquina e deixar igualzinho ao meu eu vou estar deixando um link agora no ecard para que você possa acessar um vídeo que eu gravei H uns tempos atrás aonde eu ensino a configurar o vs code tá então depois aqui você pode estar acessando esse vídeo aí enfim você pode utilizar o

vs code pode utilizar o Notepad mais mais pode utilizar o Sublime é você que vai decidir o seu editor de código inclusive pode até utilizar o bloco de notas eu não recomendo você utilizar o bloco de notas porque senão vai ser um desafio a mais para você mas eu aconselho que você utilize o vest code para que você fique igual a minha aqui em todos os estágios Fechou então vamos lá aqui na minha pasta né dentro da pasta Website responsivo vou clicar com o botão direito na área vazia e como eu tô no Windows 11

vou apertar nesse botão aqui mostrar mais opções que aí ele vai me dar a opção abrir com o Code tá se você tiver no Windows 10 para trás aí já vai aparecer esse menu aqui diretamente para você basta clicar em abrir com code quando eu faço isso meu vs code já está pronto para ser utilizado se para você não aparecer essa opção abrir com o Code dá uma checada naquele vídeo que eu te recomendei agora a pouco que tá aqui no ecard tá que você vai aprender a fazer essa configuração pronto dentro aqui do vers

Code O que eu preciso fazer é o seguinte aqui do lado esquerdo da minha tela Eu tenho esse explorador aqui que é Onde eu consigo ver todos os arquivos que estou utilizando no meu projeto se não tiver aparecendo para você vai B clicar nessa primeira opção aqui ó explorador que aí ele vai abrir aqui normalmente para você né E aqui em cima eu tenho quatro opções mas a que me interessa é essa primeira aqui que tem tipo uma folhinha com a ponta dobrada que é para criar um novo arquivo eu vou clicar uma vez em

cima desse ícone E aí ele vai pedir para dar um nome para esse arquivo que eu quero criar no caso o nome do meu arquivo vai ser index HTML o ideal é que você coloque esse mesmo nome tá bom principalmente se você for colocar esse site no ar tem que ter o index P HTML é obrigatório aí pronto já Ten o meu arquivo de html criado o que eu preciso fazer agora é criar a estrutura base do HTML e para fazer isso basta colocar um sinal de exclamação e apertar enter essa é uma feature que

tem aqui dentro do visual Studio code né Não sei se nos outros editores de código se você fizer isso vai aparecer a estrutura padrão da HTML para você se não aparecer aí você vai ter que pausar o vídeo e digitar aqui ó linha por linha para que possa funcionar para você aí tá mas enfim a agora que eu já tenho isso eu vou só mudar algumas opções aqui Como por exemplo o idioma do meu site né venho aqui em lank e mudo para PTBR porque eu quero que o meu site seja em português brasileiro e

o título dele você pode colocar o título que você quiser aqui para exemplificar vou colocar o Website responsivo mas aqui no título você coloca o título do seu projeto tá que geralmente é o que vai ficar escrito aqui ó na aba do navegador tá vendo Website responsivo Aí você coloca o título que você quiser Maravilha agora que eu já tenho essa configuração básica eu já posso começar a estruturar o nosso menu Então a gente vai analisar o layout do menu para que a gente possa fazer igual aqui dentro do HTML a ideia aqui do meu

menu é o seguinte eu tenho aqui um header né um header seria e a tag do cabeçalho que tem dentro do HTML dentro desse header eu tenho três seções a seção Onde fica a logo a sessão onde vai ficar os links do menu e a sessão onde vai ficar o botão de contato nesse caso eu preciso criar um header e esse header eu tenho que dividir em três seções ponto mas tem outro detalhe você percebe que ele tá transparente tá vendo ele não tem um fundo e a imagem daqui da introdução do meu site tá

passando por trás do menu a gente vai fazer essa configuração também mas também tem outro detalhe você percebe que os itens do cabeçalho Eles não estão colados aqui nas laterais da minha tela tá vendo ele tem esse afastamento aqui ou seja ele está Centralizado na minha tela a gente também vai fazer essa configuração agora tá mas por hora é isso que a gente precisa saber temos um cabeçalho e o cabeçalho é dividido em três seções logo menu e botão de contato agora a gente vai fazer isso lá no HTML Se liga só como é que

a gente faz isso Calma aí eu sei o que você fica pensando Nossa como eu queria ter a habilidade que ele tem e criar sites legais igual esse carinha do tutorial Pois é seus problemas acabaram porque o carinho do tutorial quer te ajudar se você tem interesse em desenvolver uma nova profissão e quem sabe até abrir um canal de tutorial de desenvolvimento web que nem eu você pode conhecer o treinamento modo frontend nele Vamos aprender HTML CSS e JavaScript com a didática que vocês já estão acostumados aqui no canal e que vocês tanto elogiam inclusive

Muito obrigado agora se você tem interesse em começar ainda hoje a desenvolver essa nova profissão de desenvolvedor web ou desenvolvedor web você pode clicar no primeiro link aqui da descrição e conhecer o último curso de frontend que você vai precisar fazer na vida e aí você vai conseguir desenvolver uma habilidade incrível de criar sites e faturar Quem sabe mais de R 5.000 por mês ou então algo melhor como abrir um canal de tutorial no YouTube Então é isso muito obrigado pela sua atenção e pode continuar com o seu vídeo para começar eu vou vir aqui

dentro da tag bar e aqui dentro eu vou chamar a tag header header é a tag semântica de cabeçalho que é onde eu vou colocar né o menu logotipo botão de contato e assim vai você só não pode confundir com o head que fica aqui em cima o head é onde vão ficar os metadados do meu site onde eu coloco o título e mais alguns links que eu vou estar fazendo daqui a pouco o header é o cabeçalho do projeto é onde vai ficar o menu Fechou então não confunda isso quando eu tiver falando durante

essas aulas aqui dentro aqui da tag header eu vou chamar uma outra tag que vai ficar responsável por centralizar o conteúdo do meu site Essa vai ser uma tag Universal Ou seja eu vou estar utilizando ela várias vezes ao longo do meu projeto tá para fazer isso eu vou chamar apenas uma div simples Depois disso vou colocar um ponto e dar uma classe para essa div que seria interface você pode dar classe que você quiser desde que faça sentido tá no caso div P interface e aperta Enter automaticamente ela já vai gerar uma div com

a classe interface ela ainda não vai centralizar porque eu tenho que fazer a configuração no CSS Mas você vai fazer isso daí agora no seu projeto tá pronto aí agora dentro dessa classe interface eu vou quebrar a linha e toda a estrutura do meu menu vai ficar dentro dessa classe interface qualquer coisa que esteja fora dessa classe aqui vai ficar encostado nas laterais e eu não quero que isso aconteça então preste muita atenção a partir de agora todo conteúdo que eu for desenvolver tem que est dentro aqui da div com a classe interface perfeito primeira

coisa que eu vou fazer é criar a sessão do logotipo Então dentro aqui da classe interface vou chamar uma section no caso a tag section ponto e vou dar uma classe para essa sessão que vai ser logo depois vaiou apertar enter porque ele vai gerar uma section com a classe logo para mim dentro aqui dessa section eu vou chamar tag IMG que serve pra gente adicionar uma imagem dentro aqui do nosso projeto tá nesse caso tenho que separar a imagem do logotipo que eu vou estar utilizando no meu projeto e a imagem que eu vou

utilizar vai ser esse aviãozinho aqui que na verdade é um ícone né que eu baixei aí na biblioteca de ícones e vou utilizar aqui como exemplo no caso você vai utilizar a logotipo da sua preferência tá se você quiser utilizar as mesmas imagens que eu estou utilizando nesse projeto eu vou estar deixando um link aqui na descrição do vídeo onde você pode estar acessando os arquivos né para baixar aí também no seu computador e usar como eu estou utilizando aqui no caso as dimensões dessa logotipo aqui é de 88 de largura por 88 de altura

então aí você pode fazer o mesmo exemplo que eu estou criando aqui tá beleza aí já tem uma imagem separada dentro da p ca de imagens vou voltar no HTML e aqui dentro ó do src né quando você cria a tag IMG ela gera esses dois atributos aqui src e Alt dentro aqui do src ele tem esse abre e fecha aspas aqui eu vou posicionar meu cursor dentro aqui do abre e fecha aspas vou apertar control a tecla control no caso e depois barra de espaço quando eu faço isso ele vai mostrar todos os arquivos

que eu tenho dentro da pasta do meu projeto nesse caso eu quero acessar a pasta de imagens então vou clicar aqui em cima de images e dentro da pasta images tem o meu logotipo basta eu clicar aqui uma vez e pronto meu logotipo já está configurado temos também um texto alternativo né que você pode colocar algum texto caso essa imagem se quebre Vou colocar aqui ó logotipo do site ou seja se essa imagem aqui porventura on dia se quebrar sumir do nada vai aparecer esse texto aqui no lugar tá pronto já tenho aqui a parte

do logotipo criado agora eu posso partir para criar a estrutura do meu menu como fazer isso bom Como eu disse é dividido em três seções a próxima sessão que eu vou criar aqui ó vou sair dessa section logo e embaixo dela vou criar uma section e vou atribuir uma classe para ela né venho aqui na tag de abertura da section chamo o atributo Class e aqui dentro eu vou colocar a classe que eu quero no caso vou colocar apenas menu desktop um detalhe importante que eu tô colocando essa classe menu desktop porque a gente futuramente

vai criar o menu mobile Então tem que ter essa distinção agora dentro aqui da minha section eu vou fazer o seguinte eu vou chamar tag semântica neve que serve pra gente criar um menu de navegação né navigation por isso que temos que ter aqui a tag semântica neve o meu menu ele é uma lista né ele não deixa de ser uma lista de links por isso a gente tem que chamar aqui também a tag semântica de links que no caso seria uma ul ou ol né vou estar utilizando uma ul porque é uma lista não

ordenada ela não tem uma ordem e dentro aqui da tag ul eu vou chamar a tag li essa tag li serve para a gente listar os itens da lista né se é uma lista tem que ter itens então é com a tag li que a gente determina os itens dessa lista e o conteúdo dessa li serão links Então dentro aqui da li vou chamar tag a a tag a serve pra gente criar um link aqui dentro do nosso projeto apenas digitando a letra a e apertando enter você já gera a estrutura da tag a para

você tá temos aqui o href esse href serve para você insir dentro dessas aspas aqui o link de destino desse menu tá o link de destino desse link Então você vai pegar o link que você quer seja de outra página ou de outro site e vai colocar aqui dentro do HF Depois disso basta eu colocar apenas o conteúdo do link né ou seja o texto que vai aparecer para que o usuário possa clicar no caso o texto vai ser esses daqui ó início destino hotéis e passagem Então a gente vai fazer isso daqui agora vou

começar digitando aqui no conteúdo da tag a início aí eu vou copiar né vou selecionar essa estrutura aqui da li vou apertar a tecla Alt junto com a tecla shift aí no teclado e depois eu vou apertar a setinha para baixo que aí ele cria uma duplicata tá vendo ó que ele copiou a mesma estrutura aí eu vou fazer só isso daqui ó vou mudar o texto de início para destinos né exatamente então aqui ó Destinos e eu vou repetindo esse mesmo procedimento para a quantidade de links que eu quero dentro do meu site no

caso são quatro ó Alt shift seta para baixo seta para baixo que aí eu já criei aqui uma duplicata de cada uma dessas estruturas e a única coisa que eu preciso fazer é mudar o texto aqui no lugar de destinos é hotéis e por fim passagens com isso aqui nós já temos a estrutura do HTML do menu pronta agora a gente só precisa criar a terceira sessão do meu header que seria no caso esse botão de contato que é bem simples de a gente criar Olha só como é que a gente vai fazer isso vou

sair aqui da section menu desktop e em seguida vou chamar uma outra section aqui embaixo tá vou apertar aqui ponto e vou dar uma classe para ele que seria btn contato e vou apertar enter então ele vai criar uma section com a classe btn contato o conteúdo dessa section vai ser o seguinte vou chamar tag a que é a tag de link como você já sabe só que eu vou deixar esse HF vazio mas para indicar que ele tá vazio vou colocar apenas um jogo da velha aqui no HF né que inclusive recomendo que você

faça isso para todos os links vazio que tem dentro do seu site tá no caso aqui como eu não quero nenhum destino Por enquanto vou deixar apenas aqui ó tudo com o jogo da velha para indicar aqui o link vazio então voltando aqui para btn contato tenho aqui o meu link bonitinho e o conteúdo do meu link vou quebrar a linha e aqui dentro vou chamar um Butão né a tag semântica para adicionar um botão dentro do site no caso é a tag buton e o conteúdo desse buton aqui vai ser esse mesmo texto Ó

cadê contato apenas isso então vou votar aqui dentro do buton e vou digitar cont com isso aqui feito nós já temos a estrutura do menu desktop montado vamos ver como é que tá ficando lá no nosso site vou clicar com o botão direito em qualquer área vazia aqui do meu código e vou vir aqui em Open wif Live server Lembrando que se não tiver essa opção para você é porque você não tem a extensão instalada então eu recomendo muito que você acesse aquele vídeo que eu te recomendei no início desse vídeo né para aprender a

configurar o vs code e deixar igualzinho aqui ao meu vamos clicar aqui ó Open wf Live server e olha só como tá o nosso site tá horroroso Tá longe do que a gente quer mas vamos com calma porque a gente ainda vai personalizar a fonte e vai montar a estrutura do CSS aqui para deixar o nosso site o mais próximo possível Desse nosso projeto original tá mas por hora esse vídeo aqui já tá ficando bem longo né então a gente vai parar esse vídeo por aqui só que no próximo vídeo a gente vai personalizar a

fonte aqui do nosso projeto e vai arrumar o CSS desse código aqui para que ele possa ficar o mais bonitinho possível né e fique mais apresentável Então se se você tiver gostando desse projeto que a gente tá criando até aqui eu vou pedir que você faça duas coisas primeiro deixar o like nesse vídeo para mostrar que você realmente curtiu esse projeto e segundo se inscrever aqui no canal se você ainda não está inscrito a minha ideia é trazer mais projetos como esse daqui para que você possa praticar aí na sua casa tá E outra coisa

importante é que se você quiser ter acesso a todos os vídeos desse projeto aqui já disponível ainda hoje você pode estar acessando o clube de membros aqui do canal né em qualquer plano você já vai ter acesso a todos os vídeos desse projeto aqui mas se você não quiser é só esperar todo sábado que cada parte desse vídeo vai ser lançada beleza não mas é isso espero que você tenha gostado tenha entendido tudo e eu te vejo no próximo vídeo falou progamer tchau