/* Estilos CSS */
Como Criar Um Portfólio Responsivo Com HTML, CSS e Javascript
Neste artigo, vamos te ensinar como desenvolver um portfólio responsivo utilizando as linguagens HTML, CSS e Javascript. Um portfólio é uma ferramenta importante para quem trabalha na área de design, programação, fotografia, entre outras áreas. É através dele que você pode mostrar seus trabalhos e conquistar novas oportunidades profissionais.
Passo a passo:
- Crie a estrutura básica do seu portfólio em HTML, com as seções principais como: Home, Sobre Mim, Projetos, Contato.
- Estilize o seu portfólio utilizando CSS para torná-lo responsivo e atraente visualmente em diferentes dispositivos.
- Adicione funcionalidades interativas com Javascript, como um carrossel de imagens, formulário de contato com validação, entre outros.
Código de Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Portfólio Responsivo</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Meu Portfólio</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre Mim</a></li>
<li><a href="#projetos">Projetos</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
<section id="home">
<h2>Bem-vindo ao meu portfólio!</h2>
</section>
<section id="sobre">
<h2>Sobre Mim</h2>
<p>Sou um desenvolvedor web apaixonado por criar projetos incríveis!</p>
</section>
<section id="projetos">
<h2>Meus Projetos</h2>
<div class="projeto">
<img src="projeto1.jpg" alt="Projeto 1">
<p>Projeto 1</p>
</div>
</section>
<section id="contato">
<h2>Contato</h2>
<form action="enviar.php" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Agora que você já sabe como criar um portfólio responsivo, é hora de colocar a mão na massa e desenvolver o seu próprio portfólio para mostrar suas habilidades e atrair novas oportunidades no mercado de trabalho. A prática faz o mestre, então aproveite e comece a criar o seu portfólio hoje mesmo!
Excelente vídeo, a maioria dos dev's iniciante procuram tutoriais na internet de como criar seu próprio portifólio usando HTML, CSS e JavaScript.
Para aqueles que criaram seu portifólio por esse vídeo, se desafiem a fazerem possíveis mudanças como: Dark Theme, efeito blur no navbar(header), personalizar o scroll e entre outras mudanças, use e abuse da sua criatividade 😉
cara vendo teu video percebi que se quero editar o codigo para fazer meu portfólio tenho muito oq estudar
olá, boa tarde!
Estou iniciando no front-end, faz um mês, porem, estou tendo certas dificuldades, pois geralmente pego alguns exercícios que acho interessante no Youtube, e tendo replicar, portanto, percebo que quando o projeto requer algumas transições em CSS ou mesmo precisa de algumas linhas de código Javascript ele não funciona mesmo os código estando igual ao original.
por acaso sabe o que pode esta acontecendo?
é o meu navegador que não esta conseguindo lê os códigos?,
é o meu vscode que não está configurado direito?
ou será que sou ruim mesmo, pois não sei como resolver isso ?
travei aqui 13:00 nenhuma alteração no css está funcionando pra mim, ele fica com os itens todos em lista à esquerda e com uma bolinha no canto de cada um.
edit: descobri, eu sem querer coloquei os arquivos extends.css, globals.css e variables.css dentro da pasta components, tem que por uma pasta antes que é a do css mesmo, valeu.
eu sou horrivel no front end, cê colocou um tamanho em % no seletor html, isso acabou com minha viad askdahjsd. passei o projeto pro vite mas quando vou fazer outra pagina esse seletor continua por que o react é feito em apenas uma pagina html. triste 🙁
Muito bom!
Muito Bom, me ajudou Imenso com um trabalho do curso, usei a base visual e estrutural , transformei tudo em React e consumi as informações de uma API, meti Dark Theme, hovers, contrui components, acabei mudando de uma landing page para 5 paginas com React Dom… Obrigado .
Mais um inscrito mano top demais da conta seu video e seu canal…
como faço para baixar os outros recursos
cara espetacular o site, demorei mas terminei, espero no futuro conseguir fazer tudo de cabeça como você, parabéns
Vim pelo cara q postou no Facebook falando q ele q fez
Eu fiz um logo no canvas e eu to apanhando p cassete pq ele esta com uma distancia enorme da lista que criamos. Consigo arrumar como? Com uma grid pq pelo jeito vou ter que fracionar a tela para ir encaixando. Me ajudaaaaaaaaa kkkk
alguém me explica a parte do repositório tô começando agora
Eu fiz um portfólio bem diferente, me inspirei num designer japonês, onde coloquei um efeito de pontinhos flutuando no fundo e com JS uns botões que ocultam e exibim sobre mim, projetos, contato. Acredito que os portfólio super coloridos, cheio de animações já estão ficando saturados, e chama mais atenção um design mais clean e direto.
Tem como informar onde encontro os mesmo .svg que usou pro insta/face/linkedin queria um pro git
Top demais sua aula.
Pode tirar uma dúvida?
Como deixou centralizado o projeto na max-width 760px?
Eliminando a barra de scroll horizontal?
Pode me explicar porque você coloca uma classe dentro da outro no CSS, por exemplo você colocou ".project ul li .imagem img"
Se tivesse colocado direto, somente ".image" não daria certo ?
Top vídeo. Mais um inscrito
Eu vi um video gringo parecido com esse projeto mais achei o código muito grande e o video nada explicativo , seu video esta muito melhor obrigado por disponibilizar pelo menos na versão para pc.
los mejores vídeos de portfolio del 2023