Criando um Portfólio com o Pingendo \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 45 Min 12 Seg Tempo restante da oferta: 14 45 12 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando um Portfólio com o Pingendo [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) # Criando um Portfólio com o Pingendo Neste artigo veremos como criar uma pequena página web para que você possa utilizá-la como Portfólio utilizando a ferramenta Pingendo. [ Ana Paula de Andrade ](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/25164926/imagem-capa-curriculo.png) Diferente de um currículo, o portfólio é o meio mais completo de expor sua experiência profissional. Desta forma, você poderá utilizá-lo para compartilhar suas experiências de maneira mais organizada na web. Neste artigo criaremos uma página web para que você possa utilizar como portfólio pessoal utilizando o **Pingendo**. [ ![XSLT Completo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/xslt.svg) Curso XSLT Completo Conhecer o curso ](https://www.treinaweb.com.br/curso/xslt-completo) ## Ferramenta utilizada Para criação desta página, utilizaremos o Pingendo pelo fato de ser uma ferramenta de fácil uso e extremamente simples. Com o Pingendo é possível criar páginas web responsivas no estilo “arrasta e solta”. Por este motivo, esta ferramenta é ideal para criação de páginas mesmo que você não possua tanto conhecimento sobre programação. O primeiro passo é entrar em seu site no link: [https://pingendo.com/](https://pingendo.com/ "https://pingendo.com/") e realizar o download da ferramenta. ![Home do site pingendo](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192214/imagem-1.png) Ao clicar no “Download”, selecione o seu sistema operacional e a ferramenta começará a ser baixada. ![Página de Download](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192233/imagem-2.png) Após baixar a ferramenta, basta instalá-la em seu computador “*NEXT-NEXT-FINISH*”, e pronto! Inicializaremos a criação do nosso portfólio. Neste artigo faremos algo bem básico. Uma pequena página para que você tenha apenas uma noção do que a ferramenta proporciona. ## Realizando a criação do nosso Portfólio Após instalar o Pingendo, abriremos a ferramenta para iniciar. Logo na página inicial já nos deparamos com alguns templates prontos, e podemos utilizar aquele que mais nos agrada, realizando apenas as alterações necessárias. Lembrando que não estaremos manipulando códigos (HTML/CSS) na criação deste portfólio, já que a ferramenta permite a criação de páginas no estilo “arrasta e solta”. :) Selecionaremos o template desejado, a pasta de destino e clicaremos em CREATE. ![Tela de selecionar template do pingendo](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192336/IMAGEM-4.png) Logo após, selecionamos o arquivo “index.html” para editá-lo. ![Gerenciador de Arquivos Pingendo](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192359/IMAGEM-3.png) Pronto! A partir daí, podemos começar a editar todo layout conforme nossa necessidade. A ferramenta é totalmente simples (como dito acima), e ao clicar nos botões ou sobre as caixas de texto, podemos editá-las, alterá-las, excluí-las ou inserir imagens. Fica a cargo da sua criatividade. Abaixo, mostraremos algumas formas de editar o template utilizado. *Lembrando que não estamos modificando a estrutura do template utilizado, apenas realizando algumas alterações para se encaixar na página que desejamos criar.* Para alterar o texto, basta clicar sobre componente desejado e inserir o novo texto. Na barra lateral direita, é possível aumentar a fonte, centralizar o texto, alterar a cor, entre outras opções. ![Tela do editor](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192424/imagem-5.png) É possível também excluir todo o componente ou toda seção a qual este componente pertence, como mostra na imagem abaixo: ![Alterando componente no editor](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192441/imagem-6.png) Outra opção é poder alterar as imagens, como mostra na imagem abaixo. Clicando na imagem padrão do template, basta procurar na lateral direita a URL da nova imagem e inseri-la. ![Alterando imagem](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13192500/imagem-7.png) Abaixo, veremos o Portfólio criado com a ferramenta. ![Portfólio Criado no Pingendo](https://dkrn4sk0rn31v.cloudfront.net/2019/05/13232513/portfolio1.png) ## Concluindo: Neste artigo vimos o quão fácil é criar uma página web com o Pingendo, mesmo que você não tenha tanto conhecimento em programação, também explicamos neste artigo como [hospedar o seu portifolio criado no pingendo](https://www.treinaweb.com.br/blog/hospedando-o-portfolio-criado-com-o-pingendo/ "hospedar o seu portifolio criado no pingendo"). Vale ressaltar que, apesar de ser uma ferramenta de fácil utilização, é importante aprender as tecnologias que envolvem a criação de páginas web ([HTML/CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML/CSS")/[JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript")) pois, desta forma, você poderá criar páginas personalizadas ou até mesmo manipular o código dos templates utilizados pelo Pingendo. [ ![Desenvolvedor Front-end Pleno](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor Front-end Pleno Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-pleno) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) Autor ![Ana Paula de Andrade](//secure.gravatar.com/avatar/76297b487187c82ae476e823018dbfc0?d=mm) ## Ana Paula de Andrade Graduanda em Sistemas de Informação pelo Instituto Federal da Bahia. É responsável pelo atendimento ao cliente, gerenciamento de redes sociais e revisão de cursos, além da redação de artigos para o blog da TreinaWeb. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/21103619/CAPA-GITHUB-20-05-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Hospedando o Portfólio criado com o Pingendo ](https://www.treinaweb.com.br/blog/hospedando-o-portfolio-criado-com-o-pingendo) Neste artigo veremos como hospedar o portfólio criado com o Pingendo no GitHub Pages. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/DICAS-PORTIFOLIO-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ 3 dicas para o seu portfólio ](https://www.treinaweb.com.br/blog/3-dicas-para-o-seu-portfolio) Será que você está dando a devida atenção ao seu portfólio? Veremos neste artigo 3 dicas para você deixá-lo pronto para utilizar quando precisar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/18182721/capa-artigo-entrevista-TI-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ O que os recrutadores esperam dos candidatos em uma entrevista de TI ](https://www.treinaweb.com.br/blog/o-que-os-recrutadores-esperam-dos-candidatos-em-uma-entrevista-de-ti) Você já pensou o que se passa na cabeça do recrutador em uma entrevista de emprego? O que será que ele espera de você? Neste artigo iremos abordar alguns pontos tanto técnicos quanto de habilidades que farão toda a diferença em um processo seletivo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/deploy-de-uma-aplicacao-spring-boot-no-heroku-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Deploy de uma aplicação Spring Boot no Heroku ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-no-heroku) Neste artigo veremos como podemos realizar o deploy de uma aplicação Spring Boot na nuvem com o Heroku. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/CRIANDO-PRIMEIRO-CRUD-COM-NESTJS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com NestJS ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-nestjs) Neste artigo veremos como criar um CRUD com NestJS, o passo a passo utilizando ferramentas como o TypeORM e o banco de dados SQLite. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 45min 12s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58