PORTFOLIO RÁPIDO E FÁCIL (CRIANDO PORTFOLIO DO ZERO COM HTML E CSS )
Вставка
- Опубліковано 9 вер 2024
- Não se esqueça de se inscrever para não perder nenhum conteúdo sobre front-end!
Nesse vídeo, nós vamos criar um portfolio rápido e fácil do zero! Utilizando somente html e css você vai, em 30 minutos, criar um site profissional, com animações e que vai alavancar suas entrevistas.Como bônus, você vai desenvolver a versão mobile do portfolio.
LINKS USADOS NO VÍDEO:
▸ CANVA (para criar a foto): www.canva.com/
▸ GOOGLE FONTS: fonts.google.c...
CASA BEM COM ESSE CONTEÚDO:
▸ 5 DICAS PARA O SEU PORTFOLIO: • Video
ME ACOMPANHE NAS REDES SOCIAIS:
▸ Instagram: / ga.brielapinheiro
▸ Tiktok: / ga.brielapinheiro
▸ UA-cam: / gabrielapinheiro
Aprenda como criar seu portfolio para desenvolvedor! Nesse vídeo vamos estar criando portfolio do zero com html e css, apenas!
SOBRE MEU CANAL:
Oi, eu sou a Gabi! Meu objetivo aqui é compartilhar mais sobre o mundo da tecnologia, trazer dicas para primeiro emprego, sobre como entrar na área de tecnologia e apresentar tutoriais que irão te ajudar a se desenvolver como programador ou programadora front-end. Sejam muito bem-vindos(as) ao meu canal!! :)
--------------------------------------------------------------------------------------------
#portfolio #html #css #javascript #site #dicas
![HTML e CSS - Aprenda a criar 5 layouts de sites mais comuns na Internet [FLEXBOX]](/img/n.gif)
E aí, curtiram? Espero que sim! Não se esqueçam de se inscrever e deixar aqui nos comentários o link do portfólio de vocês ❤️
Gabriela, ficou sensacional! Ainda sou bem iniciante mas já quero meu portifólio assim! hahaha Primeiramente, você ensina muito bem, devia dar aula. Só uma dúvida, adicionei os links para as seções (criei uma sessão extra também). Como faço para esconder o menu itens e a bolha branca após clicar em uma opção? (Atualmente ta assim: eu abro o menu e clico em projetos, dai eu vai para a sessão de projetos, mas não some o menu e o efeito branco do fundo...). Obrigada!
Olá Gabriela, você postou esse exemplo de portifólio no Github?
Eu tenho cursos da danki outro
Deus te abençoe, vou trabalhar em cima do seu projeto quando eu tiver melhor e aperfeiçoar algumas coisas, depois te envio por e-mail tá bom?
prometo te dar os creditos
parabens pelo video, eu aprendir html e css a dois anos atras, mas como nunca tinha usado e praticado eu esqueci tudo, vc me fez lembra de muita coisas e ainda me ajudou a criar um curriculo/portfólio muito bom.
Pòr mais profissionais empáticos como você Gabriela ! Obrigado de verdade, só quem esta iniciando sabe o quanto é importante aulas ricas em conteúdo como essa ! Gratidão!
Que baita aulão! Adorei a didática que tu explica cada coisinha, fica muito fácil de acompanhar. To iniciando meus estudos com HTML e CSS e esse teu vídeo me ajudou muito já. Ganhou um inscrito!
Show de bola o vídeo! Única dica seria dar um zoom um pouco maior, pq aumenta a legibilidade do código pelo cel \o
Muito obrigada! Que honra 😊
No meu último vídeo eu ainda não tinha conseguido colocar um bom zoom mas nos próximos vai melhorar sim!
Estava pesquisando outra coisa e do nada eu caí neste vídeo e com confiança, posso afirmar que fora um dos melhores que já assistir aqui no UA-cam, principalmente pela simplicidade e objetividade dele. Parabéns Gabriela, foi sensacional!
Mulher parabéns , você é uma profissional excelente, merece todo o sucesso do mundo, e explicou muito bem, precisava mesmo desse vídeo❤️
Muito top! Gostei muito, ainda sou iniciante no HTML e CSS, pretendo fazer meu portifólio dessa forma..
Conheci seu trabalho na DIO e quando te segui no LinkedIn vi q tinha postado esse vídeo e estou amando como vc explica... parabéns 💜👏🏾
Muito obrigada, Fabi ❤️
Eu vim pelo DIO também rs
Linda, maravilhosa e todos os outros adjetivos positivos do mundo
Muito bacana! Quando eu estiver mais familiarizada com as linguagens vou criar meu portfólio nesse estilo, muito lindo! 💜
que bom que gostou, Isa 🤩🤩 não esquece de me mostrar, hein?
@@GabrielaPinheiro pode deixar, mostro sim!!
Gabi gostei muito do seu conteudo, eu acho que cometi alguns erros no desenrolar mas é bom que eu ja vou corrijindo os erros que eu mesmo causei na criação do meu portifólio. abraço parabens pelo video muito instrutivo.
Boaaaa Gabs, continua que vc vai longeeee . Já to inscrito :)
Eba, que honra 🤩 to indo no caminho certo hahah
Muito bom, eu não vou desenvolvedor mas sou Scrum Master em transição e esse portifólio vai ajudar muito, obrigado
Fico top, fiz um aqui tbm, parabéns pela didática 🎉🎉
Parabéns pelo vídeo, começando no frontend seu vídeo me ajudou muito, Obrigado!
Uauuu, eu amei...ganhou uma inscrita. To iniciando minha carreia na área e to muito empolgada. Obrigadaaaaaa
Gostei do seu canal , você tem uma ótima dicção e explica muito bem ! Parabéns.
Gabriela, muito legal seu material e método de ensino! Parabéns!
Gabi muito bom o video, estou seguindo e aprendendo com vc, sou iniciante em HTML e CSS.
Ficou muito bom!!! Vou fazer essa semana!! Parabéns e muito obrigado!
Sensacional!!! Vou começar o meu amanhã me baseando nesse vídeo
Oba, vou fazer! Parabéns por compartilhar e obrigada pelo vídeo! Fiz o clone do Instagram através do seu curso na DIO, muito bom!
Obrigada Nayanne!! Fico feliz que goste dos meus conteúdos 🤩
Muito top!! Ajuda bastante quem não sabe qual modelo seguir. :)
Obrigado pelo conteudo Gabriela!! ^^
Adorei, aprendi muito obrigada Gabriela
Comecei a fazer mas não entendi o que estava fazendo, então desisti, como sou iniciante acredito que se fosse mais explicado seria melhor, mas acredito que o foco do seu canal não seja esse, mas achei incrível, muito show!
Ficou show mesmo! Bem clean!
Triste que você parou com o canal, gostava bastante dos seus vídeos.
Muito bom Gabriela!! Eu já estava elaborando um portfolio, aproveitei para somar algumas coisas que você passou aqui em seu vídeo, o resultado esta ficando espetacular, agora estou começando a parte responsiva e como é meu primeiro contato com o @media query, vou focar aqui pra terminar o mais rápido possível mas sem perder a qualidade.
valeu pelas dicas e truques !!
Muito bom! Parabéns!
Adorei o menu 👌
muito bom, vou tentar fazer em react usando tailwin, obrigado
Caramba. parabéns, vou me espelhar no seu, e quando eu digo espelhar, vai ser praticamente um ctrl+C e ctrl+V 😳, mas eu vou tentar fazer do meu jeito, mas tu explica muito bem mesmo, você é pro. Obrigado pelo vídeo 👉👈!
Amei estava procurando parecido e encontrei um perfeito, seria bom ter uma 2° parte desse vídeo! ficarei muito grato!!
Curti bastante, com certeza irei usar. Muito obrigada 😊
Professora. Gostei muito do canal, ja me tornei inscrito. Tenho um trabalho para fazer, e estou sem saber como que faz. Eu gostaria muito da ajuda do senhor. Por favor, Vc poderia criar um video, de como faz um curriculo em html, css ? podendo usar também o javascript, e depois publicar o currículo em um site de domínio publico ? para ele ficar visivel, e ter o link pra abrir depois ? o currículo tem que ter pelo menos 4 link : pode ser o Sobre Mim, Formação profissional (idiomas), contato e Portfólio.
❖ Um link sobre sua formação educacional, idiomas; Link para contato - fazer a parte visual do formulário. (utilizar inputs: nome, email, mensagem).
Por grande gentileza, o senhor poderia fazer um vídeo sobre esse assunto? Aguardo resposta e desde ja agradeço!
Oba, muito legal, vamos la, amei, vc e uma fofa, hui huiii!!! tem como fazer um portifolio tipo carrossel???? so uma ideia... obrigada vc e fera.
Otimo video , muito obrigado irei me inspirar nesse portifolio ♥
show de bola Gabriela!! me ajudou muito !! só nao consegui deixar o menu bolha redondo, o meu ficou quadrado. Porém ja me ajudou bastante!!
mds menina, vc é perfeita!
Adorei! Muito obrigada por compartilhar!
Parabéns, ficou muito da hora!!
ficou top, parabéns!!
Nossa, muito bom, show .......
Oi Gabriela, tudo bem?
Primeiramente parabéns pelo conteúdo, gostei bastante =)
Eu tenho uma dificuldade relacionada as funções, algumas eu aprendi com pessoas iguais a você que estão dispostos a ensinar, mas ainda existe muita coisa que eu não compreendo e gostaria muito de conseguir ter um guia de tudo que tem dentro do Css pra que eu pudesse estudar melhor. Você ou algum colega aqui que está acompanhando podem me ajudar com isso?
Forte abraço!
Meu primeiro portifólio será esse já decidir 😆
que aula top.. olhando que eu vejo que não sei nada ainda hahaha quem sabe um dia chego nesse nível!! teria alguma dica de portfolios simples para ir treinando do básico?
Ficou ótimo! Continue postando o/
Estou doido p ter mais tempo e voltar a gravar videos aqui tb
eba!! Muito obrigada!! Gra sim 🤩
🎯Principais conclusões para uma navegação rápida:
00:00 📋 Neste vídeo, o tutor mostra como criar um portfólio simples utilizando HTML e CSS.
01:11 🖼️ O portfólio terá uma capa com nome, profissão, botões de redes sociais e um menu interativo.
03:15 🍔 O tutorial começa a estilizar o menu hamburguer, preparando-o para a animação.
05:03 📝 A estrutura HTML para o menu hamburguer é criada, utilizando checkboxes e labels.
06:14 ✒️ A estilização inicial do menu hamburguer é feita, preparando os tracinhos e a animação.
09:15 🌐 A estilização para os ícones de redes sociais é aplicada, incluindo transições para hover.
11:26 🔗 O tutorial mostra como criar um menu hamburguer responsivo, com transições suaves.
14:18 🎨 A configuração do menu é detalhada, explicando o uso de posicionamento, dimensões e sombras.
15:31 🌈 A estilização da bolha que acompanha o menu é criada, preparando-a para a animação.
16:12 🖌️ Ajustes na aparência do menu, centralizando e definindo propriedades.
17:21 🎨 Configurando animações para o menu aparecer suavemente.
18:42 🎉 Iniciando animações de abertura e fechamento do menu de hambúrguer.
20:57 🔮 Criação de animações para os ícones de menu se transformarem em "X".
22:18 🌄 Aplicando box-shadow para criar animações de bolhas em destaque.
23:37 💼 Começando a estruturação dos cards de projetos no portfólio.
26:04 📐 Estilizando o layout dos cards, incluindo imagem e efeitos.
28:31 📄 Detalhes de estilo nos textos e informações dos projetos.
29:08 📝 Estilização dos indicadores de projetos e animações ao passar o mouse.
32:10 🎈 Finalização do design dos cards, adição do efeito de zoom.
32:55 📢 Adicionando rodapé simples ao projeto.
33:10 🎨 Ajustes finais no estilo do portfólio, como cores e alinhamento.
33:52 🚀 Conclusão do projeto do portfólio, incluindo efeito de hover nos projetos.
34:03 📱 Breve visão da versão móvel do portfólio e incentivo à customização.
34:18 💬 Incentivo à interação e compartilhamento nos comentários.
34:32 ✍️ Encerramento do vídeo, chamada à ação para likes, comentários e inscrições.
Muito bom Gabriela !!
Eu ameeeii!!
me ajudou mto em um trabalho, mto obrigada!!
Gabriela Pinheiro, achei top seu vídeo, poderia passar os códigos para conferencia tbm, fiz mas tem algumas coisas que não deram certo, gostaria de analisar onde estou errando. ps... estou iniciando agora
Sensacional!!! Parabéns!!!!!
Ficou muito bom, me ajudou muito
eu achei super legal mas falta mais explicação. pra que serve cada função quando vc coloca passa batido ai uso sem saber o que estou fazendo.
Muito bom o vídeo, infelizmente não consegui fazer a imagem, para ficar igual a do vídeo, mas de resto deu tudo certo!!
Shooow !
Já curti e me escrevi no canal! :)
Muito obrigada 🤩🤩
Menu -items faltou fazer isso
obrigado amigo vc é um amigo, o meu estava dando errado justamente pela falta do style="display: none"
oi, onde você colocou essa parte?
Parabéns pelos vídeos ;)
3:17 Esse teclado batendo me lembrou ASMR !!!! kkk 🤣
Excelente explicação, estou fazendo igual, mas o meu fica todo desconfigurado. Será o tamanho de tela?
Conseguiu concertar? O meu so os ícones redondos que não estão embaixo um do outro está ficando do lado, primeira vez que uso esse programa kkkkkkkkkk
Que aula meus amigos
Olá, quero saber como vc preparou a foto que usou no background??
Obrigada pelo tutorial! Foi super útil! Fiz meu primeiro portfólio e tô super feliz! Só preciso entender pq no meu gerou uma barra de rolagem na horizontal (minúscula, mas gerou. Algo excedeu o tamanho da tela) kkkkk mas logo descubro e ajusto. Vou brincar bastante e ir customizando conforme for aprendendo mais
o meu tbm... e o meu menu não ficou dentro da box-shadow. Conseguiu resolver?
@@luisaaraujo9565 Vc postou sem codigo em algum lugar?, tive uns erros tbm e queria comparar com o o de outra pessoa
Não estou conseguindo puxar a função de :nth-child
Parabéns
Mas para a próxima aumenta a fonte para podermos ver melhor o codigo
Olá, Gabriela Pinheiro, como seria para colocar esse portifólio no ar?
Onde seria, além do GitHub ?
você poderia fazer um vídeo ensinando a postar esse Portifólio?
Obrigado, gostei muito do seu vídeo, parabéns
Oi Luiz, você pode subir via Heroku ou Netlify usando seu repositório do GitHub. Esses servidores permitem que seu projeto vire um site :)
Que top! Parabéns, obrigado por compartilhar. Ainda não tenho o git, mas vou te seguir no insta.
Tutorial incrivel, mas meu box-shadow não se comportou como o do tutorial.
Ele está cobrindo toda a pagina e não fica com a borda arredondada no bottom.
Muito bom, tive um problema na hora de colocar os itens HOME, SOBRE E PROJETOS para dentro do menu de traços no canto superior direito. continuaram na parte inicial em cima do meu nome
Ótimo vídeo! Minha única dificuldade foi acompanhar com a tela dividida, pois as letras ficam muito pequenas. Seria legal dar um zoom no seu editor pra ficar fácil pra quem trabalha dessa forma. Obrigado pelo conteúdo!
Na minha opinião, você tem que dar seu melhor na hora de construir um portfólio.
Adorei, ficou ótimo!
Fico muito feliz, obrigada 🤩
Oiii, td vem? Espero que sim! Me dá uma dica de como ancorar os links dos projetos, nesse Portifólio, por favor!
gente eu segui certinho o código dela mais só as barrinhas do meu menu que não querem aparecer quando passo o mouse encima mostra que tem algo pra tocar mais n aparece alguem sabe oq é?
Muito obrigado moça!
gostei obrigado mesmo estou fazendo aqui gostei muito
Que conteúdo toppppppppppppppppppppppppppppppppppppppppp
nossa pelo jeito foi tudo atualizado, pq copiei igual e o trace mim não aparece o cursor diz q ele esta lá mas não aparece 🙁
Amei!!
Boa aula !
O meu não ficou centralizado desse tamanho alguma me ajudar
muito bom este projeto, estou fazendo aqui, mas estou tendo dificuldade de colocar a foto no fundo da tela. poderia dar mais detalhes de como voce preparou esta foto? qual o tamanho e como voce estilizou?
fala ai max, eu fiz com full hd e ficou top (1920 x 1080
)
@@ThiagoSilva-lq5dm vc postou em algum lugar ? eu gostaria de ver
Bom demais! Mas onde posta?
incrivel s2
Vídeo 100% didático, professora está de parabéns! Tenho uma dúvida, tentei colocar no href dos itens do menu para que a tela desça para os projetos, porem o box shadow que ocupa a tela toda acaba atrapalhando, seria possível tirar o box-shadow ao clicar em algum dos menu-itens usando apenas CSS?
Cara, não sei se isso te ajuda, mas eu consegui com um javaScript bem simplies.
function clearFundo(){
document.getElementById("toggle").checked = false;
}
só colocar um id em cada item do menu
chamar eles no js e depois colocar um addEventListener chamando essa função.
ex:
projetos.addEventListener('click', clearFundo);
Espero ter ajudado
@@Alebassov opa! Obrigado Alexandre, vou tentar!
video bom demais, ajudou muito !!!! (obs: se puder dar uma parada as vezes e dizer o que o comando faz, vai ficar top)
Adorei! Só tenho uma duvida...Como poderia fazer pra, quando clicar, fechar o menu lateral?
Consegui resolver esse problema com js ...
Cria um arquivo js e coloque a seguinte função..
function fechar() {
var inputCheckbox = document.getElementByID('toggle');
If (inputCheckbox.checked === true){
inputCheckbox.checked = false;
}
}
E no seu HTML dentro de sua tag
Adicione:
onclick="fechar()"
Em cada âncora....
Qualquer dúvida só falar... Procurei muito para aprender isso e vi que estava com a mesma dificuldade ...
@@lucasalmeida3250 Só vi agora, mas valeeu por mandar!!
Ainda sim, continua não funcionando.
O código não deu erro, porém não funciona ainda
@@marcosmoraes425 consegue compartilhar para mim ver?? Aqui está funcionando bem ....
@@lucasalmeida3250 então, eu fiz exatamente como disse, colocando no JS o código:
function fechar() {
var inputCheckbox = document.getElementByID('toggle');
If (inputCheckbox.checked === true)
{
inputCheckbox.checked = false;
}
}
Depois eu coloquei em todos os :
Home
Ainda sim não foi
Eu percebi que a foto de background mostrada no começo tem uma parte transparente e sua foto já está mais alinhada para o canto direito, eu coloquei uma foto minha aleatória (sem edição) e a foto ficou tomando todo o centro da página bem grandona... Quem não editar a foto da mesma forma (mostrada no vídeo) é mais provável de acontecer o que houve cmg ??? E não seria melhor adicionar a imagem na pagina e tratar dela no css para ficar da forma que quisermos ao invés de clocar ela como fundo da página ? Acho que ela como background é mais limitado e complicado em relação a colocar a imagem onde e da forma que quiser não é ?? Ou teria alguma alternativa de fazer tais coisas com a imagem como background mesmo ?
aconteceu cmg tbm. conseguiu resolver?
aconteceu comigo a mesma coisa , ja que nao tenho a foto dela editada e nao sei como ela editou, conseguiu resolver de alguma forma?
uma duvida, como adcionar projetos na parte "projetos 1,2,3"?
Acabei de me inscrever. Preciso ver todos os vídeos.
Muito obrigada ❤️
Oi como faço para o card-wrapper se tornar um link tentei colocando a tag em diversos lugares mas nao consegui abrir o link?
Alguém sabe me dizer se está desatualizado alguma função? fiz igualzinho já vi e revi o vídeo. Não dá erro no código. Mas, fica diferente na página
Alguém sabe algo sobre isso?
Aula top só o barulho do teclado que incomoda um pouco rsrs
Qual tamanho da imagem você utilizou no site, essa que fica em destaque??
show! parabéns!
muito obrigada!! 🤩
Galera onde vcs pegam imagens para colocar em sites ?
Gostei do som do teclado
incrivel conteudo
muito bom
Moça como você colocou sua imagem, não consigo colocar a minha?