💡Ei, calma aí! Me diz uma coisa: você está criando este portfólio, mas já sabe o que vai colocar nele? Bom, se quiser aprender a criar sites para deixar o seu portfólio mais rico, ative o Modo Front-end 👉🏾bit.ly/3KY8mpn e crie sites como profissional 😁
Pow mano! Muito obrigado pelo seu comentário, sério msm kkkkkkkkk eu fico muito feliz em saber que estou ajudando vcs, meu objetivo é esse. Vamos pra cima 👊🏾👊🏾
Esse projeto vai me ajudar muito a estruturar um site para o meu primeiro cliente! Não vou fazer igual mas vou utilizar alguns conceitos, muito obrigado!
Tenho uma sugestão, observei que toda hora você precisa ir no HTML para copiar as classes que criou, existe uma extensão no vscode chamada "CSS Class Intellisense" que lista todas as classes que você criou automaticamente quando você começa a digitar. E tem mais uma que pode ser útil principalmente para esses tutoriais, ela se chama "Highlight Line" que basicamente cria uma linha verde em baixo do código selecionado.É uma boa maneira de ajudar quem está assistindo a não se perder no tutorial.
Cara parabéns olhei vários video aqui e único com paciência explicando não digo todos os detalhes mas deu pra intender muito bem mas muito bem mesmo eu que sou iniciante ficou muito bem claro parabéns meu amigo
Fala Daniel, tudo bem? Posso sim fazer um vídeo sobre isso sim, cara. Mas se vc quiser já ir adiantando, não é muito complexo n kkkkk Vc pode começar criando a pasta principal do seu projeto e dentro dessa pasta você começa a separar as subpastas, por exemplo: pasta de imagens, pasta onde vão ficar os arquivos de CSS, pasta de arquivos de JS e assim vai. Caso vc vá criar um site muito grande, com muitas páginas, então vc pode colocar cada página dentro de suas respectivas pastas, com seus respectivos arquivos de CSS, de JS e assim vai 🙂😉
minha maior dificuldade atualmente é sobre o posicionamento de elementos no site, usando o display flex, justify e etc, n entendo mt sobre isso. E as vezes fico me perguntando o porq de tanta class uma dentro da outra kkkkkkk
2 coisas que pode te ajudar que me ajudaram: 1° estude um pouco se inglês, vai te ajudar a traduzir literalmente cada coisa. 2° tente ver um vídeo sobre lógica de programação na parte de CSS. Pois vai te orientar a função de cada elemento e meio que a "Hierárquia". Espero ter ajudado.
Me sinto um inutil copiando seu codigo, mas cosegui aprender muita coisa com esse video tanto é que eu replico sem colar oq eu aprendi com vc nos meus projetos pessoais.
kkkkkk Não se sinta inútil, a ideia dos vídeos é vocês copiarem o código, ajudar quem ainda não tem tanta habilidade com os códigos kkkkkkkk eu fico muito feliz de conseguir te ajudar
Boa tarde professor, refiz meu codigo algumas vezes e apesar das multiplas tentativas, minha imagem não teve o efeito de animação, achei que poderia ser a compatibilidade do navegador mas pela extensão do live server dentro do vscode também não tive exito. O senhor poderia liberar os codigos de html e css para que eu pudesse tirar a prova real? Desde já lhe agradeço, aprendi bastante com suas aulas. Obrigado.
Oiii, tudo bem? Muito obrigada pelos vídeos, estou amando. Tenho uma dúvida, se eu tiver mais de uma span em uma h1, como eu faço pra diferenciar elas no css? Pra estilizar cada uma individualmente?
Vc pode estar com problema na classe "flex" que eu criei ao longo do vídeo, ela é a responsável por centralizar os elementos na tela. T Também pode ser a classe 'interface' mal configurada, tipo o max-width por exemplo. Recomendo que você reveja o vídeo e compare certinho se vc fez tudo igual.
Cara, tô com problema com o cabeçalho. até agora ele tava funcionando, mas do nada ele desalinhou, ficou assim: a imagem, abaixo dela tem os links e abaixo tem o botão
Ola Bruno. Eu fiz o projeto contigo, e depois fiz a minha versão, alternado algumas informações e ficou muito legal mesmo. Mas na hora do responsivo da um certo bug, isso porque eu não consigo fechar o menu mobile. Inclusive isso acontece também no projeto que eu fiz igualzinho ao seu. Gostaria só de pedir que verificasse o seu projeto e vê se no seu também tem esse bug, que eu acredito que tenha. O Bug está no Menu Mobile, quando você abre o site ou o Portfólio, no caso, seria lógico que ao Maximizar o Botão Mobile desaparece e ao Minimizar ele aparecesse. Mas ele não desaparece na hora em que eu Maximizo o Portfolio. Apenas desaparece quando eu Minimizo o Mesmo e lhe torno responsivo. Agradeceria imenso, se me desse essa ajuda. E gostaria de parabeniza-lo pelos vídeos pois estão a me ajudar bastante no meu aprendizado. Muito Obrigado por tudo. Daqui fala Gomes, a partir de Angola.
Opa, quando ele coloca o "header" ele está incluindo apenas os elementos que estão dentro da tag header, a partir do momento que ele tira essa palavra no documento CSS ele está incluindo todos os botões que existem na página com a classe ".btn-contato", como os dois botões tinham essa mesma classe, o estilo que já estava antes em apenas um botão foi para os dois botões automaticamente. Espero que tenha ficado claro, qualquer dúvida é só falar!
como faco pra diminuir minha foto de imagem pois esta ocupando a tela toda e fazer o mesmos efeito da sua foto que colocou no site parabens desde ja agradeco
Fala João, tudo bem? Cara eu chamo a section e dps a classe para que aquele estilo fique específico para a section q possua aquela classe. Se por acaso eu chamar só a classe isso vai aplicar um estilo geral, ou seja, se eu tiver outro elemento, como uma div, com a msm classe da section, aí o estilo que será aplicado serão os mesmos entende? Quando eu chamo o nome da tag e em seguida a classe, isso significa que eu vou aplicar um estilo apenas para aquela tag que possua aquela classe 😁
meu display flex não deixa a imagem ficar do lado direito por alguma razão sempre fica embaixo do texto, já revisei o código e parece semelhante ao do vídeo, alguma dica?
oi boa noite tem como me ajuda estou comecando do zero quero colocar minha foto de perfil mais ou cupou a tela toda como faco pra diminui e da o mesmo efeito da foto que voce colocou
Ou tiago, tudo bem? Então amigo você pode utilizar a propriedade Width na imagem e personalizar de acordo com seu gosto. Você pode atribuir uma classe para ela, por exemplo: .minha-foto. Aí você chama no CSS: .minha-foto{ width: 200px; }
Bruna, olha se vc digitou o nome da classe corretamente. Além disso você utilizou o sinal ">". Esse sinal garante que o estilo só será aplicado na classe ou tag que esteja diretamente dentro da tag header. Nesse caso se a sua classe interface estiver dentro de outra tag/classe, o estilo não irá funcionar.
Fala mano, cara eu usei o Photoshop para criar essa imagem, nesse caso recomendo você procurar um tutorial de photoshop para criar a imagem como deseja kkkkkkk
Nesse vídeo em específico utilizei o pacote de temas na RainGlow. Aqui no canal tem um vídeo onde ensino a configurar o vs code, acho que vale a pena passar lá 😁
No minuto 8:43 onde coloca section .topo-site e section .topo-site.flex o meu só aceita os valores se eu mudar a classe do topo-site para interface, tem algum problema?
Descobri era o espaço para chamar a classe section.topo-site (tava chamando section .topo-site) porque tem essa diferença de chamar com o elemento pai com espaço e sem espaço?
Então mano, se vc chamar a section.topo-site sem espaço, o css vai procurar uma section QUE TEM a classe 'topo-site' atribuída a ela. Agora com espaço (section .topo-site) o css vai procurar uma classe que esteja DENTRO da section
meu amigo, tudo joia com vc ? Cara, é o seguinte; eu fiquei com uma dúvida: qual é a diferença entre soltar um espaço entre a tag e uma classe aplicada no css ? por exemplo : section.topo-do-site .flex ( sem espaço ) section .topo-do-site .flex ( com espaço )
Fala Ulisses, seguinte cara... Quando você chama uma tag com a classe sem espaços (section.topo-do-site) significa que você está chamando a classe atribuída aquela section no HTML: Já quando você chama a tag e a classe com espaços (section .topo-do-site) significa que você está chamando uma classe que está DENTRO da section:
![HTML e CSS - Aprenda a criar 5 layouts de sites mais comuns na Internet [FLEXBOX]](http://i.ytimg.com/vi/sSkmBxsaJWg/mqdefault.jpg)
💡Ei, calma aí! Me diz uma coisa: você está criando este portfólio, mas já sabe o que vai colocar nele? Bom, se quiser aprender a criar sites para deixar o seu portfólio mais rico, ative o Modo Front-end 👉🏾bit.ly/3KY8mpn e crie sites como profissional 😁
Melhor que muito cursinho pago, a explicação e top e você ensina a deixar comentários no código.
pra quem tiver meio confuso como eu estava, a logo dele tem 100x100px, se a sua for maior vai ficar um pouco diferente
obg amigo você é um amigo
eu coloquei height: 150px; fico good mas essa config sua deu certo também
estou me aprofundando no css, teus videos tem me ajudado muito. Continua com teu trabalho, inspiração pra mta gente, inclusive pra mim, tmj...
Pow mano! Muito obrigado pelo seu comentário, sério msm kkkkkkkkk eu fico muito feliz em saber que estou ajudando vcs, meu objetivo é esse. Vamos pra cima 👊🏾👊🏾
Gostei da sua didática. Suas explicações acerca dos elementos são a cereja do bolo. Sucesso. 🚀
Esse projeto vai me ajudar muito a estruturar um site para o meu primeiro cliente!
Não vou fazer igual mas vou utilizar alguns conceitos, muito obrigado!
Pooow que dahora kkkk cara pode copiar, eu posto para ajudar vcs. TMJ 👊🏾
Tenho uma sugestão, observei que toda hora você precisa ir no HTML para copiar as classes que criou, existe uma extensão no vscode chamada "CSS Class Intellisense" que lista todas as classes que você criou automaticamente quando você começa a digitar.
E tem mais uma que pode ser útil principalmente para esses tutoriais, ela se chama "Highlight Line" que basicamente cria uma linha verde em baixo do código selecionado.É uma boa maneira de ajudar quem está assistindo a não se perder no tutorial.
Tio Zergio, obrigado pelas sugestões. Não conhecia essas extensões então vou ver de instalar no VS Code para ver se fica agradável nos vídeos 😁👊🏾
Queria saber porque o meu não apareceu as frases?
Fiz igual ao seu
@@romeropedro3372 quais frases?
@@romeropedro3372 Deve ser porque você ainda tem que aplicar a cor #fff branca no texto.
Repliquei ficou igual mais com minha informações e foto minha. Quem sabe sabe!! Sua didática é muito boa mesmo.
Cara parabéns olhei vários video aqui e único com paciência explicando não digo todos os detalhes mas deu pra intender muito bem mas muito bem mesmo eu que sou iniciante ficou muito bem claro parabéns meu amigo
Amos assistir tutoriais para aprender, mais e mais
Cara ficou show, os efeitos e criação das classes, muito bol!
Boa tarde! Os vídeos são excelentes; aprendemos de forma simples e eles são realmente valiosos. Show demais
Didática excelente da para entender tudo, sobre os códigos requer muitas pratica mesmo.
Excelente profissional, muita destreza no que faz, to aprendendo muito com seus videos.
sensacional. Em 2 vídeos aprendi muita coisa. Muito didático!
Show de bola cara! Confesso que estava bloqueado, mas este projeto me tirou da teoria.
Muito massa, obrigado por postar essas aulas sensacionais, sucesso sempre aí pra vc...
oopa, venho aqui pra agradecer, muito boa a explicação e todo a parte gráfica, todo sucesso pro canal... parabéns
Adoro os seus videos! Obrigada !!!!!!
Valeu Carlota 😁👏🏾🧡
Adorei! estou conseguindo seguir todos os passos
Obrigado amigo, você é um amigo
cara parabéns pelo conteúdo, muito bom
MUITO Obrigado ficou Muito bem explicativo
Maravilhoso esse efeito na imagem sensacional dmais ^^
Muito top seu vídeo aula.Trás mais videos tops assim!!! 👏🏻👏🏻👏🏻👏🏻😁
Amei a aula professor.👏
Queria dar uma sugestão, se o senhor poderia fazer um vídeo falando sobre estruturação de pasta em um projeto.
Fala Daniel, tudo bem? Posso sim fazer um vídeo sobre isso sim, cara. Mas se vc quiser já ir adiantando, não é muito complexo n kkkkk
Vc pode começar criando a pasta principal do seu projeto e dentro dessa pasta você começa a separar as subpastas, por exemplo: pasta de imagens, pasta onde vão ficar os arquivos de CSS, pasta de arquivos de JS e assim vai.
Caso vc vá criar um site muito grande, com muitas páginas, então vc pode colocar cada página dentro de suas respectivas pastas, com seus respectivos arquivos de CSS, de JS e assim vai 🙂😉
Você é zika, mano.
estou acompanhando o melhor sem dúvidas
Show!!! Obrigado.
Seus vídeos são excelentes parceiro! Eles ajudam demaiss!! Parabénsss! :)
Consegui replicar professor e Amei inscrito aqui..... uhuuuuuuu 😍❤❤❤❤
Vídeo maravilhoso! Muito obrigado!
muito obrigado. está ajudando de mais.
minha maior dificuldade atualmente é sobre o posicionamento de elementos no site, usando o display flex, justify e etc, n entendo mt sobre isso. E as vezes fico me perguntando o porq de tanta class uma dentro da outra kkkkkkk
2 coisas que pode te ajudar que me ajudaram:
1° estude um pouco se inglês, vai te ajudar a traduzir literalmente cada coisa.
2° tente ver um vídeo sobre lógica de programação na parte de CSS.
Pois vai te orientar a função de cada elemento e meio que a "Hierárquia".
Espero ter ajudado.
Me sinto um inutil copiando seu codigo, mas cosegui aprender muita coisa com esse video tanto é que eu replico sem colar oq eu aprendi com vc nos meus projetos pessoais.
kkkkkk Não se sinta inútil, a ideia dos vídeos é vocês copiarem o código, ajudar quem ainda não tem tanta habilidade com os códigos kkkkkkkk eu fico muito feliz de conseguir te ajudar
Muito obrigado estou a gostar muito dos teus videos estao me ajundado muito muito khanimambo( Obrigado)😇
Tu é brabooooo!!!
To Amando Cacildes
OLa a imagem pessoa nao foi para a direita aguardo o adm para responder.
Perfeito!!!!
ganhou mias um inscrito, tmj mano aprendi demais
conteudo top de mais
caraca, que video bom!!!
minha imagem nao foi para direita e nao ficou com o fundo verde vou apagar meu código e refazer tudo denovo .
Muito bom.
Muito bom!
top demais!!!!
qual a resolução da imagem usar para por o efeito???
Muito massa
Excelente.
tmj !!!
Boa tarde professor, refiz meu codigo algumas vezes e apesar das multiplas tentativas, minha imagem não teve o efeito de animação, achei que poderia ser a compatibilidade do navegador mas pela extensão do live server dentro do vscode também não tive exito. O senhor poderia liberar os codigos de html e css para que eu pudesse tirar a prova real?
Desde já lhe agradeço, aprendi bastante com suas aulas. Obrigado.
Oiii, tudo bem? Muito obrigada pelos vídeos, estou amando. Tenho uma dúvida, se eu tiver mais de uma span em uma h1, como eu faço pra diferenciar elas no css? Pra estilizar cada uma individualmente?
Alguém n deu certo p animação? Parabens pelo canal. Excelente conteudo
"Olá, program maker". Olá, professor.
Minha imagem não sai do canto, nem meu texto, eu já olhei e revi tudo de novo e não consigo sair dessa parte. Pode me ajudar mano?
Vc pode estar com problema na classe "flex" que eu criei ao longo do vídeo, ela é a responsável por centralizar os elementos na tela. T
Também pode ser a classe 'interface' mal configurada, tipo o max-width por exemplo. Recomendo que você reveja o vídeo e compare certinho se vc fez tudo igual.
Cara, tô com problema com o cabeçalho. até agora ele tava funcionando, mas do nada ele desalinhou, ficou assim: a imagem, abaixo dela tem os links e abaixo tem o botão
minha imagem nao esta ficando a direita, olhei codigo por codigo, e esta tudo certo, se alguem tiver alguma dica por favor avise
professor tenho dificuldades ao tentar colocar a imagem de lado
o segundo botão não mudou :/
Ola Bruno. Eu fiz o projeto contigo, e depois fiz a minha versão, alternado algumas informações e ficou muito legal mesmo. Mas na hora do responsivo da um certo bug, isso porque eu não consigo fechar o menu mobile. Inclusive isso acontece também no projeto que eu fiz igualzinho ao seu. Gostaria só de pedir que verificasse o seu projeto e vê se no seu também tem esse bug, que eu acredito que tenha.
O Bug está no Menu Mobile, quando você abre o site ou o Portfólio, no caso, seria lógico que ao Maximizar o Botão Mobile desaparece e ao Minimizar ele aparecesse. Mas ele não desaparece na hora em que eu Maximizo o Portfolio. Apenas desaparece quando eu Minimizo o Mesmo e lhe torno responsivo.
Agradeceria imenso, se me desse essa ajuda.
E gostaria de parabeniza-lo pelos vídeos pois estão a me ajudar bastante no meu aprendizado.
Muito Obrigado por tudo.
Daqui fala Gomes, a partir de Angola.
O meu Button ficou mais à esquerda, eu já vi aqui e ele está dentro da div.flex com o h1 e p. Sabe o que pode ter acontecido?
a minha imagem não mexe. Vi e revi, as linhas estão corretas, mas não se mexem.
Olá muito bom seu conteúdo uma pergunta por que vc tirou os header na hora de estilizar o botão e já foi tudo trocando automático
Opa, quando ele coloca o "header" ele está incluindo apenas os elementos que estão dentro da tag header, a partir do momento que ele tira essa palavra no documento CSS ele está incluindo todos os botões que existem na página com a classe ".btn-contato", como os dois botões tinham essa mesma classe, o estilo que já estava antes em apenas um botão foi para os dois botões automaticamente.
Espero que tenha ficado claro, qualquer dúvida é só falar!
Eu fiz só que o segundo botão não de baixo não mudou tá a mesma coisa@@khons0110
Sabe me dizer pq minha imagem fica distorcida qdo aplico o gap?
não to conseguindo mudar a cor do botão de baixo fiz tudo certinho mas não muda
como faco pra diminuir minha foto de imagem pois esta ocupando a tela toda e fazer o mesmos efeito da sua foto que colocou no site parabens desde ja agradeco
Mano como vc deixou a imagem com este formato de lados?
como faço pra aumentar o tamnho da imagem?
Muito obrigado
A minha imagem não ficou do lado 😭
olha se a div txt-topo-site, está fechando depois da div img-topo-site, no meu caso era isso, coloquei para fechar antes e deu certo.
a minha imagem não mexeu
Na minha funcionou
Opa, tudo bem?
Por que você chama a section e dps a class dele?
Fala João, tudo bem? Cara eu chamo a section e dps a classe para que aquele estilo fique específico para a section q possua aquela classe.
Se por acaso eu chamar só a classe isso vai aplicar um estilo geral, ou seja, se eu tiver outro elemento, como uma div, com a msm classe da section, aí o estilo que será aplicado serão os mesmos entende?
Quando eu chamo o nome da tag e em seguida a classe, isso significa que eu vou aplicar um estilo apenas para aquela tag que possua aquela classe 😁
meu display flex não deixa a imagem ficar do lado direito por alguma razão sempre fica embaixo do texto, já revisei o código e parece semelhante ao do vídeo, alguma dica?
achei a solução, a div txt-topo-site, estava fechando depois da div img-topo-site, no meu caso era isso, coloquei para fechar antes e deu certo.
Qual seria o tamanho da foto?
oi boa noite tem como me ajuda estou comecando do zero quero colocar minha foto de perfil mais ou cupou a tela toda como faco pra diminui e da o mesmo efeito da foto que voce colocou
Ou tiago, tudo bem? Então amigo você pode utilizar a propriedade Width na imagem e personalizar de acordo com seu gosto. Você pode atribuir uma classe para ela, por exemplo: .minha-foto. Aí você chama no CSS:
.minha-foto{
width: 200px;
}
como faz pra pré vizualizar o projeto igual ele está fazendo
utiliza o localhost
na parte do css que vc fala para usar o header > .interface{} no meu não está mudando nada. O que eu posso fazer?
Bruna, olha se vc digitou o nome da classe corretamente. Além disso você utilizou o sinal ">". Esse sinal garante que o estilo só será aplicado na classe ou tag que esteja diretamente dentro da tag header. Nesse caso se a sua classe interface estiver dentro de outra tag/classe, o estilo não irá funcionar.
As imagens estao enormes e nao consigo diminui-las ja procurei na net mais nao consigo aplicar
Opa Fernando, chama a tag img dentro do CSS e coloca pra ela um width do tamanho q vc quer, exemplo:
img.logo{
width: 120px;
}
Tmj
qual o efeito colocou nessa forto do site nao consigo acha essa foto
Todas imagens utilizadas nesse site vc pode baixar com um link que tem na descrição 😊👏🏾
Engraçado a minha foto não ficou.
opa blz? como pego essa moldura e coloco minha foto? tem como epgar essa moldura e mudar de cor?
Fala mano, cara eu usei o Photoshop para criar essa imagem, nesse caso recomendo você procurar um tutorial de photoshop para criar a imagem como deseja kkkkkkk
quall app usou para a criaçao da imagem com fundo verde?
Eu usei o Photoshop mano. Mas vc pode usar outras ferramentas gratuitas como o Canvas ou Gimp por exemplo.
Minha imagem logo não foi para direita
Então tem algo errado na sua estrutura mano. Compara o código do vídeo com o seu pra ver oq dá
@@InteliogiaDev Já resolvi isso. É que botei outra imagem
Se chamar a section sem chamar a class vai ter o msm resultado?
Vai sim, mas aí caso vc queira aplicar um estilo diferente para uma section em específico aí vc terá que chamar a classe
qual tema vc usa?
Nesse vídeo em específico utilizei o pacote de temas na RainGlow. Aqui no canal tem um vídeo onde ensino a configurar o vs code, acho que vale a pena passar lá 😁
em qual site eu faço essas imagens qe vc tem ai?
Mano as imagens que uso nos meus sites geralmente é do site Pexels ou Unsplash
cadê a parte trêssss
Kkkkkkkk calma Marinaaaaaa kkkkkkk sábado tô postando a parte três 😁
queria saber porque na sua URL aparece um IP.
Uma extensão do VS Code chamada Live Server... ela serve para mostrar as atualizações do nosso projeto em tempo real sempre que o código for salvo
ue pq o meu as letras menores sumiram? kskskskskk enfim EU, developer fraco
KKKKKKKKKKKKK PORRA IRMÃO TU ME QUEBROU NESSE COMENTÁRIO KMKKKKK
No minuto 8:43 onde coloca section .topo-site e section .topo-site.flex o meu só aceita os valores se eu mudar a classe do topo-site para interface, tem algum problema?
estão alinhados assim.
Descobri era o espaço para chamar a classe section.topo-site (tava chamando section .topo-site) porque tem essa diferença de chamar com o elemento pai com espaço e sem espaço?
Então mano, se vc chamar a section.topo-site sem espaço, o css vai procurar uma section QUE TEM a classe 'topo-site' atribuída a ela.
Agora com espaço (section .topo-site) o css vai procurar uma classe que esteja DENTRO da section
meu amigo, tudo joia com vc ? Cara, é o seguinte; eu fiquei com uma dúvida:
qual é a diferença entre soltar um espaço entre a tag e uma classe aplicada no css ? por exemplo :
section.topo-do-site .flex ( sem espaço )
section .topo-do-site .flex ( com espaço )
Fala Ulisses, seguinte cara...
Quando você chama uma tag com a classe sem espaços (section.topo-do-site) significa que você está chamando a classe atribuída aquela section no HTML:
Já quando você chama a tag e a classe com espaços (section .topo-do-site) significa que você está chamando uma classe que está DENTRO da section:
@@InteliogiaDev muito obrigado pela atenção . ajudou demais! grato! seus videos são excelentes !!!
Muito bom!