Como criar Portfólio com HTML e CSS - Pt. 04/08 - Sessão Sobre
Вставка
- Опубліковано 26 січ 2025
- ✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Seja membro deste canal e ganhe benefícios:
/ @inteliogiadev
Nesse projeto iremos criar um site para que você possa estar apresentando seu portfólio para seu visitantes. Muito útil para você que pensa em arrumar um emprego ou prestar serviços.
Vamos utilizar apenas HTML e CSS nesse projeto que provavelmente será dividido em 6 partes. Futuramente usaremos JS.
✅ Links úteis:
🔹Baixe as imagens desse projeto: bit.ly/3NWAmKH
🔹Google Fonts: bit.ly/3KDfOn3
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
💡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 😁
A sua aulas é melhor que as aulas EAD da Estácio. Muito obrigado.
Cara, tô atualizando meu portfólio e vi seu vídeo pra me ajudar.
E, sinceramente, seu conteúdo é excelente!
Diferente de outros criadores que simplesmente vão colocando o código e fazendo a pessoa copiar, você faz diferente e explica como cada style, id, class, cada seção funciona!
Você explica o que cada linha do código vai fazer no site antes de colocar e depois mostra.
Meus parabéns!
Da pra uma pessoa aprender facilmente HTML e CSS vendo seus vídeos, sem precisar daqueles cursos infinitos que muita gente sai sem aprender direito.
Continue assim! Você vai longe, amigo!
Cara muito obrigado pelo seu comentário, do fundo do coração 😁 minha ideia é essa msm, pq quando eu tava aprendendo, foi difícil entender oq cada comando fazia, justamente pq na época tinha pouca grana e investia nuns curso que era só copiar e colar kkkkk n valia a pena
Quero tentar mudar isso. Adotando uma metodologia onde eu explico cada detalhe para não deixar dúvidas. E fico muito feliz por vc ter reparado isso. Muito obrigado msm. TMJ 👊🏾🧡🧡
Olha mano acompanhei playlist completo consegui o mesmo resultado obregago🔐🔐🔏🔏🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌
Que conteúdo BRABO, cara. Estou tomando algumas liberdades e adaptando o projeto às minhas necessidades, e tá ficando show, muito acima do que eu esperaria conseguir fazer tão rápido. Excelente.
Eu ainda estou iniciando e estou tendo muita dificuldade no momento, mais aos poucos estou desenrolando e espero um dia poder fica profissional nessa área. É uma área muito boa, difícil de entender mais ao mesmo tempo é bem interessante, vale a pena se esforça pra aprender.
eu te entendo irmão, você vai conseguir estou no mesmo processo
Queremos sim, mais projetos como esse, belíssima explicação
verdade
ESTOU GOSTANDO MT E CONSEGUINDO FAZER DO MEU JEITO COM BASE NESSE SEU, TA FICANDO MUITO BOM OBGD !!
Estou acompanhando e estou gostando muito... mas eu acho sempre engraçado quando o Bruno diz sempre: *É muito fácil e ele solta um sorriso...* 😅 muito bom conteúdo 👌
Muito boa suas aulas, já me inscrevi e tô adorando. Você explica super bem
Muito obrigado pelo conteúdo, ótima explicação! Por gentileza, poderia me informar qual tema você utiliza no vscode?
MUITO BOM! Queremos mais ideias de projetos para iniciantes, me deu um ótimo norte do que seguir, sua didática é muito boa, parabéns!
Muito obrigado 🧡 já estou elaborando o próximo projeto 😁
Mais projetos como esse urgente!
Conteúdo muito bom !! a didática é inspiradora :)
Cara aprendi muito com vc! Vc eh demais!
Gostei, para quem esta procurando consolidar o conhecimente é muito bom, devido as suas explicações bem detalhadas, mostrando que você tem boa didática e propriedade. Eu esperava que vc aplica-se espaços entres os links no css com a propriedade 'gap' . Ganhou mais um seguidor.
Fala mano, muito obrigado! Serio msm❤️👊🏾
Sobre utilizar o 'gap', nos meus vídeos eu gosto de utilizar todas as propriedades possíveis para que quem esteja assistindo saibam que existem essas possibilidades. 😁
Para com os vídeos não professor! Sucesso❤🔥👊
Muito bom o conteúdo, estou acompanhando todas as aulas e me saindo muito bem!!
Seu conteudo esta me ajudando complementar meu portifólio. Deus te abençoe brow
AMANDO CADA VÍDEO
adoreiii, continueeee
Vc q manda Mari 😁❤️
Show, obrigado por compartilhar.
Cara, simplesmente muito bom, parabéns pelos videos.
Parabéns! É bom demais. Continue nos ajudando.
to curtindo muito as aulas
Parabéns pelo conteúdo, excelente aula
vídeos muito bons mano, obrigado!!
Muito top mano
Faça mais vídeos assim
projeto massa demais
Perfeito
meu amigo obrigado estou gostando muito dos videos está me ajudando muito a entender como funciona a utilização do css na pratica, mas me explica pq voce coloca essa div interface se voce quase nao utilizou ela qual a ração de incluir ela ?
top de mais... muito bom
Parabéns pelo conteúdo, simplesmente fantástico. Você possui uma excelente didática! Vou passar a acompanhar o canal.
Estou acompanhando esse projeto e tenho uma dúvida que é relevante. Não sei se você aborda sobre isso nas próximas aulas (que ainda vou assistir hoje), mas como faço para limitar o tamanho máximo de uma imagem? Você até citou que nesse caso a imagem ficou num tamanho bom e que não mexeria nisso... mas e se precisasse, como é feito?
Fala Lucas tudo bem? Então mano basta usar a prioridade max-width seguido de um valor. Por exemplo:
imagem {
max-width: 700px;
}
Nesse caso a sua imagem não irá passar de uma largura de 700px tendeu?
Se vc quiser aplicar uma largura sem especificar o valor máximo, aí basta usar o width.
imagem {
width: 700px;
}
Aí vc testa e vê qual o melhor pra vc. Tmj 👊🏾
@@InteliogiaDev Tão óbvio!!! rsrs
Deu certo aqui, muito obrigado!
GRATIDÃO
Muito bom!
Muito bom
Senhores e senhoras nos reunimos mais uma vez 🍷
🍷🗿
literalmente eu 🍷🗿
Kiko Sigma
como faço pra colocar os links das redes sociais?
Ao invés de colocar apenas 1 pessoa eu queria colocar 3, uma em baixo da outra, como faço isso ?
Fala professor! Prof, no minuto 14:53 por aí eu não consegui fazer igual ao senhor com os icones virando circulos e verdes. Eles continuaram muito pequenos e quadradinhos. O que eu faço? Copiei o código 2 vezes e nada. Quero apresentar esse projeto amanhã, mas eu não consigo modificar. Me ajuda
Acho que cheguei um pouco tarde kkkkk mas olha isso certamente foi um erro de chamada no CSS. Vc pode ter chamado a classe errada ou o nome da tag errada. Nesse caso recomendo q vc revise o código. Uma letra faltando ou um espaço no lugar errado interfere no resultado.
Atente-se também aos elementos dentro de outros.
obrigado🤗
cara minha imagem ficou desalinhada
segunda a esquerda
nao sei como alinhar
quando sai a próxima parte?
Sábado às 18h, moça 🙂
no css não muda nada no meu, não sei oq faço
Como faço para adicionar borda na minha imagem com o CSS? meu comando nao está funcionando, eu chamei a DIV img-sobre só que nao muda nada continua com a mesma formatação.
alguém poderia me ajudar?
Mano tem q chamar .img-sobre img{
}
professor, qual o nome desse app para simular site em servidor, que o senhor abre pelo navegador ao abrir o site. é uma extensão?
É uma extensão do VS Code chamado Live Server 😁
Alguem sabe como os icones funcionam? Ja copiei o link e nd
mano pra mim ta acontecendo o mesmo, eles ficam brancos e só
como faço para adicionar os links ?
Na teg "a href" dentro das aspas, onde se encontra o "#", coloque o link desejado
Mano, nmrl, não sei oq se passa, to fazendo tão certinho, pelo menos pra mim né kkkkk, Aí resolvi o erro anterior, e agoar me apareceu outro, os icones não estão aparecendod entro dos buttons, que complicação
Pode ter algo de errado com a configuração da biblioteca de ícones, mano kkkkkkk
Perdão pela demora , enfim tenta conferir se colocou corretamente o link da biblioteca no head
Boa sorte aos proximos que tiverem o mesmo problema
Eu queria colocar um border radius na "" mais nao consegui de forma alguma, seria por conta da classe .flex?
Cara muito provavelmente você não chamou o elemento corretamente. Se certifica se o nome da classe ou o nome da TAG foram digitados de maneira correta e tenta aplicar novamente o border-radius. Aí volta aqui pra falar se funcionou 😉