10 ideias de projetos em HTML e CSS para adicionar no portfólio!

oi oi gente sejam bem-vindos a mais um vídeo aqui no canal eu sou Rafaella ballerini e hoje vou falar para vocês dez projetinhos que você pode colocar no seu portfólio apenas utilizando HTML CSS e antes de começar esse vídeo eu queria dizer para você que se você quiser colocar no ar qualquer um dos Sites aí que eu vou mostrar ao longo do vídeo qualquer plataforma que vocês podem utilizar uma plataforma de hospedagem de sites e para Isso é óbvio que eu recomendo a rosquinha que é exatamente a plataforma que utiliza para hospedar meu site é

onde eu registrei meu domínio também e se você não tá entendendo nada do que eu estou falando eu fiz um vídeo aqui no canal sobre o que que são essas palavras né hospedagem domínio como que eu fiz isso na prática mostrando para vocês então vai lá assistir que tá muito tranquilo que se você tiver interesse de utilizar plataforma Não esquece de usar o meu cupom que eles disponibilizaram para vocês que é o Rafa eu vou deixar aqui na descrição o link e ocupam também é muito tranquilo vocês vão ver na prática em em algum problema

né alguma ajuda que você precisa que você não tá entendendo o que você tá fazendo um suporte deles é incrível eu já utilizei eu mandei mensagem ele para eles na hora eu receber a resposta então não deixe de conferir que é muito legal você tem ali um link para poder mandar para qualquer pessoa é muito mais fácil do que você tentar passar o programa para outro computador e abrir outro computador para mostrar para outra pessoa lógico gente que esses projetinhos eles podem ser muito melhores Se eles forem feitos com outras tecnologias então se você adicionar

em Java Script fizer movimentação fizer várias coisas legais você utiliza firme work de Jesus Cristo Se você usar Meat Sei lá eu que fazer um back and para o site sempre é melhor vai ficar muito legal mas o intuito de hoje é realmente mostrar projetos bem simples para quem está começando na área principalmente na área de front-end que sabe aí HTML CSS e quer poder colocar no seu portfólio Então vamos lá primeiro projeto aí que eu indico vocês fazerem acho que é o mais clássico de todos e além de impedir eu vou deixar aqui ó

do lado algumas imagens né passando para vocês darem uma olhada o que que seria um além de impedir mas a ideia dela é você fazer uma página para o seu produto para sua empresa né aquelas famosas páginas bem de abertura bem home page assim para você saber do que se trata aquele site Existem várias páginas muito legais que vocês podem se inspirar Eu adoro falar de bote né aqui no canal Você sabe que eu gosto de bots de discord' mas realmente por exemplo os Bots do discord' tem um ações em peixes muito interessantes Inclusive a

gente tava fazendo aí na comunidade eu peguei esse projeto aí para fazer de um além de impedir de um bote eu achei muito legal pelos com HTML CSS mesmo para brincar e você pode fazer de uma empresa de marketing da empresa de alguém que você conhece aproveitar e tentar vender ali para pessoa ver se ela gostar pode fazer aí do seu produto que você gostou escolha alguma coisa que você gosta e faz além de enfeite segundo o projetinho uma página de login ou e os dois isso Você pode adicionar o que você acha necessário né

o login novamente vai ser o e-mail e senha Faz um cadastro pode ser um cadastro um pouco mais detalhado pode ser o nome meio pode ter endereço com as ter CEP para você rodar Realmente todos os dados dos usuários que foram entrar nesse canal e Brincadeiras à parte Mas é interessante você realmente detalhar e colocar várias informações aí para o pessoal poder adicionar pode ser um cadastro de por exemplo animais você pode colocar um nome do PET colocar a raça não sei que não sei que lá sei lá o que que tem aí de pede

que dá para colocar pode fazer um cadastro de botes fazer um cadastro de sei lá é realmente acha que você pode ser muito criativo criativo aí para fazer algo diferente colocar no seu portfólio terceiro O projetil que você pode fazer um formulário é o formulário é um pouco diferente do cadastro porque porque no formulário normalmente você pode fazer uma pesquisa né você pode fazer perguntas para as pessoas um pouco mais né voltadas para certo ou errado e não pegue suas informações Inclusive eu tenho aqui um vídeo no canal que é ensinando a fazer formulários bem

simples com HTML e CSS Então todo vou deixar aqui em cima também se você quiser ver mas eu que eu indico você você usar como base se inspirar e tentar fazer o próprio principalmente que você vai colocar aí no seu portfólio Não que seja errado você colocar o seu portifólio algo que se desenvolveu ver no meu vídeo mais interessante você personalizada a sua forma para ficar mais a sua cara e nós formulário que eu fiz era um formulário de deve-se Então você colocava lá a será Júnior pleno com a linguagem que você desenvolveu nem lembro

direito mas era algo bem assim então você pode fazer um formulário de estudante você pode fazer um formulário de uma prova você pode fazer Sei lá uma prova mesmo né colocar lá prova de algoritmos e você faz umas questões aí loucas em vez de entrar num formulário fazer uma prova pode fazer uma pesquisa né se quisesse ela fazer uma pesquisa para o seu TCC E aí você coloca lá os campos todos em vez de usar aquele Google formas que todo mundo usa o interessante disso é você justamente treinar todos os tipos de input aí que

dá para você colocar e aquele submit né do botão e tá então tem bastante coisa legal de você vê aí com HTML e CSS que interessante você treinar quarta o projetinho um catálogo de produtos Sabe aqueles catálogos pode ser até do Netflix né não sei se é um produto tipo em vários tênis vários chocolates farmácia Sei lá eu pode ser se você quiser mas quando algumas interessante pode ser um catálogo de animes pode ser de mangá né algo que você goste aí o interessante disso é que você vai acabar treinando várias coisas por exemplo Carrossel

é gridflex box do CSS E aí você vai ver como que faz a disposição desses produtos e vai ficar bem legal vou deixar também aqui algumas imagens que vocês estão vendo quinto projetinho uma página de notícias ou um blog aqui é importante deixar claro que você utilizando HTML CSS e vai deixar o seu site estático ou seja você vai precisar escrever mesmo ali no elementos do HTML o que que você quer que apareça na notícia né vai criar o parágrafo com a tag p e vai escrever lá notícia mesmo né não vai ser algo vindo

de uma ati né que JavaScript tal eu não sei que você queira e você faz sinta-se livre mas a mesma forma é muito bom para vocês aí na e colocar no seu portfólio e fazer algo bem bonito e um blog inclusive pode não apenas ser o seu portifólio da Olá pessoal né Olha consegui desenvolver um site Mas você pode fazer aí artigos técnicos sobre as coisas que você está desenvolvendo entendeu Aí já é um portfólio dupla tipo assim eu desenvolvi uma página e eu ainda estou ensinando os um didático aqui eu consigo falar transmitir informação

para as outras pessoas porque eu conheço desse assunto então você ganha aí duas vezes você fizer um blog eu acho muito interessante sexto projetinho que eu acho muito legal eu acho que esse é um dos meus preferidos é você desenhar algo específico sim você consegue desenhar com HTML e CSS isso é muito muito muito legal é um pouquinho mais avançado talvez dependendo da coisa que você quer desenhar mas assim existem tantas opções assim entra no carro de PM Joga lá sei lá cartão de crédito tem tanta coisa legal lá de gente que fez nos efeitos

degradantes morfisa uns negócios assim eles fazem com o cartão de crédito no meio que mais um relógio dá para você desenhar com HTML CSS gente juro várias coisas é muito legal é muito vocês darem uma olhada aí como que funciona isso é uns que eu mais gosto acho muito criativo inclusive esse elemento que você quer dizer a você um produto né alguma coisa assista pode ser um botão mesmo né não a vejo você fazer lá só o botão no seu limite não sei que ali no cantinho você pode fazer um botão super legal com efeito

super legal lá no code fem e deixar isso aí no seu portfólio também você vai treinando coisas um pouco mais avançadas do CSS HTML que vai ser muito interessante sétima projetinho um dashboard que que é um dashboard né não e só aquelas telas que tem várias informações e aí você consegue ver por exemplo se você quer alguma coisa relacionada a Game ficar são né sites que você ganha pontos a cada coisa que você vai fazendo então você pode fazer um deste board de pontos coloca lá por exemplo se você faz uma plataforma de cursos né

mas a fazer a porta forma e se você quer fazer sol dashboard você pode fazer lá as aulas que as pessoas vão completando né fazer bonitinho como que ficaria isso de a tática então assim a pessoa compra é totalmente ficar verdinho essa ainda não começou a ficar de um jeito né como eu falei você quiser fazer essa parte de namica se usa aí as outras tecnologias que você quiser mas de forma estática já tá legal e vai ser muito lindo eu adoro dashboard pode ser de contação monetização por exemplo de insights né quem trabalha aí

com redes sociais sabe que tem muitos insights nessa entra no Instagram Só consegue ver quantas visualizações teve tal publicação Quantas curtidas e isso tudo pode ser um dashboard 8º projetinho o e-mail marketing Sabe aqueles marketing né aquelas propagandas que você recebe o seu e-mail de empresas que enviam e você fica lá naquela lista Você pode até cancelar se você tá na lição não é nem sei direito como funciona essa parte aí dos dados que às vezes bem 11 meses que você nunca ouviu falar da empresa mas tudo bem não vamos entrar nesse assunto aquilo lá

Pode sim ser feito com HTML e CSS é muito legal e muito interessante que você tem isso também não não projetinho você pode fazer um tio dele surgiu Olá tudo list de pode fazer um calendário alguma coisa relacionada a organização pessoal aquele negócio de campo e parecido com no chão Sabe tem inclusive um vídeo aqui que eu mostro como eu faço todo meus e tampe com um organismo a minha rotina no mouchão Lá tem muitas telinhas que daria para você criar uma para você mesmo então por exemplo é o que eu falei o tio dele

se você pode fazer uma lista com várias tarefas que você precisa no dia né um calendário colocando ali todas as tarefinhas que você quer fazer um não dá para fazer muita coisa legal e bem bonita também e décimo projetinho e o mais necessário é o seu próprio portfólio então você pode fazer eu só página com HTML CSS E aí você vai adicionar todos esses outros projetinhos que você vai fazer com HTML CSS nele então você coloca lá no seu portfólio é só a carinha você pode colocar a descrição do que que você faz o que

você é formado eu não sei que não sei que lá os projetinhos que nem eu falei o contato não esqueça e o seu contato é muito interessante existem vários aí as dentro de portfólios fez os insights que são incríveis incríveis incríveis Então vale muito você dá uma olhada Inclusive eu já vou falar aí onde que você pode encontrar esse tipo de coisa tão quase que são as dicas que eu vou te dar para você ter aí no durante seu desenvolvimento de HTML e CSS Primeiro de tudo participe da comunidade no discord' porque o pessoal lá

vai te ajudar né a gente sempre tem um canal só de portfólio Inclusive deux.io a e tem front-end então se você tiver qualquer dúvida e quiser pedir opinião essas coisas participar lá vou deixar o link na descrição e vamos lá primeira coisa que você pode utilizar para desenvolver utilize sites para você se inspirar em design 100 layouts e quais são esses sites codepen uplabs behind scenes dribble pinter chapéu printers eu vou deixar aqui embaixo também na descrição o repositório eu não vou colocar todos a escrever uma lista gigante mas eu vou deixar o repositório com

o escrito desse vídeo E aí a buscar no consultório ele tem lá todos os links para você poder pegar acho que é mais fácil fica uma coisa que legal de você utilizar só um site para você pegar imagens e ícones eu utilizo muito pizza bem para imagens e o fantástico não é um site é o Flyer Aikon para pegar ícones também é importante você só toma cuidado também relação a direitos autorais pelo amor de Deus porque tem aí conheci que você pode utilizar mas você precisa dar os créditos para pessoa que desenhou então toma cuidado

com isso e faz a maneira correta também outra coisa existem que sites para você até ajuda e tem ideias de cores e paletas para o seu site então alguns deles são color Range Adobe color Colors e o ingredientes né tem site aí que você consegue inclusive fazer aqueles gradientes que você vai de uma cor para outra sabe-se Campo degradê maravilhoso tem aí um negócio de paletas de cores então você vê Quais cores combinam com outras é muito legal e por 100 também não esqueça de utilizar os sites para se inspirar em fontes e também Portal

É certo que nem o Adobe fonts e o Google photos E não esqueça também se você quiser colocar no ar qualquer um desses projetos que você for desenvolver do vídeo você pode utilizar plataforma da Rua Xingu aqui eu tenho o meu desconto o Rafa pode ver aqui na descrição é bem tranquilo de usar Vou colocar até aqui na tela Como que você consegue colocar ocupam É só adicionar ali no canto e vocês vão conseguir ganhar muito desconto que é isso se você tiver e outra ideia de projetinho apenas com HTML e CSS para desenvolver deixa

aqui nos comentários que eu tenho certeza que pessoal vai adorar ver não esquece de se inscrever aqui no canal e deixar o like que eu espero que você tenha gostado aí desse vídeo Depois me conta também o quê que vocês querem ver aqui no canal um beijo e até semana que vem E aí E aí E aí